SuperMap iClient3D for WebGL扩展开发教程——动态圆柱形标注

动态缩放圆环.gif

同样是这个效果图，那中间缩放的圆柱环的效果如何实现？

1、效果分析

这里将这个效果分解成几个部分：
（1）类似圆柱形，不断改变半径和高度。
（2）顶部透明，侧面半透明。
根据分析，这里有两个想法去实现：
（1）利用圆柱对象，半径和高度很好实现变换，顶部也可以不绘制，但是在设置侧面渐变颜色时出现了问题，圆柱对象侧面只能设置颜色，不能设置贴图，无法实现渐变效果。
（2）利用墙对象进行绘制，可以很好的解决侧面半透明效果，但是节点和高度需要不断的计算，实现有一定的难度。

2、实现代码

根据上面的分析，采用第二种方式是可行的，下面直接上代码：

import wallimg from "./images/wall.png"
class scallCircleWall {
    constructor(datasource,position,color,R,maxHeight,minheight) {
        this.datasource=datasource
        this.position=position
        this.color=color
        this.alp = 1;
        this.num = 0;
        this.maxR = R
        this.maxHeight = maxHeight
        this.minheight=minheight
        this.R = 1
        this.height = 0
        this.minheights=[]
        for (let index = 0; index < 49; index++) {
            this.minheights.push(this.minheight)  
        }
        let that=this
        this.wall=this.datasource.entities.add({
            name: 'scallwall',
            wall: {
                positions: new Cesium.CallbackProperty(function () {
                    if (that.R < that.maxR) {
                        that.R++
                    } else {
                        that.R = 1
                    }
                    that.height = (1 - that.R / that.maxR) *(that.maxHeight-that.minheight)+that.minheight
        
                    if (that.height <= that.minheight) {
                        that.height = that.minheight+0.001
                    }
                    var backpositions = that.getWallCirclepoints(that.position, that.R, that.height)
                    return Cesium.Cartesian3.fromDegreesArrayHeights(backpositions.position)
                }, false),
                minimumHeights : that.minheights,
                material: new Cesium.ImageMaterialProperty({
                    image: wallimg,
                    transparent: true,
                    color:that.color
                outline: false
            }
        });
    }
    getWallCirclepoints(center, Rlength, height) {
        var ellipseOutlineInner = new Cesium.EllipseOutlineGeometry({
            center: center,
            semiMajorAxis: Rlength,
            semiMinorAxis: Rlength,
            rotation: Cesium.Math.toRadians(0.0)
        });
        var geometryInner = Cesium.EllipseOutlineGeometry.createGeometry(ellipseOutlineInner);

        var valuesInner = geometryInner.attributes.position.values;
        var positions = []
        var minheights = []
        var maxheights = []
        for (var i = 0; i < valuesInner.length; i = i + 3) {

            var position = new Cesium.Cartesian3(valuesInner[i], valuesInner[i + 1], valuesInner[i + 2]);
            var cartographic = Cesium.Cartographic.fromCartesian(position);
            var longitude = Cesium.Math.toDegrees(cartographic.longitude);
            var latitude = Cesium.Math.toDegrees(cartographic.latitude);
            //var height = cartographic.height;
            positions.push(longitude)
            positions.push(latitude)
            positions.push(height)
            //minheights.push(0)
            //maxheights.push(height)
        }
        positions.push(positions[0])
        positions.push(positions[1])
        positions.push(positions[2])
        var wallposition = {
            position: positions,
            minheights: minheights,
            maxheights: maxheights
        }
        return wallposition
    }
}
export default scallCircleWall

这里的图片是一样白色渐变的png图片，通过和设置颜色的混合，可以支持任意颜色的设置。

wall.png

最后来看下效果

动态圆形.gif