0
從選定多邊形的所有標記，我能夠在地圖上的OpenLayers地圖2.x版運行以下特點如何獲得使用OpenLayer MAP V2
- 認沽標記
- 地圖 繪製多邊形的名單
- 在地圖上選擇多邊形
現在我的要求是當我選擇任何多邊形，然後我想顯示所有標記在選定的多邊形內的警告框。
我使用下面的代碼：
<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
任何幫助將不勝感激。