cesium借助折线的两个端点绘制一个矩形--vue2.0版本 --按照经纬线横纵排列

1. 使用流程演示

2.vue页面源码

// 绘制矩形   对角线方式  drawRectangle11() {this.$message({type: "success",message: "鼠标左键单击开始绘制，右键结束",});// 绘制的时候清除上一个矩形数据this.cleanRectangle();//绘制点let that = this;let viewer = window.map.map3D;let tempEntities = [];let position = [];let tempPoints = [];// 开启深度检测viewer.scene.globe.depthTestAgainstTerrain = true;let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);//鼠标移动事件handler.setInputAction(function (movement) {},Cesium.ScreenSpaceEventType.MOUSE_MOVE);//左键点击操作handler.setInputAction(function (click) {//调用获取位置信息的接口let ray = viewer.camera.getPickRay(click.position);position = viewer.scene.globe.pick(ray, viewer.scene);tempPoints.push(position);let tempLength = tempPoints.length;//调用绘制点的接口let point = that.drawPoint(tempPoints[tempPoints.length - 1]);tempEntities.push(point);if (tempLength > 1) {let pointline = that.drawPolyline([tempPoints[tempPoints.length - 2],tempPoints[tempPoints.length - 1],]);tempEntities.push(pointline);} else {// tooltip.innerHTML = "请绘制下一个点，右键结束";}}, Cesium.ScreenSpaceEventType.LEFT_CLICK);//右键点击操作handler.setInputAction(function (click) {that.rectanglePoint = [];let point1 = that.cartesianTolngLatAlt(tempPoints[0]);let point2 = that.cartesianTolngLatAlt(tempPoints[1]);let x1 = null;let x2 = null;let y1 = null;let y2 = null;//处理得到的两个点，让不管是从哪个方向绘制都最终得到的是左上（x1,y2） 右下（x2,y1）两个坐标  *****if (point1.lat * 1 < point2.lat * 1) {y1 = point1.lat;y2 = point2.lat;} else {y1 = point2.lat;y2 = point1.lat;}if (point1.lng * 1 > point2.lng * 1) {x1 = point1.lng;x2 = point2.lng;} else {x1 = point2.lng;x2 = point1.lng;}tempPoints = [];handler.destroy(); //关闭事件句柄handler = null;viewer.entities.removeAll();// 绘制矩形let graphical = viewer.entities.add({id: "Rectangle",rectangle: {coordinates: Cesium.Rectangle.fromDegrees(x2, y1, x1, y2), // 最西、最南、最东、最北outline: true,outlineColor: Cesium.Color.WHITE,material: Cesium.Color.BLUE.withAlpha(0.3),outlineWidth: 4,stRotation: Cesium.Math.toRadians(45),// material: stripeMaterial,},});// 更新输入框的内容that.rectanglePoint = [x2, y1, x1, y2];that.rectanglePointShow = `[${x2.toFixed(0)},${y1.toFixed(0)}] - [${x1.toFixed(0)},${y2.toFixed(0)}]`;that.params[2].range[0] = that.rectanglePointShow;that.$message({type: "success",message: `绘图坐标：${that.rectanglePoint}`,});that.getList();}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);},// 清除绘制的矩形cleanRectangle() {var viewer = window.map.map3D;// 删除全部viewer.entities.removeAll();},drawPolyline(positions, config_) {let viewer = window.map.map3D;if (positions.length < 1) return;let config = config_ ? config_ : {};return viewer.entities.add({name: "线几何对象",polyline: {positions: positions,width: config.width ? config.width : 5.0,material: new Cesium.PolylineGlowMaterialProperty({color: config.color? new Cesium.Color.fromCssColorString(config.color): Cesium.Color.GOLD,}),depthFailMaterial: new Cesium.PolylineGlowMaterialProperty({color: config.color? new Cesium.Color.fromCssColorString(config.color): Cesium.Color.GOLD,}),clampToGround: true,},});},drawPoint(position, config) {let viewer = window.map.map3D;let config_ = config ? config : {};return viewer.entities.add({name: "点几何对象",position: position,point: {color: Cesium.Color.SKYBLUE,pixelSize: 10,outlineColor: Cesium.Color.YELLOW,outlineWidth: 3,disableDepthTestDistance: Number.POSITIVE_INFINITY,heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,},});},cartesianTolngLatAlt(cartesianObj) {let viewer = window.map.map3D;const cartesian3 = new Cesium.Cartesian3(cartesianObj.x,cartesianObj.y,cartesianObj.z);const cartographic =viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian3);const lat = Cesium.Math.toDegrees(cartographic.latitude);const lng = Cesium.Math.toDegrees(cartographic.longitude);const alt = cartographic.height;return { lat, lng, alt };},

cesium借助折线的两个端点绘制一个矩形--vue2.0版本 --按照经纬线横纵排列相关推荐

php 画矩形然后合并,php绘制一个矩形的方法
php绘制一个矩形的方法本文实例讲述了php绘制一个矩形的方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: //1.创建画布 $im = imagecreatetruecolor ...
webgl之绘制一个矩形
功能:使用webgl绘制一个矩形,这里通过绘制两个三角形来实现一个矩形的绘制步骤: 1 获取webgl上下文 2 获取着色器字符串 3 创建,加载,编译着色器 4 给着色器的变量赋值 5 绘制图形 ...
绘制矩形php,PHP_php绘制一个矩形的方法，本文实例讲述了php绘制一个矩 - phpStudy...
php绘制一个矩形的方法本文实例讲述了php绘制一个矩形的方法.分享给大家供大家参考.具体实现方法如下: //1.创建画布 $im = imagecreatetruecolor(300,200);/ ...
绘制矩形php,php绘制一个矩形的方法
本文实例讲述了php绘制一个矩形的方法.分享给大家供大家参考.具体实现方法如下: //1.创建画布 $im = imagecreatetruecolor(300,200);//新建一个真彩色图像,默认 ...
html页面画一个矩形,使用HTML5 canvas绘制一个矩形的方法
使用HTML5 canvas绘制一个矩形的方法发布时间:2020-08-29 11:23:12 来源:亿速云阅读:102 作者:小新这篇文章将为大家详细讲解有关使用HTML5 canvas绘制一 ...
在canvas(画布）上绘制一个矩形盒子并使用按键移动这个盒子
思路 1.在画布上创建一个2d画笔,并用这个画笔在画布上绘制一个矩形. 2.设置一个边界判断使这个盒子不能移出画布之外,只能在画布中移动. 注意: 不能直接在style中设置canvas的大小直接设 ...
android canvas drawrect画图,为什么在android中调用canvas.drawRect时只绘制一个矩形？
我正在尝试使用foreach循环为ArrayList中的每个字符串绘制一个矩形,但它似乎只绘制了最后一个矩形. 我看过类似的问题,但他们遇到的问题包括矩形底部高于顶部并调用drawPaint - 但我 ...
Android中使用画笔和画布绘制一个矩形
场景在Android中画笔使用Paint类,画布使用Canvas类来表示. 绘图的基本步骤首先编写一个继承自View的自定义View类,然后重写其onDraw方法,最后把自定义的view添加到ac ...
如何使用Inkscape软件绘制一个LOGO
使用Inkscape软件绘制Logo Logo参考操作界面修改操作流程详细制作流程方法一:创建矩形或正方形进行绘制方法二:使用钢笔工具进行绘制制作心得 Logo参考效果图: 操作界面修改操 ...

cesium借助折线的两个端点绘制一个矩形--vue2.0版本 --按照经纬线横纵排列

1. 使用流程演示

2.vue页面源码

cesium借助折线的两个端点绘制一个矩形--vue2.0版本 --按照经纬线横纵排列相关推荐

最新文章

热门文章