前言

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

• 屬性查詢函數：

更多詳情以及源碼見下面鏈接：

cesium結合geoserver實現地圖空間查詢(附源碼下載) － 小專欄?xiaozhuanlan.com

對本專欄感興趣的話，可以關注一波

GIS之家店鋪：GIS之家
GIS之家源碼咨詢：GIS之家webgis入門開發系列demo源代碼咨詢

總結

以上是生活随笔為你收集整理的cesium 3dtiles 加载本地数据_cesium结合geoserver实现地图空间查询(附源码下载)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。