openlayers6結合geoserver實現地圖屬性查詢(附源碼下載)

前言

以前寫過一篇 openlayers4 版本的地圖屬性查詢文章，可是因爲是封裝一層 js 代碼寫的，不少初學者看起來比較有點吃力，因此本篇文章從新寫一篇地圖屬性查詢文章，直接基於最新版本 openlayers6 寫的，純粹 html + js + css形式，沒有任何封裝。

內容概覽

1.基於 openlayers6 實現地圖屬性查詢
2.源代碼 demo 下載

效果圖以下：

具體實現過程

• html 樣式

html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
.ol-popup {
position: absolute;
background-color: white;
-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
padding: 15px;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 12px;
left: -50px;
min-width: 280px;
}
.ol-popup:after, .ol-popup:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.ol-popup:after {
border-top-color: white;
border-width: 10px;
left: 48px;
margin-left: -10px;
}
.ol-popup:before {
border-top-color: #cccccc;
border-width: 11px;
left: 48px;
margin-left: -11px;
}
.ol-popup-closer {
text-decoration: none;
position: absolute;
top: 2px;
right: 8px;
}
.ol-popup-closer:after {
content: "✖";
}

• 矢量圖層默認樣式以及高亮樣式

//繪製geojson矢量圖層樣式
var geoJsonStyle = new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#e6d933',
lineDash: [4],
width: 3
}),
fill: new ol.style.Fill({
color: 'rgba(255, 255, 0, 0.1)'
})
});
//繪製geojson矢量圖層高亮樣式
var geoJsonHLightStyle = new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#33CCFF',
lineDash: [4],
width: 3
}),
fill: new ol.style.Fill({
color: 'rgba(255, 255, 0, 0.1)'
})
});

• 建立矢量圖層以及地圖底圖

var geojsonLayer = new ol.layer.Vector({
source: new ol.source.Vector(),
style: geoJsonStyle
});
var layers = [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
/*new ol.layer.Tile({
source: new ol.source.TileArcGISRest({
url: 'https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer'
})
}),*/
geojsonLayer
];

• 建立地圖

var map = new ol.Map({
layers: layers,
overlays: [overlay],
target: 'map',
view: new ol.View({
projection: 'EPSG:4326',
center: [104.114129, 37.550339],
zoom: 4
})
});

• 監聽地圖鼠標移動事件，設置選擇矢量圖層要素高亮以及彈出氣泡窗口效果

//監聽地圖鼠標移動事件
map.on('pointermove',function(e) {
if (e.dragging) {
return;
}
var feature =map.forEachFeatureAtPixel(e.pixel,
function(feature) {
return feature;
});
//console.log('feature',feature);
if(feature==undefined){//捕捉不到矢量數據，設置矢量圖層默認樣式
geojsonLayer.getSource().forEachFeature(function(feature) {
feature.setStyle(geoJsonStyle);
});
//隱藏氣泡窗口
overlay.setPosition(undefined);
closer.blur();
}else{//捕捉到矢量數據，設置矢量圖層高亮樣式
feature.setStyle(geoJsonHLightStyle);
//彈出氣泡窗口
var coordinate = e.coordinate;
content.innerHTML = '圖斑編號:'+feature.values_.map_num+'</br>圖斑描述:'+feature.values_.description;
overlay.setPosition(coordinate);
}
})

• 屬性查詢核心函數

var geoserverUrl = 'http://localhost:8080/geoserver/GIS';
/*屬性查詢圖層
*@method queryByProperty
*@param propertyValue 屬性值
*@param propertyName 屬性名稱
*@param typeName 圖層名稱
*@return null
*/
function queryByProperty(propertyValue, propertyName, typeName, callback){
var filter =
'<Filter xmlns="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml">';
……

完整demo源碼見小專欄文章尾部：GIS之家openlayers小專欄

文章尾部提供源代碼下載，對本專欄感興趣的話，能夠關注一波