Vue结合openlayer加载geoserver图层(imageWms)的弹框
geoserver中imageWMS添加popup弹框
查看图片图层包含的图块信息:
- 弹窗;
<div id="popup" class="ol-popup">
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup-content">
<div class="propertyList" id="propertyList">
</div>
<div id="mychart" ref="mychart" style="width: 250px;height:200px;"></div>
</div>
</div>
- 添加基础地图,以及点击图块的样式
//弹框
let container = document.getElementById('popup');
this.content = document.getElementById('popup-content');
this.closer = document.getElementById('popup-closer');
this.propertyList = document.getElementById('propertyList');
this.overlay = new Overlay({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 250,
},
})
let content = this.content
let closer = this.closer
let overlay = this.overlay
closer.onclick = function() {
overlay.setPosition(undefined);
closer.blur();
_wfs_source.clear();
return false;
};
//基础地图
this.map = new Map({
target: "map",
overlays: [overlay],
interactions: new defaults({
doubleClickZoom: false,
}).extend([new DragRotateAndZoom()]),
layers: [
new TileLayer({
source: new TileArcGISRest({
url: 'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer'
}),
// zIndex: 1
})
],
view: new View({
projection: "EPSG:4326", //使用这个坐标系
center: [108.236, 36.438], //西安
zoom: 7.5
})
});
//创建矢量图层点击样式
this._wfs_source = new VectorSource();
let _wfs_source = this._wfs_source
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,
});
this.map.addLayer(this._wfs_layer_);
- 点击图块获取属性;
// 地图中点击获取属性
self_map.on("singleclick", function(evt) {
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(data => {
console.log(data.data.features[0].properties.Code)
// 获取的矢量的属性
let property = data.data.features[0].properties;
closer.click();
// 给选中的区域添加边界
let feature = new GeoJSON().readFeature(
data.data.features[0].geometry
);
_wfs_source.addFeature(feature);
/***添加完成***/
// 获取点击图层某处地区的code
let resdata = JSON.parse(sessionStorage.getItem('resdata'));
resdata.code = property.Code;
let innerhtml = "111111111111111111111111";
_this.propertyList.innerHTML = innerhtml;
overlay.setPosition(evt.coordinate);
}).catch(err => {
console.log(err)
});
} catch (e) {
console.log("未点到数据");
}
});