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

Question

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

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

在这个例子中我想

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

这是我的伪代码

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/

编辑:现在在将多边形添加到 map 之前对其进行简化。编辑多边形也有效。

首先，css 和 html:我将名为 #canvas1 的 div 移到了 map 后面，并赋予它绝对定位和 z-index = 0。我还为 map 赋予了相同的绝对定位，以确保它们始终彼此对齐，并为其赋予了 10 的 z-index。

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

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

然后我们做标记的隐藏/显示。以这种方式使用 d3 真的很愚蠢并且达不到目的。您需要将谷歌几何库添加到您的网址才能使用它 (&libraries=geometry)。我确信有更快的方法，如果您要处理大型数据集，您会希望做得更好。

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

这是有效的，因为当我们附加标记时，我们将它们的名称作为 id 添加到标记元素上。我能看到这样做的唯一原因是 svg 让您更好地控制样式。最后:

        svg.select(".selection").remove()
        d3.select("#canvas1").classed({'front': false});
        $('.draw').removeClass('highlight');
    },

我们从绘图层中移除我们绘制的形状。如果我们不这样做，如果用户移动 map 然后重新打开绘图层，形状就会出现在错误的位置。然后我们将 Canvas 移到后面并关闭绘图按钮上的突出显示。

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

我还建议您看一下 Leaflet。与 d3 的集成更容易一些，您可以有多个 svg 层，这将允许您将绘图层作为 map 叠加层而不是单独的 div。