从 CircleMarker 扩展的标记 - 如何对弹出窗口进行分组、突出显示和绑定？

Question

我制作了一个简单的脚本来显示 Geojson 多边形上的自定义圆形标记。 但我无法解决弹出窗口和外观变化的问题。

首先，我将带有 CustomPoint 样式的标记合并到 L.leayerGroup 中。 但是后来我无法在单击时突出显示并显示弹出窗口。

所以我把它们变成了L.featureGroup。 但是现在所有标记的弹出窗口总是相同的，并且当通过游标时，不是一个，而是该组中的所有标记都被突出显示。

你知道如何解决这个问题吗？ 我应该将我的标记分配给特定的 Leaflet 对象/组还是转换它们？

这是完整的代码：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">


<style>


html, body {
height: 100%;
margin: 0;
}
#map {
width: 100%;
height: 100%;
}
</style>


<link rel="stylesheet"             
 href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js"></script>

 <!--Load plugin -->    

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-    
ajax/2.1.0/leaflet.ajax.min.js"></script>   

</head>

<body>
<div id="map"></div>
<script>


L.Canvas.include({
_updateCustomPoint: function (layer) {
    if (!this._drawing || layer._empty()) { return; }

    var p = layer._point,
        ctx = this._ctx,
        r = Math.max(Math.round(layer._radius), 1);

    this._drawnLayers[layer._leaflet_id] = layer;

   ctx.beginPath()
    ctx.moveTo(p.x, p.y)
    ctx.lineTo(p.x - 0.58 * r, p.y - r)
    ctx.arc(p.x, p.y - 2 * r, r, -Math.PI * 1.161, Math.PI * 0.161)
    ctx.closePath()
    this._fillStroke(ctx, layer)
},




});

var CustomPoint = L.CircleMarker.extend({
_updatePath: function () {
    this._renderer._updateCustomPoint(this);
},

 _containsPoint: function(p) {
    let r = this._radius

    let insideCircle =
        p.add([0, r * 2]).distanceTo(this._point) <= r +     
this._clickTolerance()

    let a = this._point,
        b = a.subtract([0.58 * r, r]),
        c = a.subtract([-0.58 * r, r])

    let insideTriangle = true

    let ap_x = p.x - a.x
    let ap_y = p.y - a.y

    let p_ab = (b.x - a.x) * ap_y - (b.y - a.y) * ap_x > 0
    let p_ac = (c.x - a.x) * ap_y - (c.y - a.y) * ap_x > 0
    let p_bc = (c.x - b.x) * (p.y - b.y) - (c.y - b.y) * (p.x - b.x) > 0

    if (p_ac === p_ab) {
        insideTriangle = false
    }
    if (p_bc !== p_ab) {
        insideTriangle = false
    }
    return insideTriangle || insideCircle
},

});

var myRenderer;



var minZoom = 0,
    maxZoom = 15;

var map = L.map('map', {
    minZoom: minZoom,
    maxZoom: maxZoom
}).setView([49.79, 19], 15);

L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
    continuousWorld: false,
    minZoom: 0,
    }).addTo(map);

myRenderer = L.canvas({ padding: 0.5 });

function style(feature) {
return {
    radius: 13,
    fillColor: 'green',
    color: 'white',
    weight: 1,
    opacity: 1,
    fillOpacity: 1,
    renderer: myRenderer
};
}

function highlightStyle(feature) {
return {
    radius: 13,
    fillColor: 'red',
    color: "#FFCE00",
    weight: 1,
    opacity: 1,
    fillOpacity: 0.9
};
}

function resetHighlight(e) {
var layer = e.target;
dotStyleDefault = style(layer.feature);
layer.setStyle(dotStyleDefault);
}


function highlight(e) {
var layer = e.target;
dotStyleHighlight = highlightStyle(layer.feature);
layer.setStyle(dotStyleHighlight);

if (!L.Browser.ie && !L.Browser.opera) {
    layer.bringToFront();
}
}         


var Features = "https://api.npoint.io/b3db1a36dc59740cb056";

var featureGroup = new L.GeoJSON.AJAX(Features, {



            onEachFeature: onEachFeature,     

}).addTo(map);



 var markerGroup = L.featureGroup().addTo(map);  
          


function onEachFeature(feature, layer) {


center=layer.getBounds().getCenter()

  if (1 == feature.properties.N) {
     
return new CustomPoint(center, style(feature)).addTo(markerGroup);           
}           
                


markerGroup.on({
    mouseover: highlight,
    mouseout: resetHighlight
});

var popup = '<table style="width:110px"><tbody><tr><td><div><b>Marker: 
</b>    
</div></td><td><div>' + feature.properties.cena +
    '</div></td></tr><tr class><td><div><b>Group:</b></div></td><td> 
 <div>' + feature.properties.area +
    '</div></td></tr><tr><td><div><b>X:</b></div></td><td><div>' +
    '</div></td></tr><tr><td><div><b>Y:</b></div></td><td><div>'  +
    '</div></td></tr></tbody></table>'

markerGroup.bindPopup(popup);


};