0

as shown in code2, i have keygridsAsGeoJSON which contains coordinates of some features as geojson.in code1 i am using VectorTileLayer and VectorTileSource. the problem i have now is, i would like to add the features in the array keygridsAsGeoJSON to the VectorTileSource. i have googled some questions and articles, but unfortunately i could not find any example that demonstrate how to features can be added to VectorTileSource

please let me know how can i achieve that.

code1:

public visualisePolygonsAsMVTTilesOnMapWithColors(map,arrayOfPolygonsAsGeoJSON,fillColor,strokeColor,text){
    var features = [];
    arrayOfPolygonsAsGeoJSON.forEach(function(geojson) {
        var geometry = new GeoJSON().readGeometry(geojson, {
        dataProjection: 'EPSG:4326',
        featureProjection: map.getView().getProjection()
        });
        features.push(new Feature(geometry));
      });

       var vectorTile = new VectorTileLayer({
        source: new VectorTileSource({
            format: new MVT({featureClass: Feature}),//<===================
            url: "http://127.0.0.1:5000/mvtTilesForVectorLayerSource/{z}/{x}/{y}",
             features: features,
            featureClass: Feature //<===================
        }),
        style: new Style ({
                  fill: new Fill({
                      color: fillColor
                      }),
                      stroke: new Stroke({
                          color: strokeColor,                   
                          width: 3
                      })                                
                  })
      });
    return vectorTile;
    }

code2:

    for (let i = 0;i <this.keygridsAsGeoJSON.length;i++) {
    
    if (this.areaOfCoveragePerWindowSegment[i] >= 0 && this.areaOfCoveragePerWindowSegment[i] <=9) {
        this.vectorLayer = this.openLayersAPIService.visualisePolygonsAsMVTTilesOnMapWithColors(this.map,[this.keygridsAsGeoJSON[i]['features'][0]['geometry']],AreaOfCoverageColorEnum2.WHITE_0,GridCellsColorEnum.RED,text)
        this.openLayersAPIService.addLayerToMap(this.map, this.vectorLayer)
    } else if(this.areaOfCoveragePerWindowSegment[i] >= 10 && this.areaOfCoveragePerWindowSegment[i] <=19) {
        this.vectorLayer = this.openLayersAPIService.visualisePolygonsAsMVTTilesOnMapWithColors(this.map,[this.keygridsAsGeoJSON[i]['features'][0]['geometry']],AreaOfCoverageColorEnum2.WHITE_1,GridCellsColorEnum.RED,text)
        this.openLayersAPIService.addLayerToMap(this.map, this.vectorLayer)
    } else if(this.areaOfCoveragePerWindowSegment[i] >= 20 && this.areaOfCoveragePerWindowSegment[i] <=29) {
        this.vectorLayer = this.openLayersAPIService.visualisePolygonsAsMVTTilesOnMapWithColors(this.map,[this.keygridsAsGeoJSON[i]['features'][0]['geometry']],AreaOfCoverageColorEnum2.WHITE_2,GridCellsColorEnum.RED,text)
        this.openLayersAPIService.addLayerToMap(this.map, this.vectorLayer)
        }
    }
JGH
  • 15,928
  • 4
  • 31
  • 48
Amrmsmb
  • 1
  • 27
  • 104
  • 226
  • A VectorTileSource does not have features, the features are in the tiles. – Mike Nov 16 '21 at 12:31
  • @Mike how can i add different color to every tile/feature? – Amrmsmb Nov 16 '21 at 12:36
  • 1
    Instead of the single style the layer would need a style function which styles features with an appropriate color. – Mike Nov 16 '21 at 12:49
  • @Mike would you please provide an example? – Amrmsmb Nov 16 '21 at 12:53
  • Something like https://openlayers.org/en/latest/examples/osm-vector-tiles.html where features are styled based on a property of the feature and optionally the view resolution. You could calculate the tile the feature is in from its extent and the resolution. – Mike Nov 16 '21 at 13:02

0 Answers0