是否可以从文本标签图层在Mapbox中生成弹出窗口?
以下代码从多边形生成弹出窗口:
map.on('load', function () {
map.on('mousemove', 'state-shape', function (e) {
var features = map.queryRenderedFeatures(e.point, {
layers: ['state-shape'] // the name of the layer
});
if (!features.length) {
return;
}
var feature = features[0];
popup
.setLngLat(e.lngLat)
// .setHTML(e.features[0].properties.name)
.setHTML("<strong>State: </strong>" + feature.properties.STATE_NAME
)
.addTo(map);
});
// Change the cursor to a pointer when the mouse is over the states layer.
map.on('mouseenter', 'state-shape', function () {
map.getCanvas().style.cursor = 'pointer';
});
// Change it back to a pointer when it leaves.
map.on('mouseleave', 'state-shape', function () {
map.getCanvas().style.cursor = '';
popup.remove();
});
我尝试对标签层执行相同的操作,但是什么也没发生。
map.on('load', function () {
map.on('mousemove', 'state-labels', function (e) {
var features = map.queryRenderedFeatures(e.point, {
layers: ['state-labels'] // name of the layer
});
if (!features.length) {
return;
}
var feature = features[0];
popup
.setLngLat(e.lngLat)
// .setHTML(e.features[0].properties.name)
.setHTML("<strong>State: </strong>" + feature.properties.STATE_NAME
)
.addTo(map);
});
map.on('mouseenter', 'state-labels', function () {
map.getCanvas().style.cursor = 'pointer';
});
map.on('mouseleave', 'state-labels', function () {
map.getCanvas().style.cursor = '';
popup.remove();
});
});
如果有人知道是否可以通过其他方式实现,请告诉我。
答案 0 :(得分:1)
是的。您可以查询包括文本图层的mapboxgl矢量数据。
这里是查询state-label
图层并在弹出窗口中显示状态名称的方法。您在state-labels
之类的代码中有几次错字。
map.once("load", () => {
var popup = new mapboxgl.Popup();
map.on("mousemove", "state-label", function(e) {
var features = map.queryRenderedFeatures(e.point, {
layers: ["state-label"] // name of the layer
});
if (!features.length) {
return;
}
var feature = features[0];
popup.setLngLat(e.lngLat)
// .setHTML(e.features[0].properties.name)
.setHTML("<strong>State: </strong>" + feature.properties.name)
.addTo(map);
});
map.on("mouseenter", "state-label", function() {
map.getCanvas().style.cursor = "pointer";
});
map.on("mouseleave", "state-label", function() {
map.getCanvas().style.cursor = "";
popup.remove();
});
});
以下是一个演示相同内容的codepen:https://codepen.io/manishraj/pen/PowLPVq