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数据小牛试刀：

<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,});// 去除logoviewer.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",//地理位置坐标[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: '📍', // 设置标记符号}));// 自动缩放视图到新添加的数据源viewer.zoomTo(dataSource);
});

二、通过Ajax请求GeoJSON

// 使用fetch请求
fetch('/api/getGeoJson').then(response => response.json()).then(geojsonData => {return Cesium.GeoJsonDataSource.load(geojsonData, {stroke: Cesium.Color.BLUE,fill: Cesium.Color.BLUE.withAlpha(0.5),strokeWidth: 2,markerSymbol: '📍'  // 可以使用emoji作为标记});}).then(dataSource => {viewer.dataSources.add(dataSource);viewer.zoomTo(dataSource);});// 使用axios请求
axios.get('/api/getGeoJson').then(response => {return Cesium.GeoJsonDataSource.load(response.data);}).then(dataSource => {viewer.dataSources.add(dataSource);});

三、通过文件输入加载

<!-- HTML部分 -->
<input type="file" id="fileInput" accept=".json,.geojson"><!-- JavaScript部分 -->
<script>
document.getElementById('fileInput').addEventListener('change', function(e) {const file = e.target.files[0];const reader = new FileReader();reader.onload = function(event) {try {const data = JSON.parse(event.target.result);const dataSource = new Cesium.GeoJsonDataSource();viewer.dataSources.add(dataSource.load(data, {stroke: Cesium.Color.BLUE,fill: Cesium.Color.BLUE.withAlpha(0.5)})).then(ds => {viewer.zoomTo(ds);});} catch (error) {console.error('Error parsing JSON:', error);}};reader.readAsText(file);
});
</script>

四、加载本地文件

// 3.1 相对路径加载
Cesium.GeoJsonDataSource.load('./data/local.geojson').then(dataSource => {viewer.dataSources.add(dataSource);viewer.zoomTo(dataSource);});// 3.2 绝对路径加载
Cesium.GeoJsonDataSource.load('http://localhost:8080/data/local.geojson').then(dataSource => {viewer.dataSources.add(dataSource);});

试试：

test.json文件内容
{"type": "FeatureCollection","features": [{"type": "Feature","properties": {"name": "测试点"},"geometry": {"type": "Point","coordinates": [116.391,39.917]}}]
}
<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,});// 去除logoviewer.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.2 加载本地json数据const dataSource = Cesium.GeoJsonDataSource.load('public/json/test.json').then(dataSource => {viewer.dataSources.add(dataSource);
// 自动缩放视图到新添加的数据源viewer.zoomTo(dataSource);});
});

北京行政区轮廓Geojson加载应用：

下载GeoJson或者json文件练手下载地址存放到public文件夹目录

知识讲解：

笛卡尔坐标系：

  var destination = new Cesium.Cartesian3(-2312964.837539202, 4629915.442514007, 4045762.390450758)

中心点计算：

function calculatePolygonCenter (positions) {// 初始化累加器let sumX = 0, sumY = 0, sumZ = 0;const count = positions.length;// 累加所有点的笛卡尔坐标positions.forEach(position => {sumX += position.x;sumY += position.y;sumZ += position.z;});// 计算平均值得到中心点的笛卡尔坐标const centerCartesian = new Cesium.Cartesian3(sumX / count,sumY / count,sumZ / count);// 将笛卡尔坐标转换为经纬度坐标const cartographic = Cesium.Cartographic.fromCartesian(centerCartesian);// 将弧度转换为角度const longitude = Cesium.Math.toDegrees(cartographic.longitude);const latitude = Cesium.Math.toDegrees(cartographic.latitude);const height = cartographic.height;// 使用 fromDegrees 创建最终的笛卡尔坐标const finalCartesian = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);return {cartesian: finalCartesian,degrees: {longitude: longitude,latitude: latitude,height: height}};}

代码：

<template><div id="cesiumContainer"></div>
</template><script setup>
import * as Cesium from "cesium";
import Label from "cesium/Source/Scene/Label";
import { onMounted, ref } from "vue";
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,});// 如果想让所有实体都不受地形影响：// viewer.scene.globe.show = false; // 完全隐藏地球表面// 去除logoviewer.cesiumWidget.creditContainer.style.display = "none";// 1.2 加载数据// 创建 GeoJsonDataSource 实例// 从笛卡尔坐标计算中心点并转换为经纬度// 计算多边形中心点function calculatePolygonCenter (positions) {let sumX = 0, sumY = 0, sumZ = 0;const count = positions.length;positions.forEach(position => {sumX += position.x;sumY += position.y;sumZ += position.z;});const centerCartesian = new Cesium.Cartesian3(sumX / count,sumY / count,sumZ / count);const cartographic = Cesium.Cartographic.fromCartesian(centerCartesian);const longitude = Cesium.Math.toDegrees(cartographic.longitude);const latitude = Cesium.Math.toDegrees(cartographic.latitude);const height = cartographic.height;const finalCartesian = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);return {cartesian: finalCartesian,degrees: {longitude: longitude,latitude: latitude,height: height}};}let box = nullconst dataSource = Cesium.GeoJsonDataSource.load('public/json/beijing.json').then(dataSource => {box = dataSource// 添加数据源到视图viewer.dataSources.add(dataSource);const colorLists = ["DARKMAGENTA","DARKOLIVEGREEN","DARKORANGE","DARKORCHID","ORANGE","YELLOWGREEN","TOMATO","BROWN","CHOCOLATE","DARKGOLDENROD","DARKGRAY","DARKGREEN","DARKKHAKI","DARKRED","DARKSALMON","DARKSEAGREEN","DARKSLATEBLUE","DARKSLATEGRAY",];// 遍历每个实体来设置高度dataSource.entities.values.forEach((entity, index) => {if (entity.polygon) {const height = entity.properties.height ? entity.properties.height : 2000;entity.polygon.extrudedHeight = height;  // 设置拉伸高度entity.polygon.material = Cesium.Color[colorLists[index]];  // 设置颜色entity.polygon.outline = false;// 设置边框entity.polygon.closeTop = false; // 是否封闭顶部entity.polygon.closeBottom = true; // 是否封闭底部}if (entity.name && entity.polygon.hierarchy._value.positions) {const center = calculatePolygonCenter(entity.polygon.hierarchy._value.positions);viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(center.degrees.longitude, center.degrees.latitude, center.degrees.height), // 设置标签位置label: {text: entity.name,font: '16px Helvetica',fillColor: Cesium.Color.WHITE,outlineColor: Cesium.Color.BLACK,outlineWidth: 6,verticalOrigin: Cesium.VerticalOrigin.BOTTOM,style: Cesium.LabelStyle.FILL_AND_OUTLINE,pixelOffset: new Cesium.Cartesian2(0, -10),}});}});}).catch(error => {console.error('Error loading GeoJSON:', error);});// 飞入var destination = new Cesium.Cartesian3(-2312964.837539202, 4629915.442514007, 4045762.390450758)viewer.camera.flyTo({destination: destination,orientation: {heading: Cesium.Math.toRadians(0.0),pitch: -0.7871042306871505,roll: 0.0,},duration: 5,  // 飞行持续时间，单位秒});viewer.scene.postRender.addEventListener(function (e) {// 相机位置打印，console.log(viewer.camera);})
});</script>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/459650.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

软件测试学习笔记丨Selenium学习笔记：css定位

软件测试学习笔记丨Selenium学习笔记：css定位

本文转自测试人社区&#xff0c;原文链接&#xff1a;https://ceshiren.com/t/topic/22511 本文为霍格沃兹测试开发学社的学习经历分享&#xff0c;写出来分享给大家&#xff0c;希望有志同道合的小伙伴可以一起交流技术&#xff0c;一起进步~ 说明&#xff1a;本篇博客基于sel…
阅读更多...
OpenHarmony4.0配置应用开机自启

OpenHarmony4.0配置应用开机自启

一、开发环境 系统版本：OpenHarmony 4.0.10.13 设备平台：rk3588 SDK版本：fullSDK 4.0.10.13 二、背景 使用自研应用作为默认Launcher，或者说使特定应用默认开机自启作为Home应用。 三、分析过程 通过分析原生Launcher启动流程可知： AMS启动根据应用优先级启动应用，通…
阅读更多...
leetcode 75-13 k和数对的最大数目

leetcode 75-13 k和数对的最大数目

我的思路 sort函数排序 然后双指针判断 这样时间复杂度nlgn 题解给出了一种空间换时间方法 用哈希表 注意一下写法 现在完全不会这样写 还有就是注意sort函数的代码 怎么写排序也给忘了 sort用的是什么排序方法、 分析 自己写的代码和所谓的滑动窗口就是相当于简化了每个…
阅读更多...
【04】RabbitMQ的集群机制

【04】RabbitMQ的集群机制

1、RabbitMQ的性能监控 关于RabbitMQ的性能监控&#xff0c;在管理控制台中提供了非常丰富的展示。例如&#xff1a;首页这个整体监控页面&#xff0c;就展示了非常多详细的信息&#xff1a; 还包括消息的生产消费频率、关键组件的使用情况等等非常多的消息。都可以在这个管理…
阅读更多...
week08 zookeeper多种安装与pandas数据变换操作-new

week08 zookeeper多种安装与pandas数据变换操作-new

课程1-hadoop-Zookeeper安装 Ububtu18.04安装Zookeeper3.7.1 环境与版本 这里采用的ubuntu18.04环境的基本配置为&#xff1a; hostname 为master 用户名为hadoop 静态IP为 192.168.100.3 网关为 192.168.100.2 防火墙已经关闭 /etc/hosts已经配置全版本下载地址&#xff1…
阅读更多...
【Java基础】2、Java基础语法

【Java基础】2、Java基础语法

f2/fnf2&#xff1a;选中点中的文件名 ​​​​​​​ 1.注释 为什么要有注释&#xff1f; 给别人和以后的自己可以看懂的解释 注释含义 注释是在程序指定位置的说明性信息&#xff1b;简单理解&#xff0c;就是对代码的一种解释 注释分类 单行注释 //注释信息 多行注释…
阅读更多...
NAT技术和代理服务器

NAT技术和代理服务器

NAT IP原理 之前我们讨论了, IPv4协议中, IP地址数量不充足的问题 NAT技术当前解决IP地址不够用的主要手段, 是路由器的一个重要功能;NAT能够将私有IP对外通信时转为全局IP. 也就是就是一种将私有IP和全局IP相互转化的技术方法:很多学校, 家庭, 公司内部采用每个终端设置私有…
阅读更多...
基于SSM+小程序的购物管理系统1

基于SSM+小程序的购物管理系统1

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1、项目介绍 基于SSM小程序的购物管理系统1&#xff0c;可以实现首页、个人中心、商品分类管理、商品信息管理、特价商品管理、用户管理、留言板管理、系统管理、订单管理等功能。方便用户对首页、商品…
阅读更多...
Java审计对比工具JaVers使用

Java审计对比工具JaVers使用

最近有个需求&#xff0c;需要将页面的内容生成excel或者word文档&#xff0c;而且每次的修改都需要生成新的版本&#xff0c;同时需要记录每次修改变化的内容。我们会把每次的修改的内容提交赋值给一个java对象&#xff0c;同时存储到数据库一条新数据&#xff0c;对应数据表一…
阅读更多...
stm32入门教程--DMA 超详细！！！

stm32入门教程--DMA 超详细！！！

目录 简介 工作模式 1、数据转运DMA 2、ADC扫描模式DMA 简介 工作模式 1、数据转运DMA 这个例子的任务是将SRAM的数组DataA&#xff0c;转运到另一个数组DataB中&#xff0c;这个基本结构里的各个参数应该如何配置呢&#xff1f; 首先是外设站点和存储器站点的起始地址、…
阅读更多...
Python 爬虫的寻宝大冒险：如何捕获 API 数据的宝藏

Python 爬虫的寻宝大冒险：如何捕获 API 数据的宝藏

在这个信息爆炸的数字时代&#xff0c;数据就像是隐藏在网络深处的宝藏&#xff0c;等待着勇敢的探险家去发现。今天&#xff0c;我们要讲述的是如何成为一名 Python 爬虫探险家&#xff0c;装备你的代码工具&#xff0c;深入 API 的迷宫&#xff0c;捕获那些珍贵的数据宝藏。 …
阅读更多...
时间序列预测（十五）——有关Python项目框架的实例分析

时间序列预测（十五）——有关Python项目框架的实例分析

#1024程序员节&#xff5c;征文# 在之前的学习中&#xff0c;已经对时间序列预测的相关内容有了大致的了解。为了进一步加深理解&#xff0c;并能够将所学知识应用于实际中&#xff0c;我决定找一个完整的Python框架来进行深入学习。经过寻找&#xff0c;我终于找到了一篇非常具…
阅读更多...
【338】基于springboot的IT职业生涯规划系统

【338】基于springboot的IT职业生涯规划系统

毕 业 设 计&#xff08;论 文&#xff09; 题目&#xff1a;it职业生涯规划系统的设计与实现 摘 要 互联网发展至今&#xff0c;无论是其理论还是技术都已经成熟&#xff0c;而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播&#xff0c;搭配信息管理工具可以…
阅读更多...
基于SSM+小程序的童装商城管理系统（商城3）

基于SSM+小程序的童装商城管理系统（商城3）

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1、项目介绍 基于SSM小程序的童装商城管理系统实现了管理员及用户。 1、管理员实现了 首页、个人中心、用户管理、分类列表管理、童装商城管理、系统管理、订单管理。 2、用户实现了 注册、登录、首…
阅读更多...
Spring Boot框架中小企业设备监控系统开发

Spring Boot框架中小企业设备监控系统开发

3系统分析 3.1可行性分析 通过对本中小企业设备管理系统实行的目的初步调查和分析&#xff0c;提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本中小企业设备管理系统采用Spring Boot框架&#xff0…
阅读更多...
QT实时显示日志内容

QT实时显示日志内容

性能有待提高&#xff1b; 能够读取指定目录下的日志文件&#xff0c;显示在下拉框中。 选择某一个日志之后&#xff0c;点击获取数据按钮&#xff0c;能够实时刷新日志内容。 但是每次刷新都会对整个文件进行读取&#xff0c;文本框重新加载文本。效率很低&#xff0c;影响性能…
阅读更多...
Qt/C++ 调用迅雷开放下载引擎（ThunderOpenSDK）下载数据资源

Qt/C++ 调用迅雷开放下载引擎（ThunderOpenSDK）下载数据资源

目录导读 前言ThunderOpenSDK 简介参考 xiaomi_Thunder_Cloud 示例ThunderOpenSDK 下载问题 前言 在对以前老版本的exe执行程序进行研究学习的时候&#xff0c;发现以前的软件是使用的ThunderOpenSDK这个迅雷开放下载引擎进行的项目数据下载&#xff0c;于是在网上搜索一番找到…
阅读更多...
八，Linux基础环境搭建（CentOS7）- 安装Mysql和Hive

八，Linux基础环境搭建（CentOS7）- 安装Mysql和Hive

Linux基础环境搭建&#xff08;CentOS7&#xff09;- 安装Mysql和Hive 大家注意以下的环境搭建版本号&#xff0c;如果版本不匹配有可能出现问题&#xff01; 一、Mysql下载及安装 MySQL是一个关系型数据库管理系统&#xff0c;由瑞典MySQL AB 公司开发&#xff0c;属于 Orac…
阅读更多...
等保测评：塑造信息时代的新常态

等保测评：塑造信息时代的新常态

随着信息技术的飞速发展&#xff0c;信息安全已经成为一个全球性的问题。在信息时代&#xff0c;数据的安全性、完整性和可用性对于个人、企业乃至国家都至关重要。等保测评&#xff08;等级保护测评&#xff09;&#xff0c;作为信息安全领域的一项重要工作&#xff0c;其目的…
阅读更多...
C++ 整型大数运算(大整数运算)项目

C++ 整型大数运算(大整数运算)项目

C 整型大数运算项目 一、项目介绍二、项目变量成员三、项目实现构造函数加法减法乘法先计算再进位边计算边进位 除法与取模判断输入输出 四、项目源代码展示在 Big_integer.h 中&#xff1a;在 Big_integer.cpp 中&#xff1a; 五、测试准确性六、优化方向 一、项目介绍 整型大…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023