Cesium三维地球上添加点、线、面、文字、图标(图片)、模型等标绘

2023-11-19

添加标绘之前要明白一点:Cesium Entity是可以与样式化图形表示配对并定位在空间和时间上的数据对象,或者说Cesium 提供 Entity API 来绘制控件数据。所以我们添加的所有标绘都是entity

Entity API简介

Cesium提供两类API:

  1. 面向图形开发人员的底层API,通常称为“Primitive API”。该API暴露最小限度的抽象,使用图形学术语,具有很大的灵活性,需要具有图形学编程的知识。
  2. 高级别的数据驱动的API,称为“Entity API”。该API使用一致性设计的、高级别的对象,来管理一组相关性的可视化对象,其底层使用Primitive API。

官网说明文档:https://cesium.com/docs/cesiumjs-ref-doc/Entity.html

形状与立体(Shapes and Volumes)

支持的形状与立体列表
可以查看官方文档(每个图形后面都有要传递的参数,点击可以直接查看)
https://cesium.com/docs/cesiumjs-ref-doc/Entity.html
用到的API

Cesium.Cartesian3:
https://cesium.com/docs/cesiumjs-ref-doc/Cartesian3.html?classFilter=Cartesian3

Cesium.Color:
https://cesium.com/docs/cesiumjs-ref-doc/Color.html

点:
API:https://cesium.com/docs/cesiumjs-ref-doc/PointGraphics.html

//entities.add(entity) 
	viewer.entities.add({
	  // fromDegrees(经度,纬度,高度,椭球,结果)从以度为单位的经度和纬度值返回Cartesian3位置
      position: Cesium.Cartesian3.fromDegrees(108, 34, 10),
      point: {
        // 点的大小(像素)
        pixelSize: 5,
        // 点位颜色,fromCssColorString 可以直接使用CSS颜色
        color: Cesium.Color.fromCssColorString('#ee0000'),
        // 边框颜色
        outlineColor: Cesium.Color.fromCssColorString('#fff'),
        // 边框宽度(像素)
        outlineWidth: 2,
        // 显示在距相机的距离处的属性,多少区间内是可以显示的
        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 1500),
        // 是否显示
        show: true
      }
    });

线:
API:https://cesium.com/docs/cesiumjs-ref-doc/PolylineGraphics.html

 viewer.entities.add({
      polyline: {
        // fromDegrees返回给定的经度和纬度值数组(以度为单位),该数组由Cartesian3位置组成。
        // Cesium.Cartesian3.fromDegreesArray([经度1, 纬度1, 经度2, 纬度2,])
        // Cesium.Cartesian3.fromDegreesArrayHeights([经度1, 纬度1, 高度1, 经度2, 纬度2, 高度2])
        positions: Cesium.Cartesian3.fromDegreesArray([
          120.9677706, 30.7985748,
          110.20, 34.55
        ]),
        // 宽度
        width: 2,
        // 线的颜色
        material: Cesium.Color.WHITE,
        // 线的顺序,仅当`clampToGround`为true并且支持地形上的折线时才有效。
        zIndex: 10,
        // 显示在距相机的距离处的属性,多少区间内是可以显示的
        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 1500),
        // 是否显示
        show: true
      }
    });

面:
API:https://cesium.com/docs/cesiumjs-ref-doc/PolygonGraphics.html

viewer.entities.add({
      polygon: {
        // 获取指定属性(positions,holes(图形内需要挖空的区域))
        hierarchy: {
          positions: Cesium.Cartesian3.fromDegreesArray([
            120.9677706, 30.7985748,
            110.20, 34.55,
            120.20, 50.55
          ]),
          holes: [{
            positions: Cesium.Cartesian3.fromDegreesArray([
              119, 32,
              115, 34,
              119, 40
            ])
          }]
        },
        // 边框
        outline: true,
        // 边框颜色
        outlineColor: Cesium.Color.WHITE,
        // 边框尺寸
        outlineWidth: 2,
        // 填充的颜色,withAlpha透明度
        material: Cesium.Color.GREEN.withAlpha(0.5),
        // 是否被提供的材质填充
        fill: true,
        // 恒定高度
        height: 5000,
        // 显示在距相机的距离处的属性,多少区间内是可以显示的
        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(1000, 10000000),
        // 是否显示
        show: true,
        // 顺序,仅当`clampToGround`为true并且支持地形上的折线时才有效。
        zIndex: 10
      }
    });

文字:
API:https://cesium.com/docs/cesiumjs-ref-doc/LabelGraphics.html

viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(120, 30, 5),
      // 点
      point: {
        color: Cesium.Color.RED, // 点位颜色
        pixelSize: 10 // 像素点大小
      },
      // 文字
      label: {
        // 文本。支持显式换行符“ \ n”
        text: '测试名称',
        // 字体样式,以CSS语法指定字体
        font: '14pt Source Han Sans CN',
        // 字体颜色
        fillColor: Cesium.Color.BLACK,
        // 背景颜色
        backgroundColor: Cesium.Color.AQUA,
        // 是否显示背景颜色
        showBackground: true,
        // 字体边框
        outline: true,
        // 字体边框颜色
        outlineColor: Cesium.Color.WHITE,
        // 字体边框尺寸
        outlineWidth: 10,
        // 应用于图像的统一比例。比例大于会1.0放大标签,而比例小于会1.0缩小标签。
        scale: 1.0,
        // 设置样式:FILL:填写标签的文本,但不要勾勒轮廓;OUTLINE:概述标签的文本,但不要填写;FILL_AND_OUTLINE:填写并概述标签文本。
        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
        // 相对于坐标的水平位置
        verticalOrigin: Cesium.VerticalOrigin.CENTER,
        // 相对于坐标的水平位置
        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
        // 该属性指定标签在屏幕空间中距此标签原点的像素偏移量
        pixelOffset: new Cesium.Cartesian2(10, 0),
        // 显示在距相机的距离处的属性,多少区间内是可以显示的
        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 1500),
        // 是否显示
        show: true
      }
    });

图标(图片):
API:https://cesium.com/docs/cesiumjs-ref-doc/BillboardGraphics.html

    viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(110.20, 34.55, 2.61),
      billboard: {
        // 图像地址,URI或Canvas的属性
        image: '/location.png',
        // 设置颜色和透明度
        color: Cesium.Color.WHITE.withAlpha(0.8),
        // 高度(以像素为单位)
        height: 50,
        // 宽度(以像素为单位)
        width: 50,
        // 逆时针旋转
        rotation: 20,
        // 大小是否以米为单位
        sizeInMeters: false,
        // 相对于坐标的垂直位置
        verticalOrigin: Cesium.VerticalOrigin.CENTER,
        // 相对于坐标的水平位置
        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
        // 该属性指定标签在屏幕空间中距此标签原点的像素偏移量
        pixelOffset: new Cesium.Cartesian2(10, 0),
        // 应用于图像的统一比例。比例大于会1.0放大标签,而比例小于会1.0缩小标签。
        scale: 1.0,
        // 显示在距相机的距离处的属性,多少区间内是可以显示的
        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 1500),
        // 是否显示
        show: true
      }
    });

模型:
API:https://cesium.com/docs/cesiumjs-ref-doc/ModelGraphics.html

viewer.entities.add({
      // 设置方向
      orientation: orientation,
      position: Cesium.Cartesian3.fromDegrees(120, 30, 10000),
      model: {
        // 引入模型
        uri: '/SampleData/models/CesiumAir/Cesium_Air.glb',
        // 模型的近似最小像素大小,而不考虑缩放。这可以用来确保即使观看者缩小也可以看到模型。如果为0.0,则不强制使用最小大小
        minimumPixelSize: 1280,
        // 模型的颜色(与模型的渲染颜色混合的属性)
        color: Cesium.Color.WHITE.withAlpha(1),
        // 模型的最大比例大小
        maximumScale: 20000,
        // 设置模型轮廓(边框)颜色
        silhouetteColor: Cesium.Color.BLACK,
        // 设置模型轮廓(边框)大小
        silhouetteSize: 2,
        // 是否执行模型动画
        runAnimations: true,
        // 应用于图像的统一比例。比例大于会1.0放大标签,而比例小于会1.0缩小标签。
        scale: 1.0,
        // 显示在距相机的距离处的属性,多少区间内是可以显示的
        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 1500),
        // 是否显示
        show: true
      }
    });
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Cesium三维地球上添加点、线、面、文字、图标(图片)、模型等标绘 的相关文章

随机推荐

  • 微信小程序 实现底部导航栏tabbar

    参考链接 1 微信小程序底部导航Tabbar https www cnblogs com huangjialin p 6278429 html 2 小程序自定义tabbar实现中间图标突出效果 附带wx hideTabBar不生效的bug解
  • Spring Boot 启动报错解决:No active profile set, falling back to default profiles: default

    在SpringBoot启动时 控制台打印出来的信息有这么一条 No active profile set falling back to default profiles default 如下图 这句话的意思是 没有指定项目的配置文件 使用
  • Skyfire: 一种用于Fuzzing的数据驱动的种子生成工具

    Skyfire Data Driven Seed Generation for Fuzzing 作者 杨鑫 清华大学 论文发表于 IEEE S P 2017 原文作者 Junjie Wang Bihuan Chen Lei Wei and
  • C# 使用SignalR实现消息通知

    背景 Web端需要能实时接收到消息推送 当客户有新消息来时 在客户端的右下角进行弹框提醒 什么是signalR Asp net SignalR是微软为实现实时通信的一个类库 一般情况下 signalR会使用JavaScript的长轮询 lo
  • 【Android -- UI 开发】WebView 的基本使用

    一 简介 WebView 在 Android 平台上是一个特殊的 View 基于 webkit 引擎 展现 web 页面的控件 这个类可以被用来在你的 app 中仅仅显示一张在线的网页 还可以用来开发浏览器 WebView 内部实现是采用渲
  • GitHub pages 如何搭建一个个人博客

    搭建一个 GitHub Pages 个人博客的步骤如下 在 GitHub 上创建一个名为 username github io 的仓库 其中 username 是你的 GitHub 用户名 在仓库里创建一个 index html 文件 用于
  • 刚学JavaWeb如何创建一个简单的Servlet项目(保姆级!!!)

    idea如何创建一个简单的Servlet项目 一 准备步骤 1 创建一个工程 2 添加Web application支持 3 部署Tomcat服务器 4 向服务器中添加项目 5 向项目中导入所需要的JAR包 二 编写一个简单的Servlet
  • java动态加载jar包,并运行其中的类和方法

    flink 相关 https www toutiao com article 6883793897495986691 动态加载jar包 在实际开发中经常会需要用到 尤其涉及平台和业务的关系的时候 业务逻辑部分可以独立出去交给业务方管理 业务
  • Bugku题目Reverse逆向部分wp(持续更新)

    目录 入门逆向 Easy Re 游戏过关 sign in Easy vb Next 入门逆向 题目链接 丢入DIE PEID看过 没有壳 32位 直接IDA 汇编代码直接看到 flag Re 1s S0 C0OL Easy Re 题目链接
  • 查看淘宝镜像

    win R 打开输入cmd打开 查看node是否安装输入命令 node v 安装淘宝镜像输入命令 npm install g cnpm registry https registry npm taobao org 查看淘宝镜像输入命令 np
  • 场景题

    场景题 1 场景题汇总 1 情景题 如果一个外卖配送单子要发布 现在有200个骑手都想要接这一单 如何保证只有一个骑手接到单子 2 场景题 美团首页每天会从10000个商家里面推荐50个商家置顶 每个商家有一个权值 你如何来推荐 第二天怎么
  • 用Calendar.getInstance()后,set月份被加一问题

    一 问题描述 今天查询一个bug发现了这个问题 使用Calendar 中的before 和after方法比较日期是否在范围内 实际与代码不符 我就去查明原因 首先说下这两个方法吧 日期1 before 日期2 第一个日期在第二个日期之前的意
  • 将 Google Kubernetes Engine (GKE) 上稳定扩散的启动时间缩短 4 倍

    Cloud Ace 是 Google Cloud 全球战略合作伙伴 在亚太地区 欧洲 南北美洲和非洲拥有二十多个办公室 Cloud Ace 在谷歌专业领域认证及专业知识目前排名全球第一位 并连续多次获得 Google Cloud 各类奖项
  • Flutter 安装 填坑记录

    Flutter 安装过程中遇到的问题 安装参考文档 https flutterchina club Add the flutter tool to your path 不知如何在mac中添加环境变量的解决方法参照https jingyan
  • [491]pywin32模拟鼠标键盘操作

    keybd event bVk bScan dwFlags dwExtraInfo 第一个参数 虚拟键码 键盘键码对照表见附录 第二个参数 硬件扫描码 一般设置为0即可 第三个参数 函数操作的一个标志位 如果值为KEYEVENTF EXTE
  • Unable to cast COM object of type Microsoft.Office.Interop.Excel.ApplicationClass' ...

    问题描述 这个问题产生的原因 与 office 的安装有关 参考 How to solve Unable to cast COM object of type Microsoft Office Interop Excel Applicati
  • arm鲲鹏服务器和x86区别

    华为云服务器x86计算和鲲鹏计算的区别是什么 X86和鲲鹏指的是两个系列的中央处理器架构 x86采用复杂指令集 CISC 鲲鹏采用精简指令集 RISC pc6a学习分享小白详细说明一下这2种服务器的差别 一 鲲鹏和X86处理器架构对比 1
  • R语言期末

    一 单项选择题 答题说明 每题均有 A B C D 四个备选答案 其中只有一个正确答案 将其 选出 并写在答题纸上 1 R 语言 软件 是被用于统计计算和绘图工作的一套语言和环境 是一套开源 的数据分析解决方案 最早 1995 年 是由 B
  • 代码走查(codereview)如何执行才能提升代码质量

    成功上岸 进入华为 之前花5W买的JAVA课程合集 整整420集 拿走不谢 公粮上交 手把手教学 学完即可就业 哔哩哔哩 bilibili 作为一名开发工程师 如何提升个人能力 减少bug的发生是一件非常重要的事情 它直接关系到了领导及项目
  • Cesium三维地球上添加点、线、面、文字、图标(图片)、模型等标绘

    添加标绘之前要明白一点 Cesium Entity是可以与样式化图形表示配对并定位在空间和时间上的数据对象 或者说Cesium 提供 Entity API 来绘制控件数据 所以我们添加的所有标绘都是entity Entity API简介 C