每次添加功能更改颜色时都会打开层

时间:2018-03-18 14:37:45

标签: javascript openlayers openlayers-3

我有这个功能

 addRoutes(geoJson:{}) {
    let format = new OlFormatGeoJSON({
        featureProjection:"EPSG:3857"
    });

    this._vectorSource.addFeatures(format.readFeatures(geoJson));

    let vectorLayer = new OlVector({
        source: this._vectorSource,
        style: new OlStyle({
            stroke: new OlStyleStroke({
                color: "#"+((1<<24)*Math.random()|0).toString(16),
                width: 10
            })
        })
    });

    this.map.addLayer(vectorLayer);
}

我将具有feature的geojson传递给此函数。我多次调用此功能。 我想为每个功能生成随机颜色。当我使用此功能时,颜色是随机生成的,但所有功能都具有相同的颜色。

我需要使用vectorSource变量来搜索所有功能等。

有没有办法告诉openlayers为我添加的每个功能生成颜色?

1 个答案:

答案 0 :(得分:0)

更好的方法是循环功能集合并为每个功能设置样式。然后将这些功能添加到一个图层。并且您似乎没有使用纯粹的openlayers,因此未对代码段进行测试,Official document可能会有所帮助。

addRoutes(geoJson: {}) {
    let format = new OlFormatGeoJSON({
        featureProjection: "EPSG:3857"
    });

    let features = format.readFeatures(geoJson)
    features.forEach(f => {
        f.setStyle(new OlStyle({
            stroke: new OlStyleStroke({
                color: "#" + ((1 << 24) * Math.random() | 0).toString(16),
                width: 10
            })
        }))
    })

    this._vectorSource.addFeatures(features);

    let vectorLayer = new OlVector({
        source: this._vectorSource,
    });

    this.map.addLayer(vectorLayer);
}