cesium添加点、线、面、文字、图标、模型等标绘

这篇具有很好参考价值的文章主要介绍了cesium添加点、线、面、文字、图标、模型等标绘。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

Entity API简介
Cesium提供两类API:

面向图形开发人员的底层API,通常称为“Primitive API”。该API暴露最小限度的抽象,使用图形学术语,具有很大的灵活性,需要具有图形学编程的知识。
高级别的数据驱动的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文章来源地址https://www.toymoban.com/news/detail-483830.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
      }
    });

到了这里,关于cesium添加点、线、面、文字、图标、模型等标绘的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • DEJA_VU3D - Cesium功能集 -完整地图标绘及编辑功能系列预告

    编写这个专栏主要目的是对工作之中基于Cesium实现过的功能进行整合,有自己琢磨实现的,也有参考其他大神后整理实现的,初步算了算现在有差不多实现小140个左右的功能,后续也会不断的追加,所以暂时打算一周2-3更的样子来更新本专栏(每篇博文都会奉上完整demo的源代

    2024年01月19日
    浏览(36)
  • DEJA_VU3D - Cesium功能集 之 088-态势标绘系列十七:防御阵型

    编写这个专栏主要目的是对工作之中基于Cesium实现过的功能进行整合,有自己琢磨实现的,也有参考其他大神后整理实现的,初步算了算现在有差不多实现小130个左右的功能,后续也会不断的追加,所以暂时打算一周2-3更的样子来更新本专栏(尽可能把代码简洁一些)。博文

    2023年04月21日
    浏览(42)
  • cesium-2-entity

    viewer -- datasources(DataSourceCollection类型) -- datasource -- entities(EntityCollection类型) -- entity 需要学习的方向是:只需要注意每个层与层之间的关系和entity实例如何创建即可 增: add(dataSource) → Promise.DataSource 删:(destroy一般为boolean,指是否需要直接销毁该datasource) remove(dataSource,

    2024年02月01日
    浏览(36)
  • Cesium: Primitive vs Entity

    Cesium Sandcastle: Variety of available entities 更高级别的 数据驱动 API ,它使用一致性设计的、高级别对象来管理一组相关性的可视化对象,其底层也是使用的 primitive 。 多个类型的实体可以结合使用(如 billboard + label),但同一种实体不能存在多个(如多个 billboard 只能分别创建

    2023年04月10日
    浏览(35)
  • Cesium entity 渐隐渐显、闪烁

     点entity 面entity 

    2024年02月13日
    浏览(33)
  • cesium-2-entity(包含gltf创建)

    viewer -- datasources(DataSourceCollection类型) -- datasource -- entities(EntityCollection类型) -- entity 需要学习的方向是:只需要注意每个层与层之间的关系和entity实例如何创建即可 增: add(dataSource) → Promise.DataSource 删:(destroy一般为boolean,指是否需要直接销毁该datasource) remove(dataSource,

    2024年02月01日
    浏览(40)
  • vue2 使用 cesium 【第二篇-相机视角移动+添加模型】

    搞了一阵子 cesium,小白入门,这东西很牛逼,但是感觉这东西好费劲啊!网上资料不多,每个人的用法又不一样,操作起来真的是绝绝子。之前写了一篇 vue2 使用 cesium 的博文,没有写完,本来想继续写来着,想了一下还是重新开一篇吧。上一篇说到了事件,今天不想写事件

    2024年02月11日
    浏览(44)
  • cesium-2-entity(包含gltf创建)和primitive

    viewer -- datasources(DataSourceCollection类型) -- datasource -- entities(EntityCollection类型) -- entity 需要学习的方向是:只需要注意每个层与层之间的关系和entity实例如何创建即可 增: add(dataSource) → Promise.DataSource 删:(destroy一般为boolean,指是否需要直接销毁该datasource) remove(dataSource,

    2024年02月01日
    浏览(37)
  • cesium添加倾斜摄影

    在2023年7月的版本更新中上述写法已经不能用了,话说cesium的版本更新太快了,7月改了好多好多东西,注意留意官网变动消息吧

    2024年02月12日
    浏览(32)
  • 【Cesium学习(六)】Cesium加载3D模型(3D tiles和glTF模型)

    前面我们学习到了绘制基本的形状,但是Cesium还可以加载3D模型,因为像高德地图这种的技术来加载大型复杂的建筑模型性能不加,所有只能想Cesium这种专门做3D地图的技术。接下来就学习一下如何加载模型。 Cesium目前支持两种模型方案,一个是使用3D tiles, 另一个是加载g

    2024年02月07日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包