打开街道地图，以及 OpenLayer 的回调

Question

我有一张olms的地图，我试图在上面覆盖一个 4x4 网格。我希望悬停的正方形改变颜色。这段代码有些有效，但它并不一致，有时容易出错。如何使其更加一致？

这是我的鼠标移动回调：

var displayFeatureInfo = function(pixel) {
var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
return feature;
});
if (feature) {
document.body.style.cursor = 'pointer';
} else {
document.body.style.cursor = 'default';
}
if (feature !== highlight) {
if (highlight) {
featureOverlay.getSource().removeFeature(highlight);
}
if (feature) {
featureOverlay.getSource().addFeature(feature);
}
highlight = feature;
}
}

这就是我设置它的地方：

olms('map', 'https://maps.tilehosting.com/styles/darkmatter/style.json?key=' + apiKey).then(function(mp) {
map = mp;
map.setView(view);
map.addLayer(polyLayer);
featureOverlay = new VectorLayer({
source: new VectorSource(),
map: map,
style: function(feature) {
return highlightStyle;
}
});
map.on('pointermove', function(evt) {
if (evt.dragging) {
return;
}
var pixel = map.getEventPixel(evt.originalEvent);
displayFeatureInfo(pixel);
});
});

Answer 1

由于您有多个矢量图层，因此需要使用过滤器forEachFeatureAtPixel

var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
return feature;
},{
layerFilter: function(candidate) {
return candidate === polyLayer
}
});