d3.js形状缩放/ google地图控件和在形状区域内显示标记 [英] d3.js Shape scaling/google map controls and showing markers inside a shape area
问题描述
我已在这里分解这个应用程序。
Working on this application which I have broken down here.
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
}
推荐答案
修改：现在在将多边形添加到地图之前对其进行简化。编辑多边形也很好。
Now simplifies polygon before adding it to the map. Editing the polygon works as well.
首先，css和html：我移动了 div $ c>＃canvas1 在地图之后，给它绝对定位，并且 z-index = 0 。我也给了地图相同的绝对定位，以确保他们总是对齐，并给它一个 z-index 10。
First, the css and html: I moved the div called #canvas1 after the map and gave it absolute positioning and z-index = 0. I also gave the map the same absolute positioning to ensure that they always line up with each other, and gave it a z-index of 10.
点击绘制按钮时，画布移动到前面。用户可以使用它来绘制自由形式使用d3。当它们完成时，它们绘制的形状被转换为google地图面。
When the draw button is clicked the canvas is moved to the front. The user can use it to draw free form using d3. When they are done the shape they drew is converted to a google maps polygon.
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);
poly = new google.maps.Polygon（{
paths：geoCoords，
strokeColor：'＃FF0000'，
strokeOpacity：0.8，
strokeWeight ：2，
fillColor：'＃FF0000'，
fillOpacity：0.35
}）;
poly.setMap（map）;
Then we do do the hiding/showing of the markers. Using d3 this way is really silly and defeats the purpose. You need to add the google geometry library to your url to use this (&libraries=geometry). I'm sure there are faster ways and if you're dealing with large datasets you'll want to make this better.
然后我们做标记的隐藏/显示。使用d3这种方式真的很愚蠢，击败目的。您需要将google几何库添加到您的网址以使用此（& 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});
}
}
This works because when we appended the markers we added their name as the id on the marker element. The only reason I can see to do this is because the svg gives you better control over styling. Last:这是因为当我们添加标记时，名称作为标记元素上的id。我可以看到这样做的唯一原因是因为 svg 让你更好地控制造型。最后：
svg.select(".selection").remove()
d3.select("#canvas1").classed({'front': false});
$('.draw').removeClass('highlight');
},
We remove the shape we drew from the drawing layer. If we don't do this, if the user moves the map and then turns the drawing layer back on, the shape will be in the wrong place. Then we move the canvas to the back and turn off the highlighting on the drawing button.我们删除了我们从绘图层中提取的形状。如果我们不这样做，如果用户移动地图，然后重新打开绘图层，形状将在错误的地方。然后我们将画布移到后面，并关闭绘图按钮上的突出显示。
The edit function was taken from your most recent code. If the edit button or polygon is clicked the editing function is turned on on the polygon.
编辑功能取自您最近的代码。如果点击编辑按钮或多边形，多边形上的编辑功能就会打开。
I would also recommend taking a look at Leaflet. The integration with d3 is a bit easier and you can have multiple svg layers, which would allow you to put the drawing layer as a map overlay instead of a separate div.
这篇关于d3.js形状缩放/ google地图控件和在形状区域内显示标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
