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"

效果如下:
在这里插入图片描述
在这里插入图片描述

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值