Search code examples
javascriptgeospatialopenlayers

Add Openlayers points to map as single layer


  plotBaseLayer (data) {
    this.setState({ data: data })

    const baseFeatures = []
    let baseLayer = Object()

    Object.keys(data.features).forEach((key) => {
      const basePoints = new olFeature({
        geometry: new olGeomPoint(olProj.transform(
          [data.features[key].geometry.coordinates[0], data.features[key].geometry.coordinates[1]],
          'EPSG:4326', MapHandler.map.getView().getProjection().getCode())
        )
      })

      baseFeatures.push(basePoints)
      const vectorSource = new olSourceVector()

      vectorSource.addFeature(basePoints)
      baseLayer = new olLayerVector({ source: vectorSource })

      this.map.addLayer(baseLayer)
    })
  }

Currently I am adding each point to a feature and individually adding that feature to the map as an individual layer. How may I structure my code and/or make use of alternative Openlayers functionality in order to plot all of the points as a single layer? Thanks for looking!


Solution

  • Is this maybe working?

     plotBaseLayer(data) {
        this.setState({
            data: data
        })
        const baseFeatures = []
        let baseLayer = Object()
        Object.keys(data.features).forEach((key) => {
                const basePoints = new olFeature({
                        geometry: new olGeomPoint(olProj.transform(
                                [data.features[key].geometry.coordinates[0], data.features[key].geometry.coordinates[1]],
                                'EPSG:4326', MapHandler.map.getView().getProjection().getCode()))
                    })
                    baseFeatures.push(basePoints)
        })
    
        const vectorSource = new ol.source.Vector({
           features: baseFeatures
        });
    
    
        baseLayer = new olLayerVector({
                source: vectorSource
        })
        this.map.addLayer(baseLayer)
     }