[cesium] 插件 | 基于cesium的动态缓冲区图形绘制

曾经终败给现在 2023-01-11 09:18 264阅读 0赞

### 前言 ###

之前写了一个动态缓冲区的效果，网友私信想要demo，这里把代码贴到github上，有需要的自取；

插件地址：[传送门][Link 1]

在线地址：[访问][Link 2]

### 效果 ###

### ![20210126180304472.gif][] ###

### 示例代码 ###

// 初始化
        let viewer = new Cesium.Viewer("viewerContainer")
    
        // 参数 缓冲范围
        let radius = 1, bufferEntity = [];
    
        // 创建点缓冲区
        let createPointBuffer = () => {
    
           // 绘制点 右键结束
            Cesium.drawPointGraphics({ viewer: viewer }).then((point) => {
    
              // 创建缓冲区范围
              point = point[0]
              let turfPositions = turf.point([point.lng, point.lat])
    
              bufferEntity.push(Cesium.createGraphicsBuffer({
                viewer: viewer,
                turfPositions: turfPositions,
                radius: Number(radius)
              }))
    
            })
        }
        
         // 创建线 缓冲区
        let createPolylineBuffer = () => {
    
           // 绘制线 右键结束
            Cesium.drawLineGraphics({ viewer: viewer }).then((lines) => {
    
              // 创建缓冲区范围
              let _lines = []
              lines.forEach((line) => { let point = [line.lng, line.lat]; _lines.push(point)}
              let turfPositions = turf.lineString(_lines)
    
              bufferEntity.push(Cesium.createGraphicsBuffer({
                viewer: viewer,
                turfPositions: turfPositions,
                radius: Number(radius)
              }))
    
            })
        }
    
        // 创建面缓冲区
        let createPolygonBuffer = () => {
    
            // 绘制面 右键结束
            Cesium.drawPolygonGraphics({ viewer: viewer }).then((polygons) => {
    
              // 创建缓冲区范围
              let _polygons = []
              polygons.forEach((polygon) => { let point = [polygon.lng,       polygon.lat];_polygons.push(point) })
              let turfPositions = turf.polygon([_polygons])
    
              bufferEntity.push(Cesium.createGraphicsBuffer({
                viewer: viewer,
                turfPositions: turfPositions,
                radius: Number(radius)
              }))
    
            })
        }
        
        // 动画控制
        let animation = () => bufferEntity && bufferEntity.forEach(entity => entity.animation = !entity.animation)

[Link 1]: https://github.com/zhangti0708/cesium-graphicBuffer
[Link 2]: http://zhangticcc.gitee.io/cesium-graphicbuffer/
[20210126180304472.gif]: /images/20221119/30f94a96e25544b8a261a49bbf868726.png