admin管理员组文章数量:1650772
效果图：
在线预览：
WebGIS之家WebGIS之家,openlayers示例源码，cesium示例源码,openlayers在线调试预览,cesium在线调试预览,webgis,数字地球,数字孪生https://www.webgishome/preview?id=55&example_name=style2&title=%E6%A0%B7%E5%BC%8F2
方式一：
geojson数据：
geojsonData: {
type: "FeatureCollection",
features: [
{
type: "Feature",
properties: {
name: "地块1",
style: {
fill: {
color: "rgba(255,255,0,0.2)",
},
stroke: {
color: "rgba(255,255,0,0.6)",
},
},
},
geometry: {
type: "MultiPolygon",
coordinates: [
[
[
[104.29969588135856, 30.526679760778393],
[104.29992193015403, 30.526209817229756],
[104.29919619454733, 30.526001614391873],
[104.29897609440422, 30.52647750659287],
[104.29969588135856, 30.526679760778393],
],
],
],
},
}
],
},使用：
this.map = new Map({
target: "map",
layers: [
new VectorLayer({
name: "dk",
source: new VectorSource({
features: new GeoJSON().readFeatures(this.geojsonData),
}),
style: function (feature) {
return new Style({
fill: new Fill({
color: feature.get("style").fill.color,
}),
stroke: new Stroke({
color: feature.get("style").stroke.color,
width: 3,
}),
text: new Text({
textAlign: "center",
textBaseline: "middle",
font: "bold 18px 微软雅黑",
text: `${feature.get("name")}`,
fill: new Fill({ color: "#00FFFF" }),
stroke: new Stroke({ color: "#353535", width: 1 }),
}),
});
},
zIndex: 999,
}),
],
view: new View({
projection: "EPSG:4326",
center: [104.29806, 30.5263],
zoom: 18,
}),
});方式二：
通过feature.setStyle()设置样式，通过feature.getStyle()获取样式
feature.setStyle(() => {
return new Style({
stroke: new Stroke({
color: "#07B9EE",
lineDash: [7, 10],
width: 2
})
})
})版权声明：本文标题：Openlayer中给feature设置不同的样式 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1729531669a1204886.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论