• Cesium学习二：使用entity绘制point

    前言

    Cesium提供了两种绘制方式，entity和primitive，其中entity是其封装过的绘制类，适合不了解图形学的用户，primitive则提供了一些比较基础方法，适合底层开发的人员。既然刚开始学，就先从entity开始吧。
    entity包含了很多的绘制类，本篇介绍point的绘制。

    一、绘制点代码

    在上一篇开发环境的代码基础上，增加绘制点代码，具体如下（别忘了使用你自己的Token，基础环境不知道怎么布置的请参考开发环境搭建），绘制的结果如下图所示。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <!-- Include the CesiumJS JavaScript and CSS files -->
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.96/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.96/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
    <div id="cesiumContainer" style="position:fixed;left:0px;top:0px;width:100%;height:100%;"></div>
    <script>
    // Your access token can be found at: https://cesium.com/ion/tokens.
    // Replace `your_access_token` with your Cesium ion access token.

    Cesium.Ion.defaultAccessToken = '你的Token'; //替换成你的Token
    Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90);

    // Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
    const viewer = new Cesium.Viewer('cesiumContainer', {
        geocoder:true,//控制右上角第一个位置的查找工具
        homeButton:true,//控制右上角第二个位置的home图标
        sceneModePicker:true,//控制右上角第三个位置的选择视角模式，2d，3d
        baseLayerPicker:true,//控制右上角第四个位置的图层选择器
        navigationHelpButton:true,//控制右上角第五个位置的导航帮助按钮
        animation:false,//控制左下角的动画器件
        timeline:false,//控制下方时间线
        fullscreenButton:false,//右下角全屏按钮
        vrButton:false,//右下角vr按钮
        shouldAnimate: true,//允许动画同步
        infoBox : true, //不显示点击要素之后显示的信息
        terrainProvider: Cesium.createWorldTerrain()
    });

    viewer._cesiumWidget._creditContainer.style.display="none";//取消版权信息

    let point = viewer.entities.add({
        name: "point",
        position: new Cesium.Cartesian3.fromDegrees(120, 30, 100), // 点的经纬度坐标
        point: {
            show: true, //是否显示，默认显示
            pixelSize: 15, //点的大小（像素），默认为1
            heightReference: Cesium.HeightReference.NONE, //高程参考面：无
            // heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //高程参考面：地表(设置后点会贴地)
            color: Cesium.Color.RED, //颜色，默认为白色
            outlineColor: Cesium.Color.BLUE, //轮廓线颜色，默认为黑色
            outlineWidth: 1, // 轮廓线宽度（像素），默认为0
            scaleByDistance: new Cesium.NearFarScalar(1.5e2, 2.0, 1.5e7, 0.5), //点的大小随视角的距离缩放，默认为空
            translucencyByDistance: new Cesium.NearFarScalar(1.5e2, 1.0, 1.5e7, 0.2), //点的透明度随视角的距离变化，默认为空
            // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100.0, 2000000.0), //点在该视角距离内可见，其他距离不可见，默认为空
            disableDepthTestDistance: 1.5e2, //小于该数值后关闭深度检测，默认为空
        }
    })

    viewer.flyTo(point);
    </script>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57

    点

    二、参数图解

    2.1 name

    point的名称，在鼠标点击点弹出的infoBox中会显示该名称。
    在这里插入图片描述

    2.2 position

    点的坐标，默认是地心坐标系，可使用我们更熟悉的经纬度来表示，转换方法是 new Cesium.Cartesian3.fromDegrees(经度，纬度，高程)

    2.3 point

    点的绘制参数

    2.3.1 show

    是否显示，true为显示，false为不显示，默认为显示

    2.3.2 pixelSize

    点的大小，单位为像素，即不论场景如何缩放，点始终占据视图的大小，默认为1。如下图所示，我们将视角拉上天空，当中国的范围进入全部的视野，点在窗口中依旧占据15个像素的范围。
    点

    2.3.3 heightReference

    高程参考面，Cesium内置的类型，默认为NONE，即点的高程值是绝对值，没有参考面，这是大多数使用的情况，当你知道点的海拔高程时选择此项。
    如果你想让点贴在地表，比如人在地表行走等情况，则可设置参数为CLAMP_TO_GROUND，此时点的position参数中的高程参数失去作用，点会被绘制在经纬度所在的地表，简称贴地。
    贴地显示

    2.3.4 color

    点的颜色，默认为白色，如图中的点的颜色为红色，对应的值为Cesium.Color.RED，也可以使用RGBA的格式（A表示透明度），如上图的红色可用new Cesium.Color(1, 0, 0, 1)表示（rgb的取值为0-1，如果是0-255的可以除以255进行归一化）。
    下图展示了半透明（A=0.5）颜色的显示效果，对应的值为new Cesium.Color(1, 1, 0, 0.5)
    透明度

    2.3.5 outlineColor

    轮廓线的颜色，默认为黑色，如上图中设置为了蓝色。

    2.3.6 outlineWidth

    轮廓线的大小，单位为像素，默认为0，即不显示轮廓，如下图所示。轮廓线是否显示在实际应用中可用来表示对象是否被选中等。
    不显示轮廓

    2.3.7 scaleByDistance

    点的大小随视角的距离缩放，默认为空，即不具有这种效果。如果想要这种效果，可设置new Cesium.NearFarScalar(near, scale, far, scale)，near和far是距离，单位米，scale为缩放倍数，如new Cesium.NearFarScalar(1.5e2, 2.0, 1.5e7, 0.5)表示在视角离点的距离在150米以内时，点放大2倍，在距离15000000米以外时，点缩小为0.5倍，在150-15000000之间时，缩放倍数会按距离进行插值，即为渐变缩放。
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    2.3.8 translucencyByDistance

    点的透明度随视角的距离变化，默认为空，即没有随视角的渐变。参数格式同上，效果图同上。

    2.3.9 distanceDisplayCondition

    点在该视角距离内可见，其他距离不可见，默认为空，即一直可见。如new Cesium.DistanceDisplayCondition(100.0, 2000000.0)表示在视角离点的距离为100到2000000之间时可看到该点，其他距离不显示该点，这个参数可用来实现类似百度地图那种不同缩放显示不同内容的功能。

    2.3.10 disableDepthTestDistance

    小于该数值后关闭深度检测，默认为空，即一直开启深度检测。如disableDepthTestDistance: 1.5e2表示在视角离点的距离小于150米时关闭深度检测，2.3.3-2.3.6的图都是小于150米未开启深度检测的。

  • 相关阅读:
    数据分析-Pandas数据的探查面积图
    APS排程软件与ERP、MES的集成方式
    说一下 ArrayDeque 和 LinkedList 的区别?
    ES7.7中highlight的结果丢失部分文本的bug
    移动同是可以璇转
    2021秋招-算法-哈希算法-哈希表
    【Java】三大集合容器概述
    MIGO新增页签增强
    Jmeter组件执行顺序与作用域
    MCE | 癌相关基因 ALK 参与胖瘦调节
  • 原文地址：https://blog.csdn.net/u014523388/article/details/126941578