cesium 加载本地json、GeoJson数据
GeoJSON是一种用于编码地理数据结构的格式{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates":
},
"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数据小牛试刀：
https://i-blog.csdnimg.cn/direct/53f20ae0c4d142a6af907bc6aabf9f32.png
<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": "Point",
//地理位置坐标（高度是可选的）
"coordinates":
}
}]
};
// 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: '
页:
[1]