1
Ich habe ein Problem mit der Version 3.14 und höher Openlayers3 dieses Beispiel zu verschieben Features funktioniert nicht, wenn nicht weniger als 3,14 Versionen, was soll ich tun, um mit dem neuen zu arbeiten Versionen ?.Openlayers3 Move-Funktion, funktioniert nicht, wenn nicht weniger als 3,14 Versionen
Ich versuche, Eigenschaften des Typs Kreis in meinem Projekt zu verschieben, fand ich ein Beispiel dafür, wie es geht, aber nicht mit den neuesten Versionen von openlayers3 funktioniert.
Ich hoffe deine Hilfe danke!
var map = new ol.Map({
target: 'map',
layers: [new ol.layer.Tile({//Capas
title: 'OSM',
type: 'base',
visible: true,
source: new ol.source.OSM()
})],
view: new ol.View({
center: [-9777389, 5058721],
zoom: 5
})
});
function onDrawend() {
setTimeout(function() {
setActiveEditing(true);
activeInteraction.setActive(false);
document.getElementById('draw').value = 'select';
}, 200);
}
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector()
});
vectorLayer.setMap(map);
var pointInteraction = new ol.interaction.Draw({
type: 'Point',
source: vectorLayer.getSource()
});
pointInteraction.setActive(false);
pointInteraction.on('drawend', onDrawend);
var lineInteraction = new ol.interaction.Draw({
type: 'LineString',
source: vectorLayer.getSource()
});
lineInteraction.setActive(false);
lineInteraction.on('drawend', onDrawend);
var polygonInteraction = new ol.interaction.Draw({
type: 'Polygon',
source: vectorLayer.getSource()
});
polygonInteraction.setActive(false);
polygonInteraction.on('drawend', onDrawend);
var circleInteraction = new ol.interaction.Draw({
type: 'Circle',
source: vectorLayer.getSource()
});
circleInteraction.setActive(false);
circleInteraction.on('drawend', onDrawend);
var rectangleInteraction = new ol.interaction.Draw({
type: 'LineString',
source: vectorLayer.getSource(),
maxPoints: 2,
geometryFunction: function(coordinates, geometry) {
if (!geometry) {
geometry = new ol.geom.Polygon(null);
}
var start = coordinates[0];
var end = coordinates[1];
geometry.setCoordinates([
[start, [start[0], end[1]], end, [end[0], start[1]], start]
]);
return geometry;
}
});
rectangleInteraction.setActive(false);
rectangleInteraction.on('drawend', onDrawend);
var selectInteraction = new ol.interaction.Select({
condition: ol.events.condition.click,
wrapX: false
});
var modifyInteraction = new ol.interaction.Modify({
features: selectInteraction.getFeatures()
});
var translateInteraction = new ol.interaction.Translate({
features: selectInteraction.getFeatures()
});
var setActiveEditing = function(active) {
selectInteraction.getFeatures().clear();
selectInteraction.setActive(active);
modifyInteraction.setActive(active);
translateInteraction.setActive(active);
};
setActiveEditing(true);
var snapInteraction = new ol.interaction.Snap({
source: vectorLayer.getSource()
});
map.getInteractions().extend([
pointInteraction, lineInteraction, polygonInteraction,
circleInteraction, rectangleInteraction,
selectInteraction, modifyInteraction, translateInteraction,
snapInteraction]);
var activeInteraction;
document.getElementById('draw').addEventListener('change', function(e) {
var value = e.target.value;
if (activeInteraction) {
activeInteraction.setActive(false);
}
if (value == 'point') {
activeInteraction = pointInteraction;
} else if (value == 'line') {
activeInteraction = lineInteraction;
} else if (value == 'polygon') {
activeInteraction = polygonInteraction;
} else if (value == 'circle') {
activeInteraction = circleInteraction;
} else if (value == 'rectangle') {
activeInteraction = rectangleInteraction;
} else {
activeInteraction = undefined;
}
setActiveEditing(!activeInteraction);
if (activeInteraction) {
activeInteraction.setActive(true);
}
});
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: "Montserrat", Verdana, sans-serif;
}
div.full {
width: 100%;
height: 100%;
/*background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF7/r+////JvYf4gAAAAJ0Uk5T/wDltzBKAAAAGElEQVR42mJgwAoYYQCJNWQEh5uPAAIMAP2AAUUBpXchAAAAAElFTkSuQmCC");*/
}
.ol-zoom a:hover,
.ol-zoom a:focus {
color: white;
text-decoration: none;
};
#draw {
position: absolute;
top: 10px;
right: 45px;
padding: 4px;
border-radius: 4px;
}
#edit {
position: absolute;
top: 10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.14.0/ol.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.14.0/ol.min.js"></script>
<!--script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.13.1/ol.min.js"></script-->
<!-- version 3.13.1 change library to compare
https://cdnjs.cloudflare.com/ajax/libs/ol3/3.13.1/ol.min.js --this WORK's!!!
https://cdnjs.cloudflare.com/ajax/libs/ol3/3.14.0/ol.min.js This NOT WORK and higher
-->
<select id="draw">
<option value="select">Select to draw…</option>
<option value="point">Point</option>
<option value="line">Line</option>
<option value="polygon">Polygon</option>
<option value="circle">Circle</option>
<option value="rectangle">Rectangle</option>
</select>
<div id="map" class="full"></div>