ToB企服应用市场:ToB评测及商务社交产业平台

标题: cesium 加载本地json、GeoJson数据 [打印本页]

作者: 盛世宏图 时间: 2024-11-29 07:36
标题: cesium 加载本地json、GeoJson数据
GeoJSON是一种用于编码地理数据结构的格式

{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [125.6, 10.1]
},
"properties": {
"name": "某地点"
}
}

复制代码

一、直接加载GeoJSON文件

// 方式1：通过GeoJsonDataSource加载
viewer.dataSources.add(
Cesium.GeoJsonDataSource.load('/path/to/data.geojson', {
stroke: Cesium.Color.RED,
fill: Cesium.Color.RED.withAlpha(0.5),
strokeWidth: 3
})
);
// 方式2：使用Promise处理
Cesium.GeoJsonDataSource.load('/path/to/data.geojson')
.then(dataSource => {
viewer.dataSources.add(dataSource);
viewer.zoomTo(dataSource);
})
.catch(error => {
console.log('Error loading GeoJSON:', error);
});

复制代码

本地直接定义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: '

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)