Question

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

我从marker-component发送特征，执行map-component：

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);
  }

Console.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

Answer 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
      });
    }
  }

聚类标记在openlayers 5角上的异步数据

1 个答案: