我的github
posts - 3243,  comments - 42,  views - 158万

代码1:

复制代码
    var projection = ol.proj.get("EPSG:3857");
    var resolutions = [];
    for(var i=0; i<19; i++){
        resolutions[i] = Math.pow(2, 18-i);
    }
    var tilegrid  = new ol.tilegrid.TileGrid({
        origin: [0,0],
        resolutions: resolutions
    });

    var baidu_source = new ol.source.TileImage({
        projection: projection,
        tileGrid: tilegrid,
        tileUrlFunction: function(tileCoord, pixelRatio, proj){
            if(!tileCoord){
                return "";
            }
            var z = tileCoord[0];
            var x = tileCoord[1];
            var y = tileCoord[2];
            console.log(x+" "+y+" "+z);
            if(x<0){
                x = "M"+(-x);
            }
            if(y<0){
                y = "M"+(-y);
            }

            return "http://online3.map.bdimg.com/onlinelabel/?qt=tile&x="+x+"&y="+y+"&z="+z+"&styles=pl&udt=20151021&scaler=1&p=1";
        }
    });

    var baidu_layer = new ol.layer.Tile({
        source: baidu_source
    });

    var map = new ol.Map({
        target: 'map',
        layers: [baidu_layer],
        view: new ol.View({
            center:  [12959773,4853101],
            zoom: 12
        })
    });
复制代码

参考:https://blog.csdn.net/qingyafan/article/details/49403989

问题是怎么传入经纬度坐标呢?

代码二:

复制代码
var projection = ol.proj.get("EPSG:3857");       //加载百度地图采用3857坐标系
var resolutions = [];
for(var i=0; i<19; i++){
    resolutions[i] = Math.pow(2, 18-i);
}
var tilegrid  = new ol.tilegrid.TileGrid({
    origin: [2200,23],
    resolutions: resolutions
});
var baidu_source = new ol.source.TileImage({
    projection: "EPSG:3857",
    tileGrid: tilegrid,
    tileUrlFunction: function(tileCoord, pixelRatio, proj){
        if(!tileCoord){
            return "";
        }
        var z = tileCoord[0];
        var x = tileCoord[1];
        var y = tileCoord[2];
        console.log(x+" "+y+" "+z);
        if(x<0){
            x = "M"+(-x);
        }
        if(y<0){
            y = "M"+(-y);
        }
        return "http://online3.map.bdimg.com/onlinelabel/?qt=tile&x="+x+"&y="+y+"&z="+z+"&styles=pl&udt=20151021&scaler=1&p=1";
    }
});
var baidu = new ol.layer.Tile({
    title : "百度地图卫星服务",
    source : baidu_source
});
var map = new ol.Map({
    layers: [
       baidu
    ],
    // 设置显示地图的视图
    view: new ol.View({
        center: [120.65527228569908, 31.296768058299392],
        projection: 'EPSG:4326',                       //指定投影采用4326坐标系
        zoom: 13               // 并且定义地图显示层级为13
    }),
    target: 'map'
});
复制代码

 

参考:https://blog.csdn.net/u013594477/article/details/83988055

https://github.com/openlayers/openlayers/issues/3522

posted on   XiaoNiuFeiTian  阅读(1997)  评论(0编辑  收藏  举报
编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)
历史上的今天:
2018-11-30 对“机器学习”的思考
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

点击右上角即可分享
微信分享提示