Cesium
作为三维WebGIS
引擎目前已经被广泛使用,想要成为一名有实力的gis
开发者,有必要学习Cesium
的基本原理以及使用方法。
Cesium
开发库可以通过url
的方式引入,也可用通过npm
进行安装,本文秉着轻量化的学习方式,选择基于单html
的文件通过url
引入cesium
库的方法。当然也可以使用VUE CLI
搭建项目来构建,那样会比较复杂,本栏目旨在通过使用简单html
文件学习掌握Cesium
的常用方法,等掌握之后再构建大型应用。
Cesium
库需要Token
,所以得先去Cesium
官网注册账号,然后申请Token
,点此传送Create token
Name
,然后点击Create
即可,在左侧的表格中选中刚创建的Name
,在右侧会显示对应的Token
,将此Token
复制用于代码开发html
的方式比较简单,一个文件即可,直接上代码。注意:Cesium.Ion.defaultAccessToken = '你的Token'
这一行中需要用你刚申请的Token
替换,保存后直接用浏览器打开即可。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://cesium.com/downloads/cesiumjs/releases/1.96/Build/Cesium/Cesium.js">script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.96/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
head>
<body>
<div id="cesiumContainer" style="position:fixed;left:0px;top:0px;width:100%;height:100%;z-index:-10;">div>
<script>
// Your access token can be found at: https://cesium.com/ion/tokens.
// Replace `your_access_token` with your Cesium ion access token.
Cesium.Ion.defaultAccessToken = '你的Token';
// 设置地球的初始视角为中国,默认为美洲
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90);
// Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
const viewer = new Cesium.Viewer('cesiumContainer', {
geocoder:true, //是否显示右上角第一个位置的查找工具,默认为true
homeButton:true, //是否显示右上角第二个位置的home图标,默认为true
sceneModePicker:true, //是否显示右上角第三个位置的选择视角模式,2d,3d,默认为true
baseLayerPicker:true, //是否显示右上角第四个位置的图层选择器,默认为true
navigationHelpButton:true, //是否显示右上角第五个位置的导航帮助按钮,默认为true
animation:true, //是否显示左下角的动画器件,默认为true
timeline:true, //是否显示下方时间线,默认为true
fullscreenButton:true, //是否显示右下角全屏按钮,默认为true
vrButton:true, //是否显示右下角vr按钮,默认为false
shouldAnimate:true, //允许动画同步,默认为false
infoBox:true, //点击要素之后是否显示信息,默认为true
terrainProvider:Cesium.createWorldTerrain(), //创建世界地形,有起伏,默认为空
});
// viewer._cesiumWidget._creditContainer.style.display="none"; //取消版权信息
script>
div>
body>
html>
Token
后,用浏览器打开可见到如下图所示的界面。图中的各个按钮的显示可通过代码中对应名称的变量进行控制,true
为显示,false
为隐藏,可根据自己的需要进行调整,上述代码是为了方便展示,全部设置成true
了。infoBox
,我额外增加了一个点元素(不在上述代码中,后续在基本元素的绘制章节会说明),infoBox
为true
时点击元素就会显示对应的信息提示框。Viewer
的参数中terrainProvider:Cesium.createWorldTerrain()
没有对应的控件,此代码用来控制地形的起伏,当我们滚动鼠标将视角拉向地面时,在未设置此代码时,地形是没有起伏的,如山、峡谷等都是平的,设置后可有正常的起伏。
4. 代码中控件的显隐都在Viewer
的初始化参数中,但还有版权信息不在参数里,需单独设置,见viewer._cesiumWidget._creditContainer.style.display="none"
这一行,取消注释可隐藏版权信息。
5. 代码中除了基本的显隐控制外,还修改了Cesium
的默认视角,默认为美洲,修改后为中国,符合咱中国人的需要。
6. 最后代码中还增加了style
的控制,默认的cesium
在网页上加载出来后不是全屏(离网页两边还有一定的距离),设置后变为全屏,同时增加z-index
方便后期在视图上增加自己的控件后可以让鼠标拾取到。