Openlayers 3在其他图标上绘制
[英]Openlayers 3 draws over other icons
问题描述
我正在使用Openlayers3。我制作了一个html文件，以脱机模式打开一个cuntry的地图，并允许用户在其上绘制图像/段和多边形。 我的问题是，当我更改要在地图上插入的图像时，它也会在地图上的其他点上绘制，我不明白为什么，有什么想法？
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="bootstrap.min.css">
<script src="bootstrap.min.js"></script>
<link rel="stylesheet" href="ol.css" type="text/css">
<script src="ol.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
<form class="form-inline">
<label>Geometry type </label>
<select id="type">
<option value="Point">Point</option>
<option value="LineString">LineString</option>
<option value="Polygon">Polygon</option>
</select>
<select id="image_type">
<option value="stop_sign.png">Stop Sign</option>
<option value="Argentina_P-32.svg.png">Argentina</option>
</select>
</form>
</div>
<input type="button" value="Save Coordinates" onclick="SaveCoordinates()">
<input type="button" value="Get Coordinates" onclick="GetCoordinates()">
</div>
<script type="text/javascript">
var icons = [
"stop_sign.png",
"Argentina_P-32.svg.png"
];
var vectorSource = new ol.source.Vector({
//create empty vector
});
var source = new ol.source.XYZ({
url: 'tiles/{z}/{x}/{y}.png'
});
var map = new ol.Map({
layers: [new ol.layer.Tile({
source: source
})],
target: 'map',
view: new ol.View({
center: [3300000, 6000000],
zoom: 9
})
});
var features = new ol.Collection();
var modify = new ol.interaction.Modify({
features: features,
deleteCondition: function (event) {
if (event.type == 'pointerup') {
var imageSelect = document.getElementById('image_type');
var featureOverlay = new ol.layer.Vector({
source: new ol.source.Vector({
features: features
}),
style: new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 0.5],
offset: [0, 0],
opacity: 1,
scale: 1,
src: imageSelect.value
})
})
});
map.addLayer(featureOverlay);
var l = map.getLayers().getArray();
}
return ol.events.condition.shiftKeyOnly(event) && ol.events.condition.singleClick(event);
},
});
map.addInteraction(modify);
var draw;
function addInteraction() {
console.log(typeSelect.value);
draw = new ol.interaction.Draw({
features: features,
type: (typeSelect.value)
});
map.addInteraction(draw);
}
var typeSelect = document.getElementById('type');
typeSelect.onchange = function (e) {
map.removeInteraction(draw);
addInteraction();
};
addInteraction();
function SaveCoordinates() {
var polyFeatures = featureOverlay.getSource();
var coordsPoligon = [];
var coordsPoints = [];
var coordsLine = [];
var i = 0;
var j = 0;
var z = 0;
polyFeatures.forEachFeature(function (polyFeature) {
if (polyFeature.getGeometry().getType() === 'Polygon') {
coordsPoligon[i] = polyFeature.getGeometry().getCoordinates();
i++;
} else if (polyFeature.getGeometry().getType() === 'Point') {
coordsPoints[j] = polyFeature.getGeometry().getCoordinates();
j++;
} else if (polyFeature.getGeometry().getType() === 'LineString') {
coordsLine[z] = polyFeature.getGeometry().getCoordinates();
z++;
}
});
var markers = {
"points": coordsPoints,
"lines": coordsLine,
"polygons": coordsPoligon
};
$.ajax({
url: 'http://localhost:54823/LayerDataNew',
type: 'POST',
dataType: 'application/json',
data: markers
});
}
var layerMarkers = [];
function GetCoordinates() {
$.get("http://localhost:54823/LayersDataGet", { layerId: 4 }).done(function (data) {
layerMarkers.push(AddMarkers(data.ObjectResult));
if (layerMarkers.length > 1) {
layerMarkers.splice(0, 1);
var l = map.getLayers().getArray();
if (l.length > 1) {
map.removeLayer(l[1]);
}
}
map.addLayer(layerMarkers[layerMarkers.length - 1]);
});
}
function AddMarkers(data) {
for (var i = 0; i < data.length; i++) {
var object = data[i];
if (object.Type === 1) {
var rnd = Math.random();
var style = [
new ol.style.Style({
image: new ol.style.Icon(({
scale: 1,
anchor: [0, 0],
anchorXUnits: 'fraction',
anchorYUnits: 'fraction',
opacity: 1,
src: object.Value
}))
})
];
var f = new ol.Feature({
geometry: new ol.geom.Point([object.Coordinates[0].X, object.Coordinates[0].Y]),
name: 'Point ' + i
})
f.setStyle(style);
vectorSource.addFeature(f);
}
else if (object.Type === 2) {
var polyArray = [];
for (var j = 0; j < object.Coordinates.length; j++) {
polyArray[j] = [object.Coordinates[j].X, object.Coordinates[j].Y];
}
vectorSource.addFeature(new ol.Feature({
geometry: new ol.geom.LineString(polyArray),
name: 'Line ' + i
}));
}
else if (object.Type === 3) {
var polyArray = [];
for (var j = 0; j < object.Coordinates.length; j++) {
polyArray[j] = [object.Coordinates[j].X, object.Coordinates[j].Y];
}
vectorSource.addFeature(new ol.Feature({
geometry: new ol.geom.Polygon([polyArray]),
name: 'Polygon ' + i
}));
}
}
var iconStyle = new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
})
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: iconStyle
});
return vectorLayer;
}
</script>
</body>
</html>
1 个解决方案
解决方案1
0 2015-07-28 23:28:51
这是因为您具有Modify交互的deleteCondition ，该交互不断向地图添加功能相同但样式新颖的新图层。
我无法真正理解您的尝试，但是实际发生的是：
您有一个ol.Collection： features 。 绘图交互为该集合添加了新功能。 每次在顶点上发生mouseup事件时，deleteCondition函数都会在地图上添加一个新图层。 该层在其他层之上绘制，并包含集合中的所有要素，并以当前选择的图标作为样式。
我猜测您的意图是将仅新绘制的功能的样式设置为当前选定的图标。 如果是这种情况，请改为在Draw交互上侦听drawend事件，并在那里设置样式（或样式函数使用的属性）。
仅将deleteCondition选项用于预期用途：确定是否应删除顶点。
用户在Openlayers中绘制多边形后如何绘制变换框？
[英]How to draw a transformation box after a user draws a polygon in Openlayers?
Openlayers Hover 渲染顺序，hover 特征渲染优于所有其他特征
[英]Openlayers Hover render order, hover feature rendering over all other features
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.