Cesium 繪制點Point

一、概述

在Cesium中繪制一個點通常是用Cesium.Entity，也可以用Cesium.PointPrimitive。

用Entity API方式繪制數據是Cesium官方推薦的方式。Entity API實際上是在底層使用Primitive API，

通過封裝，屏蔽了不同Primitivie圖元繪制方法的差異，實現了繪制點、線、面等不同圖形的API一致性，易於理解，使用簡單。

Primitive API為圖形開發人員提供靈活的實現，而不是為了實現API一致性。加載不同類型的圖元有各自不同的API，相對復雜，但更加靈活。

如果需要繪制多個點可以通過Cesium.EntityCollection添加多個Cesium.Entity對象，也可以用Cesium.PointPrimitiveCollection，后者在繪制大量圖元時更加高效。

二、Entity方式繪制一個點

Entity繪制的Point的所有參數如下：

效果和代碼如下，繪制了一個30像素大小的點，輪廓寬度為10像素，設置了顏色，並設置了隨着距離攝像機Camera的距離改變大小和透明度。

Entity的position屬性用於設置點的位置，點和廣告牌必須設置此屬性。

這里需要說明的是Entity的Point實際上是Cesium.PointGraphics對象，Cesium會自動在內部進行封裝，其他的如color、show等屬性同理。

更多內容請學習Cesium的Property屬性系統相關知識。

也可以像下面這樣寫：

            return new Cesium.PointGraphics({
                show: new Cesium.ConstantProperty(true),
                ...
                color: new Cesium.ConstantProperty(color),
                ...
            })

 

        function getPoint(color = Cesium.Color.RED, heightReference = Cesium.HeightReference.CLAMP_TO_GROUND) {
            return {
                show: true,
                pixelSize: 30,
                heightReference: heightReference,
                color: color,
                outlineColor: Cesium.Color.YELLOW,
                outlineWidth: 10,
                scaleByDistance: new Cesium.NearFarScalar(1500, 1, 20000, 0.3),
                translucencyByDistance: new Cesium.NearFarScalar(1500, 1, 20000, 0.2),
                distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 20000)
            }
        }


        function addEntity(height = 500, pointOption) {
            var entity = new Cesium.Entity({
                name: 'test',
                show: true,
                position: Cesium.Cartesian3.fromDegrees(114, 39, height),
                point: pointOption,
                description: `
                <p>這是entity的屬性信息，entity的description里面可以寫一段html</p>                
                <img width="450" height="200" src="./test.png"></img>
                <video width="450" height="350" controls="controls" type="video/mp4" preload="auto">
                    <source src="./test2.mp4" autostart="true">
                </video>
                <p>蘋果園dog</p>`
            });
            viewer.entities.add(entity);
            return entity;
        }

 三、Entity點的顯示設置

scaleByDistance 可以賦值為一個NearFarScalar對象，其作用是設置根據到攝像機的距離設置繪制的圖形的大小，構造函數如下：

new Cesium.NearFarScalar(near, nearValue, far, farValue)

距離在near和far之間時，點的大小在nearValue和farValue兩個比例中改變大小，距離小於near時，大小比例為nearValue，距離大於far時，大小比例為farValue。

translucencyByDistance是設置透明度，原理和NearFarScalar相同。

distanceDisplayCondition是設置可見性，構造函數為new Cesium.DistanceDisplayCondition(near, far)，在near和far之間可見，超出范圍不可見。

 

四、Entity的屬性信息

通過設置description屬性，在點擊entity時可顯示信息，可以寫一段HTML。

 

 

 

五、貼地

heightReference默認是為Cesium.HeightReference.NONE，也就是絕對高程。

通過設置heightReference為Cesium.HeightReference.CLAMP_TO_GROUND，可使點貼地，地就是地形。

Cesium.HeightReference.RELATIVE_TO_GROUND是設置距離地形的相對高度。

Cesium默認加載的是Cesium.EllipsoidTerrainProvider，初始化三維球時不指定其他地形的話等同於viewer.terrainProvider=new Cesium.EllipsoidTerrainProvider()。

該地形構建了球的基本骨架，各處高度全為0。

當制定了其他地形時，比如加載了Ceisum全球地形，如果設置了Cesium.HeightReference.NONE，就要留意點的高度，如果高度低於該位置地形高度，點將位於地下，

這時候當移動攝像機時，地下的點就會飄移，可通過設置地形遮擋viewer.scene.globe.depthTestAgainstTerrain = true進行驗證。

實際上點不像polygon等其他圖形可以設置真正的貼地，除非設置了絕對高度或者viewer.scene.globe.depthTestAgainstTerrain = true，否則當移動攝像機時，點無法固定（如果有方法賜教）。注意，Cesium的地形數據是異步請求的，因此一般通過鼠標點擊球上的位置獲取高程。當添加點的時候，該位置可能地形還沒有加載完，獲取的高程就不准了，除非事先知道了高程。所以在加了地形數據后，要留意點的高度。

 

 六、繪制一個閃爍的點

無新知識，主要是CallbackProperty。

 function getFlashPoint(color) {
            let pointOpacity = 1.0;
            let pointColor2Big = true;
            let pointSize2Big = true;
            let outlineColor2Big = true;
            let outLineOpacity = 1.0;
            let pixelSize = 50;
            let minSize = 20;
            let maxSize = 50;
            let preTime = Cesium.JulianDate.now();
            var preTime1 = Cesium.JulianDate.now();
            var preTime2 = Cesium.JulianDate.now();
            let pointOption = {
                color: new Cesium.CallbackProperty((time, result) => {
                    let timestep = Cesium.JulianDate.secondsDifference(time, preTime);
                    if (timestep < 0.1) {
                        return color.withAlpha(pointOpacity);
                    }
                    preTime = time;
                    pointOpacity = pointColor2Big ? pointOpacity + 0.1 : pointOpacity - 0.1;
                    pointColor2Big = (pointColor2Big && pointOpacity > 0.9) ? false : pointColor2Big;
                    pointColor2Big = (!pointColor2Big && pointOpacity < 0.2) ? true : pointColor2Big;
                    return color.withAlpha(pointOpacity);
                }, false),

 

七、繪制多個點

這個通過Cesium.PointPrimitiveCollection加就行了，后者加多個entity到entityCollection，具體參考Cesium官方文檔。

八、其他

還有很多其他內容，比如 Cesium.EntityCluster、Cesium.PointPrimitive、鼠標拾取等，請參考文檔。