cesium动态绘制圆，矩形，自定义区域

自己封装了一个类，可以放在js文件中引入项目，具体使用和代码如下

class Draw {constructor(viewer, config) {/**cesium实例对象 */this.viewer = viewer/**绘制要素的相关配置* 默认配置* {borderColor: Cesium.Color.BLUE,  边框颜色borderWidth: 2, 边框宽度material: Cesium.Color.GREEN.withAlpha(0.5),填充材质}*/this.config = config || {borderColor: Cesium.Color.BLUE,borderWidth: 2,material: Cesium.Color.GREEN.withAlpha(0.5),}/**存贮绘制的数据 坐标 */this.infoDetail = { point: [], line: [], rectangle: [], circle: [], planeSelf: [] }this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)}/******* * @function: function* @return {*}* @author: xk* @description: 绘制点数据*/drawPoint() {this.handler.destroy()this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)this.handler.setInputAction((click) => {/**点击位置笛卡尔坐标 */let cartesian = this.viewer.camera.pickEllipsoid(click.position, this.viewer.scene.globe.ellipsoid)/**笛卡尔转弧度坐标 */let cartographic = Cesium.Cartographic.fromCartesian(cartesian, this.viewer.scene.globe.ellipsoid, new Cesium.Cartographic())/**点击位置经度 */let lng = Cesium.Math.toDegrees(cartographic.longitude)/**点击位置维度 */let lat = Cesium.Math.toDegrees(cartographic.latitude)/**实体的唯一标注 */let id = new Date().getTime()this.viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(lng, lat, 0),name: 'point',id: id,point: {color: this.config.material,pixelSize: 12,outlineColor: this.config.borderColor,outlineWidth: this.config.borderWidth}})this.infoDetail.point.push({ id: id, position: [lng, lat] })}, Cesium.ScreenSpaceEventType.LEFT_CLICK)this.handler.setInputAction((click) => {this.handler.destroy();}, Cesium.ScreenSpaceEventType.RIGHT_CLICK)}/******* * @function: function* @description: 绘制矩形区域* @return {*}* @author: xk*/drawRectangle() {this.handler.destroy()/*** 矩形四点坐标*/let westSouthEastNorth = []/**实体的唯一标注 */let id = null/**地图点击对象 */this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)this.handler.setInputAction((click) => {/**点击位置笛卡尔坐标 */let cartesian = this.viewer.camera.pickEllipsoid(click.position, this.viewer.scene.globe.ellipsoid)/**笛卡尔转弧度坐标 */let cartographic = Cesium.Cartographic.fromCartesian(cartesian, this.viewer.scene.globe.ellipsoid, new Cesium.Cartographic())/**点击位置经度 */let lng1 = Cesium.Math.toDegrees(cartographic.longitude)/**点击位置维度 */let lat1 = Cesium.Math.toDegrees(cartographic.latitude)/**边框坐标 */westSouthEastNorth = [lng1, lat1]id = new Date().getTime()if (westSouthEastNorth) {this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)}/**面实例对象 */let polygons = this.viewer.entities.add({name: 'rectangle',id: id,polygon: {hierarchy: new Cesium.CallbackProperty(function () {return {positions: Cesium.Cartesian3.fromDegreesArray(westSouthEastNorth)}}),height: 0,// 填充的颜色，withAlpha透明度material: this.config.material,// 是否被提供的材质填充fill: true,// 是否显示show: true,},polyline: {positions: new Cesium.CallbackProperty(function () { return Cesium.Cartesian3.fromDegreesArray(westSouthEastNorth) }),material: this.config.borderColor,width: this.config.borderWidth,zIndex: 1}})this.handler.setInputAction((move) => {let cartesian = this.viewer.camera.pickEllipsoid(move.endPosition, this.viewer.scene.globe.ellipsoid)let cartographic = Cesium.Cartographic.fromCartesian(cartesian, this.viewer.scene.globe.ellipsoid, new Cesium.Cartographic())let lng = Cesium.Math.toDegrees(cartographic.longitude)let lat = Cesium.Math.toDegrees(cartographic.latitude)westSouthEastNorth = [lng1, lat1, lng1, lat, lng, lat, lng, lat1, lng1, lat1]}, Cesium.ScreenSpaceEventType.MOUSE_MOVE)}, Cesium.ScreenSpaceEventType.LEFT_CLICK)this.handler.setInputAction(() => {this.handler.destroy();this.infoDetail.rectangle.push({ id: id, position: westSouthEastNorth })}, Cesium.ScreenSpaceEventType.RIGHT_CLICK)}/******* * @function: function* @description: 绘制圆形区域* @return {*}* @author: xk*/drawCircle() {this.handler.destroy()/**实体的唯一标注 */let id = null/**圆半径 */let radius = 0/**圆心 */let lngLat = []/**鼠标事件 */this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)this.handler.setInputAction((click) => {id = new Date().getTime()let cartesian = this.viewer.camera.pickEllipsoid(click.position, this.viewer.scene.globe.ellipsoid)let cartographic = Cesium.Cartographic.fromCartesian(cartesian, this.viewer.scene.globe.ellipsoid, new Cesium.Cartographic())let lng = Cesium.Math.toDegrees(cartographic.longitude)let lat = Cesium.Math.toDegrees(cartographic.latitude)lngLat = [lng, lat]let entity = this.viewer.entities.add({position: new Cesium.CallbackProperty(function () { return new Cesium.Cartesian3.fromDegrees(...lngLat, 0) }, false),name: 'circle',id: id,ellipse: {height: 0,outline: true,material: this.config.material,outlineColor: this.config.borderColor,outlineWidth: this.config.borderWidth}})entity.ellipse.semiMajorAxis = new Cesium.CallbackProperty(function () { return radius }, false)entity.ellipse.semiMinorAxis = new Cesium.CallbackProperty(function () { return radius }, false)if (lngLat) {this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)}this.handler.setInputAction((move) => {let cartesian2 = this.viewer.camera.pickEllipsoid(move.endPosition, this.viewer.scene.globe.ellipsoid)radius = Cesium.Cartesian3.distance(cartesian, cartesian2)}, Cesium.ScreenSpaceEventType.MOUSE_MOVE)}, Cesium.ScreenSpaceEventType.LEFT_CLICK)this.handler.setInputAction(() => {this.infoDetail.circle.push({ id: id, center: lngLat, radius: radius })this.handler.destroy();}, Cesium.ScreenSpaceEventType.RIGHT_CLICK)}/******* * @function: function* @description: 自定义区域绘制* @return {*}* @author: xk*/drawPlane() {this.handler.destroy()/**实体的唯一标注 */let id = new Date().getTime()/**记录拐点坐标 */let positions = [],/**记录返回结果 */codeInfo = [],/**面的hierarchy属性 */polygon = new Cesium.PolygonHierarchy(),_polygonEntity = new Cesium.Entity(),/**面对象配置 */polyObj = nullthis.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);// leftthis.handler.setInputAction((movement) => {let cartesian = this.viewer.camera.pickEllipsoid(movement.position, this.viewer.scene.globe.ellipsoid);let cartographic = Cesium.Cartographic.fromCartesian(cartesian, this.viewer.scene.globe.ellipsoid, new Cesium.Cartographic())let lng = Cesium.Math.toDegrees(cartographic.longitude)let lat = Cesium.Math.toDegrees(cartographic.latitude)if (cartesian && cartesian.x) {if (positions.length == 0) {positions.push(cartesian.clone());}codeInfo.push([lng, lat])positions.push(cartesian.clone());polygon.positions.push(cartesian.clone())if (!polyObj) {_polygonEntity.polyline = {width: this.config.borderWidth,material: this.config.borderColor,clampToGround: false}_polygonEntity.polyline.positions = new Cesium.CallbackProperty(function () {return positions}, false)_polygonEntity.polygon = {hierarchy: new Cesium.CallbackProperty(function () {return polygon}, false),material: this.config.material,clampToGround: false}_polygonEntity.name = 'planeSelf'_polygonEntity._id = idpolyObj = this.viewer.entities.add(_polygonEntity)}}}, Cesium.ScreenSpaceEventType.LEFT_CLICK);// mousethis.handler.setInputAction((movement) => {let cartesian = this.viewer.camera.pickEllipsoid(movement.endPosition, this.viewer.scene.globe.ellipsoid);let cartographic = Cesium.Cartographic.fromCartesian(cartesian, this.viewer.scene.globe.ellipsoid, new Cesium.Cartographic())let lng = Cesium.Math.toDegrees(cartographic.longitude)let lat = Cesium.Math.toDegrees(cartographic.latitude)if (positions.length >= 0) {if (cartesian && cartesian.x) {positions.pop()positions.push(cartesian);polygon.positions.pop()polygon.positions.push(cartesian);codeInfo.pop()codeInfo.push([lng, lat]);}}}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);// rightthis.handler.setInputAction((movement) => {this.infoDetail.planeSelf.push({ id: id, positions: codeInfo })this.handler.destroy();positions.push(positions[0]);}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);}/******* * @function: function* @return {*}* @author: xk* @description: 绘制线段*/drawLine() {this.handler.destroy()/**实体的唯一标注 */let id = null/**记录拐点坐标 */let positions = [],/**记录返回结果 */codeInfo = [],/**面的hierarchy属性 */polygon = new Cesium.PolygonHierarchy(),_polygonEntity = new Cesium.Entity(),/**面对象配置 */polyObj = nullthis.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);// leftthis.handler.setInputAction((movement) => {id = new Date().getTime()let cartesian = this.viewer.camera.pickEllipsoid(movement.position, this.viewer.scene.globe.ellipsoid);let cartographic = Cesium.Cartographic.fromCartesian(cartesian, this.viewer.scene.globe.ellipsoid, new Cesium.Cartographic())let lng = Cesium.Math.toDegrees(cartographic.longitude)let lat = Cesium.Math.toDegrees(cartographic.latitude)if (cartesian && cartesian.x) {if (positions.length == 0) {positions.push(cartesian.clone());}codeInfo.push([lng, lat])positions.push(cartesian.clone());polygon.positions.push(cartesian.clone())if (!polyObj) {_polygonEntity.polyline = {width: this.config.borderWidth,material: this.config.borderColor,clampToGround: false}_polygonEntity.polyline.positions = new Cesium.CallbackProperty(function () {return positions}, false)_polygonEntity.name = 'line'_polygonEntity._id = idpolyObj = this.viewer.entities.add(_polygonEntity)}}}, Cesium.ScreenSpaceEventType.LEFT_CLICK);// mousethis.handler.setInputAction((movement) => {let cartesian = this.viewer.camera.pickEllipsoid(movement.endPosition, this.viewer.scene.globe.ellipsoid);let cartographic = Cesium.Cartographic.fromCartesian(cartesian, this.viewer.scene.globe.ellipsoid, new Cesium.Cartographic())let lng = Cesium.Math.toDegrees(cartographic.longitude)let lat = Cesium.Math.toDegrees(cartographic.latitude)if (positions.length >= 0) {if (cartesian && cartesian.x) {positions.pop()positions.push(cartesian);codeInfo.pop()codeInfo.push([lng, lat]);}}}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);// rightthis.handler.setInputAction((movement) => {this.infoDetail.line.push({ id: id, positions: codeInfo })this.handler.destroy();}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);}/******* * @function: function* @description: 移除实体对象* @return {*}* @author: xk*/removeEntity() {this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)this.handler.setInputAction((move) => {/**实体对象信息  {id：entities，primitive：。。} */let pick = this.viewer.scene.pick(move.endPosition);if (pick && pick.id && pick.id.id) {document.body.style.cursor = "pointer";this.handler.setInputAction((click) => {let newPointswitch (pick.id.name) {case 'point':/**删除某一条数据 */newPoint = this.infoDetail.point.filter(item => item.id != pick.id._id)this.infoDetail.point = newPointbreakcase 'line':/**删除某一条数据 */newPoint = this.infoDetail.line.filter(item => item.id != pick.id._id)this.infoDetail.line = newPointbreakcase 'rectangle':/**删除某一条数据 */newPoint = this.infoDetail.rectangle.filter(item => item.id != pick.id._id)this.infoDetail.rectangle = newPointbreakcase 'planeSelf':/**删除某一条数据 */newPoint = this.infoDetail.planeSelf.filter(item => item.id != pick.id._id)this.infoDetail.planeSelf = newPointbreakcase 'circle':/**删除某一条数据 */newPoint = this.infoDetail.circle.filter(item => item.id != pick.id._id)this.infoDetail.circle = newPointbreakdefault: break}this.viewer.entities.remove(pick.id)}, Cesium.ScreenSpaceEventType.LEFT_CLICK)} else {document.body.style = "cursor: default;";}}, Cesium.ScreenSpaceEventType.MOUSE_MOVE)}/******* * @function: function* @return {*}* @author: xk* @description: 返回绘制数据*/backInfoDetail() {return this.infoDetail}}

使用

let draw = new Draw(viewer，{borderColor:Cesium.Color.RED,material:Cesium.Color.BLUE.withAlpha(0.5)})  //viewer 初始化的cesium对象,自定义配置项，可以不用，就使用默认样式
draw.drawCircle() //圆形区域
draw.drawRectangle()//矩形区域
draw.drawPlane()//自定义区域绘制
draw.removeEntity()//移除选区  鼠标移动到上面 点击清除//一般是绑定在具体的按钮上，来判断要执行哪一个绘制方法  左键点击绘制，右键点击结束

cesium动态绘制圆，矩形，自定义区域相关推荐

leaflet动态绘制圆、多边形
使用leaflet在页面中动态的绘制一个圆形,主要需要解决的有两点,其一是如何确定圆的中心,其二是如何确定圆的半径.解决了这两点,剩下的就是把圆作为图层添加进map中了. 使用leaflet绘制多边形 ...
使用Cesium动态绘制点、线、面、圆、矩形
将以下代码复制到https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/?src=Drawing%20on%20Terrain.html查看Demo. va ...
7.动态绘制(Jig)
愿你出走半生,归来仍是少年! 环境:.NET FrameWork4.5.ObjectArx 2016 64bit.Entity Framework 6. 目录 1. 来源 2. Jig类 2.1 En ...
Leaflet学习之路五——动态绘制图形(点、线、圆、多边形)
leaflet动态绘制图形动态绘点动态绘线动态绘多边形动态绘制矩形 2020.3.16更新更新日志: 2019.1.14:更新了绘制多边形时tmpline没有移除的问题 2019.1.15: ...
百度地图画圆：动态绘制显示圆半径
百度地图画圆:动态绘制显示圆半径在开发百度地图时,项目需要借助画圆工具框选地图上的点,原始画圆工具可以通过 enableCalculate() 方法获取框选区域面积,进而可以计算圆的半径. ...
DEJA_VU3D - Cesium功能集之 079-对象材质：动态扩散圆
前言编写这个专栏主要目的是对工作之中基于Cesium实现过的功能进行整合,有自己琢磨实现的,也有参考其他大神后整理实现的,初步算了算现在有实现120个左右的功能,后续也会不断的追加,所以暂时打算一周 ...
OpenCV中绘制外围矩形框和圆框
OpenCV中绘制外围矩形框和圆框利用边界寻找函数找到的边界坐标信息.然后利用每一条寻找到的边际信息去找到图形的矩形边界和圆形边界. 一. OpenCV中绘制外围矩形框根据已知的边界信息点.将边界 ...
Cesium中绘制矩形，根据四角/对角坐标绘制矩形
Cesium中绘制矩形,根据四角/对角坐标绘制矩形 import store from '@/store/index' import * as Cesium from 'cesium'export d ...
Echarts地图绘制自定义区域 - geojson.io使用方法
Echarts地图绘制自定义区域 & 解决区域点击无效 1. 绘制地图自定义区域需求:绘制带高新区的河源市地图,目前百度地图json还没有此新区.需手动绘制. STEP1:获取市区json ...

cesium动态绘制圆，矩形，自定义区域

cesium动态绘制圆，矩形，自定义区域

cesium动态绘制圆，矩形，自定义区域相关推荐

最新文章

热门文章