cesium 加载本地json、GeoJson数据

GeoJSON是一种用于编码地理数据结构的格式

1. {
2.   "type": "Feature",
3.   "geometry": {
4.     "type": "Point",
5.     "coordinates": [125.6, 10.1]
6.   },
7.   "properties": {
8.     "name": "某地点"
9.   }
10. }

复制代码

一、直接加载GeoJSON文件

1. // 方式1：通过GeoJsonDataSource加载
2. viewer.dataSources.add(
3.     Cesium.GeoJsonDataSource.load('/path/to/data.geojson', {
4.         stroke: Cesium.Color.RED,
5.         fill: Cesium.Color.RED.withAlpha(0.5),
6.         strokeWidth: 3
7.     })
8. );
10. // 方式2：使用Promise处理
11. Cesium.GeoJsonDataSource.load('/path/to/data.geojson')
12.     .then(dataSource => {
13.         viewer.dataSources.add(dataSource);
14.         viewer.zoomTo(dataSource);
15.     })
16.     .catch(error => {
17.         console.log('Error loading GeoJSON:', error);
18.     });

复制代码

本地直接定义json/GeoJson数据小牛试刀：

[code]<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import * as Cesium from "cesium";
import { onMounted, ref } from "vue";
// import BoxEntityManager from './js/boxEntities.js';
// import { calculateCoordinateOffset } from "./js/coordinateOffset.js";
onMounted(() => {
  // 使用Cesium的Ion服务进行认证
  Cesium.Ion.defaultAccessToken =
    "认证码";

  // 创建一个Viewer实例
  const viewer = new Cesium.Viewer("cesiumContainer", {
    // 使用默认的影像图层和地形图层
    terrainProvider: Cesium.createWorldTerrain({ requestWaterMask: true }),
    // 查找位置工具
    geocoder: false,
    // 返回首页按钮
    homeButton: false,
    // 场景视角
    sceneModePicker: false,
    // 图层选择
    baseLayerPicker: false,
    // 导航帮助信息
    navigationHelpButton: false,
    // 动画播放速度
    animation: false,
    // 时间轴
    timeline: false,
    // 全屏按钮
    fullscreenButton: false,
    // VR按钮
    vrButton: false,
  });
  // 去除logo
  viewer.cesiumWidget.creditContainer.style.display = "none";
  // 飞入
  // WGS84转笛卡尔坐标系
  var destination = Cesium.Cartesian3.fromDegrees(116.390, 39.890, 1000.0);
  viewer.camera.flyTo({
    destination: destination,
    orientation: {
      heading: Cesium.Math.toRadians(0.0),
      pitch: Cesium.Math.toRadians(-10.0),
      roll: 0.0,
    },
    duration: 5,  // 飞行持续时间，单位秒
  });
  // 1.1 定义GeoJson数据
  const geojsonData = {
    //FeatureCollection - 要素集合 ,Feature - 单个要素,GeometryCollection - 几何集合, MultiPolygon - 多面, MultiLineString - 多线,MultiPoint - 多点,Polygon - 面,LineString - 线,Point - 点
//type是其下对象的类型
    "type": "FeatureCollection",

    "features": [{
      "type": "Feature",
//properties 包含的各种「变量」和「值」
      "properties": {
        "name": "测试点"
      },
//geometry 是表示几何信息
      "geometry": {
        "type": "oint",
        //地理位置坐标[longitude, latitude, height]（高度是可选的）
        "coordinates": [116.391, 39.917]
      }
    }]
  };
  // 1.2 加载数据
  // 创建 GeoJsonDataSource 实例
  const dataSource = new Cesium.GeoJsonDataSource();
  // 加载 GeoJSON 数据，并应用样式
  viewer.dataSources.add(
    dataSource.load(geojsonData, {
      strokeWidth: 3,// 边框宽度
      stroke: Cesium.Color.RED,  // 边框颜色
      fill: Cesium.Color.RED.withAlpha(0.5), // 填充颜色
      markerSymbol: '