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

本文介绍了如何在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
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值