cesium加載地圖

進行三維地圖顯示,需要的環境有,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"

效果如下:
在這裏插入圖片描述
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章