[英]How to get list of all markers from selected Polygon using OpenLayer MAP v2
我可以在OpenLayers Map版本2.x上运行以下功能
现在我的要求是当我选择任何多边形时,我想显示带有所有位于选定多边形内的标记的警告框。
我正在使用以下代码:
<html>
<head>
<link href="common.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="OpenLayers.js"></script>
</head>
<body>
<div id="map"></div>
<div style="font-weight: bold">OSM Drawing Layer</div>
<select id="mapMode" name="mapMode" size="1" onchange="changeMapMode(this.value);">
<option value="none" selected>Navigation</option>
<option value="polygon">Draw Polygon</option>
<option value="line">Draw Line</option>
<option value="select">Select Features</option>
</select>
<div id="highlighted"></div>
<br />
<div id="featureTable"></div>
<script type="text/javascript">
//https://gis.stackexchange.com/questions/115500/how-to-find-markers-in-selected-dragbox-openlayers-3
var lat=23.033863;
var lon=72.585022;
var zoom=4;
var mapOptions = {
div: "map"
};
var map = new OpenLayers.Map('map', mapOptions);
map.addLayer(new OpenLayers.Layer.OSM());
map.addControl(new OpenLayers.Control.LayerSwitcher());
var epsg4326 = new OpenLayers.Projection("EPSG:4326");
var projectTo = map.getProjectionObject();
if(!map.getCenter()){
var lonLat = new OpenLayers.LonLat(lon, lat).transform(epsg4326, projectTo);
map.setCenter (lonLat, zoom);
}
drawingLayer = new OpenLayers.Layer.Vector("Drawing layer");
drawingLayer.events.on({
'featureselected': function(feature) {
updateFeatureTable(this.selectedFeatures);
},
'featureunselected': function(feature) {
updateFeatureTable(this.selectedFeatures);
}
});
map.addLayer(drawingLayer);
var lonLatSarkhej = new OpenLayers.LonLat(72.5000,22.9833).transform(epsg4326,projectTo);
var lonLatVadodara = new OpenLayers.LonLat(73.2003,22.3000).transform(epsg4326,projectTo);
var lonLatBhuj = new OpenLayers.LonLat(69.6700,23.2500).transform(epsg4326,projectTo);
var lonLatMumbai = new OpenLayers.LonLat(72.8258,18.9750).transform(epsg4326,projectTo);
var lonLatJaipur = new OpenLayers.LonLat(75.8235,26.9260).transform(epsg4326,projectTo);
var lonLatDelhi = new OpenLayers.LonLat(77.2300,28.6100).transform(epsg4326,projectTo);
var markers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(markers);
var size = new OpenLayers.Size(24,24);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('icon/Marker-Pink.png', size, offset);
markers.addMarker(new OpenLayers.Marker(lonLatSarkhej,icon)); //Sarkhej
markers.addMarker(new OpenLayers.Marker(lonLatVadodara,icon.clone())); //Vadodara
markers.addMarker(new OpenLayers.Marker(lonLatBhuj,icon.clone())); //Bhuj
markers.addMarker(new OpenLayers.Marker(lonLatMumbai,icon.clone())); //Mumbai
markers.addMarker(new OpenLayers.Marker(lonLatJaipur,icon.clone())); //Jaipur
markers.addMarker(new OpenLayers.Marker(lonLatDelhi,icon.clone())); //Delhi
drawingControls = {
polygon: new OpenLayers.Control.DrawFeature(drawingLayer, OpenLayers.Handler.Polygon, {
eventListeners: {
"featureadded": controlFeatureHandler
}
}),
line: new OpenLayers.Control.DrawFeature(drawingLayer, OpenLayers.Handler.Path),
select: new OpenLayers.Control.SelectFeature(
drawingLayer,
{
clickout: false,
toggle: false,
multiple: false,
hover: false,
toggleKey: "ctrlKey", // ctrl key removes from selection
multipleKey: "shiftKey", // shift key adds to selection
box: true
}
)
};
for (var key in drawingControls) {
map.addControl(drawingControls[key]);
}
var highlightCtrl = new OpenLayers.Control.SelectFeature(drawingLayer, {
hover: true,
highlightOnly: true,
renderIntent: "temporary",
eventListeners: {
//beforefeaturehighlighted: report,
featurehighlighted: report,
featureunhighlighted: unReport
}
});
map.addControl(highlightCtrl);
highlightCtrl.activate();
function report(e) {
//OpenLayers.Console.log(e.type, e.feature.id);
document.getElementById('highlighted').innerHTML=e.feature.id;
};
function unReport(e) {
//OpenLayers.Console.log(e.type, e.feature.id);
document.getElementById('highlighted').innerHTML="";
};
function changeMapMode(value) {
for (var key in drawingControls) {
var control = drawingControls[key];
if (value == key) {
control.activate();
} else {
control.deactivate();
}
}
}
function controlFeatureHandler(e) {
alert(e.feature.geometry.getBounds());
}
function updateFeatureTable(featureList) {
var wkt = new OpenLayers.Format.WKT();
var table = "<table border='1'>";
for(var key in featureList) {
table += "<tr><td>";
table += featureList[key].id;
table += "</td><td>";
table += wkt.write(featureList[key]);
table += "</td></tr>";
}
table += "</table>";
document.getElementById('featureTable').innerHTML=table;
}
</script>
</body>
</html>
任何人都可以知道如何将所有标记放入选定的多边形内吗?
我发现有一篇文章是使用OpenLayers版本3 https://gis.stackexchange.com/questions/115500/how-to-find-markers-in-selected-dragbox-openlayers-3编写的。 但是我正在使用2.x版本
任何帮助将不胜感激。
我已使用以下代码解决了该问题。 发布答案的目的是可以帮助正在搜索相同内容的其他人。
创建Polygon时,我正在调用controlFeatureHandler函数。
function controlFeatureHandler(e) {
getIntersectsMarkers(e.feature);
}
当选择了特定的Polygon时,也会调用controlFeatureHandler函数。
function updateFeatureTable(featureList) {
var wkt = new OpenLayers.Format.WKT();
var table = "<table border='1'>";
for(var key in featureList) {
table += "<tr><td>";
table += featureList[key].id;
table += "</td><td>";
table += wkt.write(featureList[key]);
table += "</td></tr>";
getIntersectsMarkers(featureList[key]);
}
table += "</table>";
document.getElementById('featureTable').innerHTML=table + "</br>Markers:" + markersArray;
}
此函数将返回选定多边形内的标记数量(含经/纬度)。
function getIntersectsMarkers(feature) {
markersArray = [];
for (var i in markers.markers) {
var p = new OpenLayers.Geometry.Point(markers.markers[i].lonlat.lon, markers.markers[i].lonlat.lat);
if (feature.geometry.intersects(p)) {
markersArray.push(markers.markers[i]);
var lonlat = new OpenLayers.LonLat(markers.markers[i].lonlat.lon, markers.markers[i].lonlat.lat);
var _lonlat = lonlat.transform(projectTo, epsg4326);
console.log('lon:' + _lonlat.lon + ', lat:' + _lonlat.lat);
}
}
}
不过,如果您遇到任何问题,请在此处随意提问。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.