Question

我将我的地图游戏从OpenLayers 3和Dojo移植到Angular和OpenLayers 4.但是地图并没有显示我通过ol.format.TopoJSON填充到矢量图层的任何矢量数据

地图：

this.map = new ol.Map({
  layers: [
    this.vectorLayer,
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([19, 48]),
    extent: [-9999999999, -20920774, 99999999999, 18800987],
    zoom: 5,
    maxZoom: 11,
    minZoom: 3
  })
});

矢量图层：

this.vectorLayer = new ol.layer.Vector({
  updateWhileAnimating: true,
  updateWhileInteracting: true,
  source: new ol.source.Vector({
    loader: function () {
      http.get(topoJsonUrl)
        .subscribe(data => self.setupData(data));
    }
  }),
  style: function (feature) {
    return self.fillCountry(true);
  }
});

数据准备：

setupData(data): void {
  let features = this.dataFormat.readFeatures(data);
  this.vectorLayer.getSource().addFeatures(features);  
}

dataFormat = new ol.format.TopoJSON({defaultDataProjection: 'EPSG:3857'});

fillCountry(simple): any {
  let color = 'rgba(255, 255, 255, 0.2)';
  let stroke = 'rgba(255,255,255, 1)';
  if (simple) {
    color = '#FFF8E1';
    stroke = 'rgba(0,0,0, 1)';
  }
  const s = new ol.style.Style({
    fill: new ol.style.Fill({
      color: color
    }),
    stroke: new ol.style.Stroke({
      color: stroke,
      width: 0.4
    })
  });
  return s;
}

地图在ngOnInit()中获取目标。

当我尝试添加像

这样的示例源时

this.vectorSource = new ol.source.Vector({
  url: 'https://openlayers.org/en/v4.6.5/examples/data/geojson/countries.geojson',
  format: new ol.format.GeoJSON()
});

地图工作正常。此外，当我使用调试控制台this.map.getLayers().getArray()[0].getSource().getFeatures()加载地图后，我在源代码中查找我的TopoJSON功能时，我看到所有功能都已加载（因此看起来它们已被加载和解析更正），但看不到任何内容。

认为异步数据加载可能存在问题，但是通过addFeatures()将功能添加到矢量图层中，所以我假设它采用了正确的方法。

OpenLayers 4不会显示矢量图层

0 个答案: