Cesium：绘制点

作者：CSDN @ _乐多_

本文记录了在Cesium中绘制点的函数。

---

---

一、使用Cesium.Entity绘制

1.1 案例1

data() 里面设置点的样式

pointOption: {

                show: true,
                pixelSize: 10,
                heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                color: Cesium.Color.RED,
                outlineColor: Cesium.Color.YELLOW,
                outlineWidth: 3,
                disableDepthTestDistance: Number.POSITIVE_INFINITY,
                distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 20000)
            },

methods里面定义绘制点函数

createPoint() {
            var Position = Cesium.Cartesian3.fromDegrees(
                109.3838266599023,
                39.333702773480425,
                0.0
            );

            var viewer = uia.earth.czm.viewer;
            console.log('viewer', viewer)
            let entity = new Cesium.Entity({
                name: 'test',
                show: true,
                position: Position,
                point: {
                    ...this.pointOption,
                    clampToGround: true
                }
            });
            viewer.entities.add(entity);
            viewer.zoomTo(entity);
            viewer.scene.camera.flyTo;
        },

1.2 案例2

 var Position = Cesium.Cartesian3.fromDegrees(
                109.54993916915929,
                39.364256387739836,
                0.0
            );

            var viewer = uia.earth.czm.viewer;
            // console.log('viewer', viewer)
            let entity = new Cesium.Entity({
                name: 'test',
                show: true,
                position: Position,
                point: {
                    ...this.pointOption,
                    clampToGround: true
                }
            });
            viewer.entities.add(entity);

1.3 案例3（绘制带label的点）

viewer.entities.add({
                        position: Cesium.Cartesian3.fromDegrees(longitude, latitude, height),
                        point: {
                            pixelSize: 5,
                            color: Cesium.Color.fromBytes(rgbColor.red, rgbColor.green, rgbColor.blue), // 设置颜色并设置透明度,
                            outlineColor: Cesium.Color.WHITE,
                            outlineWidth: 2,
                        },
                        label: {
                            text: section.name,
                            font: '14px sans-serif',
                            fillColor: Cesium.Color.YELLOW,
                            outlineColor: Cesium.Color.BLACK,
                            outlineWidth: 2,
                            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                            pixelOffset: new Cesium.Cartesian2(0, -30),
                        },
                    });

二、使用viewer.scene.primitives绘制

var pointPrimitive = new Cesium.PointPrimitiveCollection();
viewer.scene.primitives.add(pointPrimitive);

let cartesian = viewer.scene.pickPosition(click.position);

if (Cesium.defined(cartesian)) {

pointPrimitive.add({
                        position: cartesian,
                        color: Cesium.Color.DODGERBLUE,
                        pixelSize: 8,
                        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                        disableDepthTestDistance: Number.POSITIVE_INFINITY,
                        clampToGround: true
                    });
                    
}

声明：
本人作为一名作者，非常重视自己的作品和知识产权。在此声明，本人的所有原创文章均受版权法保护，未经本人授权，任何人不得擅自公开发布。
本人的文章已经在一些知名平台进行了付费发布，希望各位读者能够尊重知识产权，不要进行侵权行为。任何未经本人授权而将付费文章免费或者付费（包含商用）发布在互联网上的行为，都将视为侵犯本人的版权，本人保留追究法律责任的权利。
谢谢各位读者对本人文章的关注和支持！