我是OpenLayers的新手,我做了一个简单的例子,我试图在地图上绘制多边形。绘图后,我希望能够多选按多次移动点击进行进一步处理。即使OpenLayers示例页面上的一些示例非常接近,我也无法做到这一点...... 这是我的代码(按下绘制按钮并绘制两个多边形,按停止按钮退出绘图模式并尝试多选按住Shift键):
<body>
<div>
<img src="stop.png" class="fmsv_map_btn" id="fmsv_stop_elm" title="Stop drawing" alt="Stop drawing">
<img src="draw.png" class="fmsv_map_btn" id="fmsv_contour_elm" title="Contour" alt="Contour">
</div>
<div width="600" height="600" id="map" class="map"></div>
<script>
var engine = this;
var draw = null;
var map = new ol.Map({
target: "map",
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuest({ layer: 'osm' })
})
],
view: new ol.View({
center: [0,0],
zoom: 2
})
});
var features = new ol.Collection();
var source = new ol.source.Vector({ features: features });
var featureOverlay = new ol.layer.Vector({
source: source,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: '#000000',
width: 1
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#000000'
})
})
})
});
featureOverlay.setMap(map);
$("#fmsv_contour_elm").click(function () {
addInteraction("Polygon");
});
$("#fmsv_stop_elm").click(function () {
if (draw)
map.removeInteraction(draw);
draw = null;
});
var selectClick = new ol.interaction.Select({
condition: ol.events.condition.click,
//addCondition: ol.events.condition.shiftKeyOnly,
//toggleCondition: ol.events.condition.never,
//removeCondition: ol.events.condition.altKeyOnly,
});
map.addInteraction(selectClick);
var selectedFeatures = select.getFeatures();
//selectClick.on('select', function (e) {
//});
function addInteraction(drawmode) {
if (draw)
map.removeInteraction(draw);
draw = new ol.interaction.Draw({
features: features,
type: /** @type {ol.geom.GeometryType} */ (drawmode)
});
map.addInteraction(draw);
}
</script>
</body>
答案 0 :(得分:0)
使用map.addLayer(featureOverlay);
代替featureOverlay.setMap(map)