node.js - 如何从 Mapbox 中的多面体中识别一个面体?
问题描述
我在 mapbox 中绘制了一个多多边形,这意味着即使这些多边形是明显分开的,但它们链接到同一个源。如果我为此添加一个单击处理程序,然后单击多面体中的任何一个多边形,它会同样影响多面体中的所有其他多边形。
现在我的问题是,我想确定从多多边形中单击了哪个特定多边形。
假设我在有人单击源/图层时调用了一个函数,我想发送一个唯一标识符,该标识符表示从多面体中单击了哪个多边形。
我怎样才能做到这一点?
以下是可能相关的代码片段:
for (let k = 0; k < sectionResult.data.response.length; k++) {
let features = sectionResult.data.response[k].coordinates.map((item) => {
return {
type: 'Feature',
geometry: {
type: 'Polygon',
coordinates: item
}
};
});
map.addSource(sectionResult.data.response[k].name, {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: features
}
});
map.addLayer({
id: sectionResult.data.response[k].name,
type: 'fill',
source: sectionResult.data.response[k].name,
paint: {
'fill-color': '#00e',
'fill-opacity': 0.3
}
});
map.addLayer({
id: `${sectionResult.data.response[k].name}-labels`,
type: 'symbol',
source: sectionResult.data.response[k].name,
layout: {
'text-field': sectionResult.data.response[k].name,
'text-size': 20
},
paint: {
'text-color': '#fff308'
}
});
map.addLayer({
id: `${sectionResult.data.response[k].name}-borders`,
type: 'line',
source: sectionResult.data.response[k].name,
layout: {},
paint: {
'line-color': '#fff308',
'line-width': 3
}
});
map.on('mousemove', sectionResult.data.response[k].name, function (e) {
map.getCanvas().style.cursor = 'pointer';
let mapLayer = map.getLayer(
`${sectionResult.data.response[k].name}-borders-onHover`
);
if (typeof mapLayer === 'undefined') {
map.addLayer({
id: `${sectionResult.data.response[k].name}-borders-onHover`,
type: 'line',
source: sectionResult.data.response[k].name,
layout: {},
paint: {
'line-color': '#fff308',
'line-width': 3
}
});
}
});
map.on('mouseleave', sectionResult.data.response[k].name, function (e) {
map.getCanvas().style.cursor = '';
let mapLayer = map.getLayer(
`${sectionResult.data.response[k].name}-borders-onHover`
);
if (typeof mapLayer !== 'undefined') {
map.removeLayer(`${sectionResult.data.response[k].name}-borders-onHover`);
}
});
map.on('click', sectionResult.data.response[k].name, function (e) {
functionCall(); //I want to pass the unique identifier of the polygon that was clicked.
});
}
解决方案
我认为您正在寻找的是queryRenderedFeatures这将返回具体过滤器中的功能,包括鼠标位置。
map.on('mousemove', function (e) {
var features = map.queryRenderedFeatures(e.point);
// Limit the number of properties we're displaying for
// legibility and performance
var displayProperties = [
'type',
'properties',
'id',
'layer',
'source',
'sourceLayer',
'state'
];
var displayFeatures = features.map(function (feat) {
var displayFeat = {};
displayProperties.forEach(function (prop) {
displayFeat[prop] = feat[prop];
});
return displayFeat;
});
document.getElementById('features').innerHTML = JSON.stringify(
displayFeatures,
null,
2
);
});
你有一个完整的例子here