Cesium点线面绘制

前言
效果图
关键代码

前言

Cesium点线面绘制是很基本的功能，数据采集类型的系统必须具备此功能。但是Cesium并没有提供相关可以直接使用的绘制方法，只能自己进行封装，虽然实现起来不是很难，但是对Cesium不太熟的同学还是比较麻烦的。

效果图

关键代码

export default class EntityDraw {constructor(viewer) {this.viewer = viewer;        this.initEvents();}//激活activate(drawType) {this.deactivate(); this.drawType = drawType;this.positions = [];this.tempPositions = [];this.registerEvents(); //注册鼠标事件 //设置鼠标状态 this.viewer.enableCursorStyle = false;this.viewer._element.style.cursor = 'default'; } //初始化事件initEvents() {this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);this.DrawStartEvent = new Cesium.Event(); //开始绘制事件this.DrawEndEvent = new Cesium.Event(); //结束绘制事件        }//注册鼠标事件registerEvents() {this.leftClickEvent();this.rightClickEvent();this.mouseMoveEvent();}leftClickEvent() {//单击鼠标左键画点this.handler.setInputAction(e => {this.viewer._element.style.cursor = 'default';let position = this.viewer.scene.pickPosition(e.position);if (!position) return;this.positions.push(position);if (this.positions.length == 1) {this.handleFirstPosition();}}, Cesium.ScreenSpaceEventType.LEFT_CLICK);}  mouseMoveEvent() {this.handler.setInputAction(e => {this.viewer._element.style.cursor = 'default'; //由于鼠标移动时 Cesium会默认将鼠标样式修改为手柄 所以移动时手动设置回来let position = this.viewer.scene.pickPosition(e.endPosition);if (!position) return;if (!this.drawEntity) return;this.tempPositions = this.positions.concat([position]);}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);}//解除鼠标事件unRegisterEvents() {this.handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);this.handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);}//绘制结束 触发结束事件drawEnd() {this.drawEntity.remove = () => {this.viewer.entities.remove(this.drawEntity);}this.DrawEndEvent.raiseEvent(this.drawEntity, this.positions, this.drawType);this.deactivate();}
}

详情参见 Cesium实战项目

Cesium点线面绘制相关推荐

便利贴--9{Cesium+js绘制多个点和多个线的图层，加标题}
便利贴--9{Cesium+js绘制多个点和多个线的图层,加标题} 代码代码附加转类型从openlayers线数据转到DC的Polyline数据 changeData(data, name, va ...
Cesium中绘制矩形，根据四角/对角坐标绘制矩形
Cesium中绘制矩形,根据四角/对角坐标绘制矩形 import store from '@/store/index' import * as Cesium from 'cesium'export d ...
cesium动态绘制圆，矩形，自定义区域
cesium动态绘制圆,矩形,自定义区域自己封装了一个类,可以放在js文件中引入项目,具体使用和代码如下 class Draw {constructor(viewer, config) {/**ce ...
【超图+CESIUM】【基础API使用示例】22、超图｜CESIUM - 标绘面：Cesium.DrawHandler绘制面Cesium.DrawMode.Polygon
前言缺少前置学习使用资料,请自行查阅:[https://blog.csdn.net/weixin_44402694/article/details/123110136](https://blog.c ...
Cesium开发-绘制墙体
Cesium中绘制图形有两种方式,一可以通过entity自定义图形也可以使用primitives的方式绘制图形,以下是两个示例的代码总结: <!DOCTYPE html> <html ...
Cesium.js点线面绘制
Cesium.js在三维GIS中十分的流行,点.线.面的绘制也是GIS开发中经常用到的基础操作.最近在Ceisum.js三维开发时,也是遇到了点.线.面的绘制功能开发,正好这里记录分享一下. 效果核 ...
cesium点线面，测量详细代码
效果可跳转 http://123.57.53.47/cesiumWeb/#/cesiumTools/measure 前往效果图如下因为要绘制点线面,分别要与cesium的左点击事件和鼠标移动事件左 ...
cesium 经纬度绘制点_cesium结合geoserver利用WFS服务实现图层新增(附源码下载)
前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...
cesium 经纬度绘制点_Cesium经纬度与坐标的问题
##数据预处理 1. 源数据坐标系通常为二维平面坐标系,通过设置投影坐标(通常为高斯克吕格投影,按实际位置选择正确分带)使其可进行后续操作. 2. 投影坐标是实际位置在平面上投影后的坐标,获得其正确位 ...

Cesium点线面绘制

Cesium点线面绘制

前言

效果图

关键代码

Cesium点线面绘制相关推荐

最新文章

热门文章