Füge das Feature manuell zu einer Vektorebene in ol3 hinzu


16

Ich versuche, eine Ebene manuell mit Javascript zu einer Vektorebene hinzuzufügen. Ich kann anscheinend nicht feststellen, warum dies fehlschlägt:

http://jsfiddle.net/Kieveli/f4t6n6v1/4/

Ich habe vernünftige Koordinaten wie 16,22 und große Koordinaten versucht, um den xy-Werten der Ansicht zu entsprechen. Ich erhalte einen Javascript-Fehler von ol3: TypeError: bQ ist keine Funktion.

HTML:

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

Javascript:

var vectorSource = new ol.source.Vector({});

var map = new ol.Map({
  layers: [
      new ol.layer.Tile({
          source: new ol.source.MapQuest({layer: 'sat'})
      }),
      new ol.layer.Vector({
          source: vectorSource
      })
  ],
  target: 'map',
  view: new ol.View({
    center: [-11000000, 4600000],
    zoom: 4
  })
});

var thing = new ol.geom.Polygon( [ [16000000,22000000],[44000000,55000000],[88000000,90000000] ] );
vectorSource.addFeature( thing );

Mit ol3-debug.js erhalte ich "AssertionError: Failure: nicht unterstützte Schritt: undefined"
Kieveli

2
Sie versuchen, der Quelle eine Geometrie hinzuzufügen. Wickeln Sie es in einem ol.Featureersten.
Gabor Farkas

1
Nett! Mir hat auch die Umrechnung von lat / long nach y / x gefehlt. Aktualisierung der Geige: jsfiddle.net/Kieveli/f4t6n6v1/7
Kieveli

Antworten:


22

Wie Gabor Farkas sagte, habe ich der Quelle die Geometrie und kein Feature hinzugefügt. Mir fehlte auch [] an den Koordinaten zur Geometrie und ich konvertierte nicht richtig. Außerhalb von hier habe ich lat / long als x / y anstelle von y / x verwendet. Geige aktualisiert:

http://jsfiddle.net/Kieveli/f4t6n6v1/7/

HTML:

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

JAVASCRIPT:

var vectorSource = new ol.source.Vector({});

var map = new ol.Map({
  layers: [
      new ol.layer.Tile({
          source: new ol.source.MapQuest({layer: 'sat'})
      }),
      new ol.layer.Vector({
          source: vectorSource
      })
  ],
  target: 'map',
  view: new ol.View({
    center: [-11000000, 4600000],
    zoom: 4
  })
});

var thing = new ol.geom.Polygon( [[
    ol.proj.transform([-16,-22], 'EPSG:4326', 'EPSG:3857'),
    ol.proj.transform([-44,-55], 'EPSG:4326', 'EPSG:3857'),
    ol.proj.transform([-88,75], 'EPSG:4326', 'EPSG:3857')
]]);
var featurething = new ol.Feature({
    name: "Thing",
    geometry: thing
});
vectorSource.addFeature( featurething );
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.