d3.js形状缩放/谷歌地图控件和在形状区域内显示标记

Question

处理我在这里分解的这个应用程序。

http://jsfiddle.net/pPMqQ/81/

在这个例子中我想

• 仅在形状区域内显示标记
• 允许缩放地图和缩放形状区域

这是我的伪代码

identifyMarkersInShape: function(){
            //__ function is invoked every time a shape is drawn/editted


            // hides all the markers


            //finds the markers inside the given shape


        },
        bindEvents: function(){

            //handle zoom of the map and scale of the path shape

        }

Answer 1

完全正常的例子：http://jsfiddle.net/PDf9G/5/

编辑现在，在将多边形添加到地图之前简化多边形。编辑多边形也很有效。

首先，css和html：我在地图之后移动了名为div的{​​{1}}，并给出了绝对定位和#canvas1。我也给了地图相同的绝对定位，以确保它们总是相互排列，并给它一个z-index = 0 10。

单击绘图按钮时，画布将移动到前面。用户可以使用它来使用d3绘制自由格式。完成后，他们绘制的形状将转换为谷歌地图多边形。

z-index

然后我们确实隐藏/显示标记。使用d3这种方式真的很愚蠢，无法达到目的。您需要将Google几何图形库添加到您的网址以使用此功能（ addShapeToBaseMap: function(divCoords) { var geoCoords = [] for (var i = 0; i < divCoords.length; i++) geoCoords.push(overlay.getProjection().fromContainerPixelToLatLng(new google.maps.Point(Number(divCoords[i][0]), Number(divCoords[i][1])))); poly = new google.maps.Polygon({ paths: geoCoords, strokeColor: '#FF0000', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#FF0000', fillOpacity: 0.35 }); poly.setMap(map); ）。我确信有更快的方法，如果你正在处理大型数据集，你会想要做得更好。

&libraries=geometry

这是有效的，因为当我们添加标记时，我们在标记元素上添加了它们的名称作为id。我能看到这样做的唯一原因是因为 for (var i = 0; i < data.length; i++) { if (!google.maps.geometry.poly.containsLocation(new google.maps.LatLng(data[i]['lat'], data[i]['lng']), poly)) { d3.select("#" + data[i]['name']).classed({'hide': true}); } else { d3.select("#" + data[i]['name']).classed({'hide': false}); } } 可以让你更好地控制样式。最后：

svg

我们删除了从绘图层绘制的形状。如果我们不这样做，如果用户移动地图然后重新打开绘图层，则形状将位于错误的位置。然后我们将画布移到后面并关闭绘图按钮上的突出显示。

编辑功能取自您最近的代码。如果单击编辑按钮或多边形，则会在多边形上打开编辑功能。

我还建议你看一下Leaflet。与d3的集成更容易一些，您可以拥有多个svg图层，这样您就可以将图层作为地图叠加而不是单独的 svg.select(".selection").remove() d3.select("#canvas1").classed({'front': false}); $('.draw').removeClass('highlight'); }, 。

Answer 2

geojson-utils是一个节点/浏览器javascript包，它有一堆用于处理geojson路径的实用程序。

它拥有的众多功能之一是设计用于处理geojson路径的非常可靠的point in polygon算法。

您也可以考虑使用Leaflet.js代替Google地图，它还有一些工具可用于往返基于geojson的数据。它还有许多非常有用的工具，如Leaflet.draw，它们已经需要的代码可以用来绘制＆＃34;这些路径位于地图之上。