進行三維地圖顯示,需要的環境有,jdk、tomcat、cesium,jdk、tomcat的安裝與環境配置請自行百度,cesium的下載地址爲:https://cesiumjs.org/。
開發編譯器選擇:idea
1、新建Javaee工程,如下
工程創建完畢後,web文件夾下粘貼Cesium文件夾,路徑爲Cesium-1.58\Build\Cesium。
然後創建地圖顯示jsp頁面,打開index.jsp,分別寫入代碼:
<style>
@import url(Cesium/Widgets/widgets.css);
html, body, #cesiumContainer {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
}
</style> <div id="cesiumContainer"></div>
<script>
var viewer = new Cesium.Viewer('cesiumContainer');
</script>
如下圖:
運行以後如下圖,程序完成。
設置顯示的範圍與視角, 對camera進行設置,我們就可以定義初始化時的鏡頭、視角~下面這段代碼就是將鏡頭定位在經緯度爲(111.07,39.05)的地方,高度爲1萬公里,下面的heading、pitch和roll就是鏡頭相對於xyz軸的角度,比如pitch爲-90°而另外兩個爲0時,就是90°向下俯視地球。 添加代碼:
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(111.07, 39.05, 10000),
orientation: {
heading : Cesium.Math.toRadians(0),
pitch : Cesium.Math.toRadians(-90),
roll : Cesium.Math.toRadians(0)
}})
效果如下:
去除界面的其他按鈕,代碼如下:
var viewer = new Cesium.Viewer( 'cesiumContainer', {
animation : false,//是否創建動畫小器件,左下角儀表
baseLayerPicker : false,//是否顯示圖層選擇器
fullscreenButton : false,//是否顯示全屏按鈕
geocoder : false,//是否顯示geocoder小器件,右上角查詢按鈕
homeButton : false,//是否顯示Home按鈕
infoBox : false,//是否顯示信息框
sceneModePicker : false,//是否顯示3D/2D選擇器
selectionIndicator : false,//是否顯示選取指示器組件
timeline : false,//是否顯示時間軸
navigationHelpButton : false,//是否顯示右上角的幫助按鈕
} );
效果如下:
//去除logo水印
viewer._cesiumWidget._creditContainer.style.display="none"
效果如下: