Question

我有常规openlayers（使用cdn或下载.js文件）的经验，但最近我开始尝试使用Angular 5的npm ol包。创建地图不是问题，但是当我尝试添加矢量图层时，我总是在Chrome中收到错误，告诉我Vector不是构造函数。这是我使用的代码：

import { Injectable } from '@angular/core';
import Map from 'ol/map';
import View from 'ol/view';
import TileLayer from 'ol/layer/tile';
import XYZ from 'ol/source/xyz';
import GeoJSON from 'ol/format/geojson';
import { Vector as VectorSource } from 'ol/source/vector';
import { Vector as VectorLayer } from 'ol/layer/vector';

@Injectable()
export class MapService {
    map : Map;
    countriesLayer : VectorLayer;
    countriesSource : VectorSource;


   constructor() { }

   renderMap() {

    let url = 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png';
    let features = 'https://openlayers.org/en/v4.6.5/examples/data/geojson/countries.geojson'

      this.map = new Map({
          view : new View({
              center : [0, 0],
              zoom : 2
          }),
          layers : [
              new TileLayer({
                  source : new XYZ({
                      url : url
                  })
              })

          ],
          target : "map"
      });

  }

  addVectorLayer() {

      this.countriesSource = new VectorSource({
          url : features,
          format : new GeoJSON()
      });


      this.countriesLayer = new VectorLayer({
          source : this.countriesSource
      });


      this.map.addLayer(this.countriesLayer);

  }


}

感谢您的帮助。

Answer 1

我认为'ol/source/vector'和'ol/layer/vector'都提供默认导出。尝试没有别名：

import VectorSource from 'ol/source/vector';
import VectorLayer from 'ol/layer/vector';

使用ES2015在Openlayers中使用矢量图层问题

1 个答案: