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);
这给了我这张地图:
我想在运行时更改线条的颜色。
到目前为止我尝试了什么:
我尝试使用以下代码更改颜色:
line.style_[0].stroke_.color_ = '#123';
颜色的值确实改变了,但线条本身的颜色保持不变。
好的,我明白了。可以使用线对象中的 setStyle() 函数更改样式。
line.setStyle([
new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#123',
width: 2
})
})
]);
这绝对不是最好的解决方案,所以我愿意接受更好的解决方案。
我使用的是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';
颜色的值确实改变了,但线条本身的颜色保持不变。
好的,我明白了。可以使用线对象中的 setStyle() 函数更改样式。
line.setStyle([
new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#123',
width: 2
})
})
]);
这绝对不是最好的解决方案,所以我愿意接受更好的解决方案。