仓库平面图上的Mapbox GL JS交互作为基础地图是否合理

Question

我正试图弄清楚Mapbox GL JS是否适用或适合我的用例：

1. 我的基础地图示例必须由仓库的几个组件组成，而不是地理空间地图
2. 我想显示一个聚类层，例如，表示仓库中特定货架/部分存储的产品数量
3. 仓库中的每个盒子/产品都将被表示为一个精确点，在缩小时，产品/盒子的集合将被表示成一个集群

话虽如此，我知道2(和3(在地理空间地图的情况下会得到支持，但我担心的是定制的非地理空间地图(如果适用(。

Answer 1

地理空间与否，一切都归结为坐标。Mapbox GL JS需要地理坐标，所以你只需要划出一部分坐标范围(x轴上的-180到180，y轴上的-90到90(来满足你的需求，并确保你有很好的坐标来放置货架或任何你需要可视化集群的地方。

这是一个代码笔，它显示了一个只有背景和矩形的简单地图框样式。没有街道，没有河流，没有标签。。。

const map = (window.map = new mapboxgl.Map({
container: "map", // container ID
// Choose from Mapbox's core styles, or make your own style with Mapbox Studio
style: {
version: 0,
name: "Foo",
sources: {
"building-outline": {
type: "geojson",
data: {
type: "Feature",
properties: {},
geometry: {
type: "Polygon",
coordinates: [
[
[0, 0],
[60, 0],
[60, 30],
[0, 30],
[0, 0]
]
]
}
}
}
},
layers: [
{
id: "background",
type: "background",
paint: {
"background-color": "steelblue"
}
},
{
id: "building-fill",
type: "fill",
source: "building-outline",
paint: {
"fill-color": "#ccc"
}
},
{
id: "building-line",
type: "line",
source: "building-outline"
}
]
}, // style URL
center: [30,20], // starting position [lng, lat]
zoom: 2 // starting zoom
}));

https://codepen.io/chriswhong/pen/XWqpPXN

您也可以在Mapbox Studio中构建自己的样式。