使用开源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日

相关文章

  • 详解JavaScript的while循环的使用

    详解JavaScript的while循环的使用 简介 JavaScript 中提供了循环语句来重复执行代码块,其中 while 循环是其中之一。while 循环是基于条件执行的循环,只要给定条件为真,就会执行循环体,直到给定条件为假。 语法 while 循环的语法如下: while (condition) { // 循环体语句 } 其中 condition …

    JavaScript 2023年5月27日
    00
  • IE浏览器与FF浏览器关于Ajax传递参数值为中文时的区别实例分析

    针对“IE浏览器与FF浏览器关于Ajax传递参数值为中文时的区别实例分析”,我们可以从以下几个方面进行讲解: URL编码的区别 在使用Ajax传递参数时,中文参数需要进行URL编码,然后再进行发送。而IE浏览器和FF浏览器对URL编码的处理是不同的: IE浏览器:使用escape()函数对中文参数进行编码。 FF浏览器:使用encodeURIComponen…

    JavaScript 2023年5月19日
    00
  • js使用cookie实现记住用户名功能示例

    使用cookie可以保存用户的登录状态,可以实现记住用户名的功能。下面是使用JavaScript实现记住用户名的完整攻略: 1. 创建登录表单 首先需要在页面上创建一个登录表单,包含用户名和密码的输入框、记住密码的复选框和提交按钮。 <form id="login-form"> <label>用户名:</la…

    JavaScript 2023年6月11日
    00
  • Java日常练习题,每天进步一点点(34)

    《Java日常练习题,每天进步一点点(34)》是一篇Java编程练习题目的博客文章。该文中提供了10个常见的Java编程问题,供读者进行练习,提高编程水平。以下是对于该文章的详细讲解攻略: 标题 标题使用 # 号,# 号的数量代表标题级数 需要在每个标题后面空一行 代码块 代码块使用 “` 或者缩进四个空格 代码块中的代码可以被正确地渲染 内容 内容中需要…

    JavaScript 2023年5月28日
    00
  • 解决JSON.stringify()自动将中文转译成unicode的问题

    要解决JSON.stringify()自动将中文转译成Unicode的问题,可以通过使用第三方库 json-bigint 或者自行编写转换函数来实现。 下面分别给出两种方法的使用示例: 使用json-bigint 安装 json-bigint: sh npm install json-bigint 在代码中引入json-bigint: javascript …

    JavaScript 2023年5月19日
    00
  • 用javascript父窗口控制只弹出一个子窗口

    要实现父窗口控制只弹出一个子窗口,需要满足以下几个步骤: 在父窗口中定义一个全局变量,用于保存打开的子窗口对象。 在打开子窗口的函数中,先判断全局变量是否为空。如果为空,说明没有打开过子窗口,那么创建新的子窗口对象并赋值给全局变量。如果不为空,说明已经存在子窗口,那么判断子窗口是否关闭,如果关闭,则再次创建新的子窗口对象并赋值给全局变量;如果没有关闭,则聚焦…

    JavaScript 2023年6月11日
    00
  • vue3中关于路由hash与History的设置

    下面是关于Vue3中路由hash与History的设置的详细攻略: 1. 路由设置 在Vue3中使用路由需要先安装vue-router,使用以下命令进行安装: npm install vue-router@4 1.1 history模式 如果使用history模式,则路由使用的是浏览器的history.pushState和history.replaceSta…

    JavaScript 2023年6月11日
    00
  • 整理Javascript流程控制语句学习笔记

    下面为你详细讲解“整理Javascript流程控制语句学习笔记”的完整攻略。 攻略概述 本攻略旨在帮助读者更好地理解和掌握Javascript中的流程控制语句,涵盖以下内容: 分类介绍Javascript中的流程控制语句。 详细讲解Javascript中每种流程控制语句的用法、语法和示例。 给出实际例子,帮助读者理解流程控制语句的应用场景。 提供学习Java…

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