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

作者：桔子
本文同步发布于https://www.jianshu.com/p/2c1a11a637ca

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

1、效果分析

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

2、实现代码

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

import wallimg from "./images/wall.png"
class scallCircleWall {constructor(datasource,position,color,R,maxHeight,minheight) {this.datasource=datasourcethis.position=positionthis.color=colorthis.alp = 1;this.num = 0;this.maxR = Rthis.maxHeight = maxHeightthis.minheight=minheightthis.R = 1this.height = 0this.minheights=[]for (let index = 0; index < 49; index++) {this.minheights.push(this.minheight)  }let that=thisthis.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.minheightif (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.coloroutline: 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图片，通过和设置颜色的混合，可以支持任意颜色的设置。

最后来看下效果

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！