小册子放大到多边形

半新到小册子& 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

小册子放大到多边形

回答

相关问题