maptalks 切换中心点 切换地图URL

有个需求,动态切换地图切片风格,切换中心点设置。

秉着好记性不如烂笔头的心态,在此记录一下。

直接上代码:

    setGISCenter(params = {}) {
        // 这里是设置图层的url,
      if(params && params.centerInfo && params.centerInfo.url) {
        this.customTileLayer.config({urlTemplate: params.centerInfo.url});
      }
      // 这里是设置地图中心点与底图层级
      if(params && params.centerInfo && params.centerInfo.lat && params.centerInfo.lng) {
        let view = {
          center: [Number(params.centerInfo.lng), Number(params.centerInfo.lat)]
        }
        if (params.centerInfo.zoom) {
          let mapZoom = parseInt(params.centerInfo.zoom);
          if (mapZoom > 18) {
            mapZoom = 18;
          }
          if (mapZoom < 1) {
            mapZoom = 1;
          }
          view.zoom = mapZoom;
        }
        this.map.setView(view);
      }
    },

this.customTileLayer = new this.maptalks.TileLayer(

`defaultLayer`,

tileOption

);

this.map = new this.maptalks.Map("id_map_mtk", mapOptions);

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
maptalks是一个基于WebGL的开源地图库,支持加载多种地图数据源,包括百度地图和谷歌地图。在使用maptalks加载百度地图和谷歌地图时,需要进行坐标转换,以下是一个简单的示例代码: ``` // 创建百度地图图层 var baiduLayer = new maptalks.TileLayer('baidu', { 'urlTemplate': 'http://online{s}.map.bdimg.com/onlinelabel/', 'subdomains': [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], 'attribution': '© Baidu Map' }); // 创建谷歌地图图层 var googleLayer = new maptalks.TileLayer('google', { 'urlTemplate': 'http://mt{s}.google.cn/vt/lyrs=m&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}', 'subdomains': ['0', '1', '2', '3'], 'attribution': '© Google Map' }); // 百度地图坐标转换为谷歌地图坐标 function baiduToGoogle(lng, lat) { var x_pi = 3.14159265358979324 * 3000.0 / 180.0; var x = lng - 0.0065; var y = lat - 0.006; var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi); var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi); var googleLng = z * Math.cos(theta); var googleLat = z * Math.sin(theta); return [googleLng, googleLat]; } // 加载百度地图 var map = new maptalks.Map('map', { 'center' : [116.404, 39.915], 'zoom' : 14, 'baseLayer' : baiduLayer }); // 监听地图移动事件,实时更新坐标转换 map.on('moveend', function() { var center = map.getCenter(); var googleCenter = baiduToGoogle(center.x, center.y); googleLayer.config('urlTemplate', 'http://mt{s}.google.cn/vt/lyrs=m&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}'); map.setBaseLayer(googleLayer); map.setCenter(googleCenter); }); ``` 上述代码中,我们首先创建了百度地图图层和谷歌地图图层,然后编写了一个baiduToGoogle函数,用于将百度地图坐标转换为谷歌地图坐标。接着,我们创建了一个maptalks地图,并将百度地图图层作为底图。在地图移动结束后,我们获取地图中心点的坐标,并进行坐标转换,然后使用谷歌地图图层替换百度地图图层。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值