如何向OpenLayers的VectorTileSource中添加GeoJSON格式要素

核心问题说明 #

OpenLayers 的 VectorTileSource 原生不支持直接通过配置项传入静态 features 实现本地要素加载，你当前代码里给 VectorTileSource 加 features 参数的写法不会生效。如果没有必须使用矢量瓦片的强需求，直接改用普通矢量数据源 VectorSource 是成本最低的实现方案；如果确实需要保留 VectorTileSource（比如还要同时加载后端返回的 MVT 瓦片），可以通过自定义瓦片加载函数注入本地要素。

方案1：改用 VectorSource 实现（推荐，适配90%以上场景） #

如果你不需要加载后端的 MVT 瓦片，只是要渲染本地 keygridsAsGeoJSON 里的要素，直接把矢量瓦片图层替换为普通矢量图层即可，修改后代码如下：

调整后的 code1

import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';

// 方法名可以按需保留或者修改
public visualisePolygonsOnMapWithColors(map, arrayOfPolygonsAsGeoJSON, fillColor, strokeColor, text) {
    const features = [];
    arrayOfPolygonsAsGeoJSON.forEach(function(geojson) {
        const geometry = new GeoJSON().readGeometry(geojson, {
            dataProjection: 'EPSG:4326',
            featureProjection: map.getView().getProjection()
        });
        // 可以顺便把样式属性存在feature上，方便后续统一用样式函数处理
        const feature = new Feature(geometry);
        feature.set('fillColor', fillColor);
        feature.set('strokeColor', strokeColor);
        features.push(feature);
    });
    const vectorLayer = new VectorLayer({
        source: new VectorSource({
            features: features
        }),
        style: function(feature) {
            return new Style ({
                fill: new Fill({
                    color: feature.get('fillColor')
                }),
                stroke: new Stroke({
                    color: feature.get('strokeColor'),
                    width: 3
                })
            })
        }
    });
    return vectorLayer;
}

优化后的 code2

你原来的代码循环每次新建图层，性能很差，调整为一次性处理所有要素再添加单个图层：

// 先收集所有要素
const allFeatures = [];
for (let i = 0; i < this.keygridsAsGeoJSON.length; i++) {
    const geometry = this.keygridsAsGeoJSON[i]['features'][0]['geometry'];
    let fillColor;
    const coverage = this.areaOfCoveragePerWindowSegment[i];
    if (coverage >= 0 && coverage <=9) {
        fillColor = AreaOfCoverageColorEnum2.WHITE_0;
    } else if(coverage >= 10 && coverage <=19) {
        fillColor = AreaOfCoverageColorEnum2.WHITE_1;
    } else if(coverage >= 20 && coverage <=29) {
        fillColor = AreaOfCoverageColorEnum2.WHITE_2;
    }
    // 转成OpenLayers要素
    const olGeometry = new GeoJSON().readGeometry(geometry, {
        dataProjection: 'EPSG:4326',
        featureProjection: this.map.getView().getProjection()
    });
    const feature = new Feature(olGeometry);
    feature.set('fillColor', fillColor);
    feature.set('strokeColor', GridCellsColorEnum.RED);
    allFeatures.push(feature);
}
// 一次性创建图层添加到地图
const vectorSource = new VectorSource({features: allFeatures});
const vectorLayer = new VectorLayer({
    source: vectorSource,
    style: feature => new Style({
        fill: new Fill({color: feature.get('fillColor')}),
        stroke: new Stroke({color: feature.get('strokeColor'), width: 3})
    })
});
this.openLayersAPIService.addLayerToMap(this.map, vectorLayer);

// 后续如果要加新要素，直接调用addFeatures即可
// vectorSource.addFeatures(newFeaturesArray);

方案2：保留 VectorTileSource 实现 #

如果确实需要同时加载后端 MVT 瓦片和本地要素，通过自定义 tileLoadFunction 把本地要素注入到瓦片里即可，示例代码如下：

public visualisePolygonsAsMVTTilesOnMapWithColors(map, arrayOfPolygonsAsGeoJSON, fillColor, strokeColor, text) {
    // 先处理好本地要素
    const localFeatures = [];
    arrayOfPolygonsAsGeoJSON.forEach(function(geojson) {
        const geometry = new GeoJSON().readGeometry(geojson, {
            dataProjection: 'EPSG:4326',
            featureProjection: map.getView().getProjection()
        });
        localFeatures.push(new Feature(geometry));
    });

    const vectorTileSource = new VectorTileSource({
        format: new MVT({featureClass: Feature}),
        url: "http://127.0.0.1:5000/mvtTilesForVectorLayerSource/{z}/{x}/{y}",
        tileLoadFunction: function(tile, url) {
            // 先加载原本的MVT瓦片
            tile.setLoader(function(extent, resolution, projection) {
                fetch(url)
                    .then(response => response.arrayBuffer())
                    .then(data => {
                        // 解析后端返回的瓦片要素
                        const mvtFormat = new MVT({featureClass: Feature});
                        const mvtFeatures = mvtFormat.readFeatures(data, {
                            extent: extent,
                            featureProjection: projection
                        });
                        // 筛选出落在当前瓦片范围内的本地要素
                        const tileLocalFeatures = localFeatures.filter(feature => {
                            return feature.getGeometry().intersectsExtent(extent);
                        });
                        // 合并两类要素赋值给瓦片
                        tile.setFeatures([...mvtFeatures, ...tileLocalFeatures]);
                    })
            })
        }
    });

    const vectorTileLayer = new VectorTileLayer({
        source: vectorTileSource,
        style: new Style ({
            fill: new Fill({color: fillColor}),
            stroke: new Stroke({color: strokeColor, width: 3})
        })
    });
    return vectorTileLayer;
}

内容的提问来源于stack exchange，提问作者Amrmsmb