SuperMap WebGL拖拽式画圆和画矩形

三维开发中，有时候需要用到鼠标拖拽的方式去绘制圆形和矩形，甚至可以在绘制的时候实时显示绘制图形的面积或者周长等几何信息。那么话不多说，先看效果：

动图我们可以看到绘制显示是根据鼠标实时生成的，主要的代码为控制鼠标事件

//鼠标左键
handler.setInputAction(function (event) {if (Cesium.defined(earthPosition)) {if (activeShapePoints.length === 0) {floatingPoint = createPoint(earthPosition);activeShapePoints.push(earthPosition);var dynamicPositions = new Cesium.CallbackProperty(function () {if (drawingMode === 'polygon') {return new Cesium.PolygonHierarchy(activeShapePoints);}return activeShapePoints;}, false);activeShape = drawShape(dynamicPositions); //绘制动态图，传入function}activeShapePoints.push(earthPosition);createPoint(earthPosition);}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
//鼠标移动
handler.setInputAction(function (event) {if (Cesium.defined(floatingPoint)) {var newPosition = viewer.scene.pickPosition(event.endPosition);if (Cesium.defined(newPosition)) {floatingPoint.position.setValue(newPosition);activeShapePoints.pop();activeShapePoints.push(newPosition);}}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

还有就是绘制的时候计算图形的半径和边长等信息

//绘制图形
function drawShape(positionData) {var shape;if (drawingMode === 'line') {shape = viewer.entities.add({polyline: {positions: positionData,clampToGround: true,width: 3}});} else if (drawingMode === 'polygon') {shape = viewer.entities.add({polygon: {hierarchy: positionData,material: new Cesium.ColorMaterialProperty(Cesium.Color.WHITE.withAlpha(0.7))}});} else if (drawingMode === 'circle') {//当positionData为数组时绘制最终图，如果为function则绘制动态图var value = typeof positionData.getValue === 'function' ? positionData.getValue(0) : positionData;shape = viewer.entities.add({position: activeShapePoints[0],name: 'Blue translucent, rotated, and extruded ellipse with outline',type: 'Selection tool',ellipse: {semiMinorAxis: new Cesium.CallbackProperty(function () {//半径 两点间距离var r = Math.sqrt(Math.pow(value[0].x - value[value.length - 1].x, 2) + Math.pow(value[0].y - value[value.length - 1].y, 2));return r ? r : r + 1;}, false),semiMajorAxis: new Cesium.CallbackProperty(function () {var r = Math.sqrt(Math.pow(value[0].x - value[value.length - 1].x, 2) + Math.pow(value[0].y - value[value.length - 1].y, 2));return r ? r : r + 1;}, false),material: Cesium.Color.BLUE.withAlpha(0.5),outline: true}});} else if (drawingMode === 'rectangle') {//当positionData为数组时绘制最终图，如果为function则绘制动态图var arr = typeof positionData.getValue === 'function' ? positionData.getValue(0) : positionData;shape = viewer.entities.add({name: 'Blue translucent, rotated, and extruded ellipse with outline',rectangle: {coordinates: new Cesium.CallbackProperty(function () {var obj = Cesium.Rectangle.fromCartesianArray(arr);//if(obj.west==obj.east){ obj.east+=0.000001};//if(obj.south==obj.north){obj.north+=0.000001};return obj;}, false),material: Cesium.Color.RED.withAlpha(0.5)}});}return shape;
}

到这，基本就OK了

全部代码见资源

webgl拖拽式画圆和画矩形代码-Javascript文档类资源-CSDN下载

SuperMap WebGL拖拽式画圆和画矩形相关推荐

使用WebGL去实现一个拖拽式UI代码生成App
前言 UI(User Interface),即用户界面,是软件和用户之间进行交互和信息交换的媒介,实现信息的内部形式与人类可接受形式间的转换.UI开发一般需要经过UI设计.UI实现两个过程.UI设 ...
java使用重绘实现拖动_原生JS使用Canvas实现拖拽式绘图功能
一.实现的功能 1.基于oop思想构建,支持坐标点.线条(由坐标点组成,包含方向).多边形(由多个坐标点组成).圆形(包含圆心坐标点和半径)等实体 2.原生JavaScript实现,不依赖任何第三方j ...
html5拖拽表单设计器,require+jquery+backbone实现拖拽式报表设计器-拖拽式表单设计器...
HTML我帮您-拖拽式报表设计器-拖拽式表单设计器是一个可视化设计器,基于require+jquery+backbone+underscore+bootstrap实现的表单设计器.思想来源于 Layo ...
拖拽式生成CMS和在线商店：Microweber
简介 Microweber是新一代的CMS生成工具,允许你使用拖拽方式创建网站.操作内容以及管理页面布局,而不需要你有任何编码能力! 当然,开发者也可以便捷的创建自己喜欢的网站布局.选择美观的样式而不 ...
拖拽式创建小程序原型 - 小piu神器 - 腾讯lowCode - 软件开发
免费的拖拽式小程序.App原型设计稿生成器(小piu) - 感谢神器! https://www.xiaopiu.com/ 收费的微信小程序拖拽生成开发: 腾讯云微搭低代码 WeDa https:// ...
拖拽式Vue组件代码生成平台(LCG)新版详细介绍
拖拽式Vue组件代码生成平台是一款小猴自研的Vue代码生成工具,英文全称:Low Code Generator,简称LCG.它也是一种LowCode解决方案.通过它可以快速完成Vue组件的代码骨架搭建 ...
机器学习初体验（傻瓜拖拽式）
一.目的通过美国人口普查数据预测收入二.平台介绍 Azure平台:微软推出的一款基于web的机器学习服务,使用拖拽式,便于应用.这个应用为收费服务,但可申请免费试用. 网址:http://stud ...
拖拽式可视化设计，打造高效流程管理体系
编者按:企业管理离不开流程管理,怎样的流程管理系统才是我们需要的?本文针对企业流程管理中的常见问题,介绍了有助于企业高效管理的流程管理系统--天翎BPM. 概要: (1)流程管理常见问题 (2)我们需 ...
Jupyter Notebook 交互式编程低代码拖拽式编程 | 数据科学生态下的理想平台
近几年,Jupyter Notebook 为数据科学家们提供了与数据有效交互的工具.用户可以运行代码.查看结果,然后重复数据之间的循环和迭代.使用 Jupyter Notebook 进行研究成为了数据 ...
WIX:html5拖拽式建站，个人建站首选，操作方便快捷
自己做了一个网站,只有几个静态页面,不会前端所以界面很简陋拿不出手,准备完善页面之后找个前端外包美化一下.这一等就是好几天. 在看youtube视频的时候无意中看到一个广告,介绍了一个网站:www.w ...

SuperMap WebGL拖拽式画圆和画矩形

SuperMap WebGL拖拽式画圆和画矩形相关推荐

最新文章

热门文章