繁体   English   中英

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

[英]OpenLayers change color of feature on runtime

我使用 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);

这给了我这个 map: 地图

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

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

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

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

好的,我想通了。 可以使用 setStyle() function 更改样式,它是 object 行的一部分。

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

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM