cesium

2024-07-10 01:36| 来源: 网络整理| 查看: 265

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地址

【本文地址】

cesium

cesium

今日新闻

推荐新闻