geoserver服务点击某一元素显示高亮

geoserver服务点击某一元素显示高亮

针对vue结合openlayers的使用点击geoserver显示弹框文章中显示高亮的优化，弹框popup待优化

let self_map = this.map;
self_map.on("singleclick", function(evt) {
//点击只一个元素高亮
if (this._wfs_layer_) {
self_map.removeLayer(this._wfs_layer_);
}
let view = self_map.getView();
let viewResolution = view.getResolution();
let clicks = [];
self_map.forEachLayerAtPixel(evt.pixel, function(l, b) {
if (l.get("click") && l.getVisible()) {
clicks.push(l);
}
});
try {
var l = clicks.shift();
var url = l
.getSource()
.getFeatureInfoUrl(
evt.coordinate,
viewResolution,
view.getProjection(), {
INFO_FORMAT: "application/json",
}
);
axios(url).then(res => {
console.log(res)
let feature = new GeoJSON().readFeature(
res.data.features[0].geometry
);
//创建矢量图层点击样式
_wfs_source = new VectorSource();
this._wfs_layer_ = new VectorLayer({
source: _wfs_source,
style: new Style({
fill: new Fill({
//填充样式
color: "rgba(255, 255, 255, 0.2)",
}),
stroke: new Stroke({
//线样式
color: "#0099FF",
width: 3,
}),
}),
visible: true,
code: true,
zIndex: 50,
});
self_map.addLayer(this._wfs_layer_);
_wfs_source.addFeature(feature);
})
} catch (e) {
console.log("未点到数据");
//TODO handle the exception
}
})

最后

以上就是忧郁大米为你收集整理的geoserver服务点击某一元素显示高亮的全部内容，希望文章能够帮你解决geoserver服务点击某一元素显示高亮所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。