cesium---绘制、测量功能的cesium-measure.js使用

1、介绍

在cesium开发中经常会碰到绘制、测量的功能，发现每次都去写或者cv实在是麻烦。随即利用空闲时间将cesium中经常用到的绘制功能：线、多边形、圆形、矩形；测量功能：距离测量、面积测量、三角测量融合成了一个cesium-measure.js文件。

        如何使用：1、下载js、放置到项目中、导入js

                          2、实例

 const measure = new CesiumMeasures(viewer)

                          3、调用 measure 中对应的方法

2、详细介绍

        该分js同时支持绘制和测量功能，通过measure控制，以多边形的绘制为例，介绍下每一个参数的含义：        

measure.drawAreaMeasureGraphics({
    clampToGround: false, measure: true, style: {
        line: {
            width: 2,
            material: Cesium.Color.RED.withAlpha(0.8)
        },
        point: {
            pixelSize: 5,
            outlineColor: Cesium.Color.BLUE,
            outlineWidth: 2
        },
        polygon: {
            material: Cesium.Color.GREEN.withAlpha(0.1)
        },
        centerPoint: {
            pixelSize: 5,
            outlineColor: Cesium.Color.RED,
            outlineWidth: 2
        }
    }, callback: (e) => {
        console.log(e, "88888888888");
    }
})

1、clampToGround
    ---是否开启贴地功能，当设置了地图的地形并clampToGround==true时，图形会贴地

2、measure
    --- 是否开启测量功能、当为true后会开启测量功能并会显示在地图上

3、style
    --- 用于自定义地图中的点线面的样式--根据绘制的类型有不同的参数如下
    3.1、point
            ---绘制的点的样式
    3.2、line
            ---绘制的线的样式
    3.3、polygon
            ---绘制的面的样式
    3.4、centerPoint
            ---绘制的中线点的样式
    3.5、circle
            ---绘制的圆的样式
4、callback
    ---绘制完返回都得数据--根据绘制的不同有如下的返回--（三角测量除外）
    4.1、points
        --- 绘制的所有点的数据
    4.2、entity
        --- 绘制的所有点线面的集合（你可以通过这个对绘制完的entity进行二次加工）
    4.3、measure
        --- 开启测量功能会返回的测量值 距离（米），面积（平方米）

3、具体实现

        3.1、cesium 绘制线以及距离测量

   

measure.drawLineMeasureGraphics({ clampToGround: false,measure:true,style:{
    line:{
        width:2,
        material:Cesium.Color.BLUE.withAlpha(0.8)
    },
    point:{
        color:Cesium.Color.RED,
        pixelSize:5,
        outlineColor: Cesium.Color.GREEN,
        outlineWidth: 3,
        show:true,//默认是显示点位
    }
}, callback: (e) => {
    console.log(e,"88888888888");
} })

        3.2、cesium 绘制多边形及多边形的面积测量

measure.drawAreaMeasureGraphics({
    clampToGround: false, measure: true, style: {
        line: {
            width: 2,
            material: Cesium.Color.RED.withAlpha(0.8),
            show:true,//默认为true
        },
        point: {
            pixelSize: 5,
            outlineColor: Cesium.Color.BLUE,
            outlineWidth: 2,
            show:true,//默认为true
        },
        polygon: {
            material: Cesium.Color.GREEN.withAlpha(0.1)
        },
        //如果不设置centerPoint则会把测量的位置现在在最后一个点击的位置
        centerPoint: {
            pixelSize: 5,
            outlineColor: Cesium.Color.RED,
            outlineWidth: 2
        }
    }, callback: (e) => {
        console.log(e, "88888888888");
    }
})

         3.3、三角测量

                --- 懒得去开启地形了，直接上代码吧---有问题再私我

measure.drawTrianglesMeasureGraphics({
    style: {
        line: {
            width: 2,
            material: Cesium.Color.BLUE.withAlpha(0.8)
        },
        point: {
            pixelSize: 5,
            outlineColor: Cesium.Color.BLUE,
            outlineWidth: 5,
            show: true,//默认为true

        }
    },
    callback: () => { }
})

        3.4、 cesium绘制矩形和矩形面积测量

measure.drawRectangleMeasureGraphics({
    clampToGround: false, measure: true, style: {
        line: {
            
            width: 2,
            material: Cesium.Color.RED.withAlpha(0.8),
            show: true,//默认为true
        },
        point: {
            
            pixelSize: 5,
            outlineColor: Cesium.Color.BLUE,
            outlineWidth: 1,
            show: true,//默认为true
        },
        polygon: {
            material: Cesium.Color.RED.withAlpha(0.1)
        },
        centerPoint: {
            pixelSize: 5,
            outlineColor: Cesium.Color.RED,
            outlineWidth: 2,
            show: true,//默认为true

        }
    }, callback: (e) => {
        console.log(e, "88888888888");
    }
})

         3.5、绘制圆形和圆的面积计算

                （cesium中并没有计算圆的方法--所以是使用的Math.PI*r*r）来计算的（有可能有问题）

measure.drawCircleMeasureGraphics({
clampToGround: false, measure: true, style: {
    line: {
        width: 2,//部分浏览器不起作用！！！无论多宽都是1，
        material: Cesium.Color.RED.withAlpha(0.8)
    },
    centerPoint: {
        show: true,
        pixelSize: 5,
        outlineColor: Cesium.Color.YELLOW,
        outlineWidth: 3,
        cololr: Cesium.Color.RED

    },
    circle: {
        material: Cesium.Color.GREEN.withAlpha(0.1),
        outlineColor: Cesium.Color.YELLOW,
        outlineWidth: 3,
    },

}, callback: (e) => {
    console.log(e, "88888888888");
}

4、清空绘制数据

 measure._drawLayer.entities.removeAll()

        当然你也可以使用遍历图层，获取CustomDataSource名字为 measureLayer 的方式去移除

var dataSource = viewer.dataSources.getByName('measureLayer')[0];
// 确保数据源存在
if (Cesium.defined(dataSource)) {
    // 这里可以使用 dataSource 对象进行进一步的操作
    console.log('成功获取到数据源:', dataSource);
} else {
    console.log('未找到名为 measureLayer 的数据源。');
}

5、总结：

        如果在使用中有其他问题或者想要丰富的功能可以留言或者+QQ2933634771

        开启地形的我没截图，需要实现的改下参数即可

        如果gitup没以加QQ群 825493528

        cesium-measure-draw.js的gitup地址