我使用 OPENLAYERS 3.0 在我的页面上绘制了一张地图。
在 document.ready() 中，我绘制了地图，并使用一些经度和纬度组合在其上绘制了一些标记。
我在地图上添加了画线、多边形和选择功能。
我的想法是在页面加载时在地图上绘制一些标记，我想绘制一个多边形或边界框，然后单击这些选择我应该能够在这些选择中绘制标记，是否可以做这
没有循环，任何人都请给我一个建议来完成这个。
我的 HTML 和 JAVASCRIPT 代码如下
var map, layer;
var drawControls;
OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';
$('document').ready(function () {
console.log('in');
OpenLayers.ProxyHost = "/proxy/?url=";
map = new OpenLayers.Map('map');
layer = new OpenLayers.Layer.WMS("OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", { layers: 'basic' });
map.addLayer(layer);
map.setCenter(new OpenLayers.LonLat(0, 0), 0);
var newl = new OpenLayers.Layer.Text("text", { location: "./content/textfile.txt" });
map.addLayer(newl);
var markers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(markers);
var size = new OpenLayers.Size(21, 25);
var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
var icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png', size, offset);
//markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0, 0), icon));
var halfIcon = icon.clone();
//markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0, 45), halfIcon));
var Latitudes = '12.98267,13.00118,12.97161,12.97977,12.92828,12.97597';
var Longitudes = '80.26338,80.2565,80.24343,80.25288,80.23621,80.22121';
var LatArray = Latitudes.split(',');
var LonArray = Longitudes.split(',');
for (var g = 0; g < LatArray.length; g++) {
marker = new OpenLayers.Marker(new OpenLayers.LonLat(LonArray[g], LatArray[g]), icon.clone());
//marker.setOpacity(0.2);
marker.events.register('mousedown', marker, function (evt) { alert(this.icon.url); OpenLayers.Event.stop(evt); });
markers.addMarker(marker);
}
//marker = new OpenLayers.Marker(new OpenLayers.LonLat(90, 10), icon.clone());
//marker.setOpacity(0.2);
//marker.events.register('mousedown', marker, function (evt) { alert(this.icon.url); OpenLayers.Event.stop(evt); });
//markers.addMarker(marker);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToMaxExtent();
halfIcon.setOpacity(0.5);
var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
var vectors = new OpenLayers.Layer.Vector("Vector Layer",
{
renderers: renderer
});
vectors.events.on(
{
'featureselected': function (feature) {
$('counter').innerHTML = this.selectedFeatures.length;
$('myd').innerHTML = 'this.selectedFeatures.length :' + this.selectedFeatures.length + 'this.selectedFeatures[0].geometry.bounds :' + this.selectedFeatures[0].geometry.bounds;
},
'featureunselected': function (feature) {
$('counter').innerHTML = this.selectedFeatures.length;
$('myd').innerHTML = 'UNSEL this.selectedFeatures.length :' + this.selectedFeatures.length + 'this.selectedFeatures[0].geometry.bounds :' + this.selectedFeatures[0].geometry.bounds;
}
});
map.addLayers([layer, vectors]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
drawControls =
{
point: new OpenLayers.Control.DrawFeature(
vectors, OpenLayers.Handler.Point
),
line: new OpenLayers.Control.DrawFeature(
vectors, OpenLayers.Handler.Path
),
polygon: new OpenLayers.Control.DrawFeature(
vectors, OpenLayers.Handler.Polygon
),
select: new OpenLayers.Control.SelectFeature(
vectors,
{
clickout: false, toggle: false,
multiple: false, hover: false,
toggleKey: "ctrlKey", // ctrl key removes from selection
multipleKey: "shiftKey", // shift key adds to selection
box: true
}
),
selecthover: new OpenLayers.Control.SelectFeature(
vectors,
{
multiple: false, hover: true,
toggleKey: "ctrlKey", // ctrl key removes from selection
multipleKey: "shiftKey" // shift key adds to selection
}
)
};
for (var key in drawControls) {
map.addControl(drawControls[key]);
}
});
function init()
{
}
function toggleControl(element)
{
for (key in drawControls) {
var control = drawControls[key];
if (element.value == key && element.checked) {
control.activate();
}
else {
control.deactivate();
}
}
}
function update()
{
var clickout = document.getElementById("clickout").checked;
if (clickout != drawControls.select.clickout)
{
drawControls.select.clickout = clickout;
}
var box = document.getElementById("box").checked;
if (box != drawControls.select.box)
{
drawControls.select.box = box;
if (drawControls.select.active)
{
drawControls.select.deactivate();
drawControls.select.activate();
}
}
}
<div id="content"></div>
<h1 id="title">
Markers Layer Example</h1>
<div id="tags">
Marker, event, mousedown, popup, inco</div>
<div id="shortdesc">
Show markers layer with different markers</div>
<div id="map" class="smallmap">
</div>
<ul id="controlToggle">
<li>
<input type="radio" name="type" value="none" id="noneToggle" onclick="toggleControl(this);"
checked="checked" />
<label for="noneToggle">
navigate</label>
</li>
<li>
<input type="radio" name="type" value="point" id="pointToggle" onclick="toggleControl(this);" />
<label for="pointToggle">
draw point</label>
</li>
<li>
<input type="radio" name="type" value="line" id="lineToggle" onclick="toggleControl(this);" />
<label for="lineToggle">
draw line</label>
</li>
<li>
<input type="radio" name="type" value="polygon" id="polygonToggle" onclick="toggleControl(this);" />
<label for="polygonToggle">
draw polygon</label>
</li>
<li>
<input type="radio" name="type" value="selecthover" id="selecthoverToggle" onclick="toggleControl(this);" />
<label for="selecthoverToggle">
Select features on hover</label>
</li>
<li>
<input type="radio" name="type" value="select" id="selectToggle" onclick="toggleControl(this);" />
<label for="selectToggle">
select feature (<span id="counter">0</span> features selected)</label>
<ul>
<li>
<input id="box" type="checkbox" checked="checked" name="box" onchange="update()" />
<label for="box">
select features in a box</label>
</li>
<li>
<input id="clickout" type="checkbox" name="clickout" onchange="update()" />
<label for="clickout">
click out to unselect features</label>
</li>
</ul>
</li>
</ul>
<div id="myd">
</div>