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

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:使用开源Cesium+Vue实现倾斜摄影三维展示功能 - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • ajax.net对数据库的插入实例

    关于”ajax.net对数据库的插入实例”,以下是详细的攻略: 准备工作 在开始编写代码前,我们需要完成以下准备工作: 安装Visual Studio。 配置数据库(SQL Server 或 MySQL)。 创建一个新网站(可以是WebForms项目或MVC项目),并在项目中添加对jQuery、Ajax.NET库的引用。 在准备工作完成后,我们可以开始编写代…

    JavaScript 2023年6月11日
    00
  • 微信小程序 扭蛋抽奖机css3动画实现详解

    下面是针对“微信小程序 扭蛋抽奖机css3动画实现详解”的完整攻略: 1. 技术说明 本文所用技术为微信小程序,主要会用到CSS3动画和小程序的Canvas组件。 我们需要使用wx.createCanvasContext方法获取Canvas绘图上下文对象,然后调用该上下文对象的相关方法进行Canvas的渲染和动画绘制。 2. 实现步骤 2.1 页面结构 首先…

    JavaScript 2023年6月10日
    00
  • PHP和javascript常用正则表达式及用法实例

    PHP和JavaScript常用正则表达式及用法实例 什么是正则表达式 正则表达式是一种用来检索、替换和匹配文本的工具,它是基于字符模式匹配的。 正则表达式由字面值和特殊字符组成。字面值是指直接匹配的字符或字符串,特殊字符是包括“元字符”、“限定符”、“界定符”等一系列元素,用于构建灵活的模式。 PHP中的正则表达式 在PHP中,使用preg_match()…

    JavaScript 2023年6月10日
    00
  • bootstrap fileinput 上传插件的基础使用

    下面是针对Bootstrap FileInput上传插件的基础使用攻略。 介绍 Bootstrap FileInput是一款基于Bootstrap框架的文件上传插件,支持多文件上传、进度条展示、预览等功能,可以应用于各种网站和应用中。在本文中,我们将介绍Bootstrap FileInput的基础用法,包括引入和配置等方面。 引入文件 首先,在你的HTML文…

    JavaScript 2023年5月28日
    00
  • 小程序实现计时器功能

    下面是“小程序实现计时器功能”的完整攻略: 1. 准备工作 在开始编写计时器功能之前,需要先创建一个小程序项目,并在页面中引入 wx.createInnerAudioContext() 实现计时结束后的声音提示。 2. 计时器实现 2.1 变量定义和初始值设置 首先,需要在 data 中定义计时器相关的变量,例如当前计时器的状态、计时器显示的时间等: dat…

    JavaScript 2023年6月11日
    00
  • JS面向对象编程浅析

    JS面向对象编程浅析 在JavaScript中,面向对象编程(Object-Oriented Programming,OOP)是一种非常常见的编程思想。OOP的核心概念是“对象”,它可以把一系列的数据和行为聚合在一起,形成一个具有特定功能的“物体”。本文将会从以下几点详细讲解JavaScript面向对象编程的相关知识。 面向对象的基本概念 类和对象 类(Cl…

    JavaScript 2023年5月18日
    00
  • 浅谈JavaScript中this的指向问题

    浅谈JavaScript中this的指向问题 在javascript中,this关键字的指向问题一直是比较困惑的一个问题,因为它的指向受到一定的影响。如果我们没有完全搞清楚this的指向规则,那么在使用this的时候可能会带来很多不方便和错误的情况。接下来让我们一起来浅谈一下javascript中this的指向问题。 this的指向规则 在javascrip…

    JavaScript 2023年6月10日
    00
  • 原生JS封装animate运动框架的实例

    当我们需要进行网页中的动画操作,很多时候会涉及到DOM元素的运动,比如移动、旋转、透明度变化等等。这时候,JavaScript的animate函数封装可以帮助我们更加方便地实现动画效果。 以下是原生JS封装animate运动框架的实例的完整攻略: 1. 利用JavaScript封装animate运动框架 我们首先需要使用JavaScript来封装animat…

    JavaScript 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部