cesium学习（entities实体）

news2024/12/26 22:36:39

什么是entities

CesiumJS具有丰富的空间数据API，可分为两类：面向图形开发人员的低级Primitive API，以及用于数据驱动可视化的高级Entity API。
entitiesAPI公开了一组一致设计的高级对象，这些对象将相关的可视化和信息聚合到一个统一的数据结构中，我们称之为实体。它让我们专注于数据的呈现，而不是担心可视化的潜在机制。它还以一种与静态数据自然结合的方式，为轻松构建复杂的时间动态可视化提供了结构。虽然实体API实际上在幕后使用原始API，但这是我们（几乎）永远不用关心的实现细节。通过对我们提供的数据应用各种启发式，实体API能够提供灵活、高性能的可视化，同时公开一致、易于学习和易于使用的界面。

创建第一个实体

const viewer = new window.Cesium.Viewer("cesiumContainer");
    const wyoming = viewer.entities.add({
      // 多边形
      polygon: {
        // 将经纬度数组转换为笛卡尔坐标数组
        hierarchy: window.Cesium.Cartesian3.fromDegreesArray([
          -109.080842, 45.002073, -105.91517, 45.002073, -104.058488, 44.996596,
          -104.053011, 43.002989, -104.053011, 41.003906, -105.728954,
          40.998429, -107.919731, 41.003906, -109.04798, 40.998429, -111.047063,
          40.998429, -111.047063, 42.000709, -111.047063, 44.476286, -111.05254,
          45.002073,
        ]),
        height: 0,
        // 材料
        material: window.Cesium.Color.RED.withAlpha(0.5),
        // 轮廓
        outline: true,
        outlineColor: window.Cesium.Color.BLACK,
      },
    });
    //将场景缩放到适合所有实体的范围。它会根据场景中所有实体的位置和尺寸自动调整相机的位置和方向
    viewer.zoomTo(wyoming);

在这里插入图片描述

形状和体积

  1. 盒子（entity.box）
  2. 圆和椭圆（entity.ellipse）
  3. 通道（entity.corridor）
  4. 圆柱体和圆锥体（entity.cylinder）
  5. 多边形（entity.polygon）
  6. 折线（entity.polyline）
  7. 折线卷（entity.polylineVolume）
  8. 矩形（entity.rectangle）
  9. 球体和椭圆体（entity.ellipsoid）
  10. 墙（entity.wall）

材料和轮廓

所有形状和体积都有一组共同的属性来控制它们的外观。该 fill 属性指定几何图形是否被填充，该 outline 属性指定几何图形是否被勾勒。
我们设置一般针对material属性

const entity = viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0),
  // 创建一个椭圆实体
  ellipse: {
    semiMinorAxis: 250000.0,
    semiMajorAxis: 400000.0,
    // 半透膜蓝色填充
    material: Cesium.Color.BLUE.withAlpha(0.5),
  },
});
viewer.zoomTo(viewer.entities);

我们还可以指定图像的 url 而不是颜色

ellipse.material = "/docs/tutorials/creating-entities/images/cats.jpg";

还有棋盘，条纹，网格，轮廓线，折线，折线轮廓，折线辉光等
参考地址

高度和挤压（拉伸）

包括走廊、椭圆、多边形和矩形在内的曲面形状可以放置在高度或拉伸到体积中。在这两种情况下，形状或体积仍将符合WGS84椭球体的曲率。

// 将多边形提升到地球上方 250,000 米。
wyoming.polygon.height = 250000;

在这里插入图片描述
讲图形挤压（拉伸）成体积，需要设置extrudedHeight属性。体积将在高度和拉伸高度之间创建。如果未定义高度，则体积从0开始。

// 创建一个从 200,000 米开始并延伸到 250,000 米的体积
wyoming.polygon.height = 200000;
wyoming.polygon.extrudedHeight = 250000;

选择与说明

单击查看器中的某个实体将在该实体的位置显示SelectionIndicator小部件，并显示InfoBox以提供更多信息。我们可以设置一个名称，该名称决定InfoBox的标题。我们还可以提供HTML作为Entity.description属性。

wyoming.name = "wyoming";
wyoming.description =
  '\
<img\
  width="50%"\
  style="float:left; margin: 0 1em 1em 0;"\
  src="/docs/tutorials/creating-entities/Flag_of_Wyoming.svg"/>\
<p>\
  Wyoming is a state in the mountain region of the Western \
  United States.\
</p>\
<p>\
  Wyoming is the 10th most extensive, but the least populous \
  and the second least densely populated of the 50 United \
  States. The western two thirds of the state is covered mostly \
  with the mountain ranges and rangelands in the foothills of \
  the eastern Rocky Mountains, while the eastern third of the \
  state is high elevation prairie known as the High Plains. \
  Cheyenne is the capital and the most populous city in Wyoming, \
  with a population estimate of 63,624 in 2017.\
</p>\
<p>\
  Source: \
  <a style="color: WHITE"\
    target="_blank"\
    href="http://en.wikipedia.org/wiki/Wyoming">Wikpedia</a>\
</p>';

在这里插入图片描述

相机控制

使用viewer.zoomTo命令可以查看特定实体。还有一个viewer.flyTo方法，用于执行到实体的动画摄影机飞行。这两个方法都可以传递给Entity、EntityCollection、DataSource或实体数组。
任何一种方法都会计算所有提供实体的视图。默认情况下，摄影机指向北方，并从45度角向下观看。通过传入HeadingPitchRange来自定义此选项。

const heading = Cesium.Math.toRadians(90);
const pitch = Cesium.Math.toRadians(-30);
viewer.zoomTo(wyoming, new Cesium.HeadingPitchRange(heading, pitch));

zoomTo和flyTo都是异步函数；也就是说，他们不能保证在返回之前完成。例如，飞行到一个实体发生在许多动画帧上。这两个函数都返回Promises，可用于安排飞行或缩放完成后执行的函数。将我们示例中的zoomTo替换为下面的片段。这架飞机飞往怀俄明州，并在飞行完成后选择它。

const result = await viewer.flyTo(wyoming);
if (result) {
  viewer.selectedEntity = wyoming;
}

通过将viewer.trackedEntity设置为undefined或双击离开实体来停止跟踪。调用zoomTo或flyTo也将取消跟踪。

管理实体

EntityCollection（实体收集）是一个数组，用来管理和监视一组实体。
viewer.entities 是一个 EntityCollection。 包括用于管理实体的EntityCollection 方法，例如 和 。add, removeremoveAll。

  1. 所有实体实例都具有唯一性 ，可用于从集合中检索实体。我们可以指定一个ID，或者一个会自动生成
viewer.entities.add({
  id: "uniqueId",
});
  1. 使用getById检索实体。如果不存在具有所提供 ID 的实体，则返回undefined 。
const entity = viewer.entities.getById("uniqueId");
  1. 要获取实体或创建新实体（如果不存在），请使用getOrCreateEntity。
const entity = viewer.entities.getOrCreateEntity("uniqueId");
  1. 手动创建一个新实体并使用add将其添加到集合中。如果集合中已存在具有相同ID的实体，则此方法抛出。
const entity = new Entity({
  id: "uniqueId",
});
viewer.entities.add(entity);
  1. 使用collectionChanged事件，这会在集合中添加、删除或更新实体时通知侦听器。
function onChanged(collection, added, removed, changed) {
  let message = "Added ids";
  for (var i = 0; i < added.length; i++) {
    message += "\n" + added[i].id;
  }
  console.log(message);
}
viewer.entities.collectionChanged.addEventListener(onChanged);

选择（pick）

拾取（单击以选择一个对象）是我们需要与 Primitive API 进行简要交互的区域之一。使用scene.pickandscene.drillPick检索实体。
单个实例

function pickEntity(viewer, windowPosition) {
// 拾取一个对象
  const picked = viewer.scene.pick(windowPosition);
  // Cesium.defined是否已定义，或者不为null
  if (Cesium.defined(picked)) {
  // Cesium.defaultValue函数来获取该元素的id属性。
  // 如果picked.id存在，则将其赋值给id变量；否则，将picked.primitive.id赋值给id变量。
    const id = Cesium.defaultValue(picked.id, picked.primitive.id);
    // id 的类型是 Cesium.Entity则返回id
    if (id instanceof Cesium.Entity) {
      return id;
    }
  }
  return undefined;
}

区域内所有实例

function drillPickEntities(viewer, windowPosition) {
  let picked, entity, i;
  // drillPick拾取区域内所有实例，包括被包裹的实例
  const pickedPrimitives = viewer.scene.drillPick(windowPosition);
  const length = pickedPrimitives.length;
  const result = [];
  const hash = {};

  for (i = 0; i < length; i++) {
    picked = pickedPrimitives[i];
    entity = Cesium.defaultValue(picked.id, picked.primitive.id);
    if (entity instanceof Cesium.Entity && !Cesium.defined(hash[entity.id])) {
      result.push(entity);
      hash[entity.id] = true;
    }
  }
  return result;
}

点，广告牌和标签

通过设置位置、点和标签来创建图形点或标签。例如，在我们最喜欢的棒球队的主场放置一个点。

const viewer = new Cesium.Viewer("cesiumContainer");

const citizensBankPark = viewer.entities.add({
  name: "Citizens Bank Park",
  position: Cesium.Cartesian3.fromDegrees(-75.166493, 39.9060534),
  point: {
    pixelSize: 5,
    color: Cesium.Color.RED,
    outlineColor: Cesium.Color.WHITE,
    outlineWidth: 2,
  },
  label: {
    text: "Citizens Bank Park",
    font: "14pt monospace",
    style: Cesium.LabelStyle.FILL_AND_OUTLINE,
    outlineWidth: 2,
    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
    pixelOffset: new Cesium.Cartesian2(0, -9),
  },
});

viewer.zoomTo(viewer.entities);

在这里插入图片描述
默认情况下，标签水平和垂直居中。由于标签和点共享相同的位置，因此它们在屏幕上重叠。为避免这种情况，请指定标签原点 VerticalOrigin.BOTTOM 并将像素偏移设置为 (0, -9)。

将点替换为 billboard始终面向用户的标记。

const citizensBankPark = viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(-75.166493, 39.9060534),
  billboard: {
    image: "/docs/images/tutorials/creating-entities/Philadelphia_Phillies.png",
    width: 64,
    height: 64,
  },
  label: {
    text: "Citizens Bank Park",
    font: "14pt monospace",
    style: Cesium.LabelStyle.FILL_AND_OUTLINE,
    outlineWidth: 2,
    verticalOrigin: Cesium.VerticalOrigin.TOP,
    pixelOffset: new Cesium.Cartesian2(0, 32),
  },
});

在这里插入图片描述

3D模型

const viewer = new Cesium.Viewer("cesiumContainer");
const entity = viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706),
  model: {
    uri: "../../../../Apps/SampleData/models/GroundVehicle/GroundVehicle.glb",
  },
});
viewer.trackedEntity = entity;

在这里插入图片描述

属性系统（The property system）

我们为实体定义的所有值都存储为Property对象。例如，请参阅我们怀俄明州大纲的价值：

console.log(typeof wyoming.polygon.outline);

const wyoming = new Cesium.Entity();
wyoming.name = "Wyoming";

const polygon = new Cesium.PolygonGraphics();
polygon.material = new Cesium.ColorMaterialProperty(
  Cesium.Color.RED.withAlpha(0.5)
);
polygon.outline = new Cesium.ConstantProperty(true);
polygon.outlineColor = new Cesium.ConstantProperty(Cesium.Color.BLACK);
wyoming.polygon = polygon;

viewer.entities.add(wyoming);

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

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

相关文章

(转载)有导师学习神经网络的分类(matlab实现)

(转载)有导师学习神经网络的分类(matlab实现)

有导师学习神经网络以其良好的学习能力广泛应用于各个领域中&#xff0c;其不仅可以解决拟合回归问题&#xff0c;亦可以用于模式识别、分类识别。将继续介绍两种典型的有导师学习神经网络(GRNN和PNN),并以实例说明其在分类识别中的应用。 1 理论基础 1.1 广义回归神经网络(…
阅读更多...
小雉系统U盘安装包制作

小雉系统U盘安装包制作

​ 本文原地址: http://www.feitianzhi.com/boke/index.php/archives/57/ 概述 小雉系统可从线上系统制作安装包到U盘&#xff0c;制作的安装包可用于新系统的安装&#xff1b; 小雉系统只提供升级包&#xff0c;对应的安装包均是客户在应用升级包后按本文或http://www.f…
阅读更多...
为什么AirtestIDE的selenium Window突然无法检索控件了？

为什么AirtestIDE的selenium Window突然无法检索控件了？

1. 前言 最近有很多朋友跟我们反馈&#xff0c;为什么1.2.15版本的IDE没办法做网页元素检索了&#xff0c;是不是我们不支持selenium了之类的。 测试后发现&#xff0c;目前版本确实存在这个问题&#xff0c;原因是Chrome113.0.5672.127(最新)版本过高&#xff0c;AirtestIDE…
阅读更多...
ansible 的学习

ansible 的学习

目录 ansible学习思路&#xff1a; ansible是什么&#xff1f; 官网&#xff1a;Ansible is Simple IT Automation ansible的组成&#xff1a; 参考文档&#xff1a;Ansible入门与playbook实战-~学无止境,学以致用 ^ _ ^-51CTO博客 ansible操作体验&#xff1a; 1、先…
阅读更多...
机器学习算法（一）KNN近邻算法

机器学习算法（一）KNN近邻算法

一、KNN算法概述 KNN&#xff1a;K-Nearest-Neighbor算法&#xff0c;即K值为邻近。KNN是最简单的分类算法之一&#xff0c;同时&#xff0c;也是最常用的分类算法之一。KNN算法是有监督学习中的分类算法。 二、原理 基于基于iris数据集&#xff0c;具体经历下面四步流程&am…
阅读更多...
指南 | OpenAI API对PDF进行总结提炼

指南 | OpenAI API对PDF进行总结提炼

前言 本文将针对信息过载阅读搜索难的问题&#xff0c;展示如何利用OpenAI API高效地自动总结PDF&#xff0c;从而提高阅读效率和节省时间。包含详尽的操作教程、实际案例及最佳实践&#xff0c;旨在确保准确且高效地进行文档摘要。另外&#xff0c;本文还将深入探讨运用AI技术…
阅读更多...
Cocos Creator3D：发布到 Web 平台

Cocos Creator3D：发布到 Web 平台

推荐&#xff1a;将 NSDT场景编辑器 加入你的3D工具链 3D工具集&#xff1a; NSDT简石数字孪生 发布到 Web 平台 打开主菜单的 项目 -> 构建发布&#xff0c;打开构建发布面板。 Cocos Creator 3D 提供了两种 Web 平台的页面模板&#xff0c;可以通过 发布平台 的下拉菜单…
阅读更多...
非靶代谢组学+肠道菌群测序：改善乳腺癌相关性疲劳——针灸！

非靶代谢组学+肠道菌群测序：改善乳腺癌相关性疲劳——针灸！

文章标题&#xff1a; Acupuncture ameliorates breast cancer-related fatigue by regulating the gut microbiota-gut-brain axis 发表期刊&#xff1a;Frontiers in Endocrinology 影响因子&#xff1a;6.055 作者单位&#xff1a;河南中医药大学第一附属医院 百趣生物提…
阅读更多...
新建项目框架详细过程（idea2021.3版本） IoC实例 DI

新建项目框架详细过程（idea2021.3版本） IoC实例 DI

目录 使用Java Enterprise 一步到位 IOC、IOC容器、Bean、DI 1.IOC&#xff08;Inversion of Control&#xff09;控制反转 (1)什么是控制反转呢&#xff1f; (2)Spring和IOC之间的关系是什么呢? (3)IOC容器的作用以及内部存放的是什么? (4)当IOC容器中创建好service和…
阅读更多...
【半监督图像分割 2023 CVPR】UniMatch

【半监督图像分割 2023 CVPR】UniMatch

【半监督图像分割 2023 CVPR】UniMatch 论文题目&#xff1a;Revisiting Weak-to-Strong Consistency in Semi-Supervised Semantic Segmentation 中文题目&#xff1a;重新审视半监督语义分割中的强弱一致性 论文链接&#xff1a;https://arxiv.org/abs/2208.09910 论文代码&a…
阅读更多...
ES6 JavaSript

ES6 JavaSript

爬虫组件分析 目录概述需求&#xff1a; 设计思路实现思路分析1.最常用的ES6特性2.let, const3.class, extends, super4.arrow function5.template string 参考资料和推荐阅读 Survive by day and develop by night. talk for import biz , show your perfect code,full busy&a…
阅读更多...
MTK平台的SWT异常的简单总结（3）——常见SWT/ANR类型

MTK平台的SWT异常的简单总结（3）——常见SWT/ANR类型

&#xff08;1&#xff09;如何查看db文件Log &#xff08;2&#xff09;如何确认线程关系 &#xff08;3&#xff09;常见类型 &#xff08;A&#xff09;等锁 线程状态为"Blocked"&#xff0c;通过关键字"held by"进一步确认哪个线程拿住了锁&#xff…
阅读更多...
一.《传奇M》装备栏遍历的突破口

一.《传奇M》装备栏遍历的突破口

寻找突破口 1.首先根据大多数游戏而言,装备栏中一般记录的是装备的对象或者装备ID,那么当我们穿装备或者脱装备肯定会有相应的值在改变 2.我们就从这里入手,当穿或脱装备的时候,使用CE搜索0然后通过改变或者未改变来筛选结果 3.接下来我们操作试一试这个思路可不可以 4.点击首…
阅读更多...
Vue中如何进行图片识别与物体检测

Vue中如何进行图片识别与物体检测

Vue中如何进行图片识别与物体检测 随着人工智能技术的发展&#xff0c;图像识别和物体检测已经成为了很多应用场景的必备功能。在Vue中如何使用百度AI或腾讯AI等云服务实现图片识别和物体检测呢&#xff1f;本文将为您介绍一些基本概念和示例代码&#xff0c;帮助您快速入门。…
阅读更多...
强化学习PPO：Proximal Policy Optimization Algorithms解读

强化学习PPO：Proximal Policy Optimization Algorithms解读

PPO算法是一类Policy Gradient强化学习方法&#xff0c;经典的Policy Gradient通过一个参数化决策模型来根据状态确定动作&#xff0c;其参数更新是通过下式进行的&#xff1a; 用于衡量决策模型的优劣目标&#xff0c;决策模型的优化目标为寻找最优决策&#xff0c;使得该决策…
阅读更多...
电力辅助服务

电力辅助服务

电力辅助服务 1、电力辅助服务是什么2、电力辅助服务发展历程3、《电力辅助管理办法》主要修订内容4、电力辅助服务品种5、电力辅助服务市场规模6、国外电力辅助服务市场 1、电力辅助服务是什么 《电力辅助服务管理办法》中定义电力辅助服务是由火电、水电、核电、风电、光伏发…
阅读更多...
Elastic 推出 Elastic AI 助手

Elastic 推出 Elastic AI 助手

作者&#xff1a;Mike Nichols Elastic 推出了 Elastic AI Assistant&#xff0c;这是一款由 ESRE 提供支持的开放式、生成式 AI 助手&#xff0c;旨在使网络安全民主化并支持各种技能水平的用户。 最近发布的 Elasticsearch Relevance Engine™ (ESRE™) 提供了用于创建高度相…
阅读更多...
Spring Boot进阶(49)：SpringBoot之集成WebSocket实现前后端通信 | 超级详细，建议收藏

Spring Boot进阶(49)：SpringBoot之集成WebSocket实现前后端通信 | 超级详细，建议收藏

1. 前言 在上一期&#xff0c;我对WebSocket进行了基础及理论知识普及学习&#xff0c;而这一期&#xff0c;我重点是要带着你们进行实战教学&#xff0c;手把手教学如何在springboot架构基础上集成WebSocket及实现前后端通讯功能。具有很好的学习价值&#xff0c;希望大家在学…
阅读更多...
Python Selenium基本用法

Python Selenium基本用法

Selenium 作为一款 Web 自动化测试框架&#xff0c;提供了诸多操作浏览器的方法&#xff0c;本节对其中的常用方法做详细介绍。 定位节点 Selenium 提供了 8 种定位单个节点的方法&#xff0c;如下所示&#xff1a; 定位节点方法 方法 说明 find_element_by_id() 通过 id 属性…
阅读更多...
MacOS 高颜值的 数据库客户端工具 Tableplus 简单逆向分析

MacOS 高颜值的 数据库客户端工具 Tableplus 简单逆向分析

0x0 navicat 给公司发律师函了, 所以不能白嫖了.. 后来一直在找替代品, 但均感觉略有不足. dbeaver : java 开发的, 依赖 jdk , 而且BUG较多,也不流畅 mysqlworkbench : 官方出品, 功能强大. 但是用着不带劲 Sequel Ace : 开源免费, 但是只支持mysql,功能简单 最后试了下 Tab…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023