openlayers 3扩展，调用百度地图、高德地图、天地图服务

最新推荐文章于 2025-06-04 23:38:34 发布

原创

最新推荐文章于 2025-06-04 23:38:34 发布 · 1.8w 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#openlayers3 #地图

本文介绍了如何在OpenLayers 3中扩展地图服务，涵盖了调用天地图、百度地图和高德地图的详细步骤。涉及到地图切片原理，并提供了坐标转换方法和相关代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

调用这三个商业地图服务，我们使用的都是切片（Tile）地图服务，关于切片地图的含义这里做简单的介绍：
切片地图就是指将显示的地图切成一块一块的(256 * 256)分别显示加载。openlayers 3中有这样图层加载类，ol.layer.Tile,对应的source类有ol.source.TileImage,ol.source.XYZ,这两者的关系通过源码可以看到
ol.inherits(ol.source.XYZ, ol.source.TileImage);,ol.source.TileImage是父类。

对于天地图，我们访问天地图地图主页服务，打开控制台->Network,我们可以看到请求的一些地址如下：

http://t2.tianditu.com/DataServer?T=vec_w&x=53&y=24&l=6'

其中重要的信息是x,y,z分别表示x坐标，y坐标和zoomLevel。

其实在openlayers 3源码中有Bing地图和OSM地图的扩展了，我们可以仿照它们进行一些扩展。

1.扩展天地图

源码使用模块化打包

var ol = require('openlayers');

ol.source.TianMap = function(options){
   
   
    var options = options ? options : {};
      var attributions;
      if(options.attributions !== undefined){
          attributions = option.attributions;
      }else{
          attributions = [ol.source.BaiduMap.ATTRIBUTION];
      }

    var url;
    if(options.mapType == "sat"){
        url = "http://t{0-4}.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}";
    }else if(options.mapType == "satLabel"){
        url = "http://t{0-4}.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}";
    }else if(options.mapType == "label"){
        url = "http://t{0-4}.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}";
    }else{
        url = "http://t{0-4}.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}";
    }

      ol.source.XYZ.call(this, {
        attributions: attributions,
      projection: ol.proj.get('EPSG:3857'),
        cacheSize: options.cacheSize,
        crossOrigin: 'anonymous',
        opaq