在 openlayers 5 角度聚类标记异步数据答案

【问题标题】：Clustering markers async data at openlayers 5 angular在 openlayers 5 角度聚类标记异步数据
【发布时间】：2019-10-01 15:35:27
【问题描述】：

当我使用模拟数据时，我在本地项目上看到了标记，但不幸的是，当我从后端获取数据时看不到它们。例外是当我从后端获得一个标记时，他会出现在地图上。

我从标记组件发送特征做地图组件：

ngOnInit(): void {
    this.initMarker();
    console.log("#! MARKER INIT");
  }

  ngAfterContentInit() {
    this.setStyle();
  }

  initMarker() {
    const { longitude, latitude } = this.coordinates;
    const coordinates = [longitude, latitude];

    this.marker = new Feature({
      geometry: new Point(fromLonLat(coordinates)),
      coordinates: coordinates,
      data: this.data,
      selected: false,
      name: this.data.type
    });
  }`enter code here`

  setStyle() {
    const markerStyle = this.mMarkerStyleComponent.markerStyle;
    this.marker.setStyle(markerStyle);
    this.mapService.setMarker(this.marker);
  }

在地图组件中：

 private subscribeMarkerLayerChange(): void {
    this.subscriptions.add(
      this.mapService.markerChanges$.subscribe(resp => {
        this.addMarkerLayers(resp);
      })
    );
  }

  private addMarkerLayers(feature: Feature) {
    const allMapLayersCollection = this.map.getLayers();
    allMapLayersCollection.forEach(existingLayer => {
      if (existingLayer && existingLayer.get('name') === 'MARKERS') {
        const layersMarkersCollection = existingLayer.getLayers();
        layersMarkersCollection.forEach(layerType => {
          if (layerType && layerType.get('vectorType') === 'MARKERS') {
            const cluster = layerType.getSource();
            const vectorSource = cluster.getSource();
            vectorSource.addFeature(feature);
            console.log('# cluster.getFeatures()', cluster.getFeatures());
          }
        });
      }
    });
  }

   private addMarkersLayer() {
    var vectorSource = new VectorSource({ features: [] });

    var clusterSource = new Cluster({
      distance: 40,
      source: vectorSource,
      clusterType: 'MARKERS'
    });

    const styleCache = {};
    const vectorLayer = new VectorLayer({
      vectorType: 'MARKERS',
      source: clusterSource,
      style: function(feature) {
        console.log('# INIT feature');
        const size = feature.get('features').length;
        let style = styleCache[size];
        if (!style) {
          style = new Style({
            image: new Circle({
              radius: 10,
              stroke: new Stroke({
                color: '#fff'
              }),
              fill: new Fill({
                color: '#3399CC'
              })
            }),
            text: new Text({
              text: size.toString(),
              fill: new Fill({
                color: '#fff'
              })
            })
          });
          styleCache[size] = style;
        }
        return style;
      }
    });

    const markersGroup = new LayerGroup({
      layers: [vectorLayer],
      name: 'MARKERS',
      id: constants.MARKERS.id
    });
    const layersCollection = this.map.getLayers();
    layersCollection.insertAt(this.map.get('id'), markersGroup);
  }

控制台.log 本地模拟：

# cluster.getFeatures() (2) [Feature, Feature]
# cluster.getFeatures() (3) [Feature, Feature, Feature]
# cluster.getFeatures() (4) [Feature, Feature, Feature, Feature]
# cluster.getFeatures() (5) [Feature, Feature, Feature, Feature, Feature]

从后端异步（构建）

# cluster.getFeatures() (2) [e, e]
# cluster.getFeatures() (2) [e, e]
# cluster.getFeatures() (2) [e, e]
# cluster.getFeatures() (2) [e, e]
# cluster.getFeatures() (3) [e, e, e]
# cluster.getFeatures() (4) [e, e, e, e]
# cluster.getFeatures() (4) [e, e, e, e]
# cluster.getFeatures() (9) [e, e, e, e, e, e, e, e, e]

console log # INIT feature

【问题讨论】：

标签： angular7 openlayers-5

【解决方案1】：

解决方案：当来自后端的至少一个标记的纬度和经度为空时，没有错误，但标记没有显示这就是我很难找到的原因。

我添加了 if 语句 if (longitude && latitude) 并且它有效。

  initMarker() {
    const { longitude, latitude } = this.coordinates;

    if (longitude && latitude) {
      const coordinates = [longitude, latitude];

      this.marker = new Feature({
        geometry: new Point(fromLonLat(coordinates)),
        coordinates: coordinates,
        data: this.data,
        selected: false,
        name: this.data.type
      });
    }
  }

【讨论】：