Mapbox GL JS：图层中要素的堆叠顺序——由什么决定？你能改变它吗？
Mapbox GL JS: Stacking order of features in layer – what determines it? Can you change it?
我有一个包含约 120 个特征的矢量切片图层，大小从超过 100 万英亩到不到 20 英亩不等。我在鼠标悬停时遇到问题，大特征遮挡了位于它们后面的小特征.
我认为这与源数据有关，源数据是按位置名称的字母顺序排序的。碰巧的是，大的“卡森国家森林”位于小得多的“维达尔谷”之上。所以我不能 select 后者与鼠标交互。
解决方案是按面积按升序对要素进行排序并重新导入数据集，还是我可以在 Mapbox GL JS API 中做一些事情来交换它们的位置？
谢谢！
您的问题有两种解决方案。
我假设您的多边形具有 area 属性。
找到鼠标悬停的最小多边形
首先，大多边形实际上不会阻止小多边形触发“鼠标悬停”事件。鼠标下方的所有功能都会触发该事件。所以你可以故意 select 最小的。
map.on('mouseover', e => {
e.features.sort((a, b) => a.properties.area - b.properties.area);
const smallestFeature = e.features[0];
});
如果您没有面积属性，此方法也适用 - 您可以使用 Turf 动态计算它，尽管它在瓷砖边界处不正确。
使用fill-sort-key对多边形进行排序
另一种方法是在图层定义中使用fill-sort-key属性：
layout: {
'fill-sort-key': ['-', ['get', 'area']]
}
我有一个包含约 120 个特征的矢量切片图层，大小从超过 100 万英亩到不到 20 英亩不等。我在鼠标悬停时遇到问题，大特征遮挡了位于它们后面的小特征.
我认为这与源数据有关，源数据是按位置名称的字母顺序排序的。碰巧的是，大的“卡森国家森林”位于小得多的“维达尔谷”之上。所以我不能 select 后者与鼠标交互。
解决方案是按面积按升序对要素进行排序并重新导入数据集，还是我可以在 Mapbox GL JS API 中做一些事情来交换它们的位置？
谢谢！
您的问题有两种解决方案。
我假设您的多边形具有 area 属性。
找到鼠标悬停的最小多边形
首先，大多边形实际上不会阻止小多边形触发“鼠标悬停”事件。鼠标下方的所有功能都会触发该事件。所以你可以故意 select 最小的。
map.on('mouseover', e => {
e.features.sort((a, b) => a.properties.area - b.properties.area);
const smallestFeature = e.features[0];
});
如果您没有面积属性，此方法也适用 - 您可以使用 Turf 动态计算它，尽管它在瓷砖边界处不正确。
使用fill-sort-key对多边形进行排序
另一种方法是在图层定义中使用fill-sort-key属性：
layout: {
'fill-sort-key': ['-', ['get', 'area']]
}