mapboxgl获取矢量瓦片(vector tile)上的元素方法

counties是mapboxgl官网提供示例图层(矢量瓦片示例)

第一种:

       通过监听对应图层的鼠标事件,获取e.features,可以获取该图层上说要的feature

// counties为图层id
map.on('mousemove','counties', function(e) {
     console.log(e.features) // 可以获取图层counties上面的所有feature
});

// 获取的数据
// [
//   {
//     "geometry": {
//       "type": "Polygon",
//       "coordinates": [
//         [
//           [
//             -100.08544921875,
//             37.00255267215955
//           ],
//           [
//             -99.5361328125,
//             37.00255267215955
//           ],
//           [
//             -99.55810546875,
//             37.46613860234406
//           ],
//           [
//             -100.107421875,
//             37.47485808497102
//           ],
//           [
//             -100.08544921875
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Mapbox GL JS 是一款用于在 Web 上呈现交互式地图的开源 JavaScript 库。Mapbox GL JS 能够加载多种矢量瓦片数据,包括 gcj02 矢量瓦片数据。 要加载 gcj02 矢量瓦片数据,需要使用 Mapbox GL JS 的 `mapbox-gl-native` 库,并在代码中指定数据的坐标系。以下是加载 gcj02 矢量瓦片数据的示例代码: ```javascript mapboxgl.accessToken = 'your-access-token'; var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/streets-v11', center: [116.4074, 39.9042], zoom: 10 }); // 加载 gcj02 矢量瓦片数据 map.on('load', function() { map.addSource('gcj02-tiles', { 'type': 'vector', 'tiles': ['http://your-tile-server.com/{z}/{x}/{y}.pbf'], 'minzoom': 0, 'maxzoom': 22, 'bounds': [72.004, 0.8293, 137.8347, 55.8271], 'scheme': 'xyz', 'tileSize': 256, 'promoteId': { 'gcj02': 'id' } }); map.addLayer({ 'id': 'gcj02-layer', 'type': 'fill', 'source': 'gcj02-tiles', 'source-layer': 'your-source-layer', 'paint': { 'fill-color': '#f00', 'fill-opacity': 0.5 } }); }); ``` 在上述代码中,`tiles` 指定了 gcj02 矢量瓦片数据的 URL,`bounds` 指定了数据的范围,`promoteId` 指定了数据中的 `gcj02` 字段作为要素的唯一标识符。最后,使用 `map.addLayer` 方法将数据添加到地图中,并设置样式。 需要注意的是,由于 gcj02 是中国特有的坐标系,因此在加载 gcj02 矢量瓦片数据时,需要使用特定的坐标转换算法将其转换为 WGS84 或 Web Mercator 等国际通用的坐标系。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值