在vite创建的vue3项目中使用Cesium加载czml路径信息和无人机模型

在vite创建的vue3项目中使用Cesium加载czml路径信息和无人机模型

  • 用到的区域文件、地图标记文件、路径信息文件、模型文件 提取码：99jq

  1. 使用vite创建vue3项目

    npm create vite@latest

    cd到创建的项目文件夹中

    npm install

    安装Cesium

    npm i cesium vite-plugin-cesium vite -D

  2. 配置

    1. vite.config.js文件：添加Cesium并设置反向代理实现跨域。

      import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium';
export default defineConfig({plugins: [vue(), cesium()],//设置反向代理，跨域server: {proxy: {'/ArcGIS': {target: 'https://services.arcgisonline.com',//代理的地址changeOrigin: true,}}}
});

    2. style.css(可选)：修改#app样式

      #app {max-width: 100%;margin: 0 auto;padding: 2rem;text-align: center;}

  3. 代码

    1. App.vue

      <template><div id="cesiumContainer"></div>
</template><script setup>
import * as Cesium from 'cesium';
import { onMounted } from 'vue';
onMounted(async () => {// 相当于密钥，申请使用下边链接中的数据时需要用到Cesium.Ion.defaultAccessToken = '你的token';Cesium.ArcGisMapService.defaultAccessToken = '你的token';let viewer = new Cesium.Viewer('cesiumContainer', {// 防止报错infoBox: false,// 去掉右上角的一个小选项卡baseLayerPicker: false,// 加载世界街道地图的底图baseLayer: Cesium.ImageryLayer.fromProviderAsync(Cesium.ArcGisMapServerImageryProvider.fromUrl("/ArcGIS/rest/services/World_Street_Map/MapServer")),// 三维立体效果、水波纹terrainProvider: await Cesium.createWorldTerrainAsync({requestVertexNormals: true,requestWaterMask: true})});viewer.camera.setView({// 初始的相机的定位 定在纽约destination: new Cesium.Cartesian3(1332761, -4662399, 4137888),// 方向 俯仰orientation: {heading: 0.6,pitch: -0.66}});// 添加纽约建筑模型let city = viewer.scene.primitives.add(await Cesium.Cesium3DTileset.fromIonAssetId(75343));// 定义建筑的3D样式 层次分明city.style = new Cesium.Cesium3DTileStyle({color: {// 条件判断建筑具体的颜色conditions: [['${Height} >= 300', 'rgba(45,0,75,0.5)'],['${Height} >= 200', 'rgb(102,71,151)'],['${Height} >= 100', 'rgba(170,162,204,0.5)'],['${Height} >= 50', 'rgba(224,226,238,0.5)'],['${Height} >= 25', 'rgba(252,230,200,0.5)'],['${Height} >= 10', 'rgba(248,176,87,0.5)'],["true", 'rgb(127,59,8)']]}})// 邻域边界的加载let neighborhoodsPromise = Cesium.GeoJsonDataSource.load('./assets/SampleData/sampleNeighborhoods.geojson');// 贴在地图表面neighborhoodsPromise.then((dataSource) => {// 将数据添加到查看器viewer.dataSources.add(dataSource);// 把数据进行着色的调整以及放到地图的表面// 拿到区域的实例  Get the array of entitieslet neighborhoodsEntities = dataSource.entities.values;for (let i = 0; i < neighborhoodsEntities.length; i++) {let entity = neighborhoodsEntities[i];// 判断存不存在相应的图形if (Cesium.defined(entity.polygon)) {entity.name = entity.properties.neighborhood;// 设置多边形颜色entity.polygon.material = Cesium.Color.fromRandom({red: 0.1,maximumGreen: 0.5,minimumBlue: 0.5,alpha: 0.6});// 设置地形着色entity.polygon.classificationType = Cesium.ClassificationType.TERRAIN;// 设置位置 贴到多边形最底下// 生成多边形中心let polyPositions = entity.polygon.hierarchy.getValue(Cesium.JulianDate.now()).positions;// 椭球体entity.position = Cesium.Ellipsoid.WGS84.scaleToGeocentricSurface(// 边界球Cesium.BoundingSphere.fromPoints(polyPositions).center);// 生成标签entity.label = {text: entity.name,showBackground: true,scale: 0.6,horizontalOrigin: Cesium.HorizontalOrigin.CENTER,verticalOrigin: Cesium.VerticalOrigin.BOTTOM,// 设置显示的距离范围distanceDisplayCondition: new Cesium.DistanceDisplayCondition(10, 8000),// 禁用的距离disableDepthTestDistance: 100}}}});// 地图标记显示let kmloptions = {camera: viewer.scene.camera,canvas: viewer.scene.canvas,// 如果我们想要将几何特征（多边形、线串和线性环）固定在地面上，则为trueclampToGround: true};// KML文件时谷歌公司创建的一个地标性文件，用于记录某一地点、或者连续地点的时间、经纬度、海拔等地理信息数据let geoCachePromise = Cesium.KmlDataSource.load('./assets/SampleData/sampleGeocacheLocations.kml', kmloptions);// 将geocache广告牌实体添加到场景中并为其设置样式geoCachePromise.then((dataSource) => {// console.log(dataSource)// 将新数据作为实体添加到查看器viewer.dataSources.add(dataSource);// 获取实体数组let geoCacheEntities = dataSource.entities.values;for (let i = 0; i < geoCacheEntities.length; i++) {let entity = geoCacheEntities[i];if (Cesium.defined(entity.billboard)) {// 调整垂直原点，使图钉位于地形上entity.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;entity.billboard.image = '/assets/tagpark.png';// 禁用标签以减少混乱entity.label = undefined;// 添加距离现实条件entity.billboard.distanceDisplayCondition = new Cesium.DistanceDisplayCondition(10, 20000);// 以度为单位计算经度和纬度let cartographicPosition = Cesium.Cartographic.fromCartesian(entity.position.getValue(Cesium.JulianDate.now()));let latitude = Cesium.Math.toDegrees(cartographicPosition.latitude);let longtitude = Cesium.Math.toDegrees(cartographicPosition.longitude);// 修改描述let description = '<table class="cesium-infoBox-defaultTable cesium-infoBox-defaultTable-lighter"><tbody>' +'<tr><th>' + "longtitude" + '</th><td>' + longtitude.toFixed(5) + '</td></tr>' +'<tr><th>' + "latitude" + '</th><td>' + latitude.toFixed(5) + '</td></tr>' +'<tr><th>' + "实时人流" + '</th><td>' + Math.floor(Math.random() * 20000) + '</td></tr>' +'<tr><th>' + "安全等级" + '</th><td>' + Math.floor(Math.random() * 5) + '</td></tr>' +'</tbody></table>';entity.description = description;}}})// 从czml文件中加载飞行路径let dronePromise = Cesium.CzmlDataSource.load('./assets/SampleData/sampleFlight.czml');// 无人机实体dronePromise.then((dataSource) => {// 添加获取到的实体数据viewer.dataSources.add(dataSource);// 通过ID获取轨迹的实体let drone = dataSource.entities.getById('Aircraft/Aircraft1');// 设置无人机实体的模型drone.model = {// CesiumDrone.gltf会报错// uri:'./assets/SampleData/Models/CesiumDrone.gltf',uri: './assets/SampleData/Models/Cesium_Air.glb',// uri:'./assets/SampleData/Models/ferrari2.gltf',// 设置模型最小的时候的像素大小 缩小地球的时候也能看到minimumPixelSize: 128,// 设置最大规格maximumScale: 500,// 轮廓的颜色属性silhouetteColor: Cesium.Color.WHITE,// 指定轮廓的大小silhouetteSize: 0}// 设置无人机的方向 角度drone.orientation = new Cesium.VelocityOrientationProperty(drone.position);// 设置当前所在的具体的位置drone.viewFrom = new Cesium.Cartesian3(0, -30, 30);// 设置动起来viewer.clock.shouldAnimate = true;})
})
</script><style>
html,
body,
#app,
#cesiumContainer {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;
}
</style>

    2. 解读

      1. 加载token

        // 相当于密钥，申请使用下边链接中的数据时需要用到
Cesium.Ion.defaultAccessToken = '你的token';
Cesium.ArcGisMapService.defaultAccessToken = '你的token';

      2. 创建查看器viewer，加载世界街道地图，注意vite.config.js中配合的跨域。

          let viewer = new Cesium.Viewer('cesiumContainer', {// 防止报错infoBox: false,// 去掉右上角的一个小选项卡baseLayerPicker: false,// 加载世界街道地图的底图baseLayer: Cesium.ImageryLayer.fromProviderAsync(Cesium.ArcGisMapServerImageryProvider.fromUrl("/ArcGIS/rest/services/World_Street_Map/MapServer")),// 三维立体效果、水波纹terrainProvider: await Cesium.createWorldTerrainAsync({requestVertexNormals: true,requestWaterMask: true})});

      3. 初始化相机位置

        viewer.camera.setView({// 初始的相机的定位 定在纽约destination: new Cesium.Cartesian3(1332761, -4662399, 4137888),// 方向 俯仰orientation: {heading: 0.6,pitch: -0.66}});

      4. 添加纽约建筑模型并设置建筑颜色样式

        // 添加纽约建筑模型let city = viewer.scene.primitives.add(await Cesium.Cesium3DTileset.fromIonAssetId(75343));// 定义建筑的3D样式 层次分明city.style = new Cesium.Cesium3DTileStyle({color: {// 条件判断建筑具体的颜色conditions: [['${Height} >= 300', 'rgba(45,0,75,0.5)'],['${Height} >= 200', 'rgb(102,71,151)'],['${Height} >= 100', 'rgba(170,162,204,0.5)'],['${Height} >= 50', 'rgba(224,226,238,0.5)'],['${Height} >= 25', 'rgba(252,230,200,0.5)'],['${Height} >= 10', 'rgba(248,176,87,0.5)'],["true", 'rgb(127,59,8)']]}})

      5. 划分城市区域并着色

        // 邻域边界的加载let neighborhoodsPromise = Cesium.GeoJsonDataSource.load('./assets/SampleData/sampleNeighborhoods.geojson');// 贴在地图表面neighborhoodsPromise.then((dataSource) => {// 将数据添加到查看器viewer.dataSources.add(dataSource);// 把数据进行着色的调整以及放到地图的表面// 拿到区域的实例  Get the array of entitieslet neighborhoodsEntities = dataSource.entities.values;for (let i = 0; i < neighborhoodsEntities.length; i++) {let entity = neighborhoodsEntities[i];// 判断存不存在相应的图形if (Cesium.defined(entity.polygon)) {entity.name = entity.properties.neighborhood;// 设置多边形颜色entity.polygon.material = Cesium.Color.fromRandom({red: 0.1,maximumGreen: 0.5,minimumBlue: 0.5,alpha: 0.6});// 设置地形着色entity.polygon.classificationType = Cesium.ClassificationType.TERRAIN;// 设置位置 贴到多边形最底下let polyPositions = entity.polygon.hierarchy.getValue(Cesium.JulianDate.now()).positions;entity.position = Cesium.Ellipsoid.WGS84.scaleToGeocentricSurface(Cesium.BoundingSphere.fromPoints(polyPositions).center);// 生成标签entity.label = {text: entity.name,showBackground: true,scale: 0.6,horizontalOrigin: Cesium.HorizontalOrigin.CENTER,verticalOrigin: Cesium.VerticalOrigin.BOTTOM,// 设置显示的距离范围distanceDisplayCondition: new Cesium.DistanceDisplayCondition(10, 8000),// 禁用的距离disableDepthTestDistance: 100}}}})

      6. 利用KML文件实现在地图上标记地点

        // 地图标记显示let kmloptions = {camera: viewer.scene.camera,canvas: viewer.scene.canvas,// 如果我们想要将几何特征（多边形、线串和线性环）固定在地面上，则为trueclampToGround: true};// KML文件时谷歌公司创建的一个地标性文件，用于记录某一地点、或者连续地点的时间、经纬度、海拔等地理信息数据let geoCachePromise = Cesium.KmlDataSource.load('./assets/SampleData/sampleGeocacheLocations.kml', kmloptions);// 将geocache广告牌实体添加到场景中并为其设置样式geoCachePromise.then((dataSource) => {// console.log(dataSource)// 将新数据作为实体添加到查看器viewer.dataSources.add(dataSource);// 获取实体数组let geoCacheEntities = dataSource.entities.values;for (let i = 0; i < geoCacheEntities.length; i++) {let entity = geoCacheEntities[i];if (Cesium.defined(entity.billboard)) {// 调整垂直原点，使图钉位于地形上entity.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;entity.billboard.image = '/assets/tagpark.png';// 禁用标签以减少混乱entity.label = undefined;// 添加距离现实条件entity.billboard.distanceDisplayCondition = new Cesium.DistanceDisplayCondition(10, 20000);// 以度为单位计算经度和纬度let cartographicPosition = Cesium.Cartographic.fromCartesian(entity.position.getValue(Cesium.JulianDate.now()));let latitude = Cesium.Math.toDegrees(cartographicPosition.latitude);let longtitude = Cesium.Math.toDegrees(cartographicPosition.longitude);// 修改描述let description = '<table class="Cesium-infoBox-defaultTable cesium-infoBox-defaultTable-lighter"><tbody>' +'<tr><th>' + "longtitude" + '</th><td>' + longtitude.toFixed(5) + '</td><tr>' +'<tr><th>' + "latitude" + '</th><td>' + latitude.toFixed(5) + '</td><tr>' +'<tr><th>' + "实时人流" + '</th><td>' + Math.floor(Math.random() * 20000) + '</td><tr>' +'<tr><th>' + "安全等级" + '</th><td>' + Math.floor(Math.random() * 5) + '</td><tr>' +'</tbody><table>';entity.description = description;}}})

      7. 加载飞行路径和飞机模型

          // 从czml文件中加载飞行路径let dronePromise = Cesium.CzmlDataSource.load('./assets/SampleData/sampleFlight.czml');// 无人机实体dronePromise.then((dataSource) => {// 添加获取到的实体数据viewer.dataSources.add(dataSource);// 通过ID获取轨迹的实体let drone = dataSource.entities.getById('Aircraft/Aircraft1');// 设置无人机实体的模型drone.model = {// CesiumDrone.gltf会报错// uri:'./assets/SampleData/Models/CesiumDrone.gltf',uri: './assets/SampleData/Models/Cesium_Air.glb',// uri:'./assets/SampleData/Models/ferrari2.gltf',// 设置模型最小的时候的像素大小 缩小地球的时候也能看到minimumPixelSize: 128,// 设置最大规格maximumScale: 500,// 轮廓的颜色属性silhouetteColor: Cesium.Color.WHITE,// 指定轮廓的大小silhouetteSize: 0}// 设置无人机的方向 角度drone.orientation = new Cesium.VelocityOrientationProperty(drone.position);// 设置当前所在的具体的位置drone.viewFrom = new Cesium.Cartesian3(0, -30, 30);// 设置动起来viewer.clock.shouldAnimate = true;})

  4. 效果：npm run dev 运行

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/18775.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

AI智能语音机器人的功能和作用都有哪些？

AI智能语音机器人的功能和作用都有哪些？

智能语音机器人是一种能够使用自然语言处理技术和人工智能算法&#xff0c;通过声音与用户进行交互的机器人。它可以回答用户提出的问题、处理用户的投诉、提供产品或服务的相关信息等等。 实现一个智能语音机器人需要涉及多个技术领域&#xff0c;包括自然语言处理、语音识别…
阅读更多...
CSS 沿着同一个方向旋转

CSS 沿着同一个方向旋转

主要解决旋转360后倒转的问题&#xff0c;沿着一个方向旋转&#xff0c;而不是倒回去重新开始。 效果 源码 <!DOCTYPE html> <html><head><meta charset"utf-8"><title>同方向旋转</title><script src"https://dp.rc1…
阅读更多...
[QT编程系列-3]：C++图形用户界面编程，QT框架快速入门培训 - 2- QT程序的运行框架：HelloWorld、常见控件、对象树原理

[QT编程系列-3]：C++图形用户界面编程，QT框架快速入门培训 - 2- QT程序的运行框架：HelloWorld、常见控件、对象树原理

目录 2. QT程序的运行框架 2.1 Hello World程序框架 2.2 QT Designer初识 2.3 用QT Designer设计用户登录界 2. QT程序的运行框架 2.1 Hello World程序框架 上述示例代码中&#xff0c;首先根据应用程序的需求使用 QCoreApplication 或 QApplication 定义 app 对象。如果你…
阅读更多...
前端框架Layui的使用讲解（Layui搭建登录注册页面）

前端框架Layui的使用讲解（Layui搭建登录注册页面）

目录 一、前言 1.什么是Layui 2.Layui的背景 3.为什么要使用Layui 4.Layui的模块化 二、Layui使用讲解 1.初识Layui 2.搭建登录页面 静态效果图​ 封装引入文件页面&#xff08;公用页面&#xff09; jsp页面搭建 userDao编写 Servlet页面编写 xml文件配置 3.搭…
阅读更多...
BM68-矩阵的最小路径和

BM68-矩阵的最小路径和

题目 给定一个 n * m 的矩阵 a&#xff0c;从左上角开始每次只能向右或者向下走&#xff0c;最后到达右下角的位置&#xff0c;路径上所有的数字累加起来就是路径和&#xff0c;输出所有的路径中最小的路径和。 数据范围: 1≤n,m≤500&#xff0c;矩阵中任意值都满足 0≤ai,j…
阅读更多...
GEE：多元线性回归

GEE：多元线性回归

作者：CSDN @ _养乐多_ 本文记录了在NDVI、EVI和LAI作为自变量，precipitation作为因变量的条件下，使用linearRegression函数进行线性回归分析的代码，代码在Google Earth Engine（GEE）平台上实现。具体而言，该函数可以计算NDVI、EVI和LAI对precipitation的影响关系。通过线…
阅读更多...
IDEA+springboot+ssm+layui+mysql高校宿舍管理系统源码

IDEA+springboot+ssm+layui+mysql高校宿舍管理系统源码

IDEAspringbootssmlayuimysql高校宿舍管理系统源码 一、系统介绍1.环境配置 二、系统展示1. 管理员登录2.宿舍列表3.预分配宿舍4.宿舍分配信息5. 留校管理6. 报修管理7. 留言管理8.卫生管理9.我的宿舍10.我的报修11.卫生检查记录12.离校登记13.留校申请14.返校登记15.留言板16.…
阅读更多...
Spring Boot单元测试

Spring Boot单元测试

前言&#x1f36d; ❤️❤️❤️SSM专栏更新中&#xff0c;各位大佬觉得写得不错&#xff0c;支持一下&#xff0c;感谢了&#xff01;❤️❤️❤️ Spring Spring MVC MyBatis_冷兮雪的博客-CSDN博客 Spring Boot 中进行单元测试是一个常见的做法&#xff0c;可以帮助你验证…
阅读更多...
Python（一）：为什么我们要学习Python？

Python（一）：为什么我们要学习Python？

❤️ 专栏简介&#xff1a;本专栏记录了我个人从零开始学习Python编程的过程。在这个专栏中&#xff0c;我将分享我在学习Python的过程中的学习笔记、学习路线以及各个知识点。 ☀️ 专栏适用人群 &#xff1a;本专栏适用于希望学习Python编程的初学者和有一定编程基础的人。无…
阅读更多...
ChatGLM 实践赛之学术工具创意开发丨智谱 AI × 和鲸科技

ChatGLM 实践赛之学术工具创意开发丨智谱 AI × 和鲸科技

2022 年底以来&#xff0c;LLM 大规模语言模型备受瞩目。今年 3 月中旬&#xff0c;智谱 AI 与清华大学强强联合&#xff0c;重磅发布了 ChatGLM-6B 开源模型。截止 6 月 24 日&#xff0c;该模型的下载量超过三百万人次&#xff0c;并在 Hugging Face&#xff08;HF&#xff0…
阅读更多...
003.PADS VX2.4选项设置及显示颜色设置

003.PADS VX2.4选项设置及显示颜色设置

文章目录 一、PADS颜色设置及选项设置二、选项设置1.全局2.设计3.栅格和捕获4.显示5.布线选项页6.覆铜平面选项页7.文本和线选项页8.文本和线选项页9.过孔样式选项页 一、PADS颜色设置及选项设置 一、颜色设置 1&#xff0e;点击设置—显示颜色&#xff09;&#xff08;快捷键…
阅读更多...
操作系统——输入输出IO管理

操作系统——输入输出IO管理

文章目录 **1 I/O管理概述****1.1 I/O设备****1.2 I/O控制方式****1.2.1 程序直接控制方式****1.2.2 中断驱动方式****1.2.3 DMA方式****1.2.4 通道控制方式** **1.3 I/O软件层次结构****1.4 应用程序I/O接口** **2 设备独立性软件****2.1 高速缓冲与缓冲区****2.2 设备分配和回…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023