张春成
V2
2022/10/25阅读:64主题:默认主题
Mapbox 与 GeoJson
Mapbox 与 GeoJson
与 Canvas 相比,Mapbox 的原生 Layer 显然是更加优雅的解决方案,但它需要 GeoJson 的支持。
本文的代码可见我的开源前端库
图层与地理数据绑定
GeoJson 是常用的地理数据规范,Mapbox 将它作为 Source,而 Source 可以与 Layer 进行绑定,从而实现地图绘制
map.on("load", () => {
// Init source
map.addSource("gridGeometrySource", {
type: "geojson",
data: {
type: "Feature",
properties: {},
geometry: mkGeometry()
}
});
// Init grid line
map.addLayer({
id: "gridLine",
type: "line",
source: "gridGeometrySource",
layout: {
"line-join": "round",
"line-cap": "round"
},
paint: {
"line-color": gridColor,
"line-width": 1
}
});
})
而 Source 可以是动态的,因此可以实现地图按需绘制。要达到这样做的目的,只需要在重绘函数中对 Source 进行修改,并且将它绑定在相应的操作上即可。
// Generate reDraw function and bind it with mapbox interactions
reDraw = {
// Update the gridGeometrySource source
function reDraw() {
map.getSource("gridGeometrySource").setData({
type: "Feature",
properties: {},
geometry: mkGeometry()
});
}
map.on("dragend", () => {
reDraw();
});
map.on("zoomend", () => {
reDraw();
});
map.on("pitchend", () => {
reDraw();
});
return reDraw;
}
而 GeoJson 这个东西,几乎可以实现所有地图上的绘制操作,因此,这种方式相当实用。
性能与畸变
这样做的效果看上去很好,至少它解决了之前遇到的“由于覆盖在高度地图上的 Canvas 也同样被拉伸了,……因此线条在宽度方向会产生一定的畸变”的问题。在线条异常密集时,它产生的畸变也不至于让线过宽而混在一起。并且渲染的性能也有肉眼可见的提升。

作者介绍
张春成
V2