Рисование и изменение векторных объектов (OpenLayers) - PullRequest
Новая
       31

Рисование и изменение векторных объектов (OpenLayers)

0 голосов
/ 17 октября 2018

Здесь я пытаюсь нарисовать и изменить векторные объекты на карте OSM OpenLayers (согласно этой ссылке ), но я не могу получить карту для создания новых объектов (точки, линии или многоугольника)) на моем фоне в векторном слое.Я использую 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 ' или ' Точка ').

Я также пытался вызвать функцию addInteractions через onchange Событие в самих опциях формы, однако это ничего не изменило.

Карта дает мне стилизованную точку, на которую указывает мой курсор, однако, когда я нажимаю, ничего не происходит.

Любая помощь сэто будет с благодарностью!Спасибо

...