如何使用OpenLayer MAP v2从所选多边形获取所有标记的列表 [英] How to get list of all markers from selected Polygon using OpenLayer MAP v2
本文介绍了如何使用OpenLayer MAP v2从所选多边形获取所有标记的列表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我可以在OpenLayers地图版本2.x上运行以下功能
- 将标记放在地图上
- 在地图上绘制多边形
- 在地图上选择多边形
- Put Markers on Map
- Draw Polygon on Map
- Select Polygon on Map
I am able to run following features on OpenLayers Map Version 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" >
<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">
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>
可以任意body有想法如何才能获得所选多边形内的所有标记？
我找到一篇用OpenLayers版本3编写的文章如何在选定的dragbox openlayers 3中找到标记？ [ ^ ]。但我使用的是版本2.x
任何帮助都将受到高度赞赏。
Can any body has idea how could i get all the markers inside the selected polygon?
I have found one article which is written using OpenLayers Version 3 How to find markers in selected dragbox openlayers 3?[^]. But i am using version 2.x
Any help would be highly appreciated.
推荐答案
我有从以下链接获得Gabor Farkas的答案：
如何使用OpenLayer MAP v2获取所选多边形的所有标记列表 [ ^ ]
如果您正在寻找相同的内容，这将供您参考。
谢谢，
Imdadhusen
I have get Answer from Gabor Farkas from below link:
How to get list of all markers from selected Polygon using OpenLayer MAP v2[^]
This would be for your reference if you are looking for the same.
Thanks,
Imdadhusen
这篇关于如何使用OpenLayer MAP v2从所选多边形获取所有标记的列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
