传单放大到多边形

Question

semi-new to leaflet & mapbox. I have a polygon on my map that, on rollover, gains a stroke by way of another polygon being added to the map. This is kind of glitchy(the stroked polygon shows up if you move your mouse on to the polygon and don't move it, but if you move the mouse at all within the polygon, the stroked polygon flashes on and off. so I'd be happy to hear another way to accomplish this without that happening! My main issue is I want the map to zoom in to the boundaries-ish of the polygon (or center on the polygon & I set the view) when the user clicks the polygon.

The event listener for clicking the polygon is at the bottom. I've tried a bunch of different syntax including:

// the original polygon is the one listening now (maybe they should both have event listeners?)
dtPolygon.addEventListener("click", function(){
    dealMap.fitBounds(polygonPoints);
;});

dtPolygon.addEventListener("click", function(){
    dealMap.fitBounds(dtPolygon.getbounds());
;});

dtPolygon.addEventListener("click", function(){
    dealMap.fitBounds(polygon2.getbounds());
;});

// and just other ideas for what could work, switching out the dtPolygon & polygon 2, which is the "hover" polygon that shows up.


//actual polygon code & implementation
var p1 = new L.LatLng(35.600449, -82.562839),
        p2 = new L.LatLng(35.603380, -82.557517),
        p3 = new L.LatLng(35.602996, -82.546703),
        p4 = new L.LatLng(35.598290, -82.544061),
        p5 = new L.LatLng(35.591574, -82.541886),
        p6 = new L.LatLng(35.588481, -82.543066),
        p7 = new L.LatLng(35.588481, -82.543066),
        p8 = new L.LatLng(35.588073, -82.552910),
        p9 = new L.LatLng(35.588828, -82.561375),
        p10 = new L.LatLng(35.595842, -82.563006),
        polygonPoints = [p1, p2, p3, p4, p5, p6, p7, p8, p9, p10];

    var polygonOptions = {
                    stroke: false, 
                     fillColor: 'green', 
                     fillOpacity: 0.5
    };

    var dtPolygon = new L.Polygon(polygonPoints, polygonOptions).addTo(dealMap);

    var polygon2 = new L.Polygon(polygonPoints, {color: 'green', stroke: true});
    polygon2.bringToFront()

    dtPolygon.addEventListener("mouseover", function(){
        polygon2.addTo(dealMap);
    ;});

    dtPolygon.addEventListener("mouseout", function(){
        polygon2.remove(dealMap);
    ;});



    polygon2.addEventListener("click", function(){
        dealMap.fitBounds(polygonPoints);
    ;});

Answer 1

To highlight a polygon on mouseover you can use setStyle() , you don't need to create a copy of the polygon:

dtPolygon.on('mouseover', function(evt){
  evt.target.setStyle({
    stroke: true
  })
})

dtPolygon.on('mouseout', function(evt){
  evt.target.setStyle(polygonOptions)
})

I guess your "click to zoom" didn't work properly because polygon2 kept moving between foreground and background, and that's why it is flickering. Anyways, you can remove polygon2 altogether.

dtPolygon.on('click', function(evt){
  dealMap.fitBounds(evt.target.getBounds())
})

Demo on Plunker