手动将要素添加到ol3中的矢量层


16

我正在尝试使用javascript将图层手动添加到矢量图层。我似乎无法确定失败的原因:

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

我已经尝试了16、22之类的合理坐标,以及一些大的坐标来匹配视图的xy值。我从ol3收到一个JavaScript错误:TypeError:bQ不是一个函数。

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 );

使用ol3-debug.js,我收到“ AssertionError:失败:不支持的步幅:未定义”
Kieveli,2015年

2
您正在尝试将几何体添加到源中。首先将其包装ol.Feature
Gabor Farkas

1
真好!我也错过了从经/长到y / x的转换。更新小提琴:jsfiddle.net/Kieveli/f4t6n6v1/7
Kieveli,2015年

Answers:


22

正如Gabor Farkas所说,我是在源中添加几何图形而不是要素。我还缺少几何图形的坐标[],并且转换不正确。在这里之外,我将lat / long用作x / y而不是y / x。更新的小提琴:

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 );
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.