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,
  });
  // 去除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",
        //地理位置坐标[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,
  });
  // 去除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.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; // 完全隐藏地球表面
  // 去除logo
  viewer.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 = null
  const 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>

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

数据库基础介绍

数据库基础介绍

前言&#xff1a; 在当今信息化、数字化的时代&#xff0c;数据库是支撑一切信息系统的核心基础设施。无论是金融机构的账户管理、电商平台的商品库存&#xff0c;还是社交媒体的用户信息&#xff0c;数据库都在背后扮演着关键角色数据库不仅用于存储和管理数据&#xff0c;更…
阅读更多...
《链表篇》---环形链表II(返回节点)

《链表篇》---环形链表II(返回节点)

题目传送门 方法一&#xff1a;哈希表&#xff08;与环形链表类似&#xff09; 很容易就可以找到链表的相交位置。 public class Solution {public ListNode detectCycle(ListNode head) {if(head null || head.next null){return null;}Set<ListNode> visited new Ha…
阅读更多...
使用Kubernetes管理容器化应用

使用Kubernetes管理容器化应用

使用Kubernetes管理容器化应用 Kubernetes简介 安装Kubernetes 安装Minikube 启动Minikube集群 创建一个简单的Web应用 创建项目目录 初始化项目 安装Node.js依赖 创建Docker镜像 编写Dockerfile 构建并推送Docker镜像 创建Kubernetes配置文件 创建Deployment 创建Service …
阅读更多...
Java知识巩固(十二)

Java知识巩固(十二)

I/O JavaIO流了解吗&#xff1f; IO 即 Input/Output&#xff0c;输入和输出。数据输入到计算机内存的过程即输入&#xff0c;反之输出到外部存储&#xff08;比如数据库&#xff0c;文件&#xff0c;远程主机&#xff09;的过程即输出。数据传输过程类似于水流&#xff0c;因…
阅读更多...
Android中的epoll机制

Android中的epoll机制

深入理解Android中的epoll机制 在Android系统中&#xff0c;epoll广泛用于高效管理网络和文件的I/O操作。它通过减少CPU资源消耗和避免频繁的内核态-用户态切换&#xff0c;实现了在多连接、多任务环境中的高性能。epoll的特性使其非常适合Android系统中网络服务器、Socket通信…
阅读更多...
Hash表算法

Hash表算法

哈希表 理论知识&#xff08;本文来自于代码随想录摘抄&#xff09;什么是哈希常见的三种哈希结数组&#xff1a;set:map:其他常用方法或者技巧&#xff08;自己总结的&#xff09; 练习题和讲解有效的字母移位词349. 两个数组的交集1. 两数之和454. 四数相加 II15. 三数之和 总…
阅读更多...
Java SPI 机制详解

Java SPI 机制详解

面向对象设计鼓励模块间基于接口而非具体实现编程&#xff0c;以降低模块间的耦合&#xff0c;遵循依赖倒置原则&#xff0c;并支持开闭原则&#xff08;对扩展开放&#xff0c;对修改封闭&#xff09;。然而&#xff0c;直接依赖具体实现会导致在替换实现时需要修改代码&#…
阅读更多...
宇音天下最新力作 | VTX356语音识别合成芯片问世

宇音天下最新力作 | VTX356语音识别合成芯片问世

北京宇音天下科技有限公司&#xff0c;依托在语音技术领域的丰富经验和技术积累&#xff0c;成功推出了一款具有里程碑意义的语音识别合成芯片——VTX356。这款芯片的问世&#xff0c;不仅彰显了公司在智能语音处理领域的专业实力&#xff0c;也预示着智能家居、车载电子、智能…
阅读更多...
51c视觉~合集1

51c视觉~合集1

我自己的原文哦~ https://blog.51cto.com/whaosoft/11474386 #HAFormer 融合 CNN 与 Transformer 的高效轻量级语义分割模型 HAFormer以最小的计算开销和紧凑的模型尺寸实现了高性能&#xff0c;在Cityscapes上的mIoU达到了74.2%&#xff0c;在CamVid测试数据集上的mIoU达到…
阅读更多...
Spring Boot集成Milvus和deeplearning4j实现图搜图功能

Spring Boot集成Milvus和deeplearning4j实现图搜图功能

1.什么是Milvus&#xff1f; Milvus 是一种高性能、高扩展性的向量数据库&#xff0c;可在从笔记本电脑到大型分布式系统等各种环境中高效运行。它既可以开源软件的形式提供&#xff0c;也可以云服务的形式提供。 Milvus 是 LF AI & Data Foundation 下的一个开源项目&…
阅读更多...
[含文档+PPT+源码等]精品基于PHP实现的培训机构信息管理系统的设计与实现

[含文档+PPT+源码等]精品基于PHP实现的培训机构信息管理系统的设计与实现

基于PHP实现的培训机构信息管理系统的设计与实现背景&#xff0c;可以从以下几个方面进行阐述&#xff1a; 一、社会发展与教育需求 随着经济的不断发展和人口数量的增加&#xff0c;教育培训行业迎来了前所未有的发展机遇。家长对子女教育的重视程度日益提高&#xff0c;课外…
阅读更多...
wireshark筛选条件整理

wireshark筛选条件整理

Wireshark筛选条件整理 一、MAC地址过滤二、IP地址过滤三、端口过滤四、协议筛选五、数据分析1、整体2、frame数据帧分析3、 Ethernet II 以太网4、IP协议5、TCP6、HTTP7、ARP8、DLEP动态链接交换协议 六、统计-协议分级&#xff08;统计包占比&#xff09; and && 、 …
阅读更多...
通俗直观介绍ChatGPT背后的大语言模型理论知识

通俗直观介绍ChatGPT背后的大语言模型理论知识

“AI 的 iPhone 时刻到来了”。非算法岗位的研发同学’被迫’学习 AI&#xff0c;产品岗位的同学希望了解 AI。但是&#xff0c;很多自媒体文章要么太严谨、科学&#xff0c;让非科班出身的同学读不懂&#xff1b;要么&#xff0c;写成了科幻文章&#xff0c;很多结论都没有充分…
阅读更多...
『完整代码』宠物召唤

『完整代码』宠物召唤

创建脚本并编写&#xff1a;PetFollowTarget.cs using UnityEngine; public class PetFollowTarget : MonoBehaviour{Transform target;float speed 2f;Animator animator;void Start(){target GameObject.Find("PlayerNormal/PetsSmallPos").gameObject.transform…
阅读更多...
macOS 15 Sequoia dmg格式转用于虚拟机的iso格式教程

macOS 15 Sequoia dmg格式转用于虚拟机的iso格式教程

想要把dmg格式转成iso格式&#xff0c;然后能在虚拟机上用&#xff0c;最起码新版的macOS镜像是不能用UltraISO&#xff0c;dmg2iso这种软件了&#xff0c;你直接转放到VMware里绝对读不出来&#xff0c;办法就是&#xff0c;在Mac系统中转换为cdr&#xff0c;然后再转成iso&am…
阅读更多...
【MySQL备份】使用XtraBackup搭建GTID主从复制

【MySQL备份】使用XtraBackup搭建GTID主从复制

创建备份账号 这里给了all 权限 grant all on *.* to backup% identified by backup; 在主库上进行全备 xtrabackup --defaults-file/home/storage/mysql_3306/mysql_3306.cnf --backup --userbackup --passwordbackup --port3306 --target-dir/home/backups/all_xtrabp 备…
阅读更多...
java中Scanner的nextLine和next方法

java中Scanner的nextLine和next方法

思考&#xff0c;输入1 2 3 4 5加上enter&#xff0c;输出什么 import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner sc new Scanner(System.in);int[][] m new int[2][2];for (int i 0; i < 2; i) {for (int j 0; j < 2;…
阅读更多...
DEVOPS: 容器与虚拟化与云原生

DEVOPS: 容器与虚拟化与云原生

概述 传统虚拟机&#xff0c;利用 hypervisor&#xff0c;模拟出独立的硬件和系统&#xff0c;在此之上创建应用虚拟机是一个主机模拟出多个主机虚拟机需要先拥有独立的系统docker 是把应用及配套环境独立打包成一个单位docker 是在主机系统中建立多个应用及配套环境docker 是…
阅读更多...
OKCC的API接口与SDK的区别

OKCC的API接口与SDK的区别

随着累计的客户越来越多&#xff0c;客户的多元化就成了必然。以前最早我们的客户群体占比最大的可能是话务运营这个圈子。但是现在很多企业软件开发公司也成为了合作伙伴&#xff0c;那么这种就不是简单的搭建一套OKCC系统&#xff0c;然后配上线路就完成了&#xff0c;而是要…
阅读更多...
大数据新视界 -- 大数据大厂之大数据重塑影视娱乐产业的未来（4 - 4）

大数据新视界 -- 大数据大厂之大数据重塑影视娱乐产业的未来（4 - 4）

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…
阅读更多...
最新文章

Copyright @ 2022~2023