javascript - OpenLayers 5.3 : Why doesn't draw my poligon?

标签 javascript openlayers

这是代码:

drawPoligon : function (vertices) {
    debugger;
    var map = peaMap;
    var feature = new ol.Feature({
        geometry: new ol.geom.Polygon([vertices])
    });

    var vectorSource= new ol.source.Vector({
        features: [feature ]
    });
    var vectorLayer = new ol.layer.Vector({
        source: vectorSource
    });
    map.addLayer(vectorLayer);

}
vertices = [1253906.08982072, 5430790.35506443, 1253935.16019819, 5430769.74133789, 1253951.90741865, 5430793.82802342, 1253955.42311216........]

坐标数组的格式:

[
  [1253906.08982072,5430790.35506443],
  [1253935.16019819,5430769.74133789],
  [1253951.90741865,5430793.82802342],
  [1253955.42311216,5430798.88815272],
  [1253953.91064413,5430800.28580152],
  [1253952.03520923,5430801.40886153],
  [1253945.88800332,5430791.50307534],
  [1253936.62615957,5430797.3914173]
]

...坐标列表未满。仅部分曝光。

最佳答案

格式 [ [lon, lat], … ] 是正确的。使用更大的缩放您可以看到结果:

var osmLayer = new ol.layer.Tile({
    source: new ol.source.OSM()
  });

  var vertices = [
    [1253906.08982072, 5430790.35506443],
    [1253935.16019819, 5430769.74133789],
    [1253951.90741865, 5430793.82802342],
    [1253955.42311216, 5430798.88815272],
    [1253953.91064413, 5430800.28580152],
    [1253952.03520923, 5430801.40886153],
    [1253945.88800332, 5430791.50307534],
    [1253936.62615957, 5430797.3914173]
  ];

  var feature = new ol.Feature({
    geometry: new ol.geom.Polygon([vertices])
  });

  var vectorSource = new ol.source.Vector({
    features: [feature]
  });
  var vectorLayer = new ol.layer.Vector({
    source: vectorSource,
    style: new ol.style.Style({
      stroke: new ol.style.Stroke({
        width: 2,
        color: [255, 0, 0]
      })
    })
  });

  var map = new ol.Map({
    layers: [osmLayer, vectorLayer],
    target: document.getElementById("map"),
    view: new ol.View({
      center: [1253950, 5430800],
      zoom: 20
    })
  });

关于javascript - OpenLayers 5.3 : Why doesn't draw my poligon?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53433154/

相关文章:

javascript - 序列化多个重复项的数组

javascript - 在 Jquery 或 Javascript 中调用方法的无限循环的正确方法是什么?

web - Qgis 网络客户端/Openlayers

javascript - OpenLayers 弹出窗口上的 Jquery UI 按钮 - 选择仅触发一次

javascript - V-model 没有监听输入值的变化(vuejs)

javascript - HTML5-canvas 使圆圈在 Canvas 内闪烁

javascript - 使用 jQuery 在选择器之前操作 CSS

javascript - 如何使按钮执行相同的代码但相应地具有不同的变量?

map - 如何在 openlayers 中添加的标记中添加弹性效果

javascript - WMTS 和 WMTSTileGrid 导致 "Cannot read property ' 每个'未定义'