cesium 官網的api文檔介紹地址cesium官網api,裏面詳細的介紹 cesium 各個類的介紹,還有就是在線例子:cesium 官網在線例子,這個也是學習 cesium 的好素材。git
1.cesium 結合 geoserver 實現地圖空間查詢
2.源代碼 demo 下載json
效果圖以下:api
實現思路:首先利用 geoserver 發佈的圖斑 WFS 服務,經過 url 的 rest 請求,構造空間查詢形式,獲取 geojson 數據源;而後調用cesium api 的 Cesium.GeoJsonDataSource.load 加載 geojson 數據源渲染展現;最後監聽地圖點擊事件,獲取矢量數據的屬性,顯示在右上角的信息窗口。ide
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 });
//框選查詢 $("#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(); });
更多詳情見下面連接文章:函數
文章提供源碼,對本專欄感興趣的話,能夠關注一波學習