Question

在这里，我试图在OSM OpenLayers地图上绘制和修改矢量要素（按照this link），但似乎无法在我的上方创建地图来创建新要素（点，线或面）向量层的抽象背景。我将Node.js用作OSM后台层（包含OL库）的本地主机服务器。

import Map from 'ol/Map';
import View from 'ol/View';
import Feature from 'ol/Feature';
import {
    OSM,
    Vector as VectorSource
} from 'ol/source';
import {
    Tile as TileLayer,
    Vector as VectorLayer
} from 'ol/layer';
import {
    fromLonLat,
    toLonLat
} from 'ol/proj';

import LineString from 'ol/geom/LineString';
import Polygon from 'ol/geom/Polygon';
import Point from 'ol/geom/Point';
import Draw from 'ol/interaction/Draw';
import Modify from 'ol/interaction/Modify';
import Snap from 'ol/interaction/Snap';

import {
    Circle as CircleStyle,
    Fill,
    Stroke,
    Style
} from 'ol/style.js';


//center on Berlin, Germany
  var pos = ol.proj.fromLonLat([13.407588, 52.515475]);

  var tileLayer = new ol.layer.Tile({ // TileLayer({
    source: new ol.source.OSM()
  });

  var view = new ol.View({
    center: pos,
    zoom: 10,
    minZoom: 7,
    maxZoom: 17
  });


  var vectorSource = new VectorSource({ // vectorSource({

  });


  var vectorLayer = new ol.layer.Vector({ // VectorLayer({
    source: vectorSource
  });

  var map = new ol.Map({
    layers: [tileLayer, vectorLayer],
    target: 'map',
    view: view
  });


var modify = new Modify({source: vectorSource});
  map.addInteraction(modify);

  var draw, snap;
  var typeSelect = document.getElementById('type');

  function addInteractions() {
    draw = new Draw({
      source: vectorSource,
      type: typeSelect.value
    });
    map.addInteraction(draw);
    snap = new Snap({source: vectorSource});
    map.addInteraction(snap);

  }

  /**
   * Handle change event.
   */
  typeSelect.onchange = function() {
    map.removeInteraction(draw);
    map.removeInteraction(snap);
    addInteractions();
  };

  addInteractions();

' map '和' type '的定义如下：

<div id="map" class="map"></div>

<form class="form-inline">
  <label>Geometry type &nbsp;</label>
  <select id="type">
    <option value="Point">Point</option>
    <option value="LineString">LineString</option>
    <option value="Polygon">Polygon</option>
    <option value="Circle">Circle</option>
  </select>
</form>

因此，我想做的是能够从下拉框（在地图下方）选择类型，并能够绘制其列出的要素（例如' Polygon '或' 点'）。

我还尝试了通过 onchange 事件（使用选项本身的形式）调用 addInteractions 函数，但这并未更改任何内容。

地图给我的是我的光标指向的样式化点，但是当我单击时什么也没发生。

任何对此的帮助将不胜感激！谢谢

绘制和修改矢量特征（OpenLayers）

0 个答案: