0
Ich bin neu in OpenLayers 3. Ich versuche zu lernen, wie man Daten über eine OpenLayers Karte zeichnet und speichert. Anhand eines Beispiels versuche ich etwas über das Zeichnen und Speichern von Daten zu erfahren. Ich kann jedoch nichts über die Karte zeichnen. Ich poste den Code unten.Wie zeichne ich über eine OpenLayer 3 Karte?
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<title>OpenLayers 3 example</title>
<script src="js/ol.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<div>
<label>Interaction type: </label>
<label>draw</label>
<input type="radio" id="interaction_type_draw" name="interaction_type" value="draw" checked>
<label>modify</label>
<input type="radio" id="interaction_type_modify" name="interaction_type" value="modify">
</div>
<div>
<label>Geometry type</label>
<select id="geom_type">
<option value="Point" selected>Point</option>
<option value="LineString">LineString</option>
<option value="Polygon">Polygon</option>
</select>
</div>
<div>
<label>Data type</label>
<select id="data_type">
<option value="GeoJSON" selected>GeoJSON</option>
<option value="KML">KML</option>
<option value="GPX">GPX</option>
</select>
</div>
<div id="delete" style="text-decoration:underline;cursor:pointer">
Delete all features
</div>
<label>Data:</label>
<textarea id="data" rows="12" style="width:100%"></textarea>
<script>
var source = new ol.source.Vector();
var vector = 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: '#ffcc33',
width: 2
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ffcc33'
})
})
})
});
// Create a map
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
vector
],
view: new ol.View({
zoom: 2,
center: [0, 0]
})
});
// make draw global so it can later be removed
var draw;
// creat a select to choose geometry type
var typeSelect = document.getElementById('type');
// rebuild interaction when changed
typeSelect.onchange = function(e) {
map.removeInteraction(draw);
addInteraction();
};
// create a select to choose a data type to save in
dataTypeSelect = document.getElementById('data_type');
// clear map and rebuild interaction when changed
dataTypeSelect.onchange = function(e) {
clearMap();
map.removeInteraction(draw);
addInteraction();
};
// add draw interaction
function addInteraction() {
var geom_type = typeSelect.value;
if (geom_type !== 'None') {
draw = new ol.interaction.Draw({
source: source,
type: /** @type {ol.geom.GeometryType} */ (geom_type)
});
draw.on('drawend', function(evt) {
saveData();
});
map.addInteraction(draw);
}
}
function saveData() {
var allFeatures = vector.getSource().getFeatures(),
format = new ol.format[dataTypeSelect.value](),
data;
try {
data = format.writeFeatures(allFeatures);
} catch (e) {
// at time of creation there is an error in the GPX format (18.7.2014)
document.getElementById('data').value = e.name + ": " + e.message;
return;
}
if (dataTypeSelect.value === 'GeoJSON') {
// format is JSON
document.getElementById('data').value = JSON.stringify(data, null, 4);
} else {
// format is XML (GPX or KML)
var serializer = new XMLSerializer();
document.getElementById('data').value = serializer.serializeToString(data);
}
}
// add the interaction when the page is first shown
addInteraction();
// clear map when user clicks on 'Delete all features'
$("#delete").click(function() {
clearMap();
});
// clears the map and the output of the data
function clearMap() {
vector.getSource().clear();
document.getElementById('data').value = '';
}
</script>
</body>
</html>
Bitte sagen Sie mir, warum kann ich keine Zeichnungen auf der Karte sehen? Die example, die ich betrachte, funktioniert jedoch gut. Ich kann das Problem nicht herausfinden. Bitte helfen Sie mir, damit ich mit openLayers experimentieren und mehr erfahren kann. Vielen Dank!
Welcher Fehler erscheint in der Konsole? –