0
我是OpenLayers 3的新手。我正在學習如何在OpenLayers地圖上繪製和保存數據。下面的例子，我想了解繪製和保存數據。但是，我無法在地圖上繪製任何東西。我張貼下面的代碼。如何在OpenLayer 3地圖上添加繪圖？
<!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>
請告訴我爲什麼我無法在地圖上看到任何圖紙？然而，我所看到的example工作得很好。我無法找出問題所在。請幫助我，讓我可以嘗試openLayers並瞭解更多信息。謝謝！
控制檯中出現什麼錯誤？ –