在角度中使用 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);

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

在“lineGeometry”变量的“getExtent()”函数中。

我尝试控制台记录“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);

    }

  }