在 angular 中使用 openlayers 绘制线串时出错

Question

我正在使用最新版本的 OpenLayers (6.3.1) 和 angular。

我的目标是根据数组的坐标画一条线

示例：

let coordinates = [
      [20.4511, 48.9109],
      [20.4512, 48.9110],
      [20.4514, 48.9110],
      [20.4515, 48.9111]
    ];

我在我的项目中添加了一个开放图层地图，然后我为该地图设置了图块和矢量图层，但是当我想使用以下代码循环绘制 LineString 时：

var lineGeometry = new LineString([olProj.fromLonLat(coordinates[i-1]), olProj.fromLonLat(coordinates[i])]);

var feature = new Feature({
   geometry: lineGeometry 
});

this.myVectorSource.addFeature(feature);

我得到一个错误： 错误：未实现的抽象方法。

在 "getExtent()" 函数中来自 "lineGeometry" 变量。

我尝试控制台日志 "lineGeometry" 变量，它有 "extent" 成员变量，但它的所有组件都是无穷大。（我假设 "getExtent()" 是 "extent" 成员变量的 getter 函数）

但是，如果我尝试在点之间绘制点而不是线，我会得到预期的结果（点在地图上呈现）

var pointGeometry = new Point(olProj.fromLonLat(coordinates[i]));

var feature = new Feature({
    geometry: pointGeometry 
});

this.myVectorSource.addFeature(feature);

Plunker 有关代码的更多详细信息：

https://plnkr.co/edit/Ih6mCanmpqDmdg2q?open=lib%2Fscript.js&deferRun=1&preview

Answer 1

首先你导入的LineString是错误的变化

import LineString from 'ol/geom/Geometry';

到

import LineString from 'ol/geom/LineString';

线串由所有坐标组成，因此请将其从 for 循环中移除。您可以使用几何的变换方法将 EPSG:4326 (LonLat) 转换为视图投影

  drawLine(coordinates, drawDots)
  {
    if(drawDots)
    {
      for(var i = 0; i < coordinates.length; i++)
      {

        var pointGeometry = new Point(olProj.fromLonLat(coordinates[i]));

        var feature = new Feature({
          geometry: pointGeometry 
        });

        this.myVectorSource.addFeature(feature);
      }
    }
    else
    {

        var lineGeometry = new LineString(coordinates).transform('EPSG:4326', this.myMap.getView().getProjection());
        console.log(lineGeometry)

        var feature = new Feature({
          geometry: lineGeometry 
        });

        this.myVectorSource.addFeature(feature);

    }

  }

在 angular 中使用 openlayers 绘制线串时出错

Error drawing linestring with openlayers in angular

line

draw

openlayers

angular