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

前言

cesium 官網的api文檔介紹地址cesium官網api，里面詳細的介紹 cesium 各個類的介紹，還有就是在線例子：cesium 官網在線例子，這個也是學習 cesium 的好素材。

內容概覽

1.cesium 結合 geoserver 實現地圖屬性查詢
2.源代碼 demo 下載

效果圖如下：

實現思路：首先利用 geoserver 發布的圖斑 WFS 服務，通過 url 的 rest 請求，構造屬性查詢形式，獲取 geojson 數據源；然后調用cesium api 的 Cesium.GeoJsonDataSource.load 加載 geojson 數據源渲染展示；最后監聽地圖點擊事件，獲取矢量數據的屬性，顯示在右上角的信息窗口。

• 地圖初始化創建：

var viewer = new Cesium.Viewer('map', {
geocoder: false,
homeButton: false,
sceneModePicker: false,
fullscreenButton: false,
vrButton: false,
baseLayerPicker: false,
infoBox: false,
selectionIndicator: false,
animation: false,
timeline: false,
shouldAnimate: true,
navigationHelpButton: false,
navigationInstructionsInitiallyVisible: false,
imageryProvider: image_Source
});

• 界面的查詢按鈕點擊：

$("#research_btn").click(function(){
var keyword = $("#textName").val();
//queryByProperty('201911_440114_0093','map_num','bs_spot_t',callbackLastQueryWFSService);
queryByProperty(keyword,'map_num','bs_spot_t',callbackLastQueryWFSService);
});

• 屬性查詢函數：

var geoserverUrl = 'http://localhost:8080/geoserver/ZKYGIS';
/*屬性查詢圖層
*@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">';
……

更多詳情見下面鏈接文章：

GIS之家小專欄此文章

文章提供源碼，對本專欄感興趣的話，可以關注一波