美文网首页开源
SuperMap iClient3D for WebGL教程(E

SuperMap iClient3D for WebGL教程(E

作者: 为梦齐舞 | 来源:发表于2019-06-20 11:01 被阅读9次

    本节继续学习PointGraphics对象,这个是一个点类型,对象属性相对较少,可以直接添加矢量点对象,接下来我们一起学习下吧。


    效果如下

    实现代码如下:

    viewer.entities.add({
                        id: "test",
                        position:Cesium.Cartesian3.fromDegrees(117,32,500),
                        point: {        
                            color: Cesium.Color.RED,
                            pixelSize:20,
                            outlineColor:Cesium.Color.BLUE,
                            outlineWidth:5,
                            disableDepthTestDistance:Number.POSITIVE_INFINITY
                        }
    
                    });
    

    一、主要参数介绍

    1、position:点的坐标位置,需要注意的是这个属性是设置给entity的,而不是point的内部。
    2、pixelSize:点的大小,以像素为单位。
    3、outlineColor:点的外边框颜色。
    4、outlineWidth:点外边框的宽度。
    5、show:点是否显示。
    6、scaleByDistance:设置基于相机距离的点大小,也就是说可以根据不同的相机高度来设置点的不同大小,一个NearFarScalar类型,比如我设置scaleByDistance为new Cesium.NearFarScalar(1500, 10, 50000, 2),如果设置了pixelSize则两者会相乘。
    7、translucencyByDistance:设置基于相机距离的点透明度,也就是说可以根据不同的相机高度来设置点的透明度,一个NearFarScalar类型,比如我设置scaleByDistance为new Cesium.NearFarScalar(1500, 0.1, 8000, 1)
    8、heightReference:高度模式,支持Cesium.HeightReference.NONE(绝对高度)、Cesium.HeightReference.RELATIVE_TO_GROUND(相对地面)、Cesium.HeightReference.CLAMP_TO_GROUND(贴地)三种高度模式,高度模式通过字面意思理解即可。
    9、distanceDisplayCondition:即是控制点在什么相机位置下显示出来。例如设置distanceDisplayCondition:new Cesium.DistanceDisplayCondition(1500,5000),即是在相机距离1500-5000的位置显示,其他具体广告牌都不显示。
    10、disableDepthTestDistance:指定从相机到禁用深度测试的距离,如果不希望被地形挡住,设置为Number.POSITIVE_INFINITY即可

    二、综合使用

    我们制作一个闪烁的有呼吸效果的点对象,效果如下:


    呼吸的点

    实现代码如下:

    var x = 0;
                    var size = 10;
                    var isAdd = true;
                    var isZoom = true;
                    viewer.entities.add({
                        id: "test",
                        position: Cesium.Cartesian3.fromDegrees(117, 32, 500),
                        point: {
                            color: new Cesium.CallbackProperty(function() {
                                if(isAdd) {
                                    x = x + 0.05;
                                    if(x > 1) {
                                        isAdd = false;
                                    }
                                } else {
                                    x = x - 0.05;
                                    if(x < 0) {
                                        isAdd = true;
                                    }
                                }
                                return Cesium.Color.RED.withAlpha(x);
                            }, false),
                            pixelSize: new Cesium.CallbackProperty(function() {
                                if(isZoom) {
                                    size = size + 1;
                                    if(size > 50) {
                                        isZoom = false;
                                    }
                                } else {
                                    size = size - 1;
                                    if(size < 10) {
                                        isZoom = true;
                                    }
                                }
                                return size;
                            }, false),
                            outlineColor: new Cesium.CallbackProperty(function() {
                                if(isAdd) {
                                    x = x + 0.01;
                                    if(x > 1) {
                                        isAdd = false;
                                    }
                                } else {
                                    x = x - 0.01;
                                    if(x < 0) {
                                        isAdd = true;
                                    }
                                }
                                return Cesium.Color.BLUE.withAlpha(x);
                            }, false),
                            outlineWidth: 5,
                            disableDepthTestDistance: Number.POSITIVE_INFINITY,
                        }
    
                    });
    

    相关文章

      网友评论

        本文标题:SuperMap iClient3D for WebGL教程(E

        本文链接:https://www.haomeiwen.com/subject/liorqctx.html