小冊子放大到多邊形

半新到小冊子& mapbox。我在地圖上有一個多邊形，在翻滾時，通過將另一個多邊形添加到地圖來獲得筆劃。這是一種毛刺（如果你將鼠標移動到多邊形上而不移動它，那麼會出現描邊多邊形，但是如果你在多邊形內部移動鼠標，那麼描邊多邊形會閃爍和閃爍，很樂意聽到另一種方式來做到這一點沒有這種事情發生！我主要的問題是我想要的地圖放大到多邊形邊界十歲上下（或中心多邊形&我設置視圖），用戶點擊時。多邊形小冊子放大到多邊形

的事件偵聽器點擊多邊形底部我已經嘗試了很多不同的語法，包括：

// 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); 
    ;});

來源

2017-04-16 Ailis

要突出鼠標懸停多邊形，您可以使用setStyle()，你不需要創建多邊形的副本：

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

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

我想你「點擊放大」，因爲polygon2保持前景和背景之間移動沒有正常工作，這就是爲什麼它閃爍。無論如何，你可以刪除polygon2。

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

Demo on Plunker

來源

2017-04-17 08:31:27 chrki

小冊子放大到多邊形

回答

相關問題