我正在使用openlayers 6，我的主要目标是能够绘制多个特征，然后能够单独选择每个绘制的特征，并使用不同的样式进行样式设置，我试图使用Select交互来获取选定的功能并更改其样式，它会更改，但在取消选择后，功能会返回到其主要样式，我希望样式是持久的。
以下是我取得的
<html>
<head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css"
type="text/css"
/>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
<style>
html,
body,
.map {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<input type="number" id="number" />
<script>
const mainStyle = [
new ol.style.Style({
stroke: new ol.style.Stroke({
color: "#000",
width: 2,
}),
}),
];
const selectStyle = [
new ol.style.Style({
stroke: new ol.style.Stroke({
color: "#000",
width: 2,
}),
}),
new ol.style.Style({
image: new ol.style.Circle({
radius: 5,
fill: new ol.style.Fill({
color: "#f59e0b",
}),
stroke: new ol.style.Stroke({
color: "#000",
width: 2,
}),
}),
geometry: function (feature) {
const coordinates = feature.getGeometry().getCoordinates();
return new ol.geom.MultiPoint(coordinates);
},
}),
];
var raster = new ol.layer.Tile({
source: new ol.source.OSM(),
});
var source = new ol.source.Vector({ wrapX: false });
var vector = new ol.layer.Vector({
source: source,
});
var map = new ol.Map({
layers: [raster, vector],
target: "map",
view: new ol.View({
center: [-11000000, 4600000],
zoom: 4,
}),
});
var draw = new ol.interaction.Draw({
source: source,
condition: ol.events.condition.altKeyOnly,
type: "LineString",
style: function (feature) {
if (feature.getGeometry().getType() === "LineString") {
feature.setStyle(mainStyle);
}
},
});
map.addInteraction(draw);
const select = new ol.interaction.Select({
layers: [vector],
hitTolerance: 10,
style: selectStyle,
});
map.addInteraction(select);
document.getElementById("number").addEventListener("change", (event) => {
let width = event.target.value;
let selectedFeature = select.getFeatures().array_[0];
selectedFeature.getStyle()[0].getStroke().setWidth(width);
selectedFeature.changed();
});
</script>
</body>
</html>
用null样式定义select交互，这样它就不会在select事件中设置临时样式和持久性样式
<html>
<head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css"
type="text/css"
/>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
<style>
html,
body,
.map {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<input type="number" id="number" />
<script>
const mainStyle = [
new ol.style.Style({
stroke: new ol.style.Stroke({
color: "#000",
width: 2,
}),
}),
];
const selectStyle = [
new ol.style.Style({
stroke: new ol.style.Stroke({
color: "#000",
width: 2,
}),
}),
new ol.style.Style({
image: new ol.style.Circle({
radius: 5,
fill: new ol.style.Fill({
color: "#f59e0b",
}),
stroke: new ol.style.Stroke({
color: "#000",
width: 2,
}),
}),
geometry: function (feature) {
const coordinates = feature.getGeometry().getCoordinates();
return new ol.geom.MultiPoint(coordinates);
},
}),
];
var raster = new ol.layer.Tile({
source: new ol.source.OSM(),
});
var source = new ol.source.Vector({ wrapX: false });
var vector = new ol.layer.Vector({
source: source,
});
var map = new ol.Map({
layers: [raster, vector],
target: "map",
view: new ol.View({
center: [-11000000, 4600000],
zoom: 4,
}),
});
var draw = new ol.interaction.Draw({
source: source,
condition: ol.events.condition.altKeyOnly,
type: "LineString",
style: function (feature) {
if (feature.getGeometry().getType() === "LineString") {
feature.setStyle(mainStyle);
}
},
});
map.addInteraction(draw);
const select = new ol.interaction.Select({
layers: [vector],
hitTolerance: 10,
style: null,
});
select.on('select', (event) => {
event.selected.forEach((feature) => {
feature.setStyle(selectStyle);
});
});
map.addInteraction(select);
</script>
</body>
</html>