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
});

• 框選繪制查詢，cesium 沒有提供繪制工具，只能寫一個繪制矩形框選功能，獲取返回來的范圍坐標去空間范圍查詢，繪制矩形的代碼這里不貼出來，具體參照源碼 demo：

//框選查詢
$("#rect_btn").click(function(){
clearMap()
if (!drawTool) return;
drawTool.startDraw({
type: "rectangle",
style: {
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
//material:Cesium.Color.WHITE
material:Cesium.Color.fromRgba(0x67ADDFFF)
},
success: function (evt) {
//console.log('evt',evt);
var leftup = evt.leftup;
var rightdown = evt.rightdown;
//世界坐標轉地理坐標（弧度）
var leftupcartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(leftup);
var rightdowncartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(rightdown);
//console.log('leftupcartographic',leftupcartographic);
//地理坐標（弧度）轉經緯度坐標
var leftuppoint = [leftupcartographic.longitude / Math.PI * 180, leftupcartographic.latitude / Math.PI * 180];
console.log('leftuppoint',leftuppoint);
var rightdownpoint = [rightdowncartographic.longitude / Math.PI * 180, rightdowncartographic.latitude / Math.PI * 180];
console.log('rightdown',rightdown);
var extent = [leftuppoint[0].toFixed(6),leftuppoint[1].toFixed(6),rightdownpoint[0].toFixed(6),rightdownpoint[1].toFixed(6)];
var polygon = null;
if(extent && extent.length>0){
//構造polygon
polygon = '';
polygon += extent[0] + ',' + extent[1] + ' ' ;
polygon += extent[2] + ',' + extent[1] + ' ' ;
polygon += extent[2] + ',' + extent[3] + ' ' ;
polygon += extent[0] + ',' + extent[3] + ' ' ;
polygon += extent[0] + ',' + extent[1] + ' ' ;
}
console.log('polygon',polygon);
if(polygon){
queryByPolygon(polygon,'bs_spot_t',callbackLastQueryWFSService);
}
}
});
});
//清空
$("#clear_btn").click(function(){
clearMap();
});

• 屬性查詢函數：

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

GIS之家小專欄此文章

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