下面是使用开源Cesium+Vue实现倾斜摄影三维展示功能的完整攻略。
1. 开源Cesium+Vue简介
1.1 Cesium
Cesium 是一个可视化地球数据的 JavaScript 库,拥挤者来自美国宾夕法尼亚州的开源项目。
Cesium支持多样化地球数据的可视化,包括卫星、建筑、城市、气象等等,特别是对于三维地球数据的处理。
1.2 Vue
Vue 是一套用于构建用户界面的渐进式 JavaScript 框架,具有易上手、易扩展等特点。
Vue处理模板、组件两个核心,则可极大地简化HTML的编写,并能够为你提供更一致的结构。
1.3 结合使用
Cesium和Vue是可以结合在一起使用的,通过构建自己的Vue前端页面,并且通过调用Cesium的API来实现三维地图的部署和展示。
2. 构建Vue工程
首先我们需要构建 Vue 工程,这里假定您已经了解Vue的基本使用方法,并拥有Vue CLI的开发环境。
2.1 安装Vue CLI
使用npm或yarn安装Vue CLI:
# npm
npm install -g @vue/cli
# yarn
yarn global add @vue/cli
2.2 创建Vue工程
使用Vue CLI创建一个Vue工程:
vue create my-project
2.3 安装依赖
切换至工程目录下,安装以下依赖:
npm install cesium --save-dev # 安装 Cesium 库
npm install vue-cesium --save-dev # 安装 Vue-Cesium 模块
2.4 配置Cesium
安装依赖之后,需要在src目录下创建一个CesiumWrapper.vue文件,在其中完成对Cesium的初始化和配置。
下面是一个简单的配置文件:
<template>
<div class="cesium-container" ref="cesiumViewer" />
</template>
<script>
import Cesium from "cesium/Cesium";
import "cesium/Widgets/widgets.css";
export default {
data() {
return {
viewer: null
};
},
mounted() {
this.viewer = new Cesium.Viewer(this.$refs.cesiumViewer, {
contextOptions: {
webgl: {
alpha: true
}
}
});
},
methods: {}
};
</script>
<style scoped>
.cesium-container {
height: 100%;
width: 100%;
}
</style>
3. 添加倾斜摄影数据
Cesium支持导入倾斜摄影数据,这里我们仅介绍一种数据格式 LAS。
3.1 概述
LAS(Lidar data Exchange Format)是一种公认的激光雷达点云数据格式。LAS数据格式由美国环境系统研究院(USGS)和美国公司Environmental Systems Research Institute(ESRI)共同发明,它可用于存储三维点云数据、数 据相关性信息以及RGB颜色数据。
3.2 生成倾斜摄影数据
我们需要调用第三方软件来生成倾斜摄影数据,常见的软件有Pix4D、Agisoft,这里我们用Agisoft来进行操作。
我们可以采用Agisoft PhotoScan软件创建倾斜摄影数据:将无人机采集的图像导入软件中,生成点云数据和DEM(Digital Elevation Model)文件,之后对点云数据进行点云分类,提取建筑物点云信息,最终导出LAS点云文件。
3.3 添加倾斜摄影数据到Cesium
导出LAS点云文件后,将数据放置在本地服务器上,可以使用以下代码添加点云数据:
Cesium.Ion.defaultAccessToken = "your-access-token";
const viewer = new Cesium.Viewer("cesiumContainer", {
terrainProvider: Cesium.createWorldTerrain()
});
// Load LAS data
viewer.scene.primitives.add(Cesium.Cesium3DTileset.fromUrl("http://localhost:8080/data/las_file.las"));
4. 使用示例
下面是两个使用开源Cesium+Vue实现倾斜摄影三维展示功能示例:
示例一
<template>
<div>
<cesium-wrapper />
</div>
</template>
<script>
import CesiumWrapper from "@/components/CesiumWrapper.vue";
export default {
components: {
CesiumWrapper
}
};
</script>
<style>
html,
body,
#app {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
示例二
<template>
<div>
<cesium-wrapper />
<div class="control-panel">
<div>
<label>Latitude</label>
<input type="text" v-model="latitude" />
</div>
<div>
<label>Longitude</label>
<input type="text" v-model="longitude" />
</div>
<div>
<label>Height</label>
<input type="text" v-model="height" />
</div>
<button @click="flyToLocation">Fly to location</button>
</div>
</div>
</template>
<script>
import CesiumWrapper from "@/components/CesiumWrapper.vue";
export default {
components: {
CesiumWrapper
},
data() {
return {
latitude: 0,
longitude: 0,
height: 0
};
},
methods: {
flyToLocation() {
this.$refs.cesiumWrapper.viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(
Number(this.longitude),
Number(this.latitude),
Number(this.height)
)
});
}
}
};
</script>
<style>
html,
body,
#app {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.control-panel {
position: absolute;
top: 0;
left: 0;
z-index: 999;
padding: 20px;
background-color: rgba(255, 255, 255, 0.8);
}
.control-panel div {
display: flex;
flex-direction: column;
margin-bottom: 10px;
}
.control-panel label {
margin-bottom: 5px;
font-size: 14px;
}
.control-panel input {
font-size: 16px;
padding: 5px 10px;
}
.control-panel button {
font-size: 16px;
padding: 5px 10px;
border: none;
background-color: #2ecc71;
color: #fff;
cursor: pointer;
}
</style>
以上就是使用开源Cesium+Vue实现倾斜摄影三维展示功能的完整攻略,希望对你有所帮助。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:使用开源Cesium+Vue实现倾斜摄影三维展示功能 - Python技术站