使用开源Cesium+Vue实现倾斜摄影三维展示
准备工作
VUE开发工具:Visual studio Code
倾斜摄影转换工具:CesiumLab—下载地址:http://www.cesiumlab.com/
三维显示:Cesium,api参考网站:https://cesium.com/learn/cesiumjs/ref-doc/Camera.html#setView
下图为CesiumLab提供的数据处理流程图,我们可以参考学习。
功能实现
首先我们安装VsCode,然后安装Vue,然后依次操作,新建文件夹kibacesium,打开VsCode—打开文件夹kibacesium—点击终端—在终端内输入命令npm install -g @vue/cli@4下载vue脚手架4;命令如下。
npm i vue -g
npm uninstall vue-cli -g 卸载旧版本
npm cache clean --force 清除缓存
npm install -g @vue/cli@4 安装最新版Vue脚手架 Vue CLI 4
npm install npm@latest 更新npm到最新版本,避免编译出问题
准备好vue后,创建vue项目,项目名称kibacesium。
vue create kibacesium
在弹出的选项里,选择Vue3,如下图。
Vue项目创建完成后,会在我们的创建的文件夹kibacesium下再创建一个文件夹kibacesium,所以我们需要使用VsCode重新打开文件夹,路径kibacesium/kibacesium。
然后执行命令:
npm run serve
如下图,项目运行成功。
然后安装cesium的插件——vue-cli-plugin-cesium(只支持 VueCLI3.0+
版本)。
参考网站:https://github.com/isboyjc/vue-cli-plugin-cesium
安装命令
vue add vue-cli-plugin-cesium
插件安装过程中会有三个询问,内容如下:
询问一
Please choose a version of 'cesium' from this list
请在列表中选择 cesium 的版本
在此选择想使用的 Cesium
版本
询问二
Whether to import styles globally.
This operation will automatically import widgets.css in main.js
是否全局引入样式,该操作将自动在main.js引入widgets.css?
此项默认为 yes,该操作将自动在 main.js 引入 widgets.css,即全局引入 Cesium 的 css 样式
如果此项设置为 no,那么开发时我们要手动引入widgets.css
样式文件,引入命令如下
import "cesium/Widgets/widgets.css"
询问三
Whether to add sample components to the project components directory
是否添加示例组件到项目components目录?
此选项默认为 yes,该操作会自动在 src/components
文件夹下生成 CesiumExample
文件夹,此文件夹中包含一些 Cesium 的使用示例供参考
如果此项设置为 no,则不生成示例文件
生成的示例中每个文件为一个模块,可直接模块引入至项目中查看。
cesium的插件安装完成后,代码结构如下图(注意,这里我并没有配置vue.config.js文件):
项目里增加了CesiumExample文件夹和一个实例vue文件。
运行前,我们再执行一次npm install,重新安装一下依赖,避免编译会报错。
然后修改helloWorld.Vue文件如下:
<template>
<div>
<No01InitVue></No01InitVue>
</div>
</template>
<script>
import No01InitVue from './CesiumExample/No01-init.vue'
export default {
name: 'HelloWorld',
components: {
No01InitVue
},
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
然后执行命令:
npm run serve
网站启动后,在浏览器输入http://localhost:8080/访问,页面如下:
PS:修改package.json里的代码验证规则, 增加"no-undef": "off",因为Cesium是被注入的对象,不添加这个规则就必须一直在Cesium对象相关代码上面加注释——// eslint-disable-next-line no-undef
更多地图功能
想要进行更多地图功能的开发,需要下载Cesium源码—下载地址:https://github.com/CesiumGS/cesium。
下载后的代码,用VSCode打开,然后执行npm install安装依赖,然后执行 npm run build(注意,必须先执),
然后执行npm start。
启动后点击Sandcastle (built version),如下图:
可以在页面检索我们想要使用的功能示例,可以输入hello,widget等关键字,如下图。
加载Arcgis Server提供的默认矢量地图
修改No01-init.vue代码如下:
<template>
<div class="map-box">
<div id="cesiumContainer"></div>
</div>
</template>
<script>
export default {
name: "",
mounted() {
// var viewer = new Cesium.CesiumWidget('cesiumContainer')
// eslint-disable-next-line no-undef
//var viewer = new Cesium.Viewer("cesiumContainer");
// eslint-disable-next-line no-console
// console.log(viewer)
this.init();
}
,
methods: {
init() {
let url = "http://192.168.1.1:6080/arcgis/rest/services/SampleWorldCities/MapServer";
// eslint-disable-next-line no-undef
let geogle = new Cesium.ArcGisMapServerImageryProvider({ url: url });
// eslint-disable-next-line no-undef
this.viewer = new Cesium.Viewer('cesiumContainer', {
baseLayerPicker: false, //是否显⽰图层选择控件
selectionIndicator: false,
// geocoder: false, //是否显⽰地名查找控件
// sceneModePicker: false, //是否显⽰投影⽅式控件
// navigationHelpButton: false, //是否显⽰帮助信息控件
// homeButton: false, //是否显⽰Home按钮
// fullscreenButton: false, //是否显⽰全屏按钮
// timeline:false, //时间轴控件
// animation:false, //动画控件
imageryProvider: geogle,
// terrainProvider:new Cesium.createWorldTerrain({
// requestVertexNormals:true,
// requestWaterMask:true
// }),
});
},
}
};
</script>
<style scoped>
.map-box {
width: 100%;
height: 100%;
}
#cesiumContainer {
width: 100%;
height: 100%;
}
</style>
界面如下:
加载倾斜摄影
倾斜摄影切片
首先安装CesiumLab,然后打开CesiumLab,默认网址:http://localhost:9003/index.html。
点击倾斜模型切片,然后在数据路径输入倾斜摄影文件夹。
如果输入正确的倾斜摄影文件夹,那么空间参考和零点坐标会自动读取出来。
然后在右侧存储类型中添加输出路径,并未clt文件命名。
然后点击提交处理。
处理完成后,系统会把切片的倾斜摄影发布成服务,点击分发服务——3dtiles服务,如下图所示:
显示倾斜摄影
在项目中增加文件——No02-3D.vue,使用我们刚刚发布服务地址,将三维图像展示处理,输入代码如下:
<template>
<div class="map-box">
<div id="cesiumContainer"></div>
</div>
</template>
<script>
export default {
name: "",
mounted() {
this.show3DTile();
}
,
methods: {
show3DTile() {
var url = 'http://192.168.19.112:9003/model/tEn5ey1J3/tileset.json';
// eslint-disable-next-line no-unused-vars
const viewer = new Cesium.Viewer("cesiumContainer", {
terrainProvider: Cesium.createWorldTerrain(),
});
window.viewer = viewer;
// eslint-disable-next-line no-unused-vars
let tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
url: url,
// modelMatrix: Cesium.Matrix4.fromArray([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]),
baseScreenSpaceError: 1024,
//【重要】数值加大,能让最终成像变模糊
skipScreenSpaceErrorFactor: 16,
skipLevels: 1,
immediatelyLoadDesiredLevelOfDetail: false,
loadSiblings: false,
cullWithChildrenBounds: true,
skipLevelOfDetail: true, //开启跳级加载
//这个参数默认是false,同等条件下,叶子节点会优先加载。但是Cesium的tile加载优先级有很多考虑条件,
//这个只是其中之一,如果skipLevelOfDetail=false,这个参数几乎无意义。所以要配合skipLevelOfDetail=true来使用,
//此时设置preferLeaves=true。这样我们就能最快的看见符合当前视觉精度的块,对于提升大数据以及网络环境不好的前提下有一点点改善意义。
preferLeaves: true,
//【重要】内存建议显存大小的50%左右,内存分配变小有利于倾斜摄影数据回收,提升性能体验
maximumMemoryUsage: 1024
//控制切片视角显示的数量,可调整性能
// maximumScreenSpaceError: 2,//最大的屏幕空间误差
// maximumNumberOfLoadedTiles: 100000, //最大加载瓦片个数
}));
window.viewer.flyTo(tileset)
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 15000.0)
});
}
}
};
</script>
<style scoped>
.map-box {
width: 100%;
height: 100%;
}
#cesiumContainer {
width: 100%;
height: 100%;
}
</style>
页面效果如下:
----------------------------------------------------------------------------------------------------
到此,使用开源Cesium+Vue实现倾斜摄影三维展示已经介绍完了。
代码已经传到Github上了,欢迎大家下载。
Github地址:https://github.com/kiba518/KibaCesium
----------------------------------------------------------------------------------------------------
注:此文章为原创,任何形式的转载都请联系作者获得授权并注明出处!
相关文章
- vue webpak版本 查看_vue版本以及webpack版本
- VUE 项目本地没有问题,部署到服务器上提示错误
- 基于vue的简单轻便的开源图片预览组件
- Vue(27)vue-codemirror实现在线代码编译器「建议收藏」
- 基于SpringBoot+Redis+Vue的后台管理系统开源项目,附源码地址
- vue子组件向父组件传值的三种方式_vue父页面传值到子页面
- vue源码分析-v-model的本质
- vue源码分析-事件机制
- 一篇文章带你了解网页框架——Vue简单入门
- 拥抱开源,Vue Admin Work后台管理系统免费开源啦
- vue二维码生成可自定义logo
- 抱歉,久等了,基于Antd-Vue的VueAdminWorkA框架正式和大家开源见面了
- 这个 SpringBoot+ Vue 开源博客系统太酷炫了!
- vue-pdf使用demo
- 在网页文档中引入Vue.js的方法有哪些?_vue直接引入js文件没有用
- Vue分页导航_vue分页组件
- Vue调试工具安装(vue devtools)
- 5分钟!Vue 快速实现 GitHub 用户搜索功能
- IntelliJ IDEA使用 vue-cli 创建Vue项目
- 今日热榜HotList-Web前端开源Vue - (聚合热榜)
- 4. 「vue@2.6.11 源码分析」new Vue() 整体流程和组件渲染之前的准备工作
- vue.js入门篇之Vue.js 样式绑定
- 应用Oracle中的Vue即时技术(oraclevue)
- Vue 实现前后端分离,安全连接 MSSQL 数据库(vue 连接mssql)
- Vue技术实现访问远程Redis的精彩之旅(vue访问远端redis)
- 用Vue从Redis中获取强有力的数据(vue用redis中数据)
- 使用Vue和Redis创建完美的后台应用(vue redis后台)
- Vue搭配Redis做针对性取值(vue redis取值)
- Oracle Vue考场助力企业数据库技术突破(oracle vue考场)