zoukankan      html  css  js  c++  java
  • 使用OpenLayers显示百度地图

    代码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

  • 相关阅读:
    BZOJ3064: Tyvj 1518 CPU监控
    BZOJ3160: 万径人踪灭
    BZOJ3527: [Zjoi2014]力
    BZOJ2194: 快速傅立叶之二
    FFT模板
    Splay树再学习
    POJ2406 Power Strings KMP算法
    POJ2752 Seek the Name,Seek the Fame KMP算法
    POJ3461 Oulipo KMP算法
    POJ2004 Mix and build Trie树? dp?
  • 原文地址:https://www.cnblogs.com/2008nmj/p/14062540.html
Copyright © 2011-2022 走看看