javascript - OpenLayers 在运行时改变特征的颜色

Question

我使用 OpenLayers v6.3.1，包括以下样式表和脚本：Scriptfile , Stylesheet

目标：

我的目标是使用 javascript 在运行时更改功能 (LineString) 的颜色。

设置：

我主要使用了这个网站的代码：OpenLayers

var map = new ol.Map({
            target: 'map', //<div id="map"></div>
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [11.592581, 47.241524],
                zoom: 15
            })
        });

在这段代码中，我在两个坐标之间创建了一条线：

    var lonlat1 = [11.592581, 47.241524];
    var lonlat2 = [11.58554, 47.248958];
    //create the line's style
    var lineStyle = [
        // linestring
        new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: '#000',
                width: 2
            })
        })
    ];

    //create the line       
    var line = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: [
                new ol.Feature({
                    geometry: new ol.geom.LineString([lonlat1, lonlat2])
                })
            ]
        }),
        style: lineStyle
    });
    map.addLayer(line);

这给了我这张地图：

我想在运行时更改线条的颜色。

到目前为止我尝试了什么： 我尝试使用以下代码更改颜色：

line.style_[0].stroke_.color_ = '#123';

颜色的值确实发生了变化，但线条本身的颜色保持不变。

Answer 1

好的，我想通了。可以使用作为 line 对象一部分的 setStyle() 函数更改样式。

line.setStyle([
    new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: '#123',
            width: 2
         })
     })
 ]);

这绝对不是最好的解决方案，所以我愿意接受更好的解决方案。