OpenLayers 5 рисует взаимодействия - «n не является конструктором» в Draw.js: 338 - PullRequest
Новая
       7

OpenLayers 5 рисует взаимодействия - «n не является конструктором» в Draw.js: 338

0 голосов
/ 03 октября 2019

Я пытаюсь разрешить пользователю рисовать и изменять объекты, следуя этому примеру: https://openlayers.org/en/v5.3.0/examples/draw-and-modify-features.html - но я получаю две ошибки: 

Uncaught TypeError: n is not a constructor
    at e.r [as geometryFunction_] (Draw.js:338)
    at e.startDrawing_ (Draw.js:700)
    at e.handleUpEvent (Draw.js:570)
    at e.handleEvent (Pointer.js:132)
    at e.handleEvent (Draw.js:524)
    at e.handleMapBrowserEvent (PluggableMap.js:933)
    at e (events.js:41)
    at e.dispatchEvent (Target.js:101)
    at e.handlePointerUp_ (MapBrowserEventHandler.js:166)
    at e (events.js:41)

и 

Uncaught TypeError: Cannot read property 'getGeometry' of null
    at e.modifyDrawing_ (Draw.js:717)
    at e.handlePointerMove_ (Draw.js:618)
    at e.handleEvent (Draw.js:518)
    at e.handleMapBrowserEvent (PluggableMap.js:933)
    at e (events.js:41)
    at e.dispatchEvent (Target.js:101)
    at e.relayEvent_ (MapBrowserEventHandler.js:279)
    at e (events.js:41)
    at e.dispatchEvent (Target.js:101)
    at e.fireNativeEvent (PointerEventHandler.js:397)

Первая ошибка появляется в консоли, как только я нажимаю, чтобы начать рисование объекта. Затем синяя точка остается на том же месте, и вторая ошибка повторяется, когда я перемещаю мышь. Нажатие на карту ничего не сделает после первого щелчка.

Я не вижу ничего очевидного в Draw.js, и, насколько я могу судить, мой код точно такой же, за исключениемнесколько незначительных адаптаций для моего приложения, как в примере, который я упомянул выше.

Я использую OpenLayers 5.3.0, который загружаю через rawgit: 

<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>

Другие соответствующиечасти моего кода следующие - адаптированные из примера, упомянутого выше: 

var drawSource = new ol.source.Vector();
var drawVector = new ol.layer.Vector({
  source: drawSource,
  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'
      })
    })
  })
});
map.addLayer(drawVector);

var modify = new ol.interaction.Modify({source: drawSource});

map.addInteraction(modify);

var draw, snap; // global so we can remove them later

function removeInteractions() {
  map.removeInteraction(draw);
  map.removeInteraction(snap);
}

function addInteractions() {
  draw = new ol.interaction.Draw({
    source: drawSource,
    type: ol.geom.Polygon
  });
  map.addInteraction(draw);
  snap = new ol.interaction.Snap({source: drawSource});
  map.addInteraction(snap);
}

Я вызываю addInteractions () и removeInteractions () через гиперссылки. Никаких ошибок не возникает до того, как я вызову addInteractions () или после того, как я вызову removeInteractions ().

1 Ответ

1 голос
/ 03 октября 2019

Тип рисования должен быть строкой 

  draw = new ol.interaction.Draw({
    source: drawSource,
    type: 'Polygon'
  });
...