Cesium实践（4）——空间数据加载

news2025/10/31 21:20:41

文章目录

  • 前言
  • 几何形体
    • 点
    • 线
    • 面
    • 体
  • 标签
    • 文字
    • 图标
  • 几何文件
    • GeoJson
    • KML
    • CZML
  • 三维模型
  • 总结

前言

本文介绍Cesium如何加载空间数据，空间数据即明确定义在三维空间中的数据，空间数据包括以下几类：1、几何形体（点、线、面、体）2、标签（文字图标等）3、几何文件（geojson、kml、czml）4、三维模型（gltf、gltf）。3D Tiles 作为Cesium提出的处理大型三维数据的格式暂不在本文介绍。

几何形体

在前一篇文章中讲到，Entity 是由 Primitive 封装而来API，空间几何数据的实现几乎是由他们提供，几何要素从类型上区分可划分为点、线、面、体等，如下表所示。

功能Entity APIPrimitive API
创建点要素，可控制点颜色、轮廓等PointGraphics-
创可设定宽度的折线PolylineGraphicsPolylineGeometry
各种几何要素轮廓线、不可设置宽度，轮廓线种类包括：立方体、圆/椭圆、廊、圆柱/锥、球/椭球、矩形、多边形、面、墙、管状线等-SimplePolylineGeometry
圆形面要素-CircleGeometry
廊状面要素CorridorGraphicsCorridorGeometry
椭圆状面要素EllipseGraphicsEllipseGeometry
矩形面要素RectangleGraphicsRectangleGeometry
多边形面要素PolygonGraphicsPolygonGeometry
平面要素PlaneGraphicsPlaneGeometry
立方体要素BoxGraphicsBoxGeometry
圆柱、圆锥体要素CylinderGraphicsCylinderGeometry
椭圆体要素EllipsoidGraphicsEllipseGeometry
管状体要素PolylineGraphicsPolylineGeometry
球体要素-SphereGeometry
墙体要素WallGraphicsWallGeometry

Entity支持的属性如下，Entity添加几何体后返回Viewer对象
在这里插入图片描述

点

  const point = viewer.entities.add({
    // 定位点
    position: Cesium.Cartesian3.fromDegrees(117, 40, 100),
    // 点
    point: {
      pixelSize: 10,// 大小
      color: Cesium.Color.RED, //点的颜色
      outlineWidth: 4, // 外框大小
      outlineColor: Cesium.Color.WHITE, //外框颜色
    },
  });

在这里插入图片描述

线

  • 普通线
  const line = viewer.entities.add({
      name: "red_line",
      polyline: {
        positions: Cesium.Cartesian3.fromDegreesArray([117, 40, 118, 40]), //线位置
        width: 5, // 宽度
        material: Cesium.Color.RED, // 材质
        clampToGround: true, // 贴地
      }
  });

在这里插入图片描述

  • 轮廓线——通过Entity
  const outlineOnly = viewer.entities.add({
    name: "red_box_outline",
    position: Cesium.Cartesian3.fromDegrees(117.2, 40.0, 300.0),
    box: {
    	// 维度
      dimensions: new Cesium.Cartesian3(300.0, 300.0, 300.0),
      fill: false, // 填充面
      outline: true, // 开启边框
      outlineColor: Cesium.Color.RED ,// 边框颜色
    },
  });

在这里插入图片描述

  • 轮廓线——通过Primitive
  const box = Cesium.BoxOutlineGeometry.fromDimensions({
    dimensions: new Cesium.Cartesian3(500000.0, 500000.0, 500000.0),
  });
  const geometry = Cesium.BoxOutlineGeometry.createGeometry(box);
  // 创建boxOutline的几何实例
  let boxOutlineInstance = new Cesium.GeometryInstance({
    geometry: geometry,
    modelMatrix: Cesium.Matrix4.multiplyByTranslation(
      Cesium.Transforms.eastNorthUpToFixedFrame(
        Cesium.Cartesian3.fromDegrees(170, 40)
      ),
      new Cesium.Cartesian3(0.0, 0.0, 1000.0),
      new Cesium.Matrix4()
    ),
    id: "boxOutline",
    attributes: {
      color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED),
    },
  });
  // 创建图元
  let primitive = new Cesium.Primitive({
    geometryInstances: boxOutlineInstance,
    appearance: new Cesium.PerInstanceColorAppearance({
      flat: true,
      faceForward: true,
      translucent: false,
      closed: false,
    }),
    asynchronous: false,
    show: true,
    modelMatrix: Cesium.Matrix4.IDENTITY,
    vertexCacheOptimize: false,
    interleave: false,
    compressVertices: true,
    releaseGeometryInstances: true,
    allowPicking: true,
    cull: true,

    debugShowBoundingVolume: false,
    shadows: Cesium.ShadowMode.DISABLED,
  });
  viewer.scene.primitives.add(primitive);

在这里插入图片描述

面

  const redPlane = viewer.entities.add({
    name: "red_plane",
    position: Cesium.Cartesian3.fromDegrees(117.1, 40.0, 300.0),
    plane: {
      plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_Y, 0.0),
      dimensions: new Cesium.Cartesian2(500.0, 300.0),
      material: Cesium.Color.RED.withAlpha(0.5),
      outline: true,
      outlineColor: Cesium.Color.BLACK,
    },
  });

在这里插入图片描述

体

  const redBox = viewer.entities.add({
    name: "red_box",
    position: Cesium.Cartesian3.fromDegrees(117.3, 40.0, 400.0),
    box: {
      dimensions: new Cesium.Cartesian3(400.0, 200.0, 300.0),
      material: Cesium.Color.RED.withAlpha(0.5),
      outline: true,
      outlineColor: Cesium.Color.BLACK,
    },
  });

在这里插入图片描述

标签

文字

  const label = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(117.4, 40, 1500),
    label: {
      text: "这是一团火",
      font: "24px sans-serif", // 大小 字型
      fillColor: Cesium.Color.WHITE, //字体颜色
      outlineColor: Cesium.Color.BLACK, //字体外框颜色
      outlineWidth: 4, // 字边宽
      style: Cesium.LabelStyle.FILL_AND_OUTLINE, // FILL填充文字，OUTLINE勾勒标签，FILL_AND_OUTLINE填充文字和勾勒标签
      pixelOffset: new Cesium.Cartesian2(0, -24),// 设置文字的偏移量  
      horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 设置文字的显示位置,LEFT /RIGHT /CENTER
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,       // 设置文字的显示位置
    },
  });

图标

  const label = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(117.4, 40, 1500),
    billboard: {
      image: "../texture/Fire.png",
      width: 50,
      height: 50,
      verticalOrigin: Cesium.VerticalOrigin.TOP, //垂直显示位置
      horizontalOrigin: Cesium.HorizontalOrigin.CENTER,  // 水平显示位置
    },
  });

在这里插入图片描述

几何文件

常见的几何文件包括GeoJson、KML，除此外，Cesium还在JSON数据的基础上扩充了CZML类型来自持更大的数据流。DataSoureCollection 是 Cesium中加载矢量数据的主要方式之一，最大特点是支持加载矢量数据集与外部文件的调用，主要分为CzmlDataSource、KmlDataSource、GeoJsonDataSource三种，分别对应加载CZML、KML和 GeoJSON 格式数据。

更多代码示例见官网：https://sandcastle.cesium.com/?src=KML.html&label=DataSources

GeoJson

  // geojson
  const chinaGeoJson = Cesium.GeoJsonDataSource.load(
    "https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json",
    {
      stroke: Cesium.Color.RED, // 边线默认色
      fill: Cesium.Color.SKYBLUE.withAlpha(0.5), // 默认填充色
      strokeWidth: 4, // 多边形线条和多边形轮廓的默认宽
    }
  );


  chinaGeoJson.then((dataSources) => { // geojson加载完成的回调
    viewer.dataSources.add(dataSources);
    const entities = dataSources.entities.values;
    entities.forEach((entity, i) => {
      entity.polygon.material = new Cesium.ColorMaterialProperty(
        Cesium.Color.fromRandom({ // 每个json随机赋色
          alpha: 1,
        })
      );
      entity.polygon.outline = false;
      entity.polygon.extrudedHeight = 1000 // 拉伸高
    });
  });

在这里插入图片描述

KML

  const kmlDataPromise = Cesium.KmlDataSource.load(kmlUrl, {
    camera: viewer.scene.camera,
    canvas: viewer.scene.canvas,
    screenOverlayContainer: viewer.container,
  });

  kmlDataPromise.then(function (dataSource) {
    viewer.dataSources.add(dataSource);
  });

在这里插入图片描述

CZML

CZML的使用可见 Cesium_CZML

三维模型

  // 创建模型
  function createModel(url, height) {

    const position = Cesium.Cartesian3.fromDegrees(117, 40.01, height);
    const heading = Cesium.Math.toRadians(135);
    const pitch = 0;
    const roll = 0;
    const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
    const orientation = Cesium.Transforms.headingPitchRollQuaternion(
      position,
      hpr
    );

    const entity = viewer.entities.add({
      name: url,
      position: position,
      orientation: orientation,
      model: {
        uri: url,
        minimumPixelSize: 128,
        maximumScale: 20000,
      },
    });
    viewer.trackedEntity = entity;
  }
  createModel("../model/Air.glb", 1000)
  createModel("../Assets/CesiumMilkTruck.glb",150)

在这里插入图片描述

总结

  • 几何形体：点、线、面、体

  • 标签：文字、图标

  • 几何文件：GeoJson、KML、CZML

  • 三维模型：glb/gltf

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

“支付+SaaS”赋能传统产业数字化转型

“支付+SaaS”赋能传统产业数字化转型

易观：传统支付业务利润空间在政策监管和市场竞争下不断被压缩，多家上市支付机构逐步将业务经营重点转移切入到企业交易环节，为企业提供包括SaaS服务、行业解决方案、营销服务及金融科技服务等在内的企业服务收入成为新的增长点。 伴随着“十四…
阅读更多...
OSCP-AuthBy（Server 2008提权）

OSCP-AuthBy（Server 2008提权）

目录 扫描 FTP WEB 提权 扫描 nmap -sV -sC -p- 192.168.73.46 FTP 检查端口21上的匿名登录 导航到accounts目录，可以观察ftp服务上的帐户 Offsec, anonymous, admin
阅读更多...
Java8函数式编程(Lambda表达式，Stream流，Optional)

Java8函数式编程(Lambda表达式，Stream流，Optional)

一.函数式编程思想 面向对象思想主要是关注对象能完成什么事情，函数式编程思想就像函数式，主要是针对数据操作；代码简洁容易理解，方便于并发编程，不需要过分关注线程安全问题 二.lambda表达式 1.概念 lambda表达式…
阅读更多...
提升金融写作效率：金融校对软件的优势与应用

提升金融写作效率：金融校对软件的优势与应用

金融行业的写作任务繁重且要求高度专业，涉及财务报告、研究报告、合同、政策文件等各类文档。金融校对软件应运而生，为金融专业人士提供有效的支持，帮助他们提高写作效率和质量。本文将探讨金融校对软件的优势与应用。 一、金融校对软件的优势…
阅读更多...
【NFS共享存储服务】

【NFS共享存储服务】

目录 一、NFS (Network File System）网络文件系统1.1、NFS工作原理1.2、举例1.2.1、共享文件总结 一、NFS (Network File System）网络文件系统 依赖于RPC (远端过程调用) 需安装nfs-utils、rpcbind软件包 系统服务: nfs、rpcbind 共享配置文件: /etc/ex…
阅读更多...
跳表的实现

跳表的实现

目录 简介跳表的实现 简介 skiplist本质也是一种查找结构，和搜索树、哈希表一样可以作为key或者key/value模型的查找结构，从命名可以看出它也是一个链表结构，链表的查找效率是O(n),作为在链表基础上优化的一种查找结构，跳表的查找…
阅读更多...
app拉新充场代理

app拉新充场代理

我认为您可能是想了解APP充值拉新软件的功能吧。通常，APP充值拉新软件会具有以下功能： 充值服务：提供多种支付方式，让用户方便快捷地进行充值操作。 活动推广：通过不同的方式，如折扣、优惠码等&…
阅读更多...
Tomcat的部署和优化

Tomcat的部署和优化

Tomcat的组件构成 （1）Web 容器：完成 Web 服务器的功能。 （2）Servlet 容器：名字为 catalina，用于处理 Servlet 代码。 （3）JSP 容器：用于将 JSP 动态网页翻译成…
阅读更多...
centos系统安装mysql8.0

centos系统安装mysql8.0

centos系统安装mysql8.0 环境说明开始1、查看centos7中是否有MariaDB，MariaDB与MySQL关系请自行查阅2、如果有MariaDB，需要将 步骤1 中查询到的mairadb全部卸载，否则MySQL安装会出现问题3、查看本机是否已经安装过MySQL4、如果安装过MySQL&am…
阅读更多...
9.java程序员必知必会类库之加密库

9.java程序员必知必会类库之加密库

前言 密码学在计算机领域源远流长，应用广泛。当前每时每刻，每一个连接到互联网的终端，手机，电脑，iPad都会和互联网有无数次的数据交互，如果这些数据都是明文传输那将是难以想象的。为了保护用户隐私&#…
阅读更多...
算法--前缀和技巧 （蓝桥杯123-灵能传输）

算法--前缀和技巧 （蓝桥杯123-灵能传输）

文章目录 什么是前缀和用途什么时候用例题[蓝桥杯 2021 国 ABC] 123题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 提示 思路代码 灵能传输(蓝桥杯96%，洛谷ac)[蓝桥杯 2019 省 B] 灵能传输题目背景题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1…
阅读更多...
知识图谱实战开篇-讲述知识图谱是什么，要学哪些知识，一文讲通

知识图谱实战开篇-讲述知识图谱是什么，要学哪些知识，一文讲通

大家好，我是微学AI，今天给大家带来知识图谱重要讲述，讲明白什么是知识图谱，知识图谱可以做什么，需要学哪些知识，与自然语言处理的关系。很多人认为知识图谱是关系图谱，可能涉及人工智能的东西不…
阅读更多...
【LeetCode】650. 只有两个键的键盘

【LeetCode】650. 只有两个键的键盘

650. 只有两个键的键盘（中等） 思路 不同于以往通过加减实现的动态规划，这里需要乘除法计算位置。因为粘贴操作是倍数增加，使一个一维数组 dp，其中位置 i 表示延展到长度 i 的最少操作次数。对于每个位置 j &#xff0c…
阅读更多...
C++学习 Day6

C++学习 Day6

目录 1. 类对象模型 1.1 如何计算类对象的大小 1.2 类对象的存储方式 1.3 结构体内存对齐规则 2. this指针 2.1 this指针的引出 2.2 this指针的特性 3. 类的6个默认成员函数 4.构造函数 4.1 概念 4.2 特性 1. 类对象模型 1.1 如何计算类对象的大小 class A { publi…
阅读更多...
【Java】『蓝桥杯』10道编程题及答案（一）

【Java】『蓝桥杯』10道编程题及答案（一）

系列文章 【Java】『蓝桥杯』10道编程题及答案（一） 本文链接：https://blog.csdn.net/youcheng_ge/article/details/130223115 【Java】『蓝桥杯』10道编程题及答案（二） 本文链接：https://blog.csdn.net/y…
阅读更多...
【Hello Network】协议

【Hello Network】协议

作者：小萌新 专栏：网络 作者简介：大二学生 希望能和大家一起进步 本篇博客简介：简单介绍下协议并且设计一个简单的网络服务器 协议 协议的概念结构化数据传输序列化和反序列化网络版计算机服务端代码协议定制客户端代码服务线程执…
阅读更多...
[Netty] HashWheelTimer时间轮 (十六)

[Netty] HashWheelTimer时间轮 (十六)

文章目录 1.常见定时任务实现2.时间轮算法3.HashedWheelTimer源码分析3.1 内部结构分析3.2 构造方法3.3 添加任务3.4 工作线程Worker3.5 停止时间轮 4.HashWheelTimer总结 1.常见定时任务实现 定时器的使用场景包括：成月统计报表、财务对账、会员积分结算、邮件推送…
阅读更多...
Linux Podman容器介绍

Linux Podman容器介绍

目录 Podman讲解 Container 和 Container Images 的关系 安装Podman 配置root的容器管理 国内镜像源 配置Podman的镜像源 创建容器相关命令 配置rootless的容器管理 配置Podman镜像源 管理容器镜像 管理容器 将容器作为systemd服务运行 配置普通用户来创建systemd…
阅读更多...
Jetpack Compose之线性布局和帧布局

Jetpack Compose之线性布局和帧布局

概述 Compose 中的线性布局对应的是Android传统视图中的LinearLayout,不一样的地方是，Compose根据Orientation的不同又将布局分为Column和Row, Column对应传统视图LinearLayout中orientation “vertical”的情况，Row对应传统视图LinearLayout中orienta…
阅读更多...
Redis入门学习笔记【二】Redis缓存

Redis入门学习笔记【二】Redis缓存

目录 一、Redis缓存 二、Redis使用缓存遇到的问题 2.1 数据一致性 2.2缓存雪崩 2.3 缓存穿透 2.4 缓存击穿 一、Redis缓存 数据缓存是Redis最重要的一个场景，为缓存而生，在springboot中，一般有两种使用方式： 直接通过RedisT…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023