使用 Mapbox GL 从现有图层获取 GeoJSON 边界数组的方法如下:
<script src='https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css' rel='stylesheet' />
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [lng, lat],
zoom: zoomLevel
});
在上面的代码中,你需要将 YOUR_MAPBOX_ACCESS_TOKEN
替换为你自己的 Mapbox 访问令牌。你还可以根据需要调整地图的样式、中心点和缩放级别。
map.on('load', function() {
map.addLayer({
id: 'your-layer-id',
type: 'fill',
source: {
type: 'geojson',
data: 'your-geojson-url'
},
paint: {
'fill-color': '#088',
'fill-opacity': 0.8
}
});
});
在上面的代码中,你需要将 'your-layer-id'
替换为你自己的图层 ID。你还需要将 'your-geojson-url'
替换为包含你的 GeoJSON 数据的 URL。你可以根据需要调整图层的类型、样式和属性。
var features = map.queryRenderedFeatures({ layers: ['your-layer-id'] });
var boundaries = features.map(function(feature) {
return feature.geometry.coordinates;
});
console.log(boundaries);
在上面的代码中,'your-layer-id'
应该是你之前添加的图层的 ID。map.queryRenderedFeatures
方法用于查询渲染在地图上的图层中的要素。然后,我们使用 map.features.map
方法将每个要素的边界坐标提取出来,并存储在 boundaries
数组中。最后,你可以使用 console.log
打印边界数组。
这样,你就可以使用 Mapbox GL 从现有图层获取 GeoJSON 边界数组了。
请注意,以上代码示例中的 Mapbox GL 版本为 2.6.1。你可以根据需要调整版本号。另外,你需要替换示例代码中的一些参数,如地图样式、访问令牌、图层 ID 和 GeoJSON URL,以适应你自己的项目。
领取专属 10元无门槛券
手把手带您无忧上云