mapbox-gl支持多种坐标系

文章目录


前言

mapbox默认的投影是3857,但是实际应用中我们经常会使用高德、百度、天地图的服务,原生mapbox是不支持的,需要我们修改源码以支持以上坐标系。


参考:

效果

修改源码后支持多种坐标系,当然也不会影响原本的3857坐标。

不同服务的测试地址

  • 高德:https://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8
  • 百度: http://online1.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&p=1
  • 天地图2000坐标系:https://t2.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk= your token
  • 天地图84坐标系里:https://t0.tianditu.gov.cn/vec_w/wmts?tk= yuor token&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles

在这里插入图片描述

总结

以上代码核心思路的参考都已经列出,由于整体封装在sdk中,代码较重不方便给出源码,有疑惑的小伙伴欢迎交流。

  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 27
    评论
Mapbox GL JS 中添加球面上的标记点与在平面地图上添加标记点的方法类似,但需要使用 `turf.js` 库来实现。具体步骤如下: 1. 安装 `turf.js` 库。 ```bash npm install turf ``` 2. 在你的代码中引入 `turf.js` 和 Mapbox GL JS 库。 ```javascript import mapboxgl from 'mapbox-gl'; import turf from '@turf/turf'; ``` 3. 创建一个 `FeatureCollection` 对象,并将标记点添加到这个对象中。 ```javascript const markers = [ [-122.414, 37.776], [-122.408, 37.77], [-122.404, 37.774] ]; const featureCollection = turf.featureCollection(markers.map(marker => { return turf.point(turf.toWgs84(marker)); })); ``` 在球面上添加标记点需要将点坐标转换为 WGS84 坐标系,可以使用 `turf.toWgs84()` 方法来实现。 4. 将 `FeatureCollection` 添加到 Mapbox GL JS 的地图上。 ```javascript map.on('load', function() { map.addSource('markers', { type: 'geojson', data: featureCollection }); map.addLayer({ id: 'markers-layer', type: 'symbol', source: 'markers', layout: { 'icon-image': 'marker-15', // 标记点图标 'icon-size': 1.5 } }); }); ``` 这里我们使用了 `symbol` 图层来显示标记点,你也可以使用其他类型的图层来显示标记点。注意,这种方法只适用于在球面上添加标记点,如果你需要在平面地图上添加标记点,则可以直接使用 Mapbox GL JS 的 API。 另外,你还可以通过 Mapbox GL JS 提供的 `Marker` 类来添加标记点,这种方法不需要使用 `turf.js` 库,示例代码如下: ```javascript const marker = new mapboxgl.Marker() .setLngLat([-122.414, 37.776]) .addTo(map); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 27
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值