门户网站的建设与维护,个人注册公司查询,wordpress 多个边栏,做网站群的公司vue2 使用 cesium 篇 今天好好写一篇哈#xff0c;之前写的半死不活的。首先说明#xff1a;这篇博文是我边做边写的#xff0c;小白也是#xff0c;实现效果会同时发布截图#xff0c;如果没有实现也会说明#xff0c;仅仅作为技术积累#xff0c;选择性分享#xff0…vue2 使用 cesium 篇 今天好好写一篇哈之前写的半死不活的。首先说明这篇博文是我边做边写的小白也是实现效果会同时发布截图如果没有实现也会说明仅仅作为技术积累选择性分享不做教学哈。不好别喷。 安装 cesium
这个就很简单只需要一句简简单单的命令就可以实现在 vue 项目中安装 cesium 了。
npm install cesium --save然后等待安装完成就可以了兄弟们 这个样子嘞就是安装完成了会开发 vue 的都晓得哈。 看一下依赖包里面也成功下载了 cesium 的依赖非常棒
接入项目 cesium
接下来就是使用这个步骤很不好整cesium 的官方文档写的很不友好许多新手小白很难入门甚至是理解都难查文档都不会就比如我。但是这里的步骤我都是自己测试过可以的哈首先呢我是自己创建的 vue2 项目使用的脚手架是 cli3 以上的。
首先第一步从 node_modules 依赖包里面找到我们刚刚安装的 cesium 在文件夹里面有一个 Build 文件夹里面有一个 Cesium 文件夹把这个 Cesium 文件夹复制一份。 然后呢在项目的 public 文件夹下粘贴出来。 好的第一步完成
然后第二步在项目 index.html 文件中head 标签里面引入 cesium 的全局样式。
link relstylesheet href./Cesium/Widgets/widgets.css还是在这个文件中在 body 最后引入 cesium 源码。
script typetext/javascript src./Cesium/Cesium.js/script就是下面这个样子哈。 好的完成之后我们重新启动一下项目记得哈重启一下项目其实不重启也可以啊哈哈哈哈。
使用 cesium
接下来的工作就很简单了嘛我们写一个页面哈用来显示蓝星。这个页面就随便写了哈没有啥技术含量咱就不啰嗦了。
templatediv idmy-map/div
/templatescriptexport default {name: HomeView,};
/scriptstyle scoped
#my-map {width: 100%;height: 100%;background-color: black;
}
/style
写一个黑色的页面so 简单哈 非常好效果出来了到现在还没有用到一点儿的 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, // 是否显示帮助信息控件});}完成蓝星加载出来了 这样初始化蓝星就差不多了是吧好的下面说一些其他的事情。
cesium 相关资料
首先分享一些资料给各位希望有用
Cesium 官网https://cesium.com/ Cesium 官网 APIhttps://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 有关的代码抽成一个 js 文件哈统一的放在一起这样的话呢方便管理一下嘿嘿
首先在组件同级创建一个 js 文件夹里面放一个 TCesium.js 文件里面的代码就是下面的样子
export class TCesium {viewer null;scene null;/*** 构造器函数实例化cesium* param {*} dom 节点id*/constructor(dom) {this.viewer new Cesium.Viewer(dom, {homeButton: false,sceneModePicker: false,baseLayerPicker: false, // 影像切换animation: true, // 是否显示动画控件infoBox: false, // 是否显示点击要素之后显示的信息selectionIndicator: false, // 要素选中框geocoder: false, // 是否显示地名查找控件timeline: true, // 是否显示时间线控件fullscreenButton: false,shouldAnimate: false,navigationHelpButton: false, // 是否显示帮助信息控件});this.scene this.viewer.scene}
}然后在组件中呢引入一下这个文件。
import { TCesium } from ./js/TCesium然后嘞init() 方法就可以直接实例化了。 init() {this.mapObject new TCesium(my-map) // 注意这个my-map就是我们div的id}然后呢效果是一样的。 很棒
cesium token 申请和设置
接下来我们说一下 cesium 的 token。使用cesium需要申请一个token值这个地方就和百度地图或者是高德地图一样需要一个 token 秘钥来进行操作确保在使用 cesium 的过程中不会出现 token 过期造成地图加载不出来的问题。当然了现在看我们是一点问题没有蓝星地球可以正常加载但是随着我们测试编写的时间增长调用 cesium 图层次数过多就会出现图层加载不出来就是超次数这个是时候我们地球可能就白了因为没有实时图层返回了这个时候就需要 token所以说我们现在就设置上 token防止这种事情的发生。
首先我们需要去 cesium 官网去申请一个 token方法很简单
cesium申请token请点击 这里 然后嘞输入用户名、密码登录一下子。没有用户名密码的可以创建一个新的账号来完成操作哟~
然后就可以创建一个新的 token 来玩。 然后我们就成功的获取到了一个 cesium 的秘钥太棒了亲们
然后我们在 TCesium.js 文件中的构造器函数中加载这个 token 就可以了。
Cesium.Ion.defaultAccessToken 你申请的cesium的token就像下面这个样子 好的这样子的话 token 就申请使用完成了。
cesium 基础配置
相关API
我们在上面的代码配置了一些基本的设置项稍微过一下子哈。 this.viewer new Cesium.Viewer(dom, {homeButton: false,sceneModePicker: false,baseLayerPicker: false, // 影像切换animation: false, // 是否显示动画控件infoBox: false, // 是否显示点击要素之后显示的信息selectionIndicator: false, // 要素选中框geocoder: false, // 是否显示地名查找控件timeline: false, // 是否显示时间线控件fullscreenButton: false,shouldAnimate: false,navigationHelpButton: false, // 是否显示帮助信息控件});就是上面这一块我写了几个常用的先全部设置为 false就是不使用我们稍微说几个常用的看一下哈。
homeButton
我们先看 homeButton 参数我们如果设置为 true。这个是主页按钮啥意思呢就是我们加载出蓝星之后我们可以鼠标转动嘛、放大缩小啥的。如果我们设置 homeButton 为 true 之后在页面的右上角就会出现一个主页按钮当我们改变过蓝星之后点击这个按钮会回到我们最开始的视角。 sceneModePicker
sceneModePicker 是地图显示的维度控制他提供 二维平面 和 三维球体 两种方式。当设置为 true 的时候右上角会提供一个维度切换的按钮帮助我们进行蓝星维度的展示切换功能。 baseLayerPicker
Cesium 为我们提供了一些底图这个 baseLayerPicker 设置为 true 的时候右上角会有一个图层切换的按钮但是我觉得没用不是没用不好用一般都是自己写不用他默认提供的。 animation 和 timeline
这两个是时间轴相关的一般用不到但是不保险需要的时候没有还真不行这两个要同时设置true 的时候都 truefalse 的时候都是 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 中添加一下地形数据这样他就是立体的了
首先说明一下我们添加的地形数据是公开的不是私密的也就是说他可能不是很详细很具体但是是有的比如有的单位需要做山东的 gis那么人家会提供山东地形数据这种数据肯定都是涉密的这个数据相当具体数据相当庞大哪里高哪里底都很详细。但是我们没有所以说呢我们使用的只能展示大概的地形。
怎么使用很简单。我们在构造器函数中创建一个地形对象 let terrain new Cesium.createWorldTerrain({requestWaterMask: true,requestVertexNormals: true})创建完成然后在 viewer 中把这个地形数据添加进去就可以了。
this.viewer.terrainProvider terrain // 加入世界地形图好的这个时候我们再来看一下山区能不能显示出高度来。 诶地形添加出来了 厉害
有两个地方需要说一下。 this.viewer.scene.globe.depthTestAgainstTerrain true // 地形遮挡this.viewer.scene.postProcessStages.fxaa.enabled true // 开启抗锯齿首先第一个是地形遮挡这是啥意思呢就是说如果我们在蓝星添加一个模型如果这个模型被山体给挡住的话那么这个模型就看不到了不会透视的看到模型。在比如说如果模型在地下不在地表或者是地上这个模型如果符合实际的话应该不能被看到的但是加载上发现我们能够看到地底的模型如果不想看到的话开启一下地形遮挡这样的话模型会被地形给挡起来符合实际。
第二个是抗锯齿啥是抗锯齿呢做过 threejs 的应该接触过我解释不好意思就是渲染的更精致当然性能消耗的也会大一些。
这两个设置根据自己的实际情况选择是否开启哈好了不多说了。
添加第三方底图
我们到现在使用的底图都是 cesium 默认提供的如果我们需要用自己的底图也很简单无论是 geoserve 自己发布的还是 高德底图 、百度底图、天地图底图都是可以的但是有一点需要说一下哈就是这个高德、百度、google 底图都是有偏移的直接放进来可能会有偏差所以说建议使用天地图的。
我们先创建一个底图对象使用天地图需要申请 tk 值这个自己去申请如果不会的话看我关于天地图的博文里面有介绍和步骤。 // 矢量图TDT_SL new Cesium.WebMapTileServiceImageryProvider({url: http://{s}.tianditu.gov.cn/vec_w/wmts?servicewmtsrequestGetTileversion1.0.0LAYERvectileMatrixSetwTileMatrix{TileMatrix}TileRow{TileRow}TileCol{TileCol}styledefaultformattilestk这是你申请的天地图的tk值,layer: vec,style: default,format: tiles,tileMatrixSetID: w,subdomains: [t0, t1, t2, t3, t4, t5, t6, t7],maximumLevel: 18})然后创建完成添加到 cesium 就可以了。 // 添加天地图矢量图 (底图对象层级) 返回图层this.TDL_YX_LAY this.viewer.imageryLayers.addImageryProvider(this.TDL_SL, 1)这样就添加进来了。 放大看一下哈当然天地图是中国的所以说只有中国的详细信息。 都是可以的哈。移除的话也很简单的啦。
this.viewer.imageryLayers.remove(this.TDL_YX_LAY) // 移除某个图层注意传的参数或者this.viewer.imageryLayers.removeAll(true) // 移除所有图层并销毁相关文档
好了这就是关于添加第三方图层相关操作了。
销毁 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)));}然后看一下结果 真棒
事件
接下来哈说几个常见的 cesium 事件因为在展示蓝星的时候难免需要一些交互操作是吧那么接下来就是见证奇迹的时刻其实也没有那么神器
----------- 未完待续 --------------
