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

这篇具有很好参考价值的文章主要介绍了在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 entities
          let 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,
          // 如果我们想要将几何特征(多边形、线串和线性环)固定在地面上,则为true
          clampToGround: 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 entities
            let 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,
            // 如果我们想要将几何特征(多边形、线串和线性环)固定在地面上,则为true
            clampToGround: 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 运行

在vite创建的vue3项目中使用Cesium加载czml路径信息和无人机模型,Cesium学习,vue.js,Cesium文章来源地址https://www.toymoban.com/news/detail-561864.html

到了这里,关于在vite创建的vue3项目中使用Cesium加载czml路径信息和无人机模型的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 在vite+vue3项目中配置使用css预处理器(less/sass)以及路径别名

    vite已经将这些预处理器的loader内置了,我们不用再像在webpack项目中那样,需要下载和配置一堆相关的loader,我们只需要下载less,sass依赖,就能直接在项目中使用啦 使用npm或者yarn来安装以下依赖: Less预处理器: npm install -D less Sass预处理器: npm install -D sass 如图,下载之后

    2024年02月11日
    浏览(99)
  • vite创建vue3项目

    这种方式创建的项目最快捷,因为基本依赖都装好了 这种方式会基于模板创建项目,对于官方模板vue-ts,只带有基础的vue和ts,不带有vue-router、pinia等 以上命令中,\\\"vue-ts\\\"是模板名称 或者使用以下命令然后勾选模板来创建项目 这种方式创建的项目甚至连vite.config.ts都没有,如

    2024年02月05日
    浏览(80)
  • vite 创建vue3项目,使用 Prettier 统一格式化代码,集成 ESLint、Stylelint 代码校验规范

    在团队开发中,保持代码风格的一致性和代码质量的高度,对于项目的可维护性和可读性非常重要。为了实现这一目标,我们可以使用工具来自动格式化代码并进行代码校验,在开发过程中捕获潜在的问题,并提供修复建议。 本示例中,我们将使用 Vite 来创建一个新的 Vue

    2024年04月28日
    浏览(60)
  • 使用模板创建【vite+vue3+ts】项目出现 “找不到模块‘vue‘或其相应的类型声明” 的解决方案

    项目前台需要使用Vue3+Ts来写一个H5应用,然后我用模板创建 创建完后进入 HelloWorld.vue ,两眼一黑 然后在 tsconfig.json 的 \\\"compilerOptions\\\" 中添加 修改 \\\"moduleResolution\\\" 值为 \\\"node\\\"

    2024年02月17日
    浏览(62)
  • vue3创建项目,vite+js

    之前的时候大哥就让我自己搭架子,但是我拖延症,现在用到了,得自己搭了 我的项目都放到了 VuePorjects这个目录里面, 一、先进入到指定工作目录,(不是你要创建的项目的名称哈) 二、创建vue3项目,安装创建项目  @latest是项目名称,可以自己修改项目名称,然后选择

    2024年02月16日
    浏览(64)
  • 创建一个vite+vue3项目详细教程

    一、首先打开本地磁盘,找到一个存放路径  这里 我选择将新建项目放置在E盘的demo-vitedemo路径下 二、在该路径处打开命令行cmd  三、在打开的命令行中输入创建命令  注意在搭建之前要安装node.js环境依赖,并且确认你的版本 Vite 需要Node.js版本 14.18+,16+。然而,有些模板需

    2024年02月15日
    浏览(53)
  • vue3+vite+ts+elementplus创建项目

    # vue3+vite+ts+pinia 学习笔记 ## 1、创建项目: npm init vite@latest     选择: vue、ts ## 2、进入项目目录后:npm install 安装 ## 3、运行项目: npm run dev ## 4、安装常用插件:     1、安装 npm install vue-router@latest 配置:在src目录下新建router目录,创建index.ts文件代码如下:       ```javascript 创建

    2024年02月09日
    浏览(60)
  • Cesium引入vite + vue3

    卸载命令 使用 vite.config.js 组件使用 加载高德地图 高德地图的加载方便很多,并不需要申请key,可以直接加载到我们的Cesium中。 加载ArcGISMap地图

    2024年02月14日
    浏览(35)
  • vue3之vite创建h5项目1(创建vite项目、配置IP访问项目、配置多环境变量与预览打包生产效果、配置别名)

    初始化项目模块 添加环境变量文件,每个文件写入配置,定义 env 环境变量前面必须加 VITE_ dev环境 test环境 prod环境 在项目根目录下创建 03-1:配置多环境变量之dev环境 .env.development 03-2:配置多环境变量之test环境 .env.test 03-3:配置多环境变量之prod环境 .env.production 03-4 修改

    2024年02月02日
    浏览(77)
  • Uni-app + Vue3 + TS +Vite 创建项目

    npm 都很熟,可是与 npm 如此相似的 npx 是干嘛的呢?我们为甚要介绍 npx ? 由于 uni-app 官方提供创建命令使用的是 npx,所以我们先来了解下 npx 是干什么的?它与 npm 的区别。 npx 是 npm 的高级版本,它从 npm v5.2 版本开始引入的,与 npm 绑定在一起,无需额外安装,具有更大的功

    2023年04月15日
    浏览(72)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包