//二、折线 // DrawPolyline /* 绘制线 */ class DrawPolyline { constructor(arg) { this.viewer = arg.viewer; this.Cesium = arg.Cesium; // this.callback=arg.callback; this._polyline = null; //活动线 this._polylineLast = null; //最后一条线 this._positions = []; //活动点 this._entities_point = []; //脏数据 this._entities_line = []; //脏数据 this._polylineData = null; //用于构造线数据 this.DrawStartEvent = new Cesium.Event(); //开始绘制事件 this.DrawEndEvent = new Cesium.Event(); //结束绘制事件 /* 通用参数集合 */ this._param = { id: "DrawStraightArrow", polygonColor: 'rgba(0,255,0,0.5)', //面填充颜色 outlineColor: 'rgba(255, 255, 255, 1)', //边框颜色 outlineWidth: 1, //边框宽度 } /* 创建面材质 */ this.polygonMaterial = Cesium.Color.fromCssColorString(this._param.polygonColor); /* 创建线材质 */ // this.outlineMaterial = new Cesium.PolylineDashMaterialProperty({//曲线 // dashLength: 16, // color: Cesium.Color.fromCssColorString(this._param.outlineColor) // }); this.outlineMaterial = Cesium.Color.fromCssColorString(this._param.outlineColor); } //返回最后活动线 get line() { return this._polylineLast; } //返回线数据用于加载线 getData() { return this._polylineData; } // 修改编辑调用计算 computePosition(data){ //计算面 let $this = this var lnglatArr = []; for (var i = 0; i < data.length; i++) { var lnglat = $this.cartesianToLatlng(data[i]); lnglatArr.push(lnglat) } $this._polylineData = lnglatArr; return data; } //加载线 addload(data) { var $this = this; var lnglatArr = []; for (var i = 0; i < data.length; i++) { var lnglat = $this.LatlngTocartesian(data[i]); lnglatArr.push(lnglat) } var polyline = this.viewer.entities.add({ Type:'DrawPolyline', Position:data, id:data.id || $this.objId, polyline: { positions: lnglatArr, show: true, material: $this.Cesium.Color.RED, width: 3, clampToGround: true } }); return polyline; } //开始创建 startCreate(drawType) { this.drawType = drawType; var $this = this; this.handler = new this.Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas); this.handler.setInputAction(function (evt) { //单机开始绘制 //屏幕坐标转地形上坐标 var cartesian = $this.getCatesian3FromPX(evt.position); if ($this._positions.length == 0) { $this._positions.push(cartesian.clone()); } $this._positions.push(cartesian); $this.createPoint(cartesian);// 绘制点 }, $this.Cesium.ScreenSpaceEventType.LEFT_CLICK); this.handler.setInputAction(function (evt) { //移动时绘制线 if ($this._positions.length < 1) return; var cartesian = $this.getCatesian3FromPX(evt.endPosition); if (!$this.Cesium.defined($this._polyline)) { $this._polyline = $this.createPolyline(); } if ($this._polyline) { $this._positions.pop(); $this._positions.push(cartesian); } }, $this.Cesium.ScreenSpaceEventType.MOUSE_MOVE); this.handler.setInputAction(function (evt) { if (!$this._polyline) return; var cartesian = $this.getCatesian3FromPX(evt.position); $this._positions.pop(); // $this._positions.push(cartesian); $this.createPoint(cartesian);// 绘制点 $this._polylineData = $this._positions.concat(); $this.viewer.entities.remove($this._polyline); //移除 $this._polyline = null; $this._positions = []; var lnglatArr = []; for (var i = 0; i < $this._polylineData.length; i++) { var lnglat = $this.cartesianToLatlng($this._polylineData[i]); lnglatArr.push(lnglat) } $this._polylineData = lnglatArr; var line = $this.addload($this._polylineData); //加载线 $this._entities_line.push(line); $this._polylineLast=line; // if(typeof $this.callback=="function"){ // $this.callback(line); // } $this.clearPoint(); $this.destroy() }, $this.Cesium.ScreenSpaceEventType.RIGHT_CLICK); } //创建点 createPoint(cartesian) { var $this = this; var point = this.viewer.entities.add({ position: cartesian, point: { pixelSize: 10, color: $this.Cesium.Color.RED, heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, } }); $this._entities_point.push(point); return point; } //创建线 createPolyline() { var $this = this; var polyline = this.viewer.entities.add({ polyline: { //使用cesium的peoperty positions: new $this.Cesium.CallbackProperty(function () { return $this._positions }, false), show: true, material: $this.Cesium.Color.RED, width: 3, clampToGround: true } }); $this._entities_line.push(polyline); return polyline; } cartesianToLatlng(cartesian) { var latlng = this.viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian); var lat = this.Cesium.Math.toDegrees(latlng.latitude); var lng = this.Cesium.Math.toDegrees(latlng.longitude); return [lng, lat]; } LatlngTocartesian(latlng) { let cartesian3 = this.Cesium.Cartesian3.fromDegrees(latlng[0], latlng[1]); return cartesian3 } clearPoint() { this.DrawEndEvent.raiseEvent(this._polylineLast , this._polylineData, this.drawType); for (var i = 0; i < this._entities_point.length; i++) { this.viewer.entities.remove(this._entities_point[i]); } this._entities_point = []; //脏数据 } //销毁 destroy() { if (this.handler) { this.handler.destroy(); this.handler = null; } } //清空实体对象 clear() { for (var i = 0; i < this._entities_point.length; i++) { this.viewer.entities.remove(this._entities_point[i]); } for (var i = 0; i < this._entities_line.length; i++) { this.viewer.entities.remove(this._entities_line[i]); } this._polyline = null; this._positions = []; this._entities_point = []; //脏数据 this._entities_line = []; //脏数据 this._polylineData = null; //用于构造线数据 this._polylineLast=null; } getCatesian3FromPX(px) { var cartesian; var ray = this.viewer.camera.getPickRay(px); if (!ray) return null; cartesian = this.viewer.scene.globe.pick(ray, this.viewer.scene); return cartesian; } } export default DrawPolyline