在传单功能中添加一些圆形标记

Question

我在Leaflet地图中有一个功能，由许多圆圈标记（L.circleMarker）组成。标记符号表示是否在该位置拍摄了照片。

我想要做的是将所有在该位置有照片的标记带到图层的顶部，类似于使用鼠标悬停标记的方式（但没有鼠标悬停在此案件）。

以下是原始版本的说明：

这就是我希望他们：

我考虑过为照片而不是照片设置不同的图层，但由于地图中的某些功能，它们最好是单层。

有关如何使用JavaScript和Leaflet完成此操作的任何想法吗？

Answer 1

在圆形标记的样式定义中，可以指定标记所呈现的“地图窗格”（http://leafletjs.com/reference-1.0.3.html#map-pane).这似乎是指定circleMarkers的zIndex的唯一方法（常规标记具有zindexOffset选项。

我的代码如下所示：

var style = {
radius: 1.75,
fillColor: "darkred",
color: "darkred",
pane: 'overlayPane'
};
var picStyle = {
    radius: 0.25,
    fillColor: "blue",
    color: "blue",
    pane: 'shadowPane'
};
var site2 = new L.geoJSON(valuesSite2, {
    onEachFeature: onEachFeature,
    pointToLayer: function (feature, latlng) {
        feature.properties.layer = "Site 2";
        onEachFeature: onEachFeature;
        if (<there is a picture>) {
            return L.circleMarker(latlng, picStyle)
        } else {
            return L.circleMarker(latlng, style);
        }
    }
}).addTo(map);

结果如下：