使用开源Cesium+Vue实现倾斜摄影三维展示功能-前端开发

下面是使用开源Cesium+Vue实现倾斜摄影三维展示功能的完整攻略。

下面是使用开源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实现倾斜摄影三维展示功能的完整攻略，希望对你有所帮助。