首页 > 其他分享> 文章详细

cesium实现动态扩散墙效果（基于turf）_右弦GISer的博客

2022-04-27 15:33:32 阅读：359 来源： 互联网

标签：scale 缩放 GISer param Cesium 2.2 cesium turf

文章目录

Cesium实战系列文章总目录：传送门

1.实现效果

在这里插入图片描述

2.实现方法

通过查询Cesium文档，发现并没有提供缩放要素的功能，这里使用第三方库turf来实现。

2.1 turf库

turf做为前端地理空间分析库，在前端开发中广泛应用，网址为：turf中文网
在这里插入图片描述
turf中提供了按比例缩放要素的方法transformScale，传送门

2.2具体代码

这里将缩放代码整合到函数wallDiffuse中，可以实现墙的放大和缩小，缩放比例应该大于0,0-1之前为缩小，大于1为放大。

2.2.1核心函数

/**
 * @description: 扩散墙效果（基于turf实现，可以放到或缩小）
 * @param {*} _positions：底部坐标，单个面坐标的格式为[[[lon,lat]]]
 * @param {*} _scale：最大缩放比例
 * @param {*} _height：墙高度
 * @param {*} _material：墙材质
 * @return {*}
 */
function wallDiffuse(_positions, _scale, _height, _material) {
    let scale = 1;
    this.viewer.entities.add({
        name: "扩散墙",
        wall: {
            positions: new Cesium.CallbackProperty(() => {
                // 判断是放大还是缩小
                if (_scale >= 1) {
                    scale += _scale / 200.0;
                    if (scale >= _scale) {
                        scale = 1.0;
                    }
                } else {
                    scale -= _scale / 200.0;
                    if (scale <= _scale) {
                        scale = 1;
                    }
                }

                let polygon = turf.polygon(_positions);
                let scaledPolygon = turf.transformScale(polygon, scale);
                let newPositions = [];
                // 遍历多边形
                for (let i = 0; i < scaledPolygon.geometry.coordinates[0].length; i++) {
                    // 遍历节点
                    scaledPolygon.geometry.coordinates[0][i].forEach((item) => {
                        newPositions.push(item);
                    })
                    newPositions.push(_height);
                }
                return Cesium.Cartesian3.fromDegreesArrayHeights(newPositions);
            }, false),
            material: _material
        }
    });
}

2.2.2代码调用

// 扩散墙
let wallPositions = [
   [
       [113.8236839, 22.528061],
       [113.9236839, 22.628061],
       [114.0236839, 22.528061],
       [113.9236839, 22.428061],
       [113.8236839, 22.528061],
   ]
];
wallDiffuse(wallPositions, 3.0, 5000.0, new Cesium.Color(1.0, 1.0, 0.0, 0.7));

本文转自 https://blog.csdn.net/weixin_45782925/article/details/123333391，如有侵权，请联系删除。

标签：scale,缩放,GISer,param,Cesium,2.2,cesium,turf
来源： https://www.cnblogs.com/hustshu/p/16199098.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9