参考文章:
vue2 使用 cesium 篇【第一篇】
vue2 使用 cesium 【第二篇-相机视角移动+添加模型】
vue2 项目模版:
vue2-common
安装 cesium
npm install cesium --save
这个就很简单,只需要一句简简单单的命令就可以实现在 vue 项目中安装 cesium 了。
这个样子嘞,就是安装完成了,会开发 vue 的都晓得哈。
看一下依赖包里面,也成功下载了 cesium 的依赖。
接入项目 cesium
node_modules
中找到cesium
,复制build
文件夹下Cesium
文件夹到public
文件夹下。复制完后就是下图
好的第一步完成!
然后第二步,在项目 index.html 文件中,head 标签里面,引入 cesium 的全局样式和cesium 源码。
<link rel="stylesheet" href="./Cesium/Widgets/widgets.css">
<script type="text/javascript" src="./Cesium/Cesium.js"></script>
就是下面这个样子哈。
好的,完成之后我们重新启动一下项目,记得哈,重启一下项目!
使用 cesium
vue文件中 粘贴代码
<template><div id="my-map"></div>
</template><script>export default {name: "HomeView",};
</script><style scoped>
#my-map {width: 100%;height: 100%;background-color: black;
}
</style>
随后刷新页面,得到一个黑色的页面
非常好,效果出来了,到现在还没有用到一点儿的 cesium 别急,下面开始哈。
我们写一个 init() 方法,然后在 init() 方法里面呢,实现把这个 div 渲染成一个蓝星。
init() {this.viewer = new Cesium.Viewer('my-map', {homeButton: false,sceneModePicker: false,baseLayerPicker: false, // 影像切换animation: true, // 是否显示动画控件infoBox: false, // 是否显示点击要素之后显示的信息selectionIndicator: false, // 要素选中框geocoder: false, // 是否显示地名查找控件timeline: true, // 是否显示时间线控件fullscreenButton: false,shouldAnimate: false,navigationHelpButton: false, // 是否显示帮助信息控件});}
完成!蓝星加载出来了!
到此处完整vue代码
<template><div id="my-map"></div>
</template><script>export default {name: "HomeView",methods: {init() {this.viewer = new Cesium.Viewer("my-map", {homeButton: false,sceneModePicker: false,baseLayerPicker: false, // 影像切换animation: true, // 是否显示动画控件infoBox: false, // 是否显示点击要素之后显示的信息selectionIndicator: false, // 要素选中框geocoder: false, // 是否显示地名查找控件timeline: true, // 是否显示时间线控件fullscreenButton: false,shouldAnimate: false,navigationHelpButton: false, // 是否显示帮助信息控件});},},mounted() {this.init();},};
</script><style scoped>#my-map {width: 100%;height: 100%;background-color: black;}
</style>
Cesium 相关资料
首先分享一些资料给各位,希望有用:
Cesium 官网:https://cesium.com/
Cesium 官网 API:https://cesium.com/learn/cesiumjs/ref-doc/
Cesium 中文API: http://cesium.xin/cesium/cn/Documentation1.62/
Cesium 官方案例:https://sandcastle.cesium.com/
Cesium 技能树:https://www.wenjiangs.com/doc/egyaeyav
Cesium 中文社区:http://cesium.xin/
3D 模型下载网站:https://sketchfab.com/feed
上边这部分网站呢,也许对你有用,需要的话可以看一下。
cesium token 申请和设置
使用cesium需要申请一个token值,这个地方就和百度地图或者是高德地图一样,需要一个 token 秘钥来进行操作,确保在使用 cesium 的过程中不会出现 token 过期造成地图加载不出来的问题。当然了,现在看我们是一点问题没有,蓝星地球可以正常加载,但是随着我们测试编写的时间增长,调用 cesium 图层次数过多,就会出现图层加载不出来,就是超次数,这个是时候,我们地球可能就白了,因为没有实时图层返回了,这个时候就需要 token,所以说我们现在就设置上 token,防止这种事情的发生。
首先我们需要去 cesium 官网去申请一个 token,方法很简单:
cesium申请token请点击 这里
登录之后
然后我们就成功的获取到了一个 cesium 的秘钥,然后我们在 TCesium.js 文件中的构造器函数中,加载这个 token 就可以了。
Cesium.Ion.defaultAccessToken = '你申请的cesium的token'
就像下面这个样子:
好的,这样子的话, token 就申请使用完成了。
cesium 基础配置
相关API
我们在上面的代码配置了一些基本的设置项,稍微过一下子哈。
this.viewer = new Cesium.Viewer("my-map", {homeButton: true,sceneModePicker: true,baseLayerPicker: true, // 影像切换animation: false, // 是否显示动画控件infoBox: false, // 是否显示点击要素之后显示的信息selectionIndicator: false, // 要素选中框geocoder: true, // 是否显示地名查找控件timeline: false, // 是否显示时间线控件fullscreenButton: false,shouldAnimate: false,navigationHelpButton: false, // 是否显示帮助信息控件
});
就是上面这一块,我写了几个常用的,先全部设置为 false,就是不使用,我们稍微说几个常用的看一下哈。
homeButton
我们先看 homeButton 参数,我们如果设置为 true。这个是主页按钮,啥意思呢,就是我们加载出蓝星之后,我们可以鼠标转动嘛、放大缩小啥的。如果我们设置 homeButton 为 true 之后,在页面的右上角就会出现一个主页按钮,当我们改变过蓝星之后,点击这个按钮,会回到我们最开始的视角。
sceneModePicker
sceneModePicker 是地图显示的维度控制,他提供 二维平面 和 三维球体 两种方式。当设置为 true 的时候,右上角会提供一个维度切换的按钮,帮助我们进行蓝星维度的展示切换功能。
baseLayerPicker
Cesium 为我们提供了一些底图,这个 baseLayerPicker 设置为 true 的时候,右上角会有一个图层切换的按钮,但是我觉得没用,不是没用,不好用,一般都是自己写,不用他默认提供的。
animation 和 timeline
这两个是时间轴相关的,一般用不到,但是不保险,需要的时候没有还真不行,这两个要同时设置,true 的时候都 true,false 的时候都是 false。当然也不绝对哈,就是 timeline 的时候呢,就开始时间轴功能,animation 就是显示时间轴的控件,可以直观的控制时间轴的进度、速度之类的。
selectionIndicator
selectionIndicator 是要素选中框,啥意思呢,就比如说我的蓝星上有模型,那么我点击蓝星上模型的时候呢,就会出现一个框框把模型给框住,我觉得没必要。
fullscreenButton
这个是全屏按钮,设置为 true 的时候呢,右下角就会出现一个全屏按钮,点击之后,cesium 就会进行全屏显示。
infoBox
这个是要素信息框,一般都是 false,啥呢,就是蓝星上面有一个模型,点击模型的时候会显示这个模型的信息之类的,一般不用他自带的,一般是自己写或者是自己改,一般设置 false 就可以。
geocoder
这个是地名查找组件,开启后,右上角会出现一个查询地址的组件,但是不好用,一般情况下,不显示就行。
navigationHelpButton
这是一个帮助按钮,如果设置为 true 的时候,右上角会有一个帮助的提示,这个关闭就可以。
多余样式隐藏
我们使用 cesium 的时候发现哈,左下角会有一些版权信息,我们想隐藏的话也很简单。
只需要在 viewer 创建完成之后,把他的版权 DOM 设置为 none 就可以了
this.viewer._cesiumWidget._creditContainer.style.display = 'none'
这样界面就干净多了,除了蓝星啥都没有了。
代码截图
添加第三方底图
相关文档
我们到现在使用的底图都是 cesium 默认提供的,如果我们需要用自己的底图也很简单,无论是 geoserve 自己发布的还是 高德底图 、百度底图、天地图底图都是可以的,但是有一点需要说一下哈,就是这个高德、百度、google 底图都是有偏移的,直接放进来可能会有偏差,所以说建议使用天地图的。
以天地图为例,我们先创建一个底图对象,使用天地图需要申请 tk 值,这个自己去申请,如果不会的话,看我关于天地图的博文,里面有介绍和步骤。
代码
const imageLayers = this.viewer.scene.imageryLayers;
imageLayers.remove(imageLayers.get(0)); //移除默认影像图层
const TDTTK = "key"; //填入你自己的天地图Key
// 天地图影像
const tdtLayer = new Cesium.WebMapTileServiceImageryProvider({url: `http://t0.tianditu.com/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&tk=${TDTTK}`,layer: "tdt",style: "default",format: "image/jpeg",tileMatrixSetID: "w",maximumLevel: 18,show: false,
});
this.viewer.imageryLayers.addImageryProvider(tdtLayer);
// 天地图注记
const tdtAnnotionLayer = new Cesium.WebMapTileServiceImageryProvider({url: `http://t0.tianditu.com/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&tk=${TDTTK}`,layer: "tdtAnno",style: "default",format: "image/jpeg",tileMatrixSetID: "w",maximumLevel: 18,show: false,
});
this.viewer.imageryLayers.addImageryProvider(tdtAnnotionLayer);
这样就添加进来了。
效果图
截止到这里完整代码:
<template><div id="my-map"></div>
</template><script>export default {name: "HomeView",data() {return {TDT_SL: null,};},methods: {init() {Cesium.Ion.defaultAccessToken ="cesium_key";this.viewer = new Cesium.Viewer("my-map", {homeButton: true,sceneModePicker: true,baseLayerPicker: true, // 影像切换animation: false, // 是否显示动画控件infoBox: false, // 是否显示点击要素之后显示的信息selectionIndicator: false, // 要素选中框geocoder: true, // 是否显示地名查找控件timeline: false, // 是否显示时间线控件fullscreenButton: false,shouldAnimate: false,navigationHelpButton: false, // 是否显示帮助信息控件});// 注释版权信息this.viewer._cesiumWidget._creditContainer.style.display = "none";const imageLayers = this.viewer.scene.imageryLayers;imageLayers.remove(imageLayers.get(0)); //移除默认影像图层const TDTTK = "key"; //填入你自己的天地图Key// 天地图影像const tdtLayer = new Cesium.WebMapTileServiceImageryProvider({url: `http://t0.tianditu.com/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&tk=${TDTTK}`,layer: "tdt",style: "default",format: "image/jpeg",tileMatrixSetID: "w",maximumLevel: 18,show: false,});this.viewer.imageryLayers.addImageryProvider(tdtLayer);// 天地图注记const tdtAnnotionLayer = new Cesium.WebMapTileServiceImageryProvider({url: `http://t0.tianditu.com/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&tk=${TDTTK}`,layer: "tdtAnno",style: "default",format: "image/jpeg",tileMatrixSetID: "w",maximumLevel: 18,show: false,});this.viewer.imageryLayers.addImageryProvider(tdtAnnotionLayer);},},mounted() {this.init();},};
</script><style scoped>#my-map {width: 100%;height: 100%;background-color: black;}
</style>
销毁 cesium
创建说完了,现在说一下销毁,销毁的话就很简单了,就是一句话:
this.viewer.destroy()
执行上面这句话就直接销毁了,这个一般是组件注销了,不展示 cesium 的时候使用,防止一直占用资源啥的,具体情况具体分析哈!
地图放大缩小
其实 cesium 的放大缩小和百度地图他们不一样。cesium 的放大缩小其实就是相机高度,相机高度变小就是放大,相机高度变大就是缩小。理解吧?相机高了,视角大了,蓝星上面东西就小了。
首先是放大:
/*** 地图放大*/
zoomIn() {// viewer 为 Viewer 对象let position = this.viewer.camera.position;let cameraHeight = this.viewer.scene.globe.ellipsoid.cartesianToCartographic(position).height;// 每次缩小 20 倍,参数可改let moveRate = cameraHeight / 20.0;this.viewer.camera.moveForward(moveRate);
}
然后是缩小:
/*** 地图缩小*/
zoomOut() {// viewer 为 Viewer 对象let position = this.viewer.camera.position;let cameraHeight = this.viewer.scene.globe.ellipsoid.cartesianToCartographic(position).height;// 每次缩小 20 倍,参数可改let moveRate = cameraHeight / 20.0;this.viewer.camera.moveBackward(moveRate);
}
道理都是一样的!
可以写两个按钮分别是“放大”和“缩小”,点击按钮的时候,执行这两个方法就可以了!
获取可视区域、高度、层级
获取可视区域这个很简单呀,一行代码完事:
let rectangle = this.viewer.camera.computeViewRectangle();
我们可以看一下返回的数据:
我们看到哈,打印出来的坐标不是地理坐标,转换一下就可以了。
let rectangle = this.viewer.camera.computeViewRectangle();
let east = Cesium.Math.toDegrees(rectangle.east).toFixed(6); // 转地理坐标
console.log(rectangle, east)
如果需要的话,挨个转换一下也可以。
获取相机高度的话更简单了。
let height = Math.ceil(this.viewer.camera.positionCartographic.height).toFixed(0);
console.log("相机高度----->> ", height)
直接打印一下看结果:
这个单位是米哈。
然后是层级,就和百度高德一样,层级显示:
let zoom = this.heightToZoom(height).toFixed(0)
console.log("层级----->> ", zoom)
这是需要用到的一个方法,为啥里面是这样,我也不知道,我也是从网上抄的这个方法:
heightToZoom(height) {let A = 40487.57;let B = 0.00007096758;let C = 91610.74;let D = -40467.74;return Math.round(D + (A - D) / (1 + Math.pow(height / C, B)));
}
然后看一下结果: