OpenLayer加载常见在线地图案例

最近在学习OpenLayer,测试了几种国内在线地图服务并作出分享与大家讨论

参考资料:

OpenLayers 3 之 加载天地图

高德,百度,Google地图定位偏移以及坐标系转换

OpenLayer基础教程 OpenLayer基础教程

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>OpenLayer加载常见在线地图案例</title>
    <link href="../css/ol.css">
    <script src="../js/ol,js.js"></script>
    <script src="../js/jquery-1.3.1.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=wNdy48s7V1izbLL0ziswArXq"></script>
</head>
<body>
<div id="map" style="width: 100%"></div>
</div>
</body>

<script>
    //openStreetMap地图
   var osmlayer=new ol.layer.Tile({
       source:new ol.source.XYZ({
           url: 'http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
       })
   })
    //高德地图
   var gaodeLayer = new ol.layer.Tile({
       source: new ol.source.XYZ({
           url:'http://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'
       })
   });
   //百度地图
    // 自定义分辨率和瓦片坐标系
    var resolutions = [];
    var maxZoom = 18;

    // 计算百度使用的分辨率
    for(var i=0; i<=maxZoom; i++){
        resolutions[i] = Math.pow(2, maxZoom-i);
    }
    var tilegrid  = new ol.tilegrid.TileGrid({
        origin: [0,0],    // 设置原点坐标
        resolutions: resolutions    // 设置分辨率
    });

    // 创建百度地图的数据源
    var baiduSource = new ol.source.TileImage({
        projection: 'EPSG:3857',
        tileGrid: tilegrid,
        tileUrlFunction: function(tileCoord, pixelRatio, proj){
            var z = tileCoord[0];
            var x = tileCoord[1];
            var y = tileCoord[2];

            // 百度瓦片服务url将负数使用M前缀来标识
            if(x<0){
                x = 'M' + (-x);
            }
            if(y<0){
                y = 'M' + (-y);
            }
            return "http://online0.map.bdimg.com/onlinelabel/?qt=tile&x="+x+"&y="+y+"&z="+z+"&styles=pl&udt=20151021&scaler=1&p=1";
        }
    });

    // 百度地图层
    var baiduMapLayer2 = new ol.layer.Tile({
        source: baiduSource
    });

    // google地图层
    var googleMapLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            url:'http://ditu.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i345013117!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0'
        })
    });

    //天地图路网
    var tian_di_tu_road_layer = new ol.layer.Tile({
        title: "天地图路网",
        source: new ol.source.XYZ({
            url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}"
        })
    });
    //天地图注记
    var tian_di_tu_annotation = new ol.layer.Tile({
        title: "天地图文字标注",
        source: new ol.source.XYZ({
            url: 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}'
        })
    });

    //天地图卫星地图
    var tian_di_tu_satellite_layer = new ol.layer.Tile({
        title: "天地图卫星影像",
        source: new ol.source.XYZ({
            url: 'http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}'
        })
    });
   //所有坐标为西安北站为中心点,下面坐标位置都是在相对应的的地图下获取的
    /*
    谷歌地图和天地图、高德地图   EPSG:4326
    谷歌108.9389705658,34.3752497164
    天地图:108.93442,34.37613
    高德地图108.939819,34.37271


     百度地图      EPSG:3857  百度地图偏移比较大
     百度地图     108.945731,34.382717
    */

    var map = new ol.Map({
        target: 'map',
        layers: [baiduMapLayer2],
        view: new ol.View({
            zoom:18,
            center : ol.proj.transform([ 108.945731,34.382717], 'EPSG:4326', 'EPSG:3857')
        })
    });

//加载其他的wgs84的
/*  var map=new ol.Map({
        layers:[gaodeLayer],
        target:'map',
        view:new ol.View({
            projection:'EPSG:4326',
            zoom:18,
            center:[108.939819,34.37271]
        })
    })*/

</script>
</html>

转载自:https://blog.csdn.net/wo_buzhidao/article/details/79169608

You may also like...