Ajouter une fonction manuellement à une couche vectorielle dans ol3

16

J'essaie d'ajouter manuellement un calque à un calque vectoriel avec javascript. Je n'arrive pas à déterminer pourquoi cela échoue:

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

J'ai essayé des coordonnées saines comme 16,22, et des grandes pour correspondre aux valeurs xy de la vue. J'obtiens une erreur javascript de ol3: TypeError: bQ n'est pas une fonction.

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 );
Kieveli
la source
Avec ol3-debug.js, j'obtiens "AssertionError: Failure: unsupported stride: undefined"
Kieveli
2
Vous essayez d'ajouter une géométrie à la source. Enveloppez-le dans une ol.Featurepremière.
Gabor Farkas
1
Agréable! Je manquais également la conversion de lat / long en y / x. Mise à jour du violon: jsfiddle.net/Kieveli/f4t6n6v1/7
Kieveli

Réponses:

22

Comme l'a dit Gabor Farkas , j'ajoutais la géométrie et non une fonction à la source. Il me manquait également [] sur les coordonnées de la géométrie et je ne convertissais pas correctement. En dehors d'ici, j'utilisais lat / long comme x / y au lieu de y / x. Violon mis à jour:

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 );
Kieveli
la source