Question

我是OpenLayers 3的新手。我正在尝试学习如何在OpenLayers地图上绘制和保存数据。举个例子，我试图了解绘制和保存数据。但是，我无法在地图上绘制任何内容。我发布下面的代码。

<!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:  &nbsp;</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并了解更多信息。谢谢！

Answer 1

使用jquery选择dom元素应该更加小心。另外，我强烈建议使用Firebug并检查控制台是否存在页面加载错误。这是固定的完整来源。

(x:xs)

如何在OpenLayer 3地图上添加绘图？

1 个答案: