cesium+vue3 DataSource学习笔记

SteveJi666

已于 2024-10-11 15:00:10 修改

阅读量153

点赞数 2

分类专栏： WebGL cesium EarthSDK SuperMap 文章标签： vue.js javascript ecmascript

于 2024-10-11 14:59:43 首次发布

本文链接：https://blog.csdn.net/weixin_51983847/article/details/142854149

版权

WebGL cesium EarthSDK SuperMap 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

官方文档链接：Cesium中文api文档 | Index - Cesium Documentation

官方示例链接:Cesium Sandcastle

vue for cesium:A Vue 3 based component library of CesiumJS for developers | Vue for Cesium (zouyaoji.top)

package.js:

{
  "name": "demo",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "cesium": "1.99",
    "element-plus": "^2.8.1",
    "vite-plugin-cesium": "^1.2.23",
    "vue": "^3.4.35",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.1.2",
    "vite": "^5.4.0"
  }
}

vite.config.js:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),cesium()]
})

main.js:

import { createApp } from 'vue'
// import './style.css'
import App from './App.vue'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

App.vue:

1. Cesium Viewer 初始化

首先，您初始化了 Cesium 的 Viewer 组件，这是任何 Cesium 应用的基础。在 Vue3 中，您使用 onMounted 钩子确保在 DOM 挂载后初始化 Cesium。

onMounted(async() => {
  Cesium.Ion.defaultAccessToken = 'YOUR_ACCESS_TOKEN';
  
  // 初始化 Cesium Viewer
  viewer = new Cesium.Viewer('cesiumContainer', {
    shouldAnimate: true  // 场景动画设置为 true，使得场景可以流畅渲染动画效果
  });
});

Cesium.Ion.defaultAccessToken 用于设置 Cesium Ion 的访问令牌。Cesium Ion 提供了在线数据和服务;

shouldAnimate: true 启动场景的动画，允许动态数据（例如CZML数据源）以动画方式展现。

2.GeoJSON数据源加载

// GeoJson 数据的加载示例
const linestring1 = turf.lineString([
  [-24, 63],
  [-23, 60],
  [-25, 65],
  [-20, 69]
]);

Cesium.GeoJsonDataSource.load(linestring1).then(res => {
  const entity = res.entities.values[0];  // 获取解析后的第一个实体
  viewer.entities.add(entity);  // 将实体添加到 Viewer
  viewer.zoomTo(entity);  // 缩放到该实体
});

turf.js：是一个处理 GeoJSON 数据的 JavaScript 库，这里您使用了 turf.lineString 来生成一条线。

Cesium.GeoJsonDataSource.load：加载 GeoJSON 数据后，会返回解析后的实体数据，您可以将其添加到 Cesium Viewer 中并自动缩放至该实体。

3. 多条线段加载（multiLineString）

多条线段的数据可以使用 turf.multiLineString 来生成，然后通过 Cesium 加载并显示。

const multiLine = turf.multiLineString(
  [
    [[0, 0], [4, 4]],
    [[6, 6], [10, 10]]
  ]
);

Cesium.GeoJsonDataSource.load(multiLine).then(res => {
  viewer.dataSources.add(res);  // 添加到 Viewer 的数据源中
  data = res;
});

通过 turf.multiLineString 创建多条线段，并将其作为 GeoJSON 数据源加载到 Cesium Viewer 中。

4. Polygon（多边形）加载

const polygon = turf.polygon(
  [
    [
      [-5, 52],
      [-4, 56],
      [-2, 51],
      [-7, 54],
      [-5, 52]
    ]
  ]
);

const promise = Cesium.GeoJsonDataSource.load(polygon);
viewer.dataSources.add(promise);  // 将多边形加载到数据源
viewer.zoomTo(promise);  // 缩放至多边形区域

5. TopoJSON 数据加载

TopoJSON 是 GeoJSON 的扩展版本，优化了共享边界的处理方式。

Cesium.GeoJsonDataSource.load('/src/assets/usa.topojson').then((dataSources) => {
  promise = dataSources;
  viewer.dataSources.add(promise);  // 添加 TopoJSON 数据源
  viewer.zoomTo(promise);  // 自动缩放至数据
}).catch((error) => {
  console.error('failed to load topojson', error);
});

TopoJSON 是一种压缩的 GeoJSON 格式，适合处理大规模地理数据集。

6. KML 数据加载

KML 是 Google Earth 使用的一种基于 XML 的地理数据格式，可以通过 Cesium.KmlDataSource.load 方法加载.

const promise = Cesium.KmlDataSource.load('/src/assets/gdp2008.kmz');
viewer.dataSources.add(promise);  // 添加 KML 数据源

7. CZML 数据加载

CZML 是一种动态数据格式，用于处理需要随时间变化的场景（例如，飞行路径、卫星轨迹等）

try {
  const response = await fetch('/src/assets/Vehicle.czml');
  const data = await response.json();
  const dataSource = Cesium.CzmlDataSource.load(data);
  viewer.dataSources.add(dataSource);
  
  await dataSource.readyPromise;  // 确保数据加载完成
  const entity = dataSource.entities.getById('Vehicle');
  if (entity) {
    viewer.trackedEntity = entity;  // 自动跟踪 CZML 中的特定实体
  }
} catch (error) {
  console.error('Error loading the CZML data:', error);
}

这里您使用了 fetch 方法从本地加载 CZML 数据，解析后通过 Cesium.CzmlDataSource.load 加载到 Cesium Viewer 中。

8. 删除数据

通过 toDel 方法，您可以清除 Viewer 中加载的所有数据源或特定的实体。

const toDel = () => {
  viewer.entities.removeAll();  // 移除所有实体
  viewer.dataSources.removeAll();  // 移除所有数据源
};

9.整体代码：

<script setup>
import { onMounted, shallowReactive, toHandlerKey } from 'vue'
import * as Cesium from 'cesium'
import Cartographic from 'cesium/Source/Core/Cartographic';
import Viewer from 'cesium/Source/Widgets/Viewer/Viewer';
import ConstantPositionProperty from 'cesium/Source/DataSources/ConstantPositionProperty';
import InfoBox from 'cesium/Source/Widgets/InfoBox/InfoBox';
import SelectionIndicator from 'cesium/Source/Widgets/SelectionIndicator/SelectionIndicator';


//提前申明
let viewer, data, promise

const toDel = () => {
  // viewer.entities.removeAll()
  // viewer.dataSources.remove(data)
  //topojson
  // viewer.dataSources.remove(promise);

}

onMounted(async() => {
  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlZjRiNDQyMi1mZDBhLTQxYTAtYWU4NC1hZDY4YzhjNWU3ZGEiLCJpZCI6MjMyMDI3LCJpYXQiOjE3MjI1MDEzMTd9.3lFzziTrt3ggC3pfiVmNRbSidI52EL4CsOqWKgYxHkM'
  
  // viewer是所有api的开始
  viewer = new Cesium.Viewer('cesiumContainer', {
    //开启场景动画
    shouldAnimate: true
  });


  //geoJson数据，geoJson是一种对各种地理数据结构进行编码的JSON数据格式。在index.html中引入turf
  // const linestring1 = turf.lineString(
  // [
  //   [-24, 63],
  //   [-23, 60],
  //   [-25, 65],
  //   [-20, 69]
  // ]);
  // console.log(linestring1)
  // Cesium.GeoJsonDataSource.load(linestring1).then(res => {
  //   const entity = res.entities.values[0]
  //   viewer.entities.add(entity)
  //   viewer.zoomTo(entity)
  // })

  // const multiLine = turf.multiLineString(
  //   [
  //     [
  //       [0, 0],
  //       [4, 4]],
  //       [[6, 6],
  //       [10, 10]
  //     ]
  //   ],
  //   {
  //     id: "inner"
  //   },
  //   {
  //     id: "outter"
  //   }
  // );
  // Cesium.GeoJsonDataSource.load(multiLine).then(res => {
  //   console.log(viewer.dataSources)
  //   viewer.dataSources.add(res)
  //   data = res
  // })

  // const polygon = turf.polygon(
  //   [
  //     [
  //       [-5, 52],
  //       [-4, 56],
  //       [-2, 51],
  //       [-7, 54],
  //       [-5, 52]
  //     ]
  //   ],
  //   { id: "poly1" }, // properties
  //   { id: "poly2" }
  // );
  // const promise = Cesium.GeoJsonDataSource.load(polygon)
  // viewer.dataSources.add(promise)
  // viewer.zoomTo(promise)


  //TopoJSON是GeoJSON按拓扑学编码后的拓展形式，相比GeoJSON直接使用Polygon，point之类的几何体来表示图形的方法，TopoJSON中的每一个几何体都是通过将共享边(arcs)整合后组成的。
  //加载topojson数据  记得提前申明promise
  // Cesium.GeoJsonDataSource.load('/src/assets/usa.topojson').then((dataSources) => {
  //   promise = dataSources;
  //   viewer.dataSources.add(promise);
  //   viewer.zoomTo(promise);
  // }).catch((error) => {
  //   console.error('failed to load topojson', error);
  // });


  //kml,基于XML语法标准的一种标记语言，采用标记结构，含有嵌套的元素和属性，应用于Google地球相关软件中，用于显示地理数据（点，线，面，多面形，多面体以及模型等）
  // const promise = Cesium.KmlDataSource.load('/src/assets/gdp2008.kmz')
  // console.log(promise)
  // viewer.dataSources.add(promise);


  //动态数据格式CZML，是JSON的子集，CZML文档包含一个JSON数组，其中数组中的每个对象字面量元素都是一个CZML Packet。
  //Cesium.CzmlDataSource
  try { 
  const response = await fetch('/src/assets/Vehicle.czml')
  const data = await response.json(); // 如果服务器返回的是 JSON 格式的 CZML  
  
      // 注意：如果 CZML 是直接作为文本返回的，您可能需要使用 response.text() 而不是 response.json()  
      // 并且可能需要使用 Cesium.CzmlDataSource.load(czmlData) 来加载数据  
  
      // 假设 data 是 CZML 字符串或已经是解析后的对象  
      const dataSource = Cesium.CzmlDataSource.load(data);  
      viewer.dataSources.add(dataSource);  
  
      // 等待数据源加载完成  
      await dataSource.readyPromise; // 使用 readyPromise 而不是 promise  
        const entity = dataSource.entities.getById('Vehicle');  
        if (entity) {  
          viewer.trackedEntity = entity;  
        }  
      } catch (error) {  
        // 处理任何在 fetch 或 JSON 解析过程中发生的错误  
        console.error('Error loading the CZML data:', error);  
      }  
});
</script>

<template>
  <div id="cesiumContainer"></div>
  <button @click="toDel">删除</button>
</template>

<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
button{
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 999;
}
</style>