前言
之前寫過一篇 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小專欄
文章尾部提供源代碼下載，對本專欄感興趣的話，可以關注一波
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/2305.html
標籤：GIS
上一篇：Cesium坐標系及坐標轉換詳解