Compare commits
	
		
			90 Commits
		
	
	
		
			9f35d752c2
			...
			project
		
	
	| Author | SHA1 | Date | |
|---|---|---|---|
| be1614b50b | |||
| 8287a00832 | |||
| 5dd7303a6a | |||
| 56910ff8ab | |||
| 229fd9037f | |||
| 24a0078eea | |||
| 6c84baa3c2 | |||
| 22e4652528 | |||
| c6f3138e25 | |||
| 819166bae0 | |||
| 159ade36f0 | |||
| f8443b7f62 | |||
| 7feab0786a | |||
| 5ceaa3b649 | |||
| 9f216b7257 | |||
| 4247327bfa | |||
| 1a394336ff | |||
| 1856bc85e3 | |||
| dff3739a0f | |||
| 53d2f06918 | |||
| cb2741862a | |||
| ce065fb845 | |||
| f37f95d646 | |||
| 6117e74a44 | |||
| ec41c867d4 | |||
| a7a743a394 | |||
| fb2681fdbe | |||
| 427b38a6c3 | |||
| 1d6b635f7a | |||
| 5b788a74d4 | |||
| b5e21fec3c | |||
| 1a1aa9f6a5 | |||
| 1229226e8f | |||
| 979a285295 | |||
| 18cec0d742 | |||
| 1ea59d0f8a | |||
| 2d1bc61cca | |||
| 5f6211a01d | |||
| 97c0d13a88 | |||
| 8618508d3f | |||
| dd213e8337 | |||
| a293246c07 | |||
| 9d1c25e8ef | |||
| c08dfb0f85 | |||
| 15460702f9 | |||
| 2c27391058 | |||
| 80869050e1 | |||
| 8025a298a2 | |||
| 0f518ef6cb | |||
| 1af43bb6a9 | |||
| ea80fe325c | |||
| e8e1e320b3 | |||
| 4f0c0ca76d | |||
| 2aade7eef9 | |||
| 71988d8833 | |||
| dd1c7acde1 | |||
| b2d307b308 | |||
| 4f57ac3d9e | |||
| 3d0493e0dd | |||
| 65ee6b70ba | |||
| ed18fd776b | |||
| dd7af5aa4d | |||
| 4d35b29526 | |||
| 56ad8ae7a0 | |||
| e342fa1d80 | |||
| 8eb1bd98cc | |||
| 644c0d2e28 | |||
| e51357efa7 | |||
| 379a560fbc | |||
| a4cd365c83 | |||
| 3358221da9 | |||
| f1e0ac166e | |||
| 3fab8ea031 | |||
| de4aead219 | |||
| ef2c158727 | |||
| 9ecb3c7269 | |||
| 1936a142b1 | |||
| a9594ccec2 | |||
| 23420762ca | |||
| 04ccdc73ca | |||
| 2e301cd0fc | |||
| d1bcba6a13 | |||
| 6729b60806 | |||
| 7be9a6a41d | |||
| 25a7c967bb | |||
| 713f03284b | |||
| 08bdd515a9 | |||
| eec0ca44c0 | |||
| 4411c9d17d | |||
| b4f7e7ad8f | 
| @ -59,12 +59,17 @@ export default class DrawAttackArrow extends Draw { | ||||
|           return | ||||
|         } | ||||
|         into = '3D' | ||||
|         let pos84 = this.cartesian3Towgs84(cartesian, this.viewer) | ||||
|         let lastPos84 = cache_positions[cache_positions.length - 1] | ||||
|         if(lastPos84 && (lastPos84.lng === pos84.lng && lastPos84.lat === pos84.lat)) { | ||||
|           return | ||||
|         } | ||||
|         if (!this.entityHasCreated) { | ||||
|           let polyline_id = DrawAttackArrow.create_arrow_polygon(this) | ||||
|           this.points_ids.push(polyline_id) | ||||
|         } | ||||
|         this.points_ids.push(this.create_point(cartesian)) | ||||
|         cache_positions.push(this.cartesian3Towgs84(cartesian, this.viewer)) | ||||
|         cache_positions.push(pos84) | ||||
|         isMove = false | ||||
|       }) | ||||
|       this.event.mouse_right((movement, cartesian) => { | ||||
|  | ||||
							
								
								
									
										317
									
								
								src/Draw/drawThreeRect.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										317
									
								
								src/Draw/drawThreeRect.js
									
									
									
									
									
										Normal file
									
								
							| @ -0,0 +1,317 @@ | ||||
| import MouseTip from '../MouseTip' | ||||
| import MouseEvent from '../Event' | ||||
| import Draw from './draw' | ||||
|  | ||||
| /** | ||||
|  * @extends Draw*/ | ||||
| class DrawThreeRect extends Draw { | ||||
|   /** | ||||
|    * @constructor | ||||
|    * @param [options] {object} 三点矩形属性 | ||||
|    * @param [options.color=rgba(185,14,14,0.58)] {object} 线属性 | ||||
|  | ||||
|    * */ | ||||
|   constructor(sdk, options = {}) { | ||||
|     super(sdk, options) | ||||
|     this.polygonHasCreated = false | ||||
|     this.rectObject = [] | ||||
|   } | ||||
|  | ||||
|   static create_polygon(that, viewer = that.viewer) { | ||||
|     that.polygonHasCreated = true | ||||
|     let id = that.randomString() | ||||
|     viewer.entities.add( | ||||
|       new Cesium.Entity({ | ||||
|         id: id, | ||||
|         polygon: { | ||||
|           classificationType: Cesium.ClassificationType.BOTH, | ||||
|           hierarchy: new Cesium.CallbackProperty((e) => { | ||||
|             return new Cesium.PolygonHierarchy(that.positions) | ||||
|           }), | ||||
|           material: Cesium.Color.fromCssColorString(that.color), | ||||
|           zIndex: 99999999 | ||||
|         }, | ||||
|         polyline: { | ||||
|           positions: new Cesium.CallbackProperty((e) => { | ||||
|             return that.positions.concat(that.positions[0]) | ||||
|           }), | ||||
|           width: 2, | ||||
|           material: Cesium.Color.fromCssColorString('#c1c505').withAlpha(0.5), | ||||
|           clampToGround: true, | ||||
|           zIndex: 99999999 | ||||
|         }, | ||||
|       }) | ||||
|     ) | ||||
|     return id | ||||
|   } | ||||
|   computedLastPoint(arr) { | ||||
|     const start = arr[0]; | ||||
|     const end = arr[1]; | ||||
|     // 计算点到线的距离 | ||||
|     const directionVector = Cesium.Cartesian3.subtract(end, start, new Cesium.Cartesian3()); | ||||
|     const pointToStart = Cesium.Cartesian3.subtract(arr[2], start, new Cesium.Cartesian3()); | ||||
|     const projectionLength = Cesium.Cartesian3.dot(pointToStart, directionVector) / Cesium.Cartesian3.magnitudeSquared(directionVector); | ||||
|     const projectionVector = Cesium.Cartesian3.multiplyByScalar(directionVector, projectionLength, new Cesium.Cartesian3()); | ||||
|     const projectionPoint = Cesium.Cartesian3.add(start, projectionVector, new Cesium.Cartesian3()); | ||||
|     const distance = Cesium.Cartesian3.distance(arr[2], projectionPoint) | ||||
|  | ||||
|     const perp = Cesium.Cartesian3.subtract(arr[2], projectionPoint, new Cesium.Cartesian3()); | ||||
|     Cesium.Cartesian3.normalize(perp, perp); | ||||
|     // 生成偏移向量 | ||||
|     const offset = Cesium.Cartesian3.multiplyByScalar(perp, distance, new Cesium.Cartesian3()); | ||||
|     let threePoint = Cesium.Cartesian3.add(end, offset, new Cesium.Cartesian3()) | ||||
|     let lastPoint = Cesium.Cartesian3.add(start, offset, new Cesium.Cartesian3()) | ||||
|     return [{ ...threePoint }, { ...lastPoint }] | ||||
|   } | ||||
|   /** | ||||
|    * @desc 开始动态绘制面 | ||||
|    * @method start | ||||
|    * @param cb {function} 回调函数 | ||||
|    * @memberOf DrawPolygon | ||||
|    * @example draw.start((err,positions)=>{ | ||||
|    * | ||||
|    * }) | ||||
|    * */ | ||||
|   start(cb) { | ||||
|     if (YJ.Measure.GetMeasureStatus()) { | ||||
|       cb('上一次测量未结束') | ||||
|     } else { | ||||
|       this.polygonHasCreated = false | ||||
|       super.start() | ||||
|       YJ.Measure.SetMeasureStatus(true) | ||||
|       let into | ||||
|       this.tip = new MouseTip('左键确定,右键结束;CTRL+右键撤销', this.sdk) | ||||
|       this.event = new MouseEvent(this.sdk) | ||||
|       let cnt = 0 | ||||
|       this.positions = [] | ||||
|       this.positionsLine = [] | ||||
|       this.points_ids = [] //存放左键点击时临时添加的point的id | ||||
|       let cache_positions = [] | ||||
|       let cache_84_position = [] | ||||
|       this.event.mouse_left((movement, cartesian) => { | ||||
|         if (into === '2D') { | ||||
|           return | ||||
|         } | ||||
|         into = '3D' | ||||
|         cnt++ | ||||
|         this.positions = cache_positions.concat({ ...cartesian }) | ||||
|         this.tip.setPosition( | ||||
|           cartesian, | ||||
|           movement.position.x, | ||||
|           movement.position.y | ||||
|         ) | ||||
|         if (!this.polygonHasCreated) { | ||||
|           let polyline_id = DrawThreeRect.create_polygon(this) | ||||
|           this.points_ids.push(polyline_id) | ||||
|         } | ||||
|         cache_positions.push(cartesian) | ||||
|         cache_84_position.push(this.cartesian3Towgs84(cartesian, this.viewer)) | ||||
|         this.points_ids.push(this.create_point(cartesian)) | ||||
|         if (cnt == 3) { | ||||
|           this.end() | ||||
|           cb(null, this.rectObject) | ||||
|         } | ||||
|       }) | ||||
|       this.event.mouse_right((movement, cartesian) => { | ||||
|         if (into === '2D') { | ||||
|           return | ||||
|         } | ||||
|         // let positions = [] | ||||
|         // console.log(cache_positions) | ||||
|         // cache_positions.forEach((item) => { | ||||
|         //   let p = this.cartesian3Towgs84(item) | ||||
|         //   console.log(item) | ||||
|         //   positions.push(p) | ||||
|         // }) | ||||
|         this.end() | ||||
|         cb('取消', '') | ||||
|       }) | ||||
|       this.event.mouse_move((movement, cartesian) => { | ||||
|         if (into === '2D') { | ||||
|           return | ||||
|         } | ||||
|  | ||||
|         // this.positions = cache_positions.concat({ ...cartesian }) | ||||
|         this.tip.setPosition( | ||||
|           cartesian, | ||||
|           movement.endPosition.x, | ||||
|           movement.endPosition.y | ||||
|         ) | ||||
|  | ||||
|         if (cnt == 2) { | ||||
|           let arr = JSON.parse(JSON.stringify(cache_positions)) | ||||
|           let arr1 = arr.concat({ ...cartesian }) | ||||
|           let pointArr = this.computedLastPoint(arr1) | ||||
|           arr = arr.concat(pointArr) | ||||
|           this.positions = arr | ||||
|           let arr_84 = arr.map(item => { | ||||
|             return this.cartesian3Towgs84(item, this.viewer) | ||||
|           }) | ||||
|           this.rectObject = arr_84 | ||||
|         } | ||||
|       }) | ||||
|       this.event.mouse_right_keyboard_ctrl((movement, cartesian) => { | ||||
|         if (into === '2D') { | ||||
|           return | ||||
|         } | ||||
|         if (this.points_ids.length > 1) { | ||||
|           this.remove_entity(this.points_ids.pop()) //移除point | ||||
|           cache_positions.pop() | ||||
|           cache_84_position.pop() | ||||
|         } | ||||
|       }) | ||||
|  | ||||
|       this.event.gesture_pinck_start_keyboard_ctrl(() => { | ||||
|         if (into === '2D') { | ||||
|           return | ||||
|         } | ||||
|         if (this.points_ids.length > 1) { | ||||
|           this.remove_entity(this.points_ids.pop()) //移除point | ||||
|           cache_positions.pop() | ||||
|           cache_84_position.pop() | ||||
|           this.positions = cache_positions.concat(cartesian) | ||||
|         } | ||||
|       }) | ||||
|  | ||||
|       this.event.gesture_pinck_start((movement, cartesian) => { | ||||
|         if (into === '2D') { | ||||
|           return | ||||
|         } | ||||
|         let startTime = new Date() | ||||
|         this.event.gesture_pinck_end(() => { | ||||
|           let endTime = new Date() | ||||
|           if (endTime - startTime >= 500) { | ||||
|             cb(null, cache_84_position) | ||||
|             this.end() | ||||
|           } | ||||
|           else { | ||||
|             this.tip.setPosition( | ||||
|               cartesian, | ||||
|               (movement.position1.x + movement.position2.x) / 2, | ||||
|               (movement.position1.y + movement.position2.y) / 2 | ||||
|             ) | ||||
|             if (!this.polygonHasCreated) { | ||||
|               let polyline_id = DrawThreeRect.create_polygon(this) | ||||
|               this.points_ids.push(polyline_id) | ||||
|             } | ||||
|             cache_positions.push(cartesian) | ||||
|             cache_84_position.push(this.cartesian3Towgs84(cartesian, this.viewer)) | ||||
|             this.points_ids.push(this.create_point(cartesian)) | ||||
|             this.positions = cache_positions.concat(cartesian) | ||||
|           } | ||||
|         }) | ||||
|       }) | ||||
|  | ||||
|       if (!this._is2D && this._sdk2D) { | ||||
|         this.event2D = new MouseEvent(this._sdk2D) | ||||
|         this.event2D.mouse_left((movement, cartesian) => { | ||||
|           if (into === '3D') { | ||||
|             return | ||||
|           } | ||||
|           into = '2D' | ||||
|           cnt++ | ||||
|           this.positions = cache_positions.concat({ ...cartesian }) | ||||
|           this.tip.setPosition( | ||||
|             cartesian, | ||||
|             movement.position.x + this.viewer.canvas.width, | ||||
|             movement.position.y | ||||
|           ) | ||||
|           if (!this.polygonHasCreated) { | ||||
|             let polyline_id = DrawThreeRect.create_polygon(this, this._sdk2D.viewer) | ||||
|             this.points_ids.push(polyline_id) | ||||
|           } | ||||
|           cache_positions.push(cartesian) | ||||
|           cache_84_position.push(this.cartesian3Towgs84(cartesian, this.viewer)) | ||||
|           this.points_ids.push(this.create_point(cartesian, this._sdk2D.viewer)) | ||||
|           if (cnt == 3) { | ||||
|             this.end() | ||||
|             cb(null, this.rectObject) | ||||
|           } | ||||
|         }) | ||||
|         this.event2D.mouse_right((movement, cartesian) => { | ||||
|           if (into === '3D') { | ||||
|             return | ||||
|           } | ||||
|           this.end() | ||||
|           cb('取消', '') | ||||
|         }) | ||||
|         this.event2D.mouse_move((movement, cartesian) => { | ||||
|           if (into === '3D') { | ||||
|             return | ||||
|           } | ||||
|           // this.positions = cache_positions.concat({ ...cartesian }) | ||||
|           this.tip.setPosition( | ||||
|             cartesian, | ||||
|             movement.endPosition.x + this.viewer.canvas.width, | ||||
|             movement.endPosition.y | ||||
|           ) | ||||
|  | ||||
|           if (cnt == 2) { | ||||
|             let arr = JSON.parse(JSON.stringify(cache_positions)) | ||||
|             let arr1 = arr.concat({ ...cartesian }) | ||||
|             let pointArr = this.computedLastPoint(arr1) | ||||
|             arr = arr.concat(pointArr) | ||||
|             this.positions = arr | ||||
|             let arr_84 = arr.map(item => { | ||||
|               return this.cartesian3Towgs84(item, this.viewer) | ||||
|             }) | ||||
|             this.rectObject = arr_84 | ||||
|           } | ||||
|         }) | ||||
|         this.event2D.mouse_right_keyboard_ctrl((movement, cartesian) => { | ||||
|           if (into === '3D') { | ||||
|             return | ||||
|           } | ||||
|           if (this.points_ids.length > 1) { | ||||
|             this.remove_entity(this.points_ids.pop()) //移除point | ||||
|             cache_positions.pop() | ||||
|             cache_84_position.pop() | ||||
|           } | ||||
|         }) | ||||
|  | ||||
|         this.event2D.gesture_pinck_start_keyboard_ctrl(() => { | ||||
|           if (into === '3D') { | ||||
|             return | ||||
|           } | ||||
|           if (this.points_ids.length > 1) { | ||||
|             this.remove_entity(this.points_ids.pop()) //移除point | ||||
|             cache_positions.pop() | ||||
|             cache_84_position.pop() | ||||
|             this.positions = cache_positions.concat(cartesian) | ||||
|           } | ||||
|         }) | ||||
|  | ||||
|         this.event2D.gesture_pinck_start((movement, cartesian) => { | ||||
|           if (into === '3D') { | ||||
|             return | ||||
|           } | ||||
|           let startTime = new Date() | ||||
|           this.event2D.gesture_pinck_end(() => { | ||||
|             let endTime = new Date() | ||||
|             if (endTime - startTime >= 500) { | ||||
|               cb(null, cache_84_position) | ||||
|               this.end() | ||||
|             } | ||||
|             else { | ||||
|               this.tip.setPosition( | ||||
|                 cartesian, | ||||
|                 ((movement.position1.x + movement.position2.x) / 2) + this.viewer.canvas.width, | ||||
|                 (movement.position1.y + movement.position2.y) / 2 | ||||
|               ) | ||||
|               if (!this.polygonHasCreated) { | ||||
|                 let polyline_id = DrawThreeRect.create_polygon(this, this._sdk2D.viewer) | ||||
|                 this.points_ids.push(polyline_id) | ||||
|               } | ||||
|               cache_positions.push(cartesian) | ||||
|               cache_84_position.push(this.cartesian3Towgs84(cartesian, this.viewer)) | ||||
|               this.points_ids.push(this.create_point(cartesian, this._sdk2D.viewer)) | ||||
|               this.positions = cache_positions.concat(cartesian) | ||||
|             } | ||||
|           }) | ||||
|         }) | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| } | ||||
|  | ||||
| export default DrawThreeRect | ||||
| @ -135,6 +135,7 @@ const open = async (sdk, options = {}, _Dialog = {}) => { | ||||
|       pitch: viewer.camera.pitch, | ||||
|       roll: viewer.camera.roll | ||||
|     } | ||||
|     tools.message({text: '操作成功'}) | ||||
|   }) | ||||
|  | ||||
|   let totalTimeElm = contentElm.querySelector("input[name='totalTime']") | ||||
|  | ||||
| @ -124,7 +124,7 @@ function syncViewer() { | ||||
|   if (height > 9000000) { | ||||
|     height = 9000000 | ||||
|   } | ||||
|   if (height < 100000) { | ||||
|   if (height < 400000) { | ||||
|     this.entity.billboard.show = true | ||||
|     this.entity.rectangle.show = false | ||||
|   } | ||||
|  | ||||
| @ -4,18 +4,38 @@ | ||||
| import Tools from "../../Tools"; | ||||
| import { getCoordinateSystem } from "../../Global/global"; | ||||
| import MouseEvent from '../../Event/index' | ||||
| import { getSdk as get2DSdk } from '../../Global/MultiViewportMode' | ||||
| import { getSdk as getSplitScreenSdk } from "../../Global/SplitScreen"; | ||||
|  | ||||
| let event | ||||
| let event2 | ||||
| let MouseCoordinateElm | ||||
| let requestAnimationFrameEventId | ||||
| let tmovement | ||||
| let targetSdk | ||||
| let sdkD | ||||
|  | ||||
| const MouseCoordinate = (sdk, status) => { | ||||
|   if (!sdk || !sdk.viewer) { | ||||
|     return | ||||
|   } | ||||
|   targetSdk = sdk | ||||
|   sdkD = get2DSdk().sdkD | ||||
|   if(!sdkD) { | ||||
|     sdkD = getSplitScreenSdk().sdkD | ||||
|   } | ||||
|  | ||||
|   let tools = new Tools(sdk) | ||||
|   if (status) { | ||||
|     if (event) { | ||||
|       event.destroy() | ||||
|     } | ||||
|     if (event2) { | ||||
|       event2.destroy() | ||||
|       event2 = undefined | ||||
|     } | ||||
|     event = new MouseEvent(sdk) | ||||
|     tmovement = null | ||||
|     let position = { | ||||
|       x: '', | ||||
|       y: '', | ||||
| @ -40,22 +60,60 @@ const MouseCoordinate = (sdk, status) => { | ||||
|       contentElm.style['background-size'] = `200% 200%`; | ||||
|       MouseCoordinateElm = contentElm | ||||
|     } | ||||
|     sdk.viewer._element.appendChild(contentElm) | ||||
|     let tmovement | ||||
|     sdk.viewer.container.appendChild(contentElm) | ||||
|  | ||||
|     event.mouse_move((movement, cartesian) => { | ||||
|       tmovement = { ...movement } | ||||
|       targetSdk = sdk | ||||
|       tmovement = { ...movement.endPosition } | ||||
|     }) | ||||
|  | ||||
|     const getPosition = () => { | ||||
|       if(!tmovement) { | ||||
|       if (!targetSdk) { | ||||
|         return | ||||
|       } | ||||
|       let canvas = sdk.viewer._element.getElementsByTagName('canvas')[0] | ||||
|       let left = tmovement.endPosition.x; | ||||
|       let top = tmovement.endPosition.y; | ||||
|       let cartesian = event.getcartesian(tmovement) | ||||
|       contentElm.style['background-position-x'] = `${-canvas.width + left + 4}px`; | ||||
|       contentElm.style['background-position-y'] = `${-canvas.height + top - 2}px`; | ||||
|       sdkD = get2DSdk().sdkD | ||||
|       if(!sdkD) { | ||||
|         sdkD = getSplitScreenSdk().sdkD | ||||
|       } | ||||
|       if (!event2 && sdkD) { | ||||
|         event2 = new MouseEvent(sdkD) | ||||
|         event2.mouse_move((movement, cartesian) => { | ||||
|           targetSdk = sdkD | ||||
|           tmovement = { x: movement.endPosition.x, y: movement.endPosition.y } | ||||
|         }) | ||||
|       } | ||||
|       if (!tmovement) { | ||||
|         return | ||||
|       } | ||||
|       let left = tmovement.x; | ||||
|       let top = tmovement.y; | ||||
|       let cartesian | ||||
|       if (targetSdk.viewer.scene.mode === 2) { | ||||
|         left = left + canvas.width | ||||
|         cartesian = targetSdk.viewer.camera.pickEllipsoid(tmovement, targetSdk.viewer.scene.globe.ellipsoid) | ||||
|       } | ||||
|       else { | ||||
|         cartesian = targetSdk.viewer.scene.pickPosition(tmovement) | ||||
|         if (!cartesian) { | ||||
|           const ray = targetSdk.viewer.camera.getPickRay(position); //相交的射线 | ||||
|           let pickedObjects = targetSdk.viewer.scene.drillPickFromRay(ray, 10); | ||||
|           let result = {} | ||||
|           for (let i = 0; i < pickedObjects.length; i++) { | ||||
|             if (pickedObjects[i].position) { | ||||
|               result = pickedObjects[i] | ||||
|               break | ||||
|             } | ||||
|           } | ||||
|           cartesian = result.position | ||||
|           if (!cartesian) { | ||||
|             cartesian = targetSdk.viewer.scene.globe.pick(ray, targetSdk.viewer.scene); | ||||
|           } | ||||
|         } | ||||
|       } | ||||
|       contentElm.style['background-position-x'] = `${-sdk.viewer.container.clientWidth + left + 4}px`; | ||||
|  | ||||
|       contentElm.style['background-position-y'] = `${-sdk.viewer.container.clientHeight + top - 2}px`; | ||||
|       // this.entity.position = cartesian | ||||
|       if (cartesian) { | ||||
|         let degrees = tools.cartesian3Towgs84(cartesian, sdk.viewer) | ||||
| @ -97,10 +155,13 @@ const MouseCoordinate = (sdk, status) => { | ||||
|   else { | ||||
|     if (event) { | ||||
|       event.destroy() | ||||
|       event = undefined | ||||
|     } | ||||
|     if (event2) { | ||||
|       event2.destroy() | ||||
|       event2 = undefined | ||||
|     } | ||||
|     if (MouseCoordinateElm) { | ||||
|       sdk.viewer._element.removeChild(MouseCoordinateElm) | ||||
|       sdk.viewer.container.removeChild(MouseCoordinateElm) | ||||
|       MouseCoordinateElm = undefined | ||||
|     } | ||||
|     if (requestAnimationFrameEventId) { | ||||
|  | ||||
							
								
								
									
										578
									
								
								src/Global/MultiViewportMode/ClickCallback/index.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										578
									
								
								src/Global/MultiViewportMode/ClickCallback/index.js
									
									
									
									
									
										Normal file
									
								
							| @ -0,0 +1,578 @@ | ||||
| /** | ||||
|  * @name: click | ||||
|  * @author: Administrator | ||||
|  * @date: 2023-05-28 11:05 | ||||
|  * @description:click | ||||
|  * @update: 2023-05-28 11:05 | ||||
|  */ | ||||
| let leftClickHandler = null | ||||
| let rightClickHandler = null | ||||
| let MoveHandler = null | ||||
| let leftClickCallbackMap = new Map() | ||||
| let rightClickCallbackMap = new Map() | ||||
| let MoveCallbackMap = new Map() | ||||
| let selectedFeature; | ||||
|  | ||||
|  | ||||
| function cartesian3Towgs84(cartesian, viewer) { | ||||
|   var ellipsoid = viewer.scene.globe.ellipsoid | ||||
|   var cartesian3 = new Cesium.Cartesian3( | ||||
|     cartesian.x, | ||||
|     cartesian.y, | ||||
|     cartesian.z | ||||
|   ) | ||||
|   var cartographic = ellipsoid.cartesianToCartographic(cartesian3) | ||||
|   var lat = Cesium.Math.toDegrees(cartographic.latitude) | ||||
|   var lng = Cesium.Math.toDegrees(cartographic.longitude) | ||||
|   var alt = cartographic.height < 0 ? 0 : cartographic.height | ||||
|   return { | ||||
|     lng: lng, | ||||
|     lat: lat, | ||||
|     alt: alt, | ||||
|   } | ||||
| } | ||||
|  | ||||
| function getcartesian(sdk, movement) { | ||||
|   if (movement.endPosition) { | ||||
|     movement.endPosition.y -= 2 | ||||
|   } | ||||
|   let position = movement.position || movement.endPosition | ||||
|   // 获取世界坐标系地表坐标,考虑地形,不包括模型,倾斜摄影模型表面; | ||||
|   let cartesian = sdk.viewer.scene.pickPosition(position) | ||||
|   if (!cartesian) { | ||||
|     const ray = sdk.viewer.camera.getPickRay(position); //相交的射线 | ||||
|     cartesian = sdk.viewer.scene.globe.pick(ray, sdk.viewer.scene); | ||||
|   } | ||||
|   return cartesian | ||||
| } | ||||
|  | ||||
| function openLeftClick(sdk, cb) { | ||||
|   if (!sdk || !sdk.viewer) { | ||||
|     return | ||||
|   } | ||||
|   let click = true | ||||
|   leftClickHandler = new Cesium.ScreenSpaceEventHandler(sdk.viewer.canvas) | ||||
|   leftClickHandler.setInputAction((movement) => { | ||||
|     let cartesian = sdk.viewer.scene.pickPosition(movement.position) | ||||
|     if (!cartesian) { | ||||
|       const ray = sdk.viewer.camera.getPickRay(movement.position); //相交的射线 | ||||
|       cartesian = sdk.viewer.scene.globe.pick(ray, sdk.viewer.scene); | ||||
|     } | ||||
|     if (!cartesian) { | ||||
|       return | ||||
|     } | ||||
|  | ||||
|     let pos84 = cartesian3Towgs84(cartesian, sdk.viewer) | ||||
|  | ||||
|     cb && cb(pos84) | ||||
|  | ||||
|     if (click) { | ||||
|       click = false | ||||
|       setTimeout(() => { | ||||
|         click = true | ||||
|       }, 600); | ||||
|       if (!YJ.Measure.GetMeasureStatus() && cartesian) { | ||||
|         let flag = false | ||||
|         for (let i = leftClickCallbackMap.size - 1; i >= 0; i--) { | ||||
|           let key = Array.from(leftClickCallbackMap.keys())[i] | ||||
|           let obj = leftClickCallbackMap.get(key) | ||||
|           if (obj) { | ||||
|  | ||||
|             if (obj.that) { | ||||
|               // 是否为多边形 | ||||
|               if (obj.that.type === 'PolygonObject') { | ||||
|                 // 是否可点击y | ||||
|                 if (obj.that.picking) { | ||||
|                   if (obj.that.options.positions && obj.that.options.positions.length >= 3) { | ||||
|                     let pt = turf.point([pos84.lng, pos84.lat]); | ||||
|                     let polyPos = [] | ||||
|                     for (let i = 0; i < obj.that.options.positions.length; i++) { | ||||
|                       polyPos.push([ | ||||
|                         obj.that.options.positions[i].lng, | ||||
|                         obj.that.options.positions[i].lat | ||||
|                       ]) | ||||
|                     } | ||||
|                     polyPos.push([ | ||||
|                       obj.that.options.positions[0].lng, | ||||
|                       obj.that.options.positions[0].lat | ||||
|                     ]) | ||||
|                     let poly = turf.polygon([polyPos]); | ||||
|                     let contain = turf.booleanPointInPolygon(pt, poly); | ||||
|                     if (contain) { | ||||
|                       obj.callback( | ||||
|                         movement, | ||||
|                         obj.that.options.id, | ||||
|                         cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that) | ||||
|                       flag = true | ||||
|                       break | ||||
|                     } | ||||
|                   } | ||||
|                 } | ||||
|               } | ||||
|               // 聚集地 | ||||
|               else if (obj.that.type === 'AssembleObject') { | ||||
|                 if (obj.that.picking) { | ||||
|                   if (obj.that.options.positions && obj.that.options.positions.length >= 3) { | ||||
|                     let positions = obj.that.computeAssemble(obj.that.options.positions, true) | ||||
|                     let pt = turf.point([pos84.lng, pos84.lat]); | ||||
|                     let polyPos = [] | ||||
|                     for (let i = 0; i < positions.length; i += 2) { | ||||
|                       polyPos.push([ | ||||
|                         positions[i], | ||||
|                         positions[i + 1] | ||||
|                       ]) | ||||
|                     } | ||||
|                     let poly = turf.polygon([polyPos]); | ||||
|                     let contain = turf.booleanPointInPolygon(pt, poly); | ||||
|                     if (contain) { | ||||
|                       obj.callback( | ||||
|                         movement, | ||||
|                         obj.that.options.id, | ||||
|                         cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that) | ||||
|                       flag = true | ||||
|                       break | ||||
|                     } | ||||
|                   } | ||||
|                 } | ||||
|               } | ||||
|               // 单箭头 | ||||
|               else if (obj.that.type === 'AttackArrowObject') { | ||||
|                 if (obj.that.picking) { | ||||
|                   if (obj.that.options.positions && obj.that.options.positions.length >= 3) { | ||||
|                     let pt = turf.point([pos84.lng, pos84.lat]); | ||||
|                     let positions = obj.that.computeAttackArrow(obj.that.options.positions) | ||||
|                     let polyPos = [] | ||||
|                     for (let m = 0; m < positions.length; m++) { | ||||
|                       let pos84 = cartesian3Towgs84(positions[m], sdk.viewer) | ||||
|                       polyPos.push([pos84.lng, pos84.lat]) | ||||
|                     } | ||||
|                     let poly = turf.polygon([polyPos]); | ||||
|                     let contain = turf.booleanPointInPolygon(pt, poly); | ||||
|                     if (contain) { | ||||
|                       obj.callback( | ||||
|                         movement, | ||||
|                         obj.that.options.id, | ||||
|                         cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that) | ||||
|                       flag = true | ||||
|                       break | ||||
|                     } | ||||
|                   } | ||||
|                 } | ||||
|               } | ||||
|               // 双箭头 | ||||
|               else if (obj.that.type === 'PincerArrowObject') { | ||||
|                 if (obj.that.picking) { | ||||
|                   if (obj.that.options.positions && obj.that.options.positions.length >= 5) { | ||||
|                     let pt = turf.point([pos84.lng, pos84.lat]); | ||||
|                     let positions = obj.that.computePincerArrow(obj.that.options.positions) | ||||
|                     let polyPos = [] | ||||
|                     for (let m = 0; m < positions.length; m++) { | ||||
|                       let pos84 = cartesian3Towgs84(positions[m], sdk.viewer) | ||||
|                       polyPos.push([pos84.lng, pos84.lat]) | ||||
|                     } | ||||
|                     let pos84_0 = cartesian3Towgs84(positions[0], sdk.viewer) | ||||
|                     polyPos.push([pos84_0.lng, pos84_0.lat]) | ||||
|                     let poly = turf.polygon([polyPos]); | ||||
|                     let contain = turf.booleanPointInPolygon(pt, poly); | ||||
|                     if (contain) { | ||||
|                       obj.callback( | ||||
|                         movement, | ||||
|                         obj.that.options.id, | ||||
|                         cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that) | ||||
|                       flag = true | ||||
|                       break | ||||
|                     } | ||||
|                   } | ||||
|                 } | ||||
|               } | ||||
|               // 圆 | ||||
|               else if (obj.that.type === 'CircleObject') { | ||||
|                 if (obj.that.picking) { | ||||
|                   let pt = turf.point([pos84.lng, pos84.lat]); | ||||
|                   if (obj.that.options.center && obj.that.options.radius) { | ||||
|                     let center = [obj.that.options.center.lng, obj.that.options.center.lat]; | ||||
|                     let radius = obj.that.options.radius / 1000; | ||||
|                     let options = { steps: 360, units: 'kilometers' }; | ||||
|                     let circle = turf.circle(center, radius, options); | ||||
|                     let contain = turf.booleanPointInPolygon(pt, circle); | ||||
|                     if (contain) { | ||||
|                       obj.callback( | ||||
|                         movement, | ||||
|                         obj.that.options.id, | ||||
|                         cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that) | ||||
|                       flag = true | ||||
|                       break | ||||
|                     } | ||||
|                   } | ||||
|  | ||||
|                 } | ||||
|               } | ||||
|               // 扇形 | ||||
|               else if (obj.that.type === 'SectorObject') { | ||||
|                 if (obj.that.picking) { | ||||
|                   let pt = turf.point([pos84.lng, pos84.lat]); | ||||
|                   if (obj.that.options.center && obj.that.options.radius && obj.that.options.startAngle && obj.that.options.endAngle) { | ||||
|                     let positions = obj.that.calSector(obj.that.options.center, obj.that.options.radius, obj.that.options.startAngle, obj.that.options.endAngle, undefined, true) | ||||
|                     let polyPos = [] | ||||
|                     for (let m = 0; m < positions.length; m++) { | ||||
|                       polyPos.push([positions[m].lng, positions[m].lat]) | ||||
|                     } | ||||
|                     let poly = turf.polygon([polyPos]); | ||||
|                     let contain = turf.booleanPointInPolygon(pt, poly); | ||||
|                     if (contain) { | ||||
|                       obj.callback( | ||||
|                         movement, | ||||
|                         obj.that.options.id, | ||||
|                         cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that) | ||||
|                       flag = true | ||||
|                       break | ||||
|                     } | ||||
|                   } | ||||
|  | ||||
|                 } | ||||
|               } | ||||
|             } | ||||
|           } | ||||
|         } | ||||
|         if (!flag) { | ||||
|           const pick = sdk.viewer.scene.pick(movement.position) | ||||
|           if (pick) { | ||||
|             if (pick.id) { | ||||
|               let entityId | ||||
|               // 矢量 | ||||
|               if (pick.id.type && pick.id.type === 'vector' && pick.id.parentId) { | ||||
|                 let obj = leftClickCallbackMap.get(pick.id.parentId) | ||||
|                 if (obj.that.picking && obj.that.geojson) { | ||||
|                   for (let i = 0; i < obj.that.geojson.features.length; i++) { | ||||
|                     if (obj.that.geojson.features[i].id === pick.id._id) { | ||||
|                       obj.callback( | ||||
|                         movement, | ||||
|                         obj.that.geojson.features[i].id, | ||||
|                         cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that) | ||||
|                     } | ||||
|                   } | ||||
|                 } | ||||
|               } | ||||
|               else if (typeof pick.id.id == 'string') { | ||||
|                 let array = pick.id.id.split('-') | ||||
|                 array.splice(array.length - 1, 1) | ||||
|                 entityId = array.join('-') | ||||
|               } | ||||
|  | ||||
|               if (pick.id.properties && pick.id.properties.id && leftClickCallbackMap.has(pick.id.properties.id._value)) { | ||||
|                 let obj = leftClickCallbackMap.get(pick.id.properties.id._value) | ||||
|                 if (obj.that.picking) { | ||||
|                   obj.callback( | ||||
|                     movement, | ||||
|                     pick.id.properties.id._value, | ||||
|                     cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that) | ||||
|                 } | ||||
|               } | ||||
|               else if (leftClickCallbackMap.has(pick.id.id)) { | ||||
|                 let obj = leftClickCallbackMap.get(pick.id.id) | ||||
|                 if (obj.that.picking) { | ||||
|                   obj.callback( | ||||
|                     movement, | ||||
|                     pick.id.id, | ||||
|                     cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that) | ||||
|                 } | ||||
|               } | ||||
|               else if (entityId && leftClickCallbackMap.has(entityId)) { | ||||
|                 let obj = leftClickCallbackMap.get(entityId) | ||||
|                 if (obj.that.picking) { | ||||
|                   obj.callback( | ||||
|                     movement, | ||||
|                     entityId, | ||||
|                     cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that) | ||||
|                 } | ||||
|               } | ||||
|               else if (pick.primitive) { | ||||
|                 if (typeof pick.id == 'string' && leftClickCallbackMap.has(pick.id)) { | ||||
|                   let obj = leftClickCallbackMap.get(pick.id) | ||||
|                   obj.callback( | ||||
|                     movement, | ||||
|                     pick.id, | ||||
|                     cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that) | ||||
|                 } | ||||
|               } | ||||
|             } | ||||
|             else { | ||||
|               if (pick.primitive && pick.primitive.id) { | ||||
|                 if (leftClickCallbackMap.has(pick.primitive.id)) { | ||||
|                   let obj = leftClickCallbackMap.get(pick.primitive.id) | ||||
|                   if (obj.that.picking) { | ||||
|                     if (obj.that.type === 'bim') { | ||||
|                       if (YJ.Global.getBimPickStatus(sdk)) { | ||||
|                         obj.callback( | ||||
|                           movement, | ||||
|                           pick.primitive, | ||||
|                           cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that) | ||||
|                       } | ||||
|                     } | ||||
|                     else { | ||||
|                       obj.callback( | ||||
|                         movement, | ||||
|                         pick.primitive.id, | ||||
|                         cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that) | ||||
|                     } | ||||
|                   } | ||||
|                 } | ||||
|               } | ||||
|             } | ||||
|             if (pick.content && (!pick.primitive || !pick.primitive.id)) { | ||||
|               if (leftClickCallbackMap.has(pick.content.tileset.id)) { | ||||
|                 let obj = leftClickCallbackMap.get(pick.content.tileset.id) | ||||
|                 if (obj.that.picking) { | ||||
|                   if (obj.that.type === 'bim') { | ||||
|                     if (YJ.Global.getBimPickStatus(sdk)) { | ||||
|                       obj.callback( | ||||
|                         movement, | ||||
|                         pick.content.tileset, | ||||
|                         cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that) | ||||
|                     } | ||||
|                   } | ||||
|                   else { | ||||
|                     obj.callback( | ||||
|                       movement, | ||||
|                       pick.content.tileset.id, | ||||
|                       cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that) | ||||
|                   } | ||||
|                 } | ||||
|               } | ||||
|             } | ||||
|           } | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|  | ||||
|  | ||||
|     // if (click) { | ||||
|     //   click = false | ||||
|     //   setTimeout(() => { | ||||
|     //     click = true | ||||
|     //   }, 300); | ||||
|     //   if (!YJ.Measure.GetMeasureStatus()) { | ||||
|  | ||||
|     //   } | ||||
|     // } | ||||
|   }, Cesium.ScreenSpaceEventType.LEFT_CLICK) | ||||
|  | ||||
|   // leftClickHandler.setInputAction(function (movement) { | ||||
|   //   const feature = sdk.viewer.scene.pick(movement.endPosition); | ||||
|   //   // unselectFeature(selectedFeature); | ||||
|   //   if (selectedFeature) { | ||||
|   //     selectedFeature.color = Cesium.Color.WHITE; | ||||
|   //   } | ||||
|   //   selectedFeature = feature | ||||
|   //   if (feature) { | ||||
|   //     feature.color = Cesium.Color.YELLOW; | ||||
|   //   } | ||||
|   // }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); | ||||
|   // } | ||||
|  | ||||
| } | ||||
|  | ||||
| function closeLeftClick(sdk) { | ||||
|   leftClickHandler.destroy() //关闭事件句柄 | ||||
|   leftClickHandler = null | ||||
|   // } | ||||
| } | ||||
|  | ||||
| function openRightClick(sdk) { | ||||
|   if (!sdk || !sdk.viewer) { | ||||
|     return | ||||
|   } | ||||
|   rightClickHandler = new Cesium.ScreenSpaceEventHandler(sdk.viewer.canvas) | ||||
|   rightClickHandler.setInputAction((movement) => { | ||||
|     if (!YJ.Measure.GetMeasureStatus()) { | ||||
|       const pick = sdk.viewer.scene.pick(movement.position) | ||||
|       if (pick && pick.id) { | ||||
|         let id | ||||
|         if (pick.id.type && pick.id.type === 'vector' && pick.id.parentId) { | ||||
|           let obj = rightClickCallbackMap.get(pick.id.parentId) | ||||
|           if (obj.that.picking && obj.that.geojson) { | ||||
|             for (let i = 0; i < obj.that.geojson.features.length; i++) { | ||||
|               if (obj.that.geojson.features[i].id === pick.id._id) { | ||||
|                 obj.callback( | ||||
|                   movement, | ||||
|                   obj.that.geojson.features[i].id, | ||||
|                   cartesian3Towgs84(getcartesian(sdk, movement), sdk.viewer), obj.that) | ||||
|               } | ||||
|             } | ||||
|           } | ||||
|         } | ||||
|         else { | ||||
|           if (typeof pick.id === 'string') { | ||||
|             id = pick.id | ||||
|           } | ||||
|           else { | ||||
|             id = pick.id.id | ||||
|           } | ||||
|           if (rightClickCallbackMap.has(id)) { | ||||
|             let obj = rightClickCallbackMap.get(id) | ||||
|             if (obj.that.picking) { | ||||
|               let cartesian = getcartesian(sdk, movement) | ||||
|               if (!cartesian) { | ||||
|                 return | ||||
|               } | ||||
|               obj.callback( | ||||
|                 movement, | ||||
|                 id, | ||||
|                 cartesian3Towgs84(cartesian, sdk.viewer), obj.that) | ||||
|             } | ||||
|           } | ||||
|         } | ||||
|       } | ||||
|       if (pick && pick.content) { | ||||
|         if (rightClickCallbackMap.has(pick.content.tileset.id)) { | ||||
|           let obj = rightClickCallbackMap.get(pick.content.tileset.id) | ||||
|           if (obj.that.picking) { | ||||
|             if (obj.that.type === 'bim') { | ||||
|               if (YJ.Global.getBimPickStatus(sdk)) { | ||||
|                 let cartesian = getcartesian(sdk, movement) | ||||
|                 if (!cartesian) { | ||||
|                   return | ||||
|                 } | ||||
|                 obj.callback( | ||||
|                   movement, | ||||
|                   pick.getProperty('id'), | ||||
|                   cartesian3Towgs84(cartesian, sdk.viewer), obj.that) | ||||
|               } | ||||
|             } | ||||
|             else { | ||||
|               let cartesian = getcartesian(sdk, movement) | ||||
|               if (!cartesian) { | ||||
|                 return | ||||
|               } | ||||
|               obj.callback( | ||||
|                 movement, | ||||
|                 pick.content.tileset.id, | ||||
|                 cartesian3Towgs84(cartesian, sdk.viewer), obj.that) | ||||
|             } | ||||
|           } | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|   }, Cesium.ScreenSpaceEventType.RIGHT_CLICK) | ||||
| } | ||||
|  | ||||
| function closeRightClick() { | ||||
|   if (rightClickHandler) { | ||||
|     rightClickHandler.destroy() //关闭事件句柄 | ||||
|     rightClickHandler = null | ||||
|   } | ||||
| } | ||||
|  | ||||
| function openMove(sdk) { | ||||
|   MoveHandler = new Cesium.ScreenSpaceEventHandler(sdk.viewer.canvas) | ||||
|   MoveHandler.setInputAction(function (movement) { | ||||
|     const pick = sdk.viewer.scene.pick(movement.endPosition); | ||||
|     // unselectFeature(selectedFeature); | ||||
|     // if (selectedFeature) { | ||||
|     //   let color = '#fff' | ||||
|     //   let state = selectedFeature.getProperty('state') | ||||
|     //   switch (state) { | ||||
|     //     case '0': | ||||
|     //       color = '#fff' | ||||
|     //       break; | ||||
|     //     case '1': | ||||
|     //       color = '#f00' | ||||
|     //       break; | ||||
|     //     case '2': | ||||
|     //       color = '#0f0' | ||||
|     //       break; | ||||
|     //     case '3': | ||||
|     //       color = '#00f' | ||||
|     //       break; | ||||
|     //     default: | ||||
|     //   } | ||||
|     //   selectedFeature.color = Cesium.Color.fromCssColorString(color).withAlpha(selectedFeature.tileset.transparency) | ||||
|     // } | ||||
|     // if (pick && pick.id) { } | ||||
|     // if (pick && pick.content) { | ||||
|     //   if (MoveCallbackMap.has(pick.content.tileset.id)) { | ||||
|     //     let obj = MoveCallbackMap.get(pick.content.tileset.id) | ||||
|     //     if (obj.that.picking) { | ||||
|     //       if (obj.that.type === 'bim') { | ||||
|     //         if (YJ.Global.getBimPickStatus(sdk)) { | ||||
|     //           selectedFeature = pick | ||||
|     //           pick.color = Cesium.Color.YELLOW; | ||||
|     //         } | ||||
|     //         else { | ||||
|     //           selectedFeature = null | ||||
|     //         } | ||||
|     //       } | ||||
|     //       else { | ||||
|     //         selectedFeature = pick | ||||
|     //         pick.color = Cesium.Color.YELLOW; | ||||
|     //       } | ||||
|     //     } | ||||
|     //     else { | ||||
|     //       selectedFeature = null | ||||
|     //     } | ||||
|     //   } | ||||
|     // } | ||||
|   }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); | ||||
| } | ||||
|  | ||||
| function closeMove() { | ||||
|   if (MoveHandler) { | ||||
|     MoveHandler.destroy() //关闭事件句柄 | ||||
|     MoveHandler = null | ||||
|   } | ||||
| } | ||||
|  | ||||
| /*注册左键回调*/ | ||||
| function regLeftClickCallback(id, callback, that) { | ||||
|  | ||||
|   leftClickCallbackMap.set(id, { callback, that }) | ||||
| }/*取消左键回调*/ | ||||
| function unRegLeftClickCallback(id,) { | ||||
|   leftClickCallbackMap.delete(id,) | ||||
| } | ||||
|  | ||||
| /*注册右键回调*/ | ||||
| function regRightClickCallback(id, callback, that) { | ||||
|   rightClickCallbackMap.set(id, { callback, that }) | ||||
| }/*取消右键回调*/ | ||||
| function unRegRightClickCallback(id,) { | ||||
|   rightClickCallbackMap.delete(id,) | ||||
| } | ||||
|  | ||||
| /*注册左键回调*/ | ||||
| function regMoveCallback(id, callback, that) { | ||||
|   MoveCallbackMap.set(id, { callback, that }) | ||||
| }/*取消左键回调*/ | ||||
| function unregMoveCallback(id,) { | ||||
|   MoveCallbackMap.delete(id,) | ||||
| } | ||||
|  | ||||
| function getLeftClickState() { | ||||
|   if (leftClickHandler) { | ||||
|     return true | ||||
|   } | ||||
|   else { | ||||
|     false | ||||
|   } | ||||
| } | ||||
|  | ||||
| function getRightClickState() { | ||||
|   if (rightClickHandler) { | ||||
|     return true | ||||
|   } | ||||
|   else { | ||||
|     false | ||||
|   } | ||||
| } | ||||
|  | ||||
| function getMoveState() { | ||||
|   if (MoveHandler) { | ||||
|     return true | ||||
|   } | ||||
|   else { | ||||
|     false | ||||
|   } | ||||
| } | ||||
|  | ||||
|  | ||||
| export { openLeftClick, closeLeftClick, regLeftClickCallback, unRegLeftClickCallback, openRightClick, closeRightClick, regRightClickCallback, unRegRightClickCallback, openMove, closeMove, regMoveCallback, unregMoveCallback, getLeftClickState, getRightClickState, getMoveState } | ||||
| @ -7,6 +7,9 @@ import { CesiumContainer } from '../global' | ||||
| import { off as offSplitScreen } from "../SplitScreen"; | ||||
| import { FlwStatusSwitch, JwwStatusSwitch, getFlwStatus, getJwwStatus } from "../global" | ||||
| import { SheetIndexStatusSwitch, getStatus } from '../SheetIndex' | ||||
| import { getLeftClickState, getRightClickState, getMoveState } from "../../Global/ClickCallback" | ||||
| import { openLeftClick, openRightClick, openMove } from "./ClickCallback" | ||||
|  | ||||
|  | ||||
| let sdk2D | ||||
| let sdk3D | ||||
| @ -32,6 +35,16 @@ async function init(sdk) { | ||||
|   }) | ||||
|   sdk2.viewer.scene.mode = Cesium.SceneMode.SCENE2D | ||||
|   sdk2D = await sdk2 | ||||
|   if(getLeftClickState()) { | ||||
|     openLeftClick(sdk2D) | ||||
|   } | ||||
|   if(getRightClickState()) { | ||||
|     openRightClick(sdk2D) | ||||
|   } | ||||
|   if(getMoveState()) { | ||||
|     openMove(sdk2D) | ||||
|   } | ||||
|  | ||||
|   // window.sdk2D = sdk2D | ||||
|   solveBug() | ||||
|   syncObject = { sdks: [sdk, sdk2], tools } | ||||
| @ -49,7 +62,11 @@ async function init(sdk) { | ||||
|   sdk2D.viewer.imageryLayers.removeAll() | ||||
|   for (let i = 0; i < imageryLayers.length; i++) { | ||||
|     let entity = sdk2D.viewer.imageryLayers.addImageryProvider(imageryLayers[i].imageryProvider, imageryLayers[i]._layerIndex) | ||||
|     if(imageryLayers[i]._id) { | ||||
|       entity._id = imageryLayers[i]._id | ||||
|     } | ||||
|     entity.show = imageryLayers[i].show | ||||
|     entity.alpha = imageryLayers[i].alpha | ||||
|     if (imageryLayers[i]._objectState) { | ||||
|       if (imageryLayers[i]._showView == 3) { | ||||
|         entity.show = false | ||||
| @ -136,7 +153,7 @@ async function syncData2(sdk, id, entityId) { | ||||
|         options.height = 0 | ||||
|       } | ||||
|  | ||||
|       if (!that.type || (that.type !== 'tileset' && that.type !== 'bim' && that.type !== 'glb' && that.type !== 'layer')) { | ||||
|       if (!that.type || (that.type !== 'tileset' && that.type !== 'bim' && that.type !== 'glb' && that.type !== 'layer' && that.type !== 'wallStereoscopic')) { | ||||
|         if (that.showView == 3) { | ||||
|           options.show = false | ||||
|         } | ||||
| @ -227,7 +244,7 @@ async function syncData2(sdk, id, entityId) { | ||||
|         obj.options.heightReference = 1 | ||||
|       } | ||||
|       let options = syncObject.tools.deepCopyObj(obj.options) | ||||
|       if (!obj.type || (obj.type !== 'tileset' && obj.type !== 'bim' && obj.type !== 'glb' && obj.type !== 'layer')) { | ||||
|       if (!obj.type || (obj.type !== 'tileset' && obj.type !== 'bim' && obj.type !== 'glb' && obj.type !== 'layer' && obj.type !== 'wallStereoscopic')) { | ||||
|         if (obj.showView == 3) { | ||||
|           options.show = false | ||||
|         } | ||||
|  | ||||
| @ -1,45 +1,89 @@ | ||||
| class eventBinding { | ||||
| class EventBinding { | ||||
|   constructor() { | ||||
|     this.element = {} | ||||
|   } | ||||
|   static event = {} | ||||
|  | ||||
|   getEvent(name) { | ||||
|     return eventBinding.event[name] | ||||
|     return EventBinding.event[name] | ||||
|   } | ||||
|  | ||||
|   getEventAll() { | ||||
|     return eventBinding.event | ||||
|     return EventBinding.event | ||||
|   } | ||||
|  | ||||
|   setEvent(name, event) { | ||||
|     eventBinding.event[name] = event | ||||
|     EventBinding.event[name] = event | ||||
|   } | ||||
|  | ||||
|   on(that, elements) { | ||||
|     this.element = {} | ||||
|     for (let i = 0; i < elements.length; i++) { | ||||
|       let Event = [] | ||||
|       let isEvent = false | ||||
|       let removeName = [] | ||||
|       if (!elements[i] || !elements[i].attributes) { | ||||
|         continue; | ||||
|       } | ||||
|       let Event = { | ||||
|         'input': [], | ||||
|         'change': [], | ||||
|         'blur': [], | ||||
|         'click': [] | ||||
|       } | ||||
|       let isEvent = false | ||||
|       let removeName = [] | ||||
|       for (let m of elements[i].attributes) { | ||||
|         switch (m.name) { | ||||
|           case '@model': { | ||||
|             isEvent = true | ||||
|             if (elements[i].type == 'checkbox') { | ||||
|               Event.push((e) => { that[m.value] = e.target.checked }) | ||||
|               Event.change.push((e) => { that[m.value] = e.target.checked }) | ||||
|               elements[i].checked = that[m.value] | ||||
|             } | ||||
|             else { | ||||
|               Event.push((e) => { | ||||
|                 let value = e.target.value | ||||
|                 if (e.target.type == 'number') { | ||||
|                   value = Number(value) | ||||
|                 } | ||||
|                 that[m.value] = value | ||||
|               }) | ||||
|               if (elements[i].type == 'number') { | ||||
|                 Event.input.push((e) => { | ||||
|                   if (e.target.value || e.target.value === 0) { | ||||
|                     let value = e.target.value | ||||
|                     value = Number(value) | ||||
|                     if (e.data != '.' && (e.data != '-' || e.target.value)) { | ||||
|                       if (((!e.target.max) && (!e.target.min)) || ((value <= Number(e.target.max)) && value >= Number(e.target.min))) { | ||||
|                         // that[m.value] = value | ||||
|                         value = value | ||||
|                       } | ||||
|                       if ((e.target.max) && value > Number(e.target.max)) { | ||||
|                         value = Number(e.target.max) | ||||
|                       } | ||||
|                       if ((e.target.min) && value < Number(e.target.min)) { | ||||
|                         value = Number(e.target.min) | ||||
|                       } | ||||
|                       // if ((e.target.dataset.min) && value < Number(e.target.dataset.min)) { | ||||
|                       //   value = Number(e.target.dataset.min) | ||||
|                       // } | ||||
|                       that[m.value] = value | ||||
|                     } | ||||
|                   } | ||||
|                 }) | ||||
|                 Event.blur.push((e) => { | ||||
|                   let value = e.target.value | ||||
|                   if (e.target.value || (e.target.dataset.null !== 'undefined' && e.target.dataset.null !== '' && !Boolean(e.target.dataset.null))) { | ||||
|                     value = Number(value) | ||||
|                     if ((e.target.max) && value > Number(e.target.max)) { | ||||
|                       value = Number(e.target.max) | ||||
|                     } | ||||
|                     if ((e.target.min) && value < Number(e.target.min)) { | ||||
|                       value = Number(e.target.min) | ||||
|                     } | ||||
|                     if ((e.target.dataset.min) && value < Number(e.target.dataset.min)) { | ||||
|                       value = Number(e.target.dataset.min) | ||||
|                     } | ||||
|                   } | ||||
|                   that[m.value] = value | ||||
|                 }) | ||||
|               } | ||||
|               else { | ||||
|                 Event.input.push((e) => { | ||||
|                   that[m.value] = e.target.value | ||||
|                 }) | ||||
|               } | ||||
|               if (elements[i].nodeName == 'IMG') { | ||||
|                 elements[i].src = that[m.value] | ||||
|               } | ||||
| @ -57,13 +101,13 @@ class eventBinding { | ||||
|             break; | ||||
|           } | ||||
|           case '@click': { | ||||
|             elements[i].addEventListener('click', (e) => { | ||||
|               if (typeof (that.Dialog[m.value]) === 'function') { | ||||
|                 that.Dialog[m.value](e) | ||||
|             isEvent = true | ||||
|             Event.click.push((e) => { | ||||
|               if (typeof (that[m.value]) === 'function') { | ||||
|                 that[m.value](e) | ||||
|               } | ||||
|             }); | ||||
|             }) | ||||
|             removeName.push(m.name) | ||||
|             // elements[i].attributes.removeNamedItem(m.name) | ||||
|             break; | ||||
|           } | ||||
|         } | ||||
| @ -74,19 +118,18 @@ class eventBinding { | ||||
|       } | ||||
|  | ||||
|       if (isEvent) { | ||||
|         let ventType = 'input' | ||||
|         if (elements[i].tagName != 'INPUT' || elements[i].type == 'checkbox') { | ||||
|           ventType = 'change' | ||||
|         } | ||||
|         elements[i].addEventListener(ventType, (e) => { | ||||
|           for (let t = 0; t < Event.length; t++) { | ||||
|             Event[t](e) | ||||
|         for (let key in Event) { | ||||
|           if (Event[key].length > 0) { | ||||
|             elements[i].addEventListener(key, (e) => { | ||||
|               for (let t = 0; t < Event[key].length; t++) { | ||||
|                 Event[key][t](e) | ||||
|               } | ||||
|             }); | ||||
|           } | ||||
|         }); | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| } | ||||
|  | ||||
| const EventBinding = new eventBinding(); | ||||
| export default EventBinding; | ||||
|  | ||||
| @ -3,7 +3,7 @@ | ||||
|  */ | ||||
| import Dialog from '../../../Obj/Element/Dialog'; | ||||
| import { html } from "./_element"; | ||||
| import EventBinding from '../../../Obj/Element/Dialog/eventBinding'; | ||||
| import EventBinding from './eventBinding'; | ||||
| import { syncData } from '../../MultiViewportMode' | ||||
| import Tools from '../../../Tools' | ||||
| import TimeLine from './TimeLine' | ||||
| @ -80,6 +80,10 @@ export default class Sunshine { | ||||
|   } | ||||
|   set speed(v) { | ||||
|     this.options.speed = v | ||||
|     this._elms.speed && | ||||
|       this._elms.speed.forEach(item => { | ||||
|         item.value = v | ||||
|       }) | ||||
|     this.viewer.clock.multiplier = this.options.speed; | ||||
|     this.timeLine.setSpeed(v) | ||||
|   } | ||||
|  | ||||
| @ -9,7 +9,7 @@ export default class TimeLine { | ||||
|     this.timelineCon = document.getElementsByClassName('timeline-container')[0]; | ||||
|     this.speed = speed; | ||||
|     this.animationId; | ||||
|     this.startTime = Date.now(); | ||||
|     this.startTime = performance.now(); | ||||
|     this.manualPosition = null; | ||||
|     this.isDragging = false; | ||||
|     this.pauseed = false; | ||||
| @ -28,9 +28,7 @@ export default class TimeLine { | ||||
|         document.getElementsByClassName('time-marks')[0].appendChild(label) | ||||
|       } | ||||
|     } | ||||
|  | ||||
|  | ||||
|     that.startTime = Date.now() - ((that.manualPosition || 0) * 86400 * 1000 / that.speed); | ||||
|     that.startTime = performance.now() - ((that.manualPosition || 0) * 86400 * 1000 / that.speed); | ||||
|  | ||||
|     that.timeline.addEventListener('mousedown', (e) => { | ||||
|       if (e.srcElement.className === 'handle') { | ||||
| @ -57,21 +55,22 @@ export default class TimeLine { | ||||
|     document.getElementById('timePause').addEventListener('click', function () { | ||||
|       that.pauseed = !that.pauseed; | ||||
|       if (that.pauseed) {//暂停 | ||||
|         that.pausedTime = performance.now(); // 记录暂停时刻 | ||||
|         document.getElementById('timePause').textContent = '播放'; | ||||
|         that.animationId && cancelAnimationFrame(that.animationId); | ||||
|         that.pausedTime = Date.now(); // 记录暂停时刻 | ||||
|         that.sdk.viewer.clock.shouldAnimate = false | ||||
|       } else {//播放 | ||||
|         let now = performance.now() | ||||
|         const pausedDuration = now - that.pausedTime; | ||||
|         document.getElementById('timePause').textContent = '暂停'; | ||||
|         that.manualPosition = null | ||||
|         const pausedDuration = Date.now() - that.pausedTime; | ||||
|         that.startTime += pausedDuration; // 补偿暂停期间的时间差 | ||||
|  | ||||
|         if (that.changeDate) {//切换日期后让时间从0开始 | ||||
|           if (that.changeDateGrag) { | ||||
|             that.changeDateGrag = undefined | ||||
|           } else { | ||||
|             that.startTime = Date.now() | ||||
|             that.startTime = now | ||||
|           } | ||||
|           that.changeDate = undefined | ||||
|         } | ||||
| @ -88,14 +87,14 @@ export default class TimeLine { | ||||
|         that.isDragging = false; | ||||
|         if (that.manualPosition !== null) { | ||||
|           // that.sdk.viewer.clock.shouldAnimate = true | ||||
|           that.startTime = Date.now() - (that.manualPosition * 86400 * 1000 / that.speed); | ||||
|           that.startTime = performance.now() - (that.manualPosition * 86400 * 1000 / that.speed); | ||||
|           that.manualPosition = null; | ||||
|           that.changeDate && (that.changeDateGrag = true) | ||||
|           if (!that.pauseed) { | ||||
|             that.update() | ||||
|             func(that.time) | ||||
|           } else { | ||||
|             that.pausedTime = Date.now(); // 记录暂停时刻 | ||||
|             that.pausedTime = performance.now(); // 记录暂停时刻 | ||||
|             func(that.currentTime.textContent) | ||||
|           } | ||||
|  | ||||
| @ -113,9 +112,9 @@ export default class TimeLine { | ||||
|   update() { | ||||
|     if (this.manualPosition !== null) return; | ||||
|     if (this.changeDate) {//切换日期后让时间从0开始 | ||||
|       this.startTime = Date.now() | ||||
|       this.startTime = performance.now() | ||||
|     } | ||||
|     let elapsed = (Date.now() - this.startTime) * this.speed; | ||||
|     let elapsed = (performance.now() - this.startTime) * this.speed; | ||||
|     // if (this.elapsed) { | ||||
|     //   elapsed = elapsed + this.elapsed | ||||
|     //   this.elapsed = undefined | ||||
| @ -133,23 +132,23 @@ export default class TimeLine { | ||||
|     } | ||||
|   } | ||||
|   setSpeed(v) { | ||||
|     let now = performance.now() | ||||
|     if (!this.pauseed) { | ||||
|       const currentProgress = this.manualPosition ?? | ||||
|         (Date.now() - this.startTime) * this.speed / (86400 * 1000); | ||||
|         (performance.now() - this.startTime) * this.speed / (86400 * 1000); | ||||
|       this.speed = v; | ||||
|       this.startTime = Date.now() - (currentProgress * 86400 * 1000 / this.speed); | ||||
|       this.startTime = performance.now() - (currentProgress * 86400 * 1000 / this.speed); | ||||
|  | ||||
|     } else { | ||||
|       let pausedDuration = Date.now() - this.pausedTime; | ||||
|       let pausedDuration = now - this.pausedTime; | ||||
|       this.startTime += pausedDuration; // 补偿暂停期间的时间差 | ||||
|  | ||||
|       const currentProgress = this.manualPosition ?? | ||||
|         (Date.now() - this.startTime) * this.speed / (86400 * 1000); | ||||
|         (now - this.startTime) * this.speed / (86400 * 1000); | ||||
|       this.speed = v; | ||||
|       this.startTime = Date.now() - (currentProgress * 86400 * 1000 / this.speed); | ||||
|       this.startTime = now - (currentProgress * 86400 * 1000 / this.speed); | ||||
|  | ||||
|       this.pausedTime = Date.now(); // 记录切换speed暂停时刻 | ||||
|       this.speed = v; | ||||
|       this.pausedTime = now; // 记录切换speed暂停时刻 | ||||
|       // this.speed = v; | ||||
|     } | ||||
|     this.manualPosition = null; | ||||
|  | ||||
| @ -158,7 +157,7 @@ export default class TimeLine { | ||||
|   } | ||||
|   updateTime() { | ||||
|     this.manualPosition = null; | ||||
|     this.startTime = Date.now() - ((this.manualPosition || 0) * 86400 * 1000 / this.speed); | ||||
|     this.startTime = performance.now() - ((this.manualPosition || 0) * 86400 * 1000 / this.speed); | ||||
|     this.pauseed && (this.changeDate = true) | ||||
|     this.changeDateGrag = undefined | ||||
|     this.update(); | ||||
|  | ||||
| @ -173,6 +173,10 @@ function MouseRightMenu(sdk, status, callBack) { | ||||
|                 // that.edit(true) | ||||
|                 // this.attribute(entityId) | ||||
|                 break | ||||
|               case '文本框': | ||||
|                 object.position = position | ||||
|                 key = 'textBox' | ||||
|                 break | ||||
|             } | ||||
|             eventListener[sdk.div_id].callBack(key, object) | ||||
|             _element.removeChild(menuElm) | ||||
|  | ||||
| @ -100,6 +100,7 @@ import MeasureAngle from '../Measure/MeasureAngle' | ||||
| import MeasureAzimuth from '../Measure/MeasureAzimuth' | ||||
| import DrawPolyline from '../Draw/drawPolyline' | ||||
| import DrawPolygon from '../Draw/drawPolygon' | ||||
| import DrawThreeRect from '../Draw/drawThreeRect' | ||||
| import DrawPoint from '../Draw/drawPoint' | ||||
| import DrawCircle from '../Draw/drawCircle' | ||||
| import DrawElliptic from '../Draw/drawElliptic' | ||||
| @ -185,6 +186,9 @@ import Frustum from '../Obj/AirLine/frustum' | ||||
| import DrawTakeOff from '../Obj/AirLine/DrawTakeOff' | ||||
| import FlowLine from '../Obj/Base/FlowLine' | ||||
| import Sunshine from '../Global/efflect/Sunshine' | ||||
| // import Road2 from '../Obj/Base/RoadObject' | ||||
| // import TextBox from '../Obj/Base/TextBox' | ||||
| import BatchModel from '../Obj/Base/BatchModel' | ||||
|  | ||||
| const YJEarthismeasuring = Symbol('测量状态') | ||||
| const screenRecord = Symbol('录屏对象') | ||||
| @ -256,7 +260,10 @@ if (!window.YJ) { | ||||
|       FRUSTUN: Frustum, | ||||
|       // GenerateRoute | ||||
|       Dialog, | ||||
|       FlowLine | ||||
|       FlowLine, | ||||
|       // Road2, | ||||
|       // TextBox, | ||||
|       BatchModel | ||||
|     }, | ||||
|     YJEarth, | ||||
|     Tools, | ||||
| @ -374,6 +381,7 @@ if (!window.YJ) { | ||||
|       DrawAssemble, | ||||
|       DrawSector, | ||||
|       DrawTakeOff, | ||||
|       DrawThreeRect | ||||
|     }, | ||||
|     // 分析 | ||||
|     Analysis: { | ||||
|  | ||||
| @ -91,7 +91,7 @@ class MeasureDistance extends Measure { | ||||
|  | ||||
|  | ||||
|     //暂时固定取20个点 | ||||
|     if (d > 20) {//大于20m时,固定取20个点 | ||||
|     if (d > 2) {//大于20m时,固定取20个点 | ||||
|       meters = d / 20 | ||||
|       await start(meters) | ||||
|     } else if (d < 1) { | ||||
| @ -106,8 +106,8 @@ class MeasureDistance extends Measure { | ||||
|  | ||||
|  | ||||
|   async sampleHeight(p1, index) { | ||||
|     let p2 = await this.sampleHeightMostDetailed([p1]) | ||||
|     p1.alt = p2[0].height | ||||
|     let height = await this.getClampToHeight(p1, [...this.sdk.viewer.entities.values]) | ||||
|     p1.alt = height | ||||
|     return {position: p1, index} | ||||
|   } | ||||
|  | ||||
|  | ||||
| @ -63,11 +63,15 @@ class VisibilityAnalysis extends Tools { | ||||
|         that.tip.set_text("左键创建视角终点,右键结束通视分析") | ||||
|         if (!that.resultObject.viewPoint) { | ||||
|           let pos84 = that.cartesian3Towgs84(cartesian, that.viewer) | ||||
|           let positions = await Cesium.sampleTerrainMostDetailed( | ||||
|             that.sdk.viewer.terrainProvider, | ||||
|             [Cesium.Cartographic.fromDegrees(pos84.lng, pos84.lat)] | ||||
|           ); | ||||
|           if (positions[0].height > pos84.alt) { | ||||
|           let positions | ||||
|           if(that.sdk.viewer.terrainProvider.availability) | ||||
|           { | ||||
|             positions = await Cesium.sampleTerrainMostDetailed( | ||||
|               that.sdk.viewer.terrainProvider, | ||||
|               [Cesium.Cartographic.fromDegrees(pos84.lng, pos84.lat)] | ||||
|             ); | ||||
|           } | ||||
|           if (positions && positions[0].height > pos84.alt) { | ||||
|             pos84.alt = positions[0].height | ||||
|           } | ||||
|           pos84.alt = pos84.alt + that.viewPointHeight | ||||
|  | ||||
| @ -292,7 +292,7 @@ class PolygonObject extends Base { | ||||
|   } | ||||
|   set labelShow(v) { | ||||
|     this.options.label.show = v | ||||
|     if (this.show) { | ||||
|     if (this.show && !this.showView || this.showView == 3) { | ||||
|       this.label.show = v | ||||
|     } | ||||
|     else { | ||||
|  | ||||
| @ -319,7 +319,7 @@ class AssembleObject extends Base { | ||||
|   } | ||||
|   set labelShow(v) { | ||||
|     this.options.label.show = v | ||||
|     if (this.show) { | ||||
|     if (this.show && !this.showView || this.showView == 3) { | ||||
|       this.label.show = v | ||||
|     } | ||||
|     else { | ||||
|  | ||||
| @ -324,7 +324,7 @@ class AttackArrowObject extends Base { | ||||
|   } | ||||
|   set labelShow(v) { | ||||
|     this.options.label.show = v | ||||
|     if (this.show) { | ||||
|     if (this.show && !this.showView || this.showView == 3) { | ||||
|       this.label.show = v | ||||
|     } | ||||
|     else { | ||||
|  | ||||
| @ -9,7 +9,7 @@ | ||||
| import Dialog from '../../../Element/Dialog'; | ||||
| import CoordTransform from "../../../../transform/CoordTransform"; | ||||
| import BaseSource from "../index"; | ||||
| import { syncData } from '../../../../Global/MultiViewportMode' | ||||
| import { syncData, get2DView } from '../../../../Global/MultiViewportMode' | ||||
| import { setSplitDirection, syncSplitData } from '../../../../Global/SplitScreen' | ||||
| import { setActiveViewer, closeRotateAround, closeViewFollow } from '../../../../Global/global' | ||||
|  | ||||
| @ -244,8 +244,19 @@ class BaseLayer extends BaseSource { | ||||
|         this.originalOptions = this.deepCopyObj(this.options) | ||||
|         this._DialogObject.close() | ||||
|         this.Dialog.confirmCallBack && this.Dialog.confirmCallBack(this.originalOptions) | ||||
|         syncData(this.sdk, this.options.id) | ||||
|         // syncData(this.sdk, this.options.id) | ||||
|         syncSplitData(this.sdk, this.options.id) | ||||
|         let sdk2D = get2DView() | ||||
|         if (sdk2D && sdk2D != this.sdk) { | ||||
|           for(let i=0;i<sdk2D.viewer.imageryLayers._layers.length;i++) { | ||||
|             let layer = sdk2D.viewer.imageryLayers._layers[i] | ||||
|             if(layer._id && layer._id == this.options.id) { | ||||
|               layer.alpha = this.options.alpha | ||||
|               break | ||||
|             } | ||||
|           } | ||||
|  | ||||
|         } | ||||
|       }, | ||||
|       closeCallBack: () => { | ||||
|         this.reset() | ||||
|  | ||||
| @ -637,7 +637,7 @@ class Model extends BaseModel { | ||||
|  | ||||
|   set labelShow(v) { | ||||
|     this.options.label.show = v | ||||
|     if (this.show) { | ||||
|     if (this.show && !this.showView || this.showView == 3) { | ||||
|       this.label && (this.label.show = v) | ||||
|     } | ||||
|     else { | ||||
|  | ||||
| @ -550,7 +550,7 @@ class Model2 extends BaseModel { | ||||
|  | ||||
|   set labelShow(v) { | ||||
|     this.options.label.show = v | ||||
|     if (this.show) { | ||||
|     if (this.show && !this.showView || this.showView == 3) { | ||||
|       this.label.show = v | ||||
|     } | ||||
|     else { | ||||
|  | ||||
							
								
								
									
										24
									
								
								src/Obj/Base/BatchModel/_element.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										24
									
								
								src/Obj/Base/BatchModel/_element.js
									
									
									
									
									
										Normal file
									
								
							| @ -0,0 +1,24 @@ | ||||
| function html() { | ||||
|   return ` | ||||
|     <span class="custom-divider"></span> | ||||
|     <div class="div-item"> | ||||
|         <div class="row"> | ||||
|             <div class="col add-type-box"> | ||||
|                 <span class="label" style="flex: 0 0 56px;">添加方式</span> | ||||
|                 <div class="add-type"></div> | ||||
|             </div> | ||||
|             <div class="col"> | ||||
|                 <span class="label">间距</span> | ||||
|                 <div class="input-number input-number-unit-1"> | ||||
|                     <input class="input" type="number" title="" min="1" max="99999" @model="spacing"> | ||||
|                     <span class="unit">米</span> | ||||
|                     <span class="arrow"></span> | ||||
|                 </div> | ||||
|             </div> | ||||
|         </div> | ||||
|     </div> | ||||
|     <span class="custom-divider"></span> | ||||
|     ` | ||||
| } | ||||
|  | ||||
| export { html } | ||||
							
								
								
									
										229
									
								
								src/Obj/Base/BatchModel/_element_拓展.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										229
									
								
								src/Obj/Base/BatchModel/_element_拓展.js
									
									
									
									
									
										Normal file
									
								
							| @ -0,0 +1,229 @@ | ||||
| import { attributeElm } from '../../Element/elm_html' | ||||
|  | ||||
| function html(that) { | ||||
|   return ` | ||||
|     <span class="custom-divider"></span> | ||||
|     <div class="div-item"> | ||||
|         <div class="row"> | ||||
|             <div class="col"> | ||||
|                 <span class="label">颜色</span> | ||||
|                 <div class="color"></div> | ||||
|             </div> | ||||
|             <div class="col"> | ||||
|             </div> | ||||
|         </div> | ||||
|     </div> | ||||
|     <span class="custom-divider"></span> | ||||
|     <div class="div-item"> | ||||
|         <div class="row"> | ||||
|             <div style="width: 46%;"> | ||||
|                 <div class="row add-type-box"> | ||||
|                     <div class="lable-left-line">添加方式 | ||||
|                         <div class="input input-select add-type" style="margin-left: 20px;"></div> | ||||
|                     </div> | ||||
|                 </div> | ||||
|             </div> | ||||
|             <div style="width: 50%;"> | ||||
|                 <div class="row" style="margin-bottom: 5px;"> | ||||
|                     <div class="col"> | ||||
|                         <span class="label">朝向偏移</span> | ||||
|                         <div class="input-number input-number-unit-1"> | ||||
|                             <input class="input" type="number" title="" min="0" max="360" @model="deviation"> | ||||
|                             <span class="unit">°</span> | ||||
|                             <span class="arrow"></span> | ||||
|                         </div> | ||||
|                     </div> | ||||
|                 </div> | ||||
|             </div> | ||||
|         </div> | ||||
|         <h4>模型间隔</h4> | ||||
|         <div class="row"> | ||||
|             <div class="col"> | ||||
|                 <div class="YJ-custom-checkbox-box" style="display: flex;align-items: center;cursor: pointer;"> | ||||
|                     <input type="checkbox" class="YJ-custom-checkbox"> | ||||
|                     <span style="margin-left: 10px; margin-bottom: 1px;user-select: none;">自定义距离</span> | ||||
|                 </div> | ||||
|             </div> | ||||
|             <div class="col"> | ||||
|                 <div class="YJ-custom-checkbox-box" style="display: flex;align-items: center;cursor: pointer;"> | ||||
|                     <input type="checkbox" class="YJ-custom-checkbox"> | ||||
|                     <span style="margin-left: 10px; margin-bottom: 1px;user-select: none;">固定距离</span> | ||||
|                 </div> | ||||
|             </div> | ||||
|             <div class="col"> | ||||
|                 <span class="label">模型间隔</span> | ||||
|                 <div class="input-number input-number-unit-1"> | ||||
|                     <input class="input" type="number" title="" min="0" max="360" @model="spacing"> | ||||
|                     <span class="unit">米</span> | ||||
|                     <span class="arrow"></span> | ||||
|                 </div> | ||||
|             </div> | ||||
|         </div> | ||||
|         <h4>线型选择</h4> | ||||
|         <div class="row"> | ||||
|             <div class="col"> | ||||
|                 <div class="YJ-custom-checkbox-box" style="display: flex;align-items: center;cursor: pointer;"> | ||||
|                     <input type="checkbox" class="YJ-custom-checkbox"> | ||||
|                     <span style="margin-left: 10px; margin-bottom: 1px;user-select: none;">折线</span> | ||||
|                 </div> | ||||
|             </div> | ||||
|             <div class="col"> | ||||
|                 <div class="YJ-custom-checkbox-box" style="display: flex;align-items: center;cursor: pointer;"> | ||||
|                     <input type="checkbox" class="YJ-custom-checkbox"> | ||||
|                     <span style="margin-left: 10px; margin-bottom: 1px;user-select: none;">曲线</span> | ||||
|                 </div> | ||||
|             </div> | ||||
|             <div class="col"> | ||||
|                 <span class="label">线条数量</span> | ||||
|                 <div class="input-number input-number-unit-1"> | ||||
|                     <input class="input" type="number" title="" min="0" max="360" @model="lineNum"> | ||||
|                     <span class="unit">条</span> | ||||
|                     <span class="arrow"></span> | ||||
|                 </div> | ||||
|             </div> | ||||
|             <div class="col"> | ||||
|                 <span class="label">线条间隔</span> | ||||
|                 <div class="input-number input-number-unit-1"> | ||||
|                     <input class="input" type="number" title="" min="0" max="360" @model="lineSpacing"> | ||||
|                     <span class="unit">米</span> | ||||
|                     <span class="arrow"></span> | ||||
|                 </div> | ||||
|             </div> | ||||
|         </div> | ||||
|         <div class="row"> | ||||
|             <div class="col"> | ||||
|                 <div class="YJ-custom-checkbox-box" style="display: flex;align-items: center;cursor: pointer;"> | ||||
|                     <input type="checkbox" class="YJ-custom-checkbox"> | ||||
|                     <span style="margin-left: 10px; margin-bottom: 1px;user-select: none;">随机采样</span> | ||||
|                 </div> | ||||
|             </div> | ||||
|             <div class="col"> | ||||
|                 <span class="label">随机数量</span> | ||||
|                 <div class="input-number input-number-unit-1"> | ||||
|                     <input class="input" type="number" title="" min="0" max="360" @model="lineNum"> | ||||
|                     <span class="unit">个</span> | ||||
|                     <span class="arrow"></span> | ||||
|                 </div> | ||||
|             </div> | ||||
|             <div class="col"></div> | ||||
|         </div> | ||||
|         <div class="row"> | ||||
|             <div class="col"> | ||||
|                 <div class="YJ-custom-checkbox-box" style="display: flex;align-items: center;cursor: pointer;"> | ||||
|                     <input type="checkbox" class="YJ-custom-checkbox"> | ||||
|                     <span style="margin-left: 10px; margin-bottom: 1px;user-select: none;">网格采样</span> | ||||
|                 </div> | ||||
|             </div> | ||||
|             <div class="col"> | ||||
|                 <span class="label">首边间隔</span> | ||||
|                 <div class="input-number input-number-unit-1"> | ||||
|                     <input class="input" type="number" title="" min="0" max="360" @model="fistLineSpacing"> | ||||
|                     <span class="unit">米</span> | ||||
|                     <span class="arrow"></span> | ||||
|                 </div> | ||||
|             </div> | ||||
|             <div class="col"> | ||||
|                 <span class="label">次边间隔</span> | ||||
|                 <div class="input-number input-number-unit-1"> | ||||
|                     <input class="input" type="number" title="" min="0" max="360" @model="secondLineSpacing"> | ||||
|                     <span class="unit">米</span> | ||||
|                     <span class="arrow"></span> | ||||
|                 </div> | ||||
|             </div> | ||||
|         </div> | ||||
|     </div> | ||||
|     <span class="custom-divider"></span> | ||||
|     <div class="row"> | ||||
|         <DIV-cy-tabs id="point-object-edit-tabs"> | ||||
|             <DIV-cy-tab-pane label="空间信息"> | ||||
|                 <div class="row"> | ||||
|                     <div class="col height-mode-box"> | ||||
|                         <span class="label" style="flex: 0 0 56px;">高度模式</span> | ||||
|                         <div class="height-mode"></div> | ||||
|                     </div> | ||||
|                 </div> | ||||
|                 <div class="row"> | ||||
|                     <div style="width: 46%;"> | ||||
|                         <div class="row add-type-box"> | ||||
|                             <div class="lable-left-line">缩放 | ||||
|                                 <div class="YJ-custom-checkbox-box" style="display: flex;align-items: center;cursor: pointer;"> | ||||
|                                     <input type="checkbox" class="YJ-custom-checkbox"> | ||||
|                                     <span style="margin-left: 10px; margin-bottom: 1px;user-select: none;">是否等比例缩放</span> | ||||
|                                 </div> | ||||
|                             </div> | ||||
|                         </div> | ||||
|                     </div> | ||||
|                 </div> | ||||
|             </DIV-cy-tab-pane> | ||||
|             <DIV-cy-tab-pane label="标注风格"> | ||||
|                 <div> | ||||
|                     <div class="row" style="margin-bottom: 10px;"> | ||||
|                       <div class="col"> | ||||
|                           <span class="label">新增模型风格设置</span> | ||||
|                           <button @click="openRichTextEditor">初始风格</button> | ||||
|                       </div> | ||||
|                       <div class="col"> | ||||
|                           <button @click="openRichTextEditor">当前风格</button> | ||||
|                       </div> | ||||
|                     </div> | ||||
|  | ||||
|                     <div class="row" style="margin-bottom: 10px;"> | ||||
|                         <div class="col" style="flex: 0 0 80px;"> | ||||
|                             <span class="label" style="flex: none;">显隐</span> | ||||
|                             <input class="btn-switch" type="checkbox" @model="billboardShow"> | ||||
|                         </div> | ||||
|                         <div class="col" style="flex: 0 0 90px;"> | ||||
|                             <span class="label" style="flex: none;">图标</span> | ||||
|                             <div class="image-box" @click="clickChangeImage"> | ||||
|                                 <img class="image" src="" alt="" @model="billboardImage"> | ||||
|                             </div> | ||||
|                         </div> | ||||
|                         <div class="col" style="flex: 0 0 90px;"> | ||||
|                             <span class="label" style="flex: none;">默认图标</span> | ||||
|                             <div class="image-box" @click="clickChangeDefaultImage"> | ||||
|                                 <img class="image" src="" alt="" @model="billboardDefaultImage"> | ||||
|                             </div> | ||||
|                         </div> | ||||
|                         <div class="col"> | ||||
|                             <span class="label">图标倍数</span> | ||||
|                             <div class="input-number input-number-unit-2"> | ||||
|                                 <input class="input" type="number" title="" min="0.1" max="99" @model="billboardScale"> | ||||
|                                 <span class="unit">倍</span> | ||||
|                                 <span class="arrow"></span> | ||||
|                             </div> | ||||
|                         </div> | ||||
|                     </div> | ||||
|                 </div> | ||||
|                 <div> | ||||
|                     <h4>文字设置</h4> | ||||
|                     <div class="row"> | ||||
|                         <div class="col" style="flex: 0 0 80px;"> | ||||
|                             <span class="label" style="flex: none;">显隐</span> | ||||
|                             <input class="btn-switch" type="checkbox" @model="labelShow"> | ||||
|                         </div> | ||||
|                         <div class="col font-select-box"> | ||||
|                             <span class="label" style="flex: none;">字体选择</span> | ||||
|                             <div class="input input-select font-select"></div> | ||||
|                         </div> | ||||
|                         <div class="col"> | ||||
|                             <span class="label">文字大小</span> | ||||
|                             <div class="input-number input-number-unit-2"> | ||||
|                                 <input class="input" type="number" title="" min="1" max="99" @model="labelFontSize" style="width: 70px;"> | ||||
|                                 <span class="unit">px</span> | ||||
|                                 <span class="arrow"></span> | ||||
|                             </div> | ||||
|                         </div> | ||||
|                         <div class="col"> | ||||
|                             <span class="label">文字颜色</span> | ||||
|                             <div class="labelColor"></div> | ||||
|                         </div> | ||||
|                     </div> | ||||
|                 </div> | ||||
|             </DIV-cy-tab-pane> | ||||
|         </DIV-cy-tabs> | ||||
|     </div> | ||||
|     <span class="custom-divider"></span> | ||||
|     ` | ||||
| } | ||||
|  | ||||
| export { html } | ||||
							
								
								
									
										92
									
								
								src/Obj/Base/BatchModel/eventBinding.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										92
									
								
								src/Obj/Base/BatchModel/eventBinding.js
									
									
									
									
									
										Normal file
									
								
							| @ -0,0 +1,92 @@ | ||||
| class eventBinding { | ||||
|   constructor() { | ||||
|     this.element = {} | ||||
|   } | ||||
|   static event = {} | ||||
|  | ||||
|   getEvent(name) { | ||||
|     return eventBinding.event[name] | ||||
|   } | ||||
|  | ||||
|   getEventAll() { | ||||
|     return eventBinding.event | ||||
|   } | ||||
|  | ||||
|   setEvent(name, event) { | ||||
|     eventBinding.event[name] = event | ||||
|   } | ||||
|  | ||||
|   on(that, elements) { | ||||
|     for (let i = 0; i < elements.length; i++) { | ||||
|       let Event = [] | ||||
|       let isEvent = false | ||||
|       let removeName = [] | ||||
|       if (!elements[i] || !elements[i].attributes) { | ||||
|         continue; | ||||
|       } | ||||
|       for (let m of elements[i].attributes) { | ||||
|         switch (m.name) { | ||||
|           case '@model': { | ||||
|             isEvent = true | ||||
|             if (elements[i].type == 'checkbox') { | ||||
|               Event.push((e) => { that[m.value] = e.target.checked }) | ||||
|               elements[i].checked = that[m.value] | ||||
|             } | ||||
|             else { | ||||
|               Event.push((e) => { | ||||
|                 let value = e.target.value | ||||
|                 if (e.target.type == 'number') { | ||||
|                   value = Number(value) | ||||
|                 } | ||||
|                 that[m.value] = value | ||||
|               }) | ||||
|               if (elements[i].nodeName == 'IMG') { | ||||
|                 elements[i].src = that[m.value] | ||||
|               } | ||||
|               else { | ||||
|                 elements[i].value = that[m.value] | ||||
|               } | ||||
|             } | ||||
|             if (this.element[m.value]) { | ||||
|               this.element[m.value].push(elements[i]) | ||||
|             } | ||||
|             else { | ||||
|               this.element[m.value] = [elements[i]] | ||||
|             } | ||||
|             removeName.push(m.name) | ||||
|             break; | ||||
|           } | ||||
|           case '@click': { | ||||
|             elements[i].addEventListener('click', (e) => { | ||||
|               if (typeof (that.Dialog[m.value]) === 'function') { | ||||
|                 that.Dialog[m.value](e) | ||||
|               } | ||||
|             }); | ||||
|             removeName.push(m.name) | ||||
|             // elements[i].attributes.removeNamedItem(m.name) | ||||
|             break; | ||||
|           } | ||||
|         } | ||||
|         // elements[i].attributes[m] = undefined | ||||
|       } | ||||
|       for (let n = 0; n < removeName.length; n++) { | ||||
|         elements[i].attributes.removeNamedItem(removeName[n]) | ||||
|       } | ||||
|  | ||||
|       if (isEvent) { | ||||
|         let ventType = 'input' | ||||
|         if (elements[i].tagName != 'INPUT' || elements[i].type == 'checkbox') { | ||||
|           ventType = 'change' | ||||
|         } | ||||
|         elements[i].addEventListener(ventType, (e) => { | ||||
|           for (let t = 0; t < Event.length; t++) { | ||||
|             Event[t](e) | ||||
|           } | ||||
|         }); | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| } | ||||
|  | ||||
| const EventBinding = new eventBinding(); | ||||
| export default EventBinding; | ||||
							
								
								
									
										681
									
								
								src/Obj/Base/BatchModel/index.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										681
									
								
								src/Obj/Base/BatchModel/index.js
									
									
									
									
									
										Normal file
									
								
							| @ -0,0 +1,681 @@ | ||||
| /** | ||||
|  * @description 批量模型 | ||||
|  */ | ||||
| import Dialog from '../../Element/Dialog'; | ||||
| import { html } from "./_element"; | ||||
| import EventBinding from '../../Element/Dialog/eventBinding'; | ||||
| import Base from "../index"; | ||||
| import { syncData } from '../../../Global/MultiViewportMode' | ||||
| import Model from '../BaseSource/BaseModel/Model' | ||||
| import { legp } from '../../Element/datalist' | ||||
|  | ||||
| import DrawPolyline from '../../../Draw/drawPolyline' | ||||
| import DrawPolygon from '../../../Draw/drawPolygon' | ||||
| import DrawThreeRect from '../../../Draw/drawThreeRect' | ||||
| import DrawPoint from '../../../Draw/drawPoint' | ||||
| import { setActiveViewer, closeRotateAround, closeViewFollow } from '../../../Global/global' | ||||
|  | ||||
| import { setSplitDirection, syncSplitData, setActiveId } from '../../../Global/SplitScreen' | ||||
|  | ||||
| class BatchModel extends Base { | ||||
|   /** | ||||
|    * @constructor | ||||
|    * @param sdk | ||||
|    * @description 批量模型 | ||||
|    * @param options {object} 批量模型属性 | ||||
|    * @param options.name=未命名对象 {string} 名称 | ||||
|    * @param options.type=polygon {string} 线类型(line,polygon) | ||||
|    * @param options.url=polygon {string} 线类型(line,polygon,point) | ||||
|    * @param options.spacing= {number} 间距 | ||||
|    * @param options.show=true {boolean} | ||||
|    * @param Dialog {object} 弹框对象 | ||||
|    * @param Dialog.confirmCallBack {function} 弹框确认时的回调 | ||||
|    * */ | ||||
|   constructor(sdk, options = {}, callback = null, _Dialog = {}) { | ||||
|     super(sdk, options); | ||||
|     this.viewer = this.sdk.viewer | ||||
|     this.options.name = options.name || '批量模型' | ||||
|     this.options.type = options.type || '面' | ||||
|     this.options.url = options.url || '' | ||||
|     this.options.spacing = options.spacing || 50 | ||||
|     this.options.positions = options.positions || [] | ||||
|     this.options.show = (options.show || options.show === false) ? options.show : true | ||||
|     this.callback = callback | ||||
|     this.Dialog = _Dialog | ||||
|     this._EventBinding = new EventBinding() | ||||
|     this._elms = {}; | ||||
|     this.pointArr = [] | ||||
|     this.sdk.addIncetance(this.options.id, this) | ||||
|     // BatchModel.computeDis(this) | ||||
|     // if (this.options.positions.length > 0 || this.options.positions.lng) { | ||||
|     if ((options.type && options.spacing != undefined) || options.type == '点') { | ||||
|       // BatchModel.computeDis(this) | ||||
|  | ||||
|       let Draw | ||||
|       switch (options.type) { | ||||
|         case '点': | ||||
|           Draw = new DrawPoint(this.sdk) | ||||
|           break; | ||||
|         case '线': | ||||
|           Draw = new DrawPolyline(this.sdk) | ||||
|           break; | ||||
|         case '面': | ||||
|           Draw = new DrawThreeRect(this.sdk) | ||||
|           break; | ||||
|         default: | ||||
|           break; | ||||
|       } | ||||
|       Draw && Draw.start((a, positions) => { | ||||
|         this.options.positions = positions; | ||||
|         // this.callback(this.options); | ||||
|         (this.options.positions.length || this.options.positions.lng) && BatchModel.computeDis(this) | ||||
|       }) | ||||
|  | ||||
|     } else { | ||||
|       this.edit(true) | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   // 计算距离 | ||||
|   static async computeDis(that) { | ||||
|     let fromDegreesArray = [] | ||||
|     let arr | ||||
|     let posiArr = [] | ||||
|     let array = [] | ||||
|     if (that.options.type == '面') { | ||||
|       that.options.positions.forEach(item => { | ||||
|         fromDegreesArray.push(item.lng, item.lat) | ||||
|       }) | ||||
|       // arr = that.generateInterpolatedPoints(Cesium.Cartesian3.fromDegreesArray(fromDegreesArray), that.options.spacing) | ||||
|       arr = await that.computedArea(Cesium.Cartesian3.fromDegreesArray(fromDegreesArray), that.options.spacing) | ||||
|       array[0] = arr | ||||
|       array[1] = that.calculateRoadAngle(Cesium.Cartesian3.fromDegreesArray(fromDegreesArray)[0], Cesium.Cartesian3.fromDegreesArray(fromDegreesArray)[3]) | ||||
|       arr.forEach((item, index) => { | ||||
|         const cartographic = Cesium.Cartographic.fromCartesian( | ||||
|           item // Cartesian3对象 {x, y, z} | ||||
|         ); | ||||
|         const longitude = Cesium.Math.toDegrees(cartographic.longitude); | ||||
|         const latitude = Cesium.Math.toDegrees(cartographic.latitude); | ||||
|         const height = cartographic.height; | ||||
|         posiArr.push({ | ||||
|           lng: longitude, | ||||
|           lat: latitude, | ||||
|           alt: height | ||||
|         }) | ||||
|       }) | ||||
|     } else if (that.options.type == '线') { | ||||
|       that.options.positions.forEach(item => { | ||||
|         fromDegreesArray.push(item.lng, item.lat) | ||||
|       }) | ||||
|       array = await that.linePoint(Cesium.Cartesian3.fromDegreesArray(fromDegreesArray), that.options.spacing) | ||||
|       arr = array[0] | ||||
|       that.pointArr = arr | ||||
|       arr.forEach((item, index) => { | ||||
|         const cartographic = Cesium.Cartographic.fromCartesian( | ||||
|           item // Cartesian3对象 {x, y, z} | ||||
|         ); | ||||
|         const longitude = Cesium.Math.toDegrees(cartographic.longitude); | ||||
|         const latitude = Cesium.Math.toDegrees(cartographic.latitude); | ||||
|         const height = cartographic.height; | ||||
|         posiArr.push({ | ||||
|           lng: longitude, | ||||
|           lat: latitude, | ||||
|           alt: height | ||||
|         }) | ||||
|       }) | ||||
|     } else if (that.options.type == '点') { | ||||
|       let height = await that.getClampToHeight({ lng: that.options.positions.lng, lat: that.options.positions.lat }) | ||||
|       posiArr = [{ lng: that.options.positions.lng, lat: that.options.positions.lat, alt: height }] | ||||
|       // posiArr = [that.options.positions] | ||||
|       that.pointArr = posiArr | ||||
|     } | ||||
|     let params = { | ||||
|       type: that.options.type, | ||||
|       positions: posiArr, | ||||
|       rotate: that.options.type == '点' ? undefined : array[1] | ||||
|     } | ||||
|     that.callback(params) | ||||
|     // posiArr.forEach((item, index) => { | ||||
|     //   let model = new Model(that.sdk, { | ||||
|     //     id: 'model' + index, | ||||
|     //     show: that.options.show, | ||||
|     //     url: that.options.url, | ||||
|     //     position: item, | ||||
|     //     rotate: that.options.type == '点' ? undefined : { x: 0, y: 0, z: array[1] && (array[1][index] || array[1]) } | ||||
|     //   }) | ||||
|     //   that.pointArr.push(model) | ||||
|     // }) | ||||
|   } | ||||
|   async linePoint(polygonPositions, spacing) { | ||||
|     let boundaryPoints = []; | ||||
|     let boundaryAngle = []; | ||||
|     for (let i = 0; i < polygonPositions.length - 1; i++) { | ||||
|  | ||||
|       const start = polygonPositions[i]; | ||||
|       const end = polygonPositions[(i + 1) % polygonPositions.length]; | ||||
|       const segmentLength = Cesium.Cartesian3.distance(start, end); | ||||
|       const segments = Math.ceil(segmentLength / spacing); | ||||
|  | ||||
|       for (let j = 0; j <= segments; j++) { | ||||
|         const ratio = j / segments; | ||||
|         let point = Cesium.Cartesian3.lerp( | ||||
|           start, end, ratio, new Cesium.Cartesian3() | ||||
|         ); | ||||
|  | ||||
|         const cartographic = Cesium.Cartographic.fromCartesian( | ||||
|           point // Cartesian3对象 {x, y, z} | ||||
|         ); | ||||
|         const longitude = Cesium.Math.toDegrees(cartographic.longitude); | ||||
|         const latitude = Cesium.Math.toDegrees(cartographic.latitude); | ||||
|  | ||||
|  | ||||
|         let height = await this.getClampToHeight({ lng: longitude, lat: latitude }) | ||||
|         point = Cesium.Cartesian3.fromDegrees(longitude, latitude, height); | ||||
|  | ||||
|         boundaryPoints.push(point); | ||||
|         if (j != segments || i == polygonPositions.length - 2) { | ||||
|           boundaryAngle.push(this.calculateRoadAngle(start, end)) | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|     return [[...new Set(boundaryPoints | ||||
|       .map(p => `${p.x},${p.y},${p.z}`))] | ||||
|       .map(str => { | ||||
|         const [x, y, z] = str.split(',').map(Number); | ||||
|         return new Cesium.Cartesian3(x, y, z); | ||||
|       }), boundaryAngle]; | ||||
|   } | ||||
|   calculateRoadAngle(startPoint, endPoint) { | ||||
|     const normal = Cesium.Ellipsoid.WGS84.geodeticSurfaceNormal(startPoint); | ||||
|     const enuMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(startPoint, undefined, normal); | ||||
|     const inverseMatrix = Cesium.Matrix4.inverse(enuMatrix, new Cesium.Matrix4()); | ||||
|  | ||||
|     const localEnd = Cesium.Matrix4.multiplyByPoint(inverseMatrix, endPoint, new Cesium.Cartesian3()); | ||||
|     const horizontalVec = new Cesium.Cartesian2(localEnd.x, localEnd.y); | ||||
|     Cesium.Cartesian2.normalize(horizontalVec, horizontalVec); | ||||
|  | ||||
|     const north = new Cesium.Cartesian2(1, 0); | ||||
|  | ||||
|     let angle = Cesium.Cartesian2.angleBetween(north, horizontalVec); | ||||
|     angle = Cesium.Math.toDegrees(angle) | ||||
|     const cross = Cesium.Cartesian2.cross(north, horizontalVec, new Cesium.Cartesian2()); | ||||
|     // return cross < 0 ? angle : - angle; | ||||
|     return cross < 0 ? -angle : angle; | ||||
|   } | ||||
|   generateInterpolatedPoints(polygonPositions, spacing) { | ||||
|     // 1. 边界点插值 | ||||
|     const boundaryPoints = []; | ||||
|  | ||||
|     for (let i = 0; i < polygonPositions.length; i++) { | ||||
|  | ||||
|       const start = polygonPositions[i]; | ||||
|       const end = polygonPositions[(i + 1) % polygonPositions.length]; | ||||
|       const segmentLength = Cesium.Cartesian3.distance(start, end); | ||||
|       const segments = Math.ceil(segmentLength / spacing); | ||||
|  | ||||
|       for (let j = 0; j <= segments; j++) { | ||||
|         const ratio = j / segments; | ||||
|         const point = Cesium.Cartesian3.lerp( | ||||
|           start, end, ratio, new Cesium.Cartesian3() | ||||
|         ); | ||||
|         boundaryPoints.push(point); | ||||
|       } | ||||
|     } | ||||
|  | ||||
|     // 2. 内部网格生成 | ||||
|     const extent = this.computePolygonExtent(polygonPositions); | ||||
|     let result = this.createGridFromBBox(extent, this.options.spacing) | ||||
|     // const extent = Cesium.Rectangle.fromCartesianArray(polygonPositions); | ||||
|  | ||||
|     const gridPoints = []; | ||||
|     // const polygon = new Cesium.PolygonHierarchy(polygonPositions); | ||||
|     var polygon = [] | ||||
|     this.options.positions.forEach(item => { | ||||
|       polygon.push([item.lng, item.lat]) | ||||
|     }) | ||||
|     polygon.push(polygon[0]) | ||||
|     for (let x = extent.west; x <= extent.east; x += result.lonStep) { | ||||
|       for (let y = extent.south; y <= extent.north; y += result.latStep) { | ||||
|         const position = Cesium.Cartesian3.fromDegrees(x, y); | ||||
|         const point = turf.point([x, y]); | ||||
|         const polygonTurf = turf.polygon([polygon]); | ||||
|         const isInside = turf.booleanPointInPolygon(point, polygonTurf); | ||||
|         isInside && gridPoints.push(position) | ||||
|       } | ||||
|     } | ||||
|  | ||||
|     // 3. 合并结果并去重 | ||||
|     // return [...new Set([...boundaryPoints, ...gridPoints] | ||||
|     return [...new Set([...gridPoints] | ||||
|       .map(p => `${p.x},${p.y},${p.z}`))] | ||||
|       .map(str => { | ||||
|         const [x, y, z] = str.split(',').map(Number); | ||||
|         return new Cesium.Cartesian3(x, y, z); | ||||
|       }); | ||||
|   } | ||||
|  | ||||
|   createGridFromBBox(bbox, spacing) { | ||||
|     const earthRadius = 6378137; // WGS84椭球体长半轴 | ||||
|     // 计算经度方向网格数 | ||||
|     const lonDistance = Cesium.Cartesian3.distance( | ||||
|       Cesium.Cartesian3.fromDegrees(bbox.west, (bbox.south + bbox.north) / 2, 0), | ||||
|       Cesium.Cartesian3.fromDegrees(bbox.east, (bbox.south + bbox.north) / 2, 0) | ||||
|     ); | ||||
|     const lonCount = Math.ceil(lonDistance / spacing); | ||||
|  | ||||
|     // 计算纬度方向网格数 | ||||
|     const latDistance = Cesium.Cartesian3.distance( | ||||
|       Cesium.Cartesian3.fromDegrees((bbox.west + bbox.east) / 2, bbox.south, 0), | ||||
|       Cesium.Cartesian3.fromDegrees((bbox.west + bbox.east) / 2, bbox.north, 0) | ||||
|     ); | ||||
|     const latCount = Math.ceil(latDistance / spacing); | ||||
|     // 生成网格线 | ||||
|     const lonStep = (bbox.east - bbox.west) / lonCount; | ||||
|     const latStep = (bbox.north - bbox.south) / latCount; | ||||
|     return { lonStep, latStep } | ||||
|   } | ||||
|  | ||||
|   computePolygonExtent(positions) { | ||||
|     // 计算多边形经纬度范围 | ||||
|     const cartographics = positions.map(p => | ||||
|       Cesium.Cartographic.fromCartesian(p)); | ||||
|     const lons = cartographics.map(c => Cesium.Math.toDegrees(c.longitude)); | ||||
|     const lats = cartographics.map(c => Cesium.Math.toDegrees(c.latitude)); | ||||
|     return { | ||||
|       west: Math.min(...lons), | ||||
|       east: Math.max(...lons), | ||||
|       south: Math.min(...lats), | ||||
|       north: Math.max(...lats) | ||||
|     }; | ||||
|   } | ||||
|   async computedArea(polygonPositions, spacing) { | ||||
|     let dis12 = Cesium.Cartesian3.distance(polygonPositions[0], polygonPositions[1]); | ||||
|     let dis23 = Cesium.Cartesian3.distance(polygonPositions[1], polygonPositions[2]); | ||||
|     let vec12 = Cesium.Cartesian3.subtract(polygonPositions[1], polygonPositions[0], new Cesium.Cartesian3()); | ||||
|     let vec23 = Cesium.Cartesian3.subtract(polygonPositions[2], polygonPositions[1], new Cesium.Cartesian3()); | ||||
|  | ||||
|     let num12 = Math.ceil(dis12 / spacing); | ||||
|     let num23 = Math.ceil(dis23 / spacing); | ||||
|  | ||||
|     let line1 = [] | ||||
|     for (let i = 0; i < num12; i++) { | ||||
|       line1.push(await this.calculatePointB(polygonPositions[0], polygonPositions[1], i * spacing)) | ||||
|     } | ||||
|     let line2 = [] | ||||
|     for (let i = 0; i < num12; i++) { | ||||
|       line2.push(await this.calculatePointB(polygonPositions[3], polygonPositions[2], i * spacing)) | ||||
|     } | ||||
|  | ||||
|     let allPoints = [] | ||||
|     for (let i = 0; i < line1.length; i++) { | ||||
|       for (let j = 0; j < num23; j++) { | ||||
|         allPoints.push(await this.calculatePointB(line1[i], line2[i], j * spacing)) | ||||
|       } | ||||
|     } | ||||
|     return allPoints | ||||
|   } | ||||
|   async calculatePointB(pointA, pointC, distance) { | ||||
|     // 将输入坐标转换为Cartesian3类型 | ||||
|     // const pointA = Cesium.Cartesian3.fromDegrees(a.longitude, a.latitude, a.height); | ||||
|     // const pointC = Cesium.Cartesian3.fromDegrees(c.longitude, c.latitude, c.height); | ||||
|  | ||||
|     // 计算向量AC | ||||
|     const vectorAC = Cesium.Cartesian3.subtract(pointC, pointA, new Cesium.Cartesian3()); | ||||
|  | ||||
|     // 计算向量AC的长度 | ||||
|     const lengthAC = Cesium.Cartesian3.magnitude(vectorAC); | ||||
|  | ||||
|     // 归一化向量AC | ||||
|     const unitVector = Cesium.Cartesian3.normalize(vectorAC, new Cesium.Cartesian3()); | ||||
|  | ||||
|     // 计算点B坐标 | ||||
|     const scaledVector = Cesium.Cartesian3.multiplyByScalar(unitVector, distance, new Cesium.Cartesian3()); | ||||
|     const pointB = Cesium.Cartesian3.add(pointA, scaledVector, new Cesium.Cartesian3()); | ||||
|  | ||||
|  | ||||
|     const cartographic = Cesium.Cartographic.fromCartesian( | ||||
|       pointB // Cartesian3对象 {x, y, z} | ||||
|     ); | ||||
|     const longitude = Cesium.Math.toDegrees(cartographic.longitude); | ||||
|     const latitude = Cesium.Math.toDegrees(cartographic.latitude); | ||||
|  | ||||
|  | ||||
|     let height = await this.getClampToHeight({ lng: longitude, lat: latitude }) | ||||
|     let point = Cesium.Cartesian3.fromDegrees(longitude, latitude, height); | ||||
|     // 转换回经纬度 | ||||
|     // const cartographic = Cesium.Cartographic.fromCartesian(pointB); | ||||
|     // return { | ||||
|     //   longitude: Cesium.Math.toDegrees(cartographic.longitude), | ||||
|     //   latitude: Cesium.Math.toDegrees(cartographic.latitude), | ||||
|     //   height: cartographic.height | ||||
|     // }; | ||||
|     // return pointB | ||||
|     return point | ||||
|   } | ||||
|   get show() { | ||||
|     return this.options.show | ||||
|   } | ||||
|  | ||||
|   set show(v) { | ||||
|     this.options.show = v | ||||
|     for (let i = 0; i < this.pointArr.length; i++) { | ||||
|       this.pointArr[i].show = v | ||||
|     } | ||||
|   } | ||||
|   get type() { | ||||
|     return this.options.type | ||||
|   } | ||||
|  | ||||
|   set type(v) { | ||||
|     this.options.type = v | ||||
|     this._elms.type && | ||||
|       this._elms.type.forEach(item => { | ||||
|         item.value = v | ||||
|       }) | ||||
|   } | ||||
|   get spacing() { | ||||
|     return this.options.spacing | ||||
|   } | ||||
|  | ||||
|   set spacing(v) { | ||||
|     this.options.spacing = v | ||||
|     this._elms.spacing && | ||||
|       this._elms.spacing.forEach(item => { | ||||
|         item.value = v | ||||
|       }) | ||||
|   } | ||||
|   /** | ||||
|    * @description 编辑框 | ||||
|    * @param state=false {boolean} 状态: true打开, false关闭 | ||||
|    */ | ||||
|   async edit(state = false) { | ||||
|     let _this = this | ||||
|     this.originalOptions = this.deepCopyObj(this.options) | ||||
|  | ||||
|     // let elms = this.sdk.viewer._container.getElementsByClassName('YJ-custom-base-dialog') | ||||
|     // for (let i = elms.length - 1; i >= 0; i--) { | ||||
|     //   this.sdk.viewer._container.removeChild(elms[i]) | ||||
|     // } | ||||
|  | ||||
|     if (this._DialogObject && this._DialogObject.close) { | ||||
|       this._DialogObject.close() | ||||
|       this._DialogObject = null | ||||
|     } | ||||
|  | ||||
|     if (state) { | ||||
|       this._DialogObject = await new Dialog(this.sdk, this.originalOptions, { | ||||
|         title: '默认模型参数设置', left: '180px', top: '100px', | ||||
|         confirmCallBack: (options) => { | ||||
|           this.name = this.name.trim() | ||||
|           if (!this.name) { | ||||
|             // this.name = '未命名对象' | ||||
|             this.name = '飞线' | ||||
|           } | ||||
|  | ||||
|           let Draw | ||||
|           switch (this.options.type) { | ||||
|             case '点': | ||||
|               Draw = new DrawPoint(this.sdk) | ||||
|               break; | ||||
|             case '线': | ||||
|               Draw = new DrawPolyline(this.sdk) | ||||
|               break; | ||||
|             case '面': | ||||
|               Draw = new DrawThreeRect(this.sdk) | ||||
|               break; | ||||
|             default: | ||||
|               break; | ||||
|           } | ||||
|           Draw && Draw.start((a, positions) => { | ||||
|             this.options.positions = positions; | ||||
|             // this.callback(this.options); | ||||
|             (this.options.positions.length || this.options.positions.lng) && BatchModel.computeDis(this) | ||||
|           }) | ||||
|  | ||||
|           this.originalOptions = this.deepCopyObj(this.options) | ||||
|           this._DialogObject.close() | ||||
|           this.Dialog.confirmCallBack && this.Dialog.confirmCallBack(this.originalOptions) | ||||
|           syncData(this.sdk, this.options.id) | ||||
|           syncSplitData(this.sdk, this.options.id) | ||||
|         }, | ||||
|         // resetCallBack: () => { | ||||
|         //   this.reset() | ||||
|         //   console.log('22222') | ||||
|         //   this.Dialog.resetCallBack && this.Dialog.resetCallBack() | ||||
|         // }, | ||||
|         // removeCallBack: () => { | ||||
|         //   console.log('33333') | ||||
|         //   this.Dialog.removeCallBack && this.Dialog.removeCallBack() | ||||
|         // }, | ||||
|         closeCallBack: () => { | ||||
|           this.reset() | ||||
|           // this.entity.style = new Cesium.Cesium3DTileStyle({ | ||||
|           //   color: "color('rgba(255,255,255," + this.newData.transparency + ")')", | ||||
|           //   show: true, | ||||
|           // }); | ||||
|           this.Dialog.closeCallBack && this.Dialog.closeCallBack() | ||||
|         }, | ||||
|         addFootElm: [ | ||||
|           { | ||||
|             tagName: 'button', | ||||
|             className: 'flipe-over-y', | ||||
|             innerHTML: '重置', | ||||
|             event: [ | ||||
|               'click', | ||||
|               () => { | ||||
|                 this.reset() | ||||
|               } | ||||
|             ] | ||||
|           } | ||||
|         ] | ||||
|         // showCallBack: (show) => { | ||||
|         //   this.show = show | ||||
|         //   this.Dialog.showCallBack && this.Dialog.showCallBack() | ||||
|         // } | ||||
|       }, true) | ||||
|       this._DialogObject._element.body.className = this._DialogObject._element.body.className + ' flow-line-surface' | ||||
|       let contentElm = document.createElement('div'); | ||||
|       contentElm.innerHTML = html() | ||||
|       this._DialogObject.contentAppChild(contentElm) | ||||
|       // 颜色组件 | ||||
|       // let waterColorPicker = new YJColorPicker({ | ||||
|       //   el: contentElm.getElementsByClassName("flowLine-color")[0], | ||||
|       //   size: 'mini',//颜色box类型 | ||||
|       //   alpha: true,//是否开启透明度 | ||||
|       //   defaultColor: this.color, | ||||
|       //   disabled: false,//是否禁止打开颜色选择器 | ||||
|       //   openPickerAni: 'opacity',//打开颜色选择器动画 | ||||
|       //   sure: (color) => { | ||||
|       //     this.color = color | ||||
|       //   },//点击确认按钮事件回调 | ||||
|       //   clear: () => { | ||||
|       //     this.color = 'rgba(255,255,255,1)' | ||||
|       //   },//点击清空按钮事件回调 | ||||
|       // }) | ||||
|  | ||||
|       let all_elm = contentElm.getElementsByTagName("*") | ||||
|       this._EventBinding.on(this, all_elm) | ||||
|       this._elms = this._EventBinding.element | ||||
|  | ||||
|       let nameData = [ | ||||
|         { | ||||
|           name: '点', | ||||
|           value: '点', | ||||
|         }, | ||||
|         { | ||||
|           name: '线', | ||||
|           value: '线', | ||||
|         }, | ||||
|         { | ||||
|           name: '面', | ||||
|           value: '面', | ||||
|         } | ||||
|       ] | ||||
|  | ||||
|       let nameDataLegpObject = legp( | ||||
|         this._DialogObject._element.content.getElementsByClassName( | ||||
|           'add-type-box' | ||||
|         )[0], | ||||
|         '.add-type' | ||||
|       ) | ||||
|       if (nameDataLegpObject) { | ||||
|         nameDataLegpObject.legp_search(nameData) | ||||
|         let nameDataLegpElm = this._DialogObject._element.content | ||||
|           .getElementsByClassName('add-type')[0] | ||||
|           .getElementsByTagName('input')[0] | ||||
|         this._elms.type = [nameDataLegpElm] | ||||
|         nameDataLegpElm.value = this.options.type | ||||
|         for (let i = 0; i < nameData.length; i++) { | ||||
|           if (nameData[i].value === nameDataLegpElm.value) { | ||||
|             nameDataLegpObject.legp_searchActive(nameData[i].value) | ||||
|             break | ||||
|           } | ||||
|         } | ||||
|         nameDataLegpElm.addEventListener('input', () => { | ||||
|           for (let i = 0; i < nameData.length; i++) { | ||||
|             if (nameData[i].value === nameDataLegpElm.value) { | ||||
|               this.type = nameData[i].value | ||||
|               break | ||||
|             } | ||||
|           } | ||||
|         }) | ||||
|       } | ||||
|       // this._elms.color = [waterColorPicker] | ||||
|     } else { | ||||
|       // if (this._element_style) { | ||||
|       //   document.getElementsByTagName('head')[0].removeChild(this._element_style) | ||||
|       //   this._element_style = null | ||||
|       // } | ||||
|       // if (this._DialogObject && this._DialogObject.remove) { | ||||
|       //   this._DialogObject.remove() | ||||
|       //   this._DialogObject = null | ||||
|       // } | ||||
|     } | ||||
|   } | ||||
|   drawArea() { | ||||
|  | ||||
|   } | ||||
|  | ||||
|   reset() { | ||||
|     this.name = this.originalOptions.name | ||||
|     this.type = this.originalOptions.type | ||||
|     this.spacing = this.originalOptions.spacing | ||||
|     this.show = this.originalOptions.show | ||||
|     this.options.spacing = this.originalOptions.spacing | ||||
|   } | ||||
|  | ||||
|   /** | ||||
|    * 飞到对应实体 | ||||
|    */ | ||||
|   async flyTo(options = {}) { | ||||
|     setActiveViewer(0) | ||||
|     closeRotateAround(this.sdk) | ||||
|     closeViewFollow(this.sdk) | ||||
|  | ||||
|     if (this.options.customView && this.options.customView.relativePosition && this.options.customView.orientation) { | ||||
|       let orientation = { | ||||
|         heading: Cesium.Math.toRadians(this.options.customView.orientation.heading || 0.0), | ||||
|         pitch: Cesium.Math.toRadians(this.options.customView.orientation.pitch || -60.0), | ||||
|         roll: Cesium.Math.toRadians(this.options.customView.orientation.roll || 0.0) | ||||
|       } | ||||
|  | ||||
|       let lng = this.options.customView.relativePosition.lng | ||||
|       let lat = this.options.customView.relativePosition.lat | ||||
|       let alt = this.options.customView.relativePosition.alt | ||||
|       let destination = Cesium.Cartesian3.fromDegrees(lng, lat, alt) | ||||
|  | ||||
|       let position = { lng: 0, lat: 0 } | ||||
|       if (this.options.position) { | ||||
|         position = { ...this.options.position } | ||||
|       } | ||||
|       else if (this.options.positions) { | ||||
|         position = { ...this.options.positions[0] } | ||||
|       } | ||||
|       else if (this.options.center) { | ||||
|         position = { ...this.options.center } | ||||
|       } | ||||
|       else if (this.options.start) { | ||||
|         position = { ...this.options.start } | ||||
|       } | ||||
|       else { | ||||
|         if (this.options.hasOwnProperty('lng')) { | ||||
|           position.lng = this.options.lng | ||||
|         } | ||||
|         if (this.options.hasOwnProperty('lat')) { | ||||
|           position.lat = this.options.lat | ||||
|         } | ||||
|         if (this.options.hasOwnProperty('alt')) { | ||||
|           position.alt = this.options.alt | ||||
|         } | ||||
|       } | ||||
|       // 如果没有高度值,则获取紧贴高度计算 | ||||
|       // if (!position.hasOwnProperty('alt')) { | ||||
|       //   position.alt = await this.getClampToHeight(position) | ||||
|       // } | ||||
|       lng = this.options.customView.relativePosition.lng + position.lng | ||||
|       lat = this.options.customView.relativePosition.lat + position.lat | ||||
|       alt = this.options.customView.relativePosition.alt + position.alt | ||||
|       destination = Cesium.Cartesian3.fromDegrees(lng, lat, alt) | ||||
|       this.sdk.viewer.camera.flyTo({ | ||||
|         destination: destination, | ||||
|         orientation: orientation | ||||
|       }) | ||||
|     } | ||||
|     else { | ||||
|       let positionArray = [] | ||||
|       if (this.options.positions.length > 0) { | ||||
|         for (let i = 0; i < this.options.positions.length; i++) { | ||||
|           let a = Cesium.Cartesian3.fromDegrees( | ||||
|             this.options.positions[i].lng, | ||||
|             this.options.positions[i].lat, | ||||
|             this.options.positions[i].alt | ||||
|           ) | ||||
|           positionArray.push(a.x, a.y, a.z) | ||||
|         } | ||||
|         let BoundingSphere = Cesium.BoundingSphere.fromVertices(positionArray) | ||||
|         this.viewer.camera.flyToBoundingSphere(BoundingSphere, { | ||||
|           offset: { | ||||
|             heading: Cesium.Math.toRadians(0.0), | ||||
|             pitch: Cesium.Math.toRadians(-20.0), | ||||
|             roll: Cesium.Math.toRadians(0.0) | ||||
|           } | ||||
|         }) | ||||
|       } else if (this.options.positions.lng) { | ||||
|         let orientation = { | ||||
|           heading: Cesium.Math.toRadians(0.0), | ||||
|           pitch: Cesium.Math.toRadians(-60.0), | ||||
|           roll: Cesium.Math.toRadians(0.0) | ||||
|         } | ||||
|         this.sdk.viewer.camera.flyTo({ | ||||
|           destination: Cesium.Cartesian3.fromDegrees(this.options.positions.lng, this.options.positions.lat, this.options.positions.alt + 100), | ||||
|           // orientation: orientation | ||||
|         }) | ||||
|  | ||||
|       } | ||||
|  | ||||
|     } | ||||
|   } | ||||
|   /** | ||||
|    * 删除 | ||||
|    */ | ||||
|   async remove() { | ||||
|     for (let i = 0; i < this.pointArr.length; i++) { | ||||
|       this.pointArr[i].remove() | ||||
|     } | ||||
|  | ||||
|     this.pointArr = [] | ||||
|     this.positions = [] | ||||
|     this.entity = null | ||||
|  | ||||
|     if (this._DialogObject && !this._DialogObject.isDestroy) { | ||||
|       this._DialogObject.close() | ||||
|       this._DialogObject = null | ||||
|     } | ||||
|     await this.sdk.removeIncetance(this.options.id) | ||||
|     await syncData(this.sdk, this.options.id) | ||||
|   } | ||||
|  | ||||
|   flicker() { } | ||||
| } | ||||
|  | ||||
| export default BatchModel | ||||
| @ -181,7 +181,7 @@ class CircleDiffuse extends Base { | ||||
|       } | ||||
|       that.sdk._entityZIndex++ | ||||
|       if (that.sdk.viewer._element.className === 'cesium-viewer 2d') { | ||||
|         that.entity.ellipse.height = 1000000 | ||||
|         that.entity.ellipse.height = 1 | ||||
|       } | ||||
|       CircleDiffuse.createLabel(that) | ||||
|       syncData(that.sdk, that.options.id) | ||||
|  | ||||
| @ -333,7 +333,7 @@ class CircleObject extends Base { | ||||
|   } | ||||
|   set labelShow(v) { | ||||
|     this.options.label.show = v | ||||
|     if (this.show && (!this.showView || this.showView == 3)) { | ||||
|     if (this.show && !this.showView || this.showView == 3) { | ||||
|       this.label.show = v | ||||
|     } | ||||
|     else { | ||||
|  | ||||
| @ -65,7 +65,7 @@ function html(that) { | ||||
|                             <span class="label">线条颜色</span> | ||||
|                             <div class="color"></div> | ||||
|                         </div> | ||||
|                         <div class="col"> | ||||
|                         <div class="col" style="flex: 0 0 33%;"> | ||||
|                             <span class="label">线条宽度</span> | ||||
|                             <div class="input-number input-number-unit-1" style="width: 80px;"> | ||||
|                                 <input class="input" type="number" title="" min="1" max="999" @model="lineWidth"> | ||||
| @ -73,7 +73,7 @@ function html(that) { | ||||
|                                 <span class="arrow"></span> | ||||
|                             </div> | ||||
|                         </div> | ||||
|                         <div class="col input-select-line-type-box"> | ||||
|                         <div class="col input-select-line-type-box" style="flex: 0 0 37%;"> | ||||
|                             <span class="label">线条形式</span> | ||||
|                             <div class="input-select-line-type"></div> | ||||
|                         </div> | ||||
| @ -83,7 +83,7 @@ function html(that) { | ||||
|                             <span class="label">线段缓冲</span> | ||||
|                             <input class="btn-switch" type="checkbox" @model="extend"> | ||||
|                         </div> | ||||
|                         <div class="col"> | ||||
|                         <div class="col" style="flex: 0 0 33%;"> | ||||
|                             <span class="label">缓冲宽度</span> | ||||
|                             <div class="input-number input-number-unit-1" style="width: 80px;"> | ||||
|                                 <input class="input" type="number" title="" min="0" data-min="0.01" max="999999" @model="extendWidth"> | ||||
| @ -91,21 +91,43 @@ function html(that) { | ||||
|                                 <span class="arrow"></span> | ||||
|                             </div> | ||||
|                         </div> | ||||
|                         <div class="col"> | ||||
|                         <div class="col" style="flex: 0 0 37%;"> | ||||
|                             <span class="label">缓冲颜色</span> | ||||
|                             <div class="extendColor"></div> | ||||
|                         </div> | ||||
|                     </div> | ||||
|                     <div class="row" id="dashTextureDom"> | ||||
|                         <div class="col"> | ||||
|                             <span class="label">动画顺向</span> | ||||
|                             <input class="btn-switch" type="checkbox" @model="rotate"> | ||||
|                         </div> | ||||
|                         <div class="col" style="flex: 0 0 33%;"> | ||||
|                             <span class="label">流动速率</span> | ||||
|                             <div class="input-number input-number-unit-1" style="width: 80px;"> | ||||
|                                 <input class="input" type="number" title="" min="0" max="999999" step="1" @model="speed"> | ||||
|                                 <span class="arrow"></span> | ||||
|                             </div> | ||||
|                         </div> | ||||
|                         <div class="col" style="flex: 0 0 37%;"> | ||||
|                               <span class="label lineSpace">间距</span> | ||||
|                               <div class="input-number input-number-unit-1 lineSpace" style="width: 80px;"> | ||||
|                                   <input class="input" type="number" title="" min="0" max="4.5" step="0.1" @model="space"> | ||||
|                                   <span class="unit">倍</span> | ||||
|                                   <span class="arrow"></span> | ||||
|                               </div> | ||||
|                         </div> | ||||
|                     </div> | ||||
|                     <div class="row"> | ||||
|                         <div class="col"> | ||||
|                             <span class="label">首尾相连</span> | ||||
|                             <input class="btn-switch" type="checkbox" @model="noseToTail"> | ||||
|                         </div> | ||||
|                         <div class="col"> | ||||
|                         <div class="col" style="flex: 0 0 33%;"> | ||||
|                         </div> | ||||
|                         <div class="col"> | ||||
|                         <div class="col" style="flex: 0 0 37%;"> | ||||
|                         </div> | ||||
|                     </div> | ||||
|  | ||||
|                 </DIV-cy-tab-pane> | ||||
|                 <DIV-cy-tab-pane label="标注风格"> | ||||
|                     ${labelStyleElm1()} | ||||
|  | ||||
| @ -11,7 +11,7 @@ import LabelObject from '../LabelObject' | ||||
| import MouseEvent from '../../../Event/index' | ||||
| import MouseTip from '../../../MouseTip' | ||||
| import Controller from '../../../Controller/index' | ||||
| import { syncData } from '../../../Global/MultiViewportMode' | ||||
| import { syncData, get3DView } from '../../../Global/MultiViewportMode' | ||||
| import { legp } from '../../Element/datalist' | ||||
| import { getFontList, getFontFamilyName } from '../../Element/fontSelect' | ||||
| import { setSplitDirection, syncSplitData, setActiveId } from '../../../Global/SplitScreen' | ||||
| @ -56,6 +56,10 @@ class CurvelineObject extends Base { | ||||
|     this.options.type = options.type ? Number(options.type) : 0 | ||||
|     this.options['nose-to-tail'] = options['nose-to-tail'] || false | ||||
|     this.options.extend = options.extend || false | ||||
|     this.options.rotate = options.rotate || true | ||||
|     this.options.space = options.space || 1 | ||||
|     this.options.speed = options.speed || 10 | ||||
|     this.options.dashSize = options.dashSize || 0.03 | ||||
|     this.options['length-unit'] = options['length-unit'] || '米' | ||||
|     this.options['fit-length-unit'] = options['fit-length-unit'] || '米' | ||||
|     this.options['words-name'] = options['words-name'] || '空间长度' | ||||
| @ -118,6 +122,7 @@ class CurvelineObject extends Base { | ||||
|     this.operate = {} | ||||
|     this.nodePoints = [] | ||||
|     this.unitNum = 0 | ||||
|     this.inputSpeed = (options.speed && Math.pow(options.speed, -1) * 100) || 10 | ||||
|     this.Dialog = _Dialog | ||||
|     if (!this.options.positions || this.options.positions.length < 2) { | ||||
|       this._error = '线段最少需要两个坐标!' | ||||
| @ -146,7 +151,11 @@ class CurvelineObject extends Base { | ||||
|   } | ||||
|   set color(v) { | ||||
|     this.options.color = v || '#ff0000' | ||||
|     this.entity.polyline.material = this.getMaterial(v, this.options.type) | ||||
|     // this.entity.polyline.material = this.getMaterial(v, this.options.type) | ||||
|     let params = { ...this.options } | ||||
|     params.speed = this.inputSpeed | ||||
|     // this.entity.polyline.material = this.getMaterial(this.options.color, this.options.type, this.entity, this.options) | ||||
|     this.entity.polyline.material = this.getMaterial(this.options.color, this.options.type, this.entity, params) | ||||
|     if (this._elms.color) { | ||||
|       this._elms.color.forEach((item, i) => { | ||||
|         let colorPicker = new YJColorPicker({ | ||||
| @ -167,6 +176,58 @@ class CurvelineObject extends Base { | ||||
|       }) | ||||
|     } | ||||
|   } | ||||
|   get speed() { | ||||
|     return this.options.speed | ||||
|   } | ||||
|  | ||||
|   set speed(v) { | ||||
|     this.options.speed = v | ||||
|     // this.options.speed = v !== 0 ? Math.pow(v, -1) * 100 : 0 | ||||
|     this.inputSpeed = v !== 0 ? Math.pow(v, -1) * 100 : 0 | ||||
|     let params = { ...this.options } | ||||
|     params.speed = this.inputSpeed | ||||
|     // this.entity.polyline.material = this.getMaterial(this.options.color, this.options.type, this.entity, this.options) | ||||
|     this.entity.polyline.material = this.getMaterial(this.options.color, this.options.type, this.entity, params) | ||||
|   } | ||||
|   get dashSize() { | ||||
|     return this.options.dashSize | ||||
|   } | ||||
|  | ||||
|   set dashSize(v) { | ||||
|     this.options.dashSize = v | ||||
|     let params = { ...this.options } | ||||
|     params.speed = this.inputSpeed | ||||
|     // this.entity.polyline.material = this.getMaterial(this.options.color, this.options.type, this.entity, this.options) | ||||
|     this.entity.polyline.material = this.getMaterial(this.options.color, this.options.type, this.entity, params) | ||||
|   } | ||||
|  | ||||
|   get rotate() { | ||||
|     return this.options.rotate | ||||
|   } | ||||
|  | ||||
|   set rotate(v) { | ||||
|     this.options.rotate = v | ||||
|     CurvelineObject.closeNodeEdit(this) | ||||
|     this._elms.rotate && | ||||
|       this._elms.rotate.forEach(item => { | ||||
|         item.checked = v | ||||
|       }) | ||||
|  | ||||
|     this.options.rotate = v | ||||
|     this.entity.polyline.material = this.getMaterial(this.options.color, this.options.type, this.entity, this.options) | ||||
|   } | ||||
|  | ||||
|   get space() { | ||||
|     return this.options.space | ||||
|   } | ||||
|  | ||||
|   set space(v) { | ||||
|     this.options.space = v | ||||
|     let params = { ...this.options } | ||||
|     params.speed = this.inputSpeed | ||||
|     // this.entity.polyline.material = this.getMaterial(this.options.color, this.options.type, this.entity, this.options) | ||||
|     this.entity.polyline.material = this.getMaterial(this.options.color, this.options.type, this.entity, params) | ||||
|   } | ||||
|  | ||||
|   get length() { | ||||
|     return this.options.length | ||||
| @ -299,19 +360,82 @@ class CurvelineObject extends Base { | ||||
|   set lineType(v) { | ||||
|     let lineTypeData = [ | ||||
|       { | ||||
|         name: '实线', | ||||
|         name: '<i class="icon line"></i>实线', | ||||
|         value: '实线', | ||||
|         key: 0 | ||||
|         key: 0, | ||||
|         icon: 'line' | ||||
|       }, | ||||
|       { | ||||
|         name: '虚线', | ||||
|         name: '<i class="icon dash-line"></i>虚线', | ||||
|         value: '虚线', | ||||
|         key: 1 | ||||
|         key: 1, | ||||
|         icon: 'dash-line' | ||||
|       }, | ||||
|       { | ||||
|         name: '泛光', | ||||
|         name: '<i class="icon light-line"></i>泛光', | ||||
|         value: '泛光', | ||||
|         key: 2 | ||||
|         key: 2, | ||||
|         icon: 'light-line' | ||||
|       }, | ||||
|       { | ||||
|         name: '<i class="icon tail-line"></i>尾迹光线', | ||||
|         value: '尾迹光线', | ||||
|         key: 3, | ||||
|         icon: 'tail-line' | ||||
|       }, | ||||
|       { | ||||
|         name: '<i class="icon mult-tail-line"></i>多尾迹光线', | ||||
|         value: '多尾迹光线', | ||||
|         key: 4, | ||||
|         icon: 'mult-tail-line' | ||||
|       }, | ||||
|       { | ||||
|         name: '<i class="icon flow-dash-line1"></i>流动虚线1', | ||||
|         value: '流动虚线1', | ||||
|         key: 5, | ||||
|         icon: 'flow-dash-line1' | ||||
|       }, | ||||
|       { | ||||
|         name: '<i class="icon flow-dash-line2"></i>流动虚线2', | ||||
|         value: '流动虚线2', | ||||
|         key: 6, | ||||
|         icon: 'flow-dash-line2' | ||||
|       }, | ||||
|       { | ||||
|         name: '<i class="icon pic-line1"></i>流动箭头1', | ||||
|         value: '流动箭头1', | ||||
|         key: 7, | ||||
|         icon: 'pic-line1' | ||||
|       }, | ||||
|       { | ||||
|         name: '<i class="icon pic-line2"></i>流动箭头2', | ||||
|         value: '流动箭头2', | ||||
|         key: 8, | ||||
|         icon: 'pic-line2' | ||||
|       }, | ||||
|       { | ||||
|         name: '<i class="icon pic-line3"></i>流动箭头3', | ||||
|         value: '流动箭头3', | ||||
|         key: 9, | ||||
|         icon: 'pic-line3' | ||||
|       }, | ||||
|       { | ||||
|         name: '<i class="icon pic-line4"></i>流动箭头4', | ||||
|         value: '流动箭头4', | ||||
|         key: 10, | ||||
|         icon: 'pic-line4' | ||||
|       }, | ||||
|       { | ||||
|         name: '<i class="icon pic-line5"></i>流动箭头5', | ||||
|         value: '流动箭头5', | ||||
|         key: 11, | ||||
|         icon: 'pic-line5' | ||||
|       }, | ||||
|       { | ||||
|         name: '<i class="icon pic-line6"></i>流动箭头6', | ||||
|         value: '流动箭头6', | ||||
|         key: 12, | ||||
|         icon: 'pic-line6' | ||||
|       } | ||||
|     ] | ||||
|     this.options.type = Number(v) | ||||
| @ -320,15 +444,31 @@ class CurvelineObject extends Base { | ||||
|         this._elms.lineType && | ||||
|           this._elms.lineType.forEach(item => { | ||||
|             item.value = lineTypeData[i].value | ||||
|             if (2 < item.value && item.value < 13) {//贴图参数 | ||||
|               document.getElementById('dashTextureDom') && (document.getElementById('dashTextureDom').style.display = 'flex') | ||||
|             } else { | ||||
|               document.getElementById('dashTextureDom') && (document.getElementById('dashTextureDom').style.display = 'none') | ||||
|             } | ||||
|             if (2 < item.value && item.value < 5) {//尾迹参数 | ||||
|               document.getElementsByClassName('lineSpace')[0] && (document.getElementsByClassName('lineSpace')[0].style.display = 'none') | ||||
|               document.getElementsByClassName('lineSpace')[1] && (document.getElementsByClassName('lineSpace')[1].style.display = 'none') | ||||
|             } else { | ||||
|               document.getElementsByClassName('lineSpace')[0] && (document.getElementsByClassName('lineSpace')[0].style.display = 'flex') | ||||
|               document.getElementsByClassName('lineSpace')[1] && (document.getElementsByClassName('lineSpace')[1].style.display = 'flex') | ||||
|             } | ||||
|           }) | ||||
|         break | ||||
|       } | ||||
|     } | ||||
|     let params = { ...this.options } | ||||
|     params.speed = this.inputSpeed | ||||
|     this.entity && | ||||
|       this.entity.polyline && | ||||
|       (this.entity.polyline.material = this.getMaterial( | ||||
|         this.options.color, | ||||
|         this.options.type | ||||
|         this.options.type, | ||||
|         this.entity, | ||||
|         params | ||||
|       )) | ||||
|   } | ||||
|   get noseToTail() { | ||||
| @ -526,7 +666,7 @@ class CurvelineObject extends Base { | ||||
|   } | ||||
|   set labelShow(v) { | ||||
|     this.options.label.show = v | ||||
|     if (this.show) { | ||||
|     if (this.show && !this.showView || this.showView == 3) { | ||||
|       this.label.show = v | ||||
|       setTimeout(() => { | ||||
|         this.label.position = [ | ||||
| @ -1208,10 +1348,23 @@ class CurvelineObject extends Base { | ||||
|         positions: Cesium.Cartesian3.fromDegreesArrayHeights(fromDegreesArray), | ||||
|         width: that.options.width, | ||||
|         clampToGround: ground, | ||||
|         material: that.getMaterial(that.options.color, that.options.type), | ||||
|         // material: that.getMaterial(that.options.color, that.options.type), | ||||
|         zIndex: that.sdk._entityZIndex | ||||
|       } | ||||
|     }) | ||||
|  | ||||
|     that.entity.polyline.oriWidth = that.options.width | ||||
|     that.judgeLine(that.entity, that.options) | ||||
|  | ||||
|     let params = { ...that.options } | ||||
|     params.speed = that.inputSpeed | ||||
|     that.entity.polyline.material = that.getMaterial( | ||||
|       that.options.color, | ||||
|       that.options.type, | ||||
|       that.entity, | ||||
|       params | ||||
|     ) | ||||
|  | ||||
|     that.sdk._entityZIndex++ | ||||
|     CurvelineObject.createLabel(that) | ||||
|     // that.entity.polyline.positionsLngLat = positions | ||||
| @ -1231,10 +1384,10 @@ class CurvelineObject extends Base { | ||||
|       that.options.lengthByMeter = res | ||||
|       that.lengthUnit = that.options['length-unit'] | ||||
|       syncData(that.sdk, that.options.id) | ||||
|       if (that.options.show) { | ||||
|         setSplitDirection(0, that.options.id) | ||||
|       } | ||||
|     }) | ||||
|     if (that.options.show) { | ||||
|       setSplitDirection(0, that.options.id) | ||||
|     } | ||||
|  | ||||
|     // if (this.options['nose-to-tail']) { | ||||
|     //   let array = [] | ||||
| @ -1252,7 +1405,130 @@ class CurvelineObject extends Base { | ||||
|  | ||||
|     let scene = that.sdk.viewer.scene | ||||
|   } | ||||
|   judgeLine(entity, newParam) { | ||||
|     if (!entity.polyline.oriRepeat) { | ||||
|       let param = { | ||||
|         color: newParam.color, | ||||
|         image: this.getSourceRootPath() + `/img/arrow/1.png`, | ||||
|         space: newParam.space, | ||||
|         speed: newParam.speed | ||||
|       } | ||||
|  | ||||
|       param.speed = newParam.rotate ? param.speed : 0 - param.speed | ||||
|  | ||||
|       const canvasEle = document.createElement('canvas'); | ||||
|       const ctx = canvasEle.getContext('2d') | ||||
|       const myImg = new Image() | ||||
|       // myImg.src = that.getSourceRootPath() + '/img/arrow/1.png' | ||||
|       myImg.src = param.image | ||||
|       let that = this | ||||
|       myImg.onload = function () { | ||||
|         canvasEle.width = myImg.width * (param.space + 1) | ||||
|         canvasEle.height = myImg.height | ||||
|  | ||||
|         let oriRepeat = that.getSceenLine(entity, param, canvasEle) | ||||
|         oriRepeat && (entity.polyline.oriRepeat = oriRepeat) | ||||
|  | ||||
|  | ||||
|         var positionProperty = entity.polyline.positions; | ||||
|         var positions = positionProperty.getValue(that.sdk.viewer.clock.currentTime); | ||||
|  | ||||
|         if (!Cesium.defined(positions)) { | ||||
|           return new Cesium.Cartesian2(1.0, 1.0); | ||||
|           // return 1.0; | ||||
|         } | ||||
|  | ||||
|         var distance = 0; | ||||
|         for (var i = 0; i < positions.length - 1; ++i) { | ||||
|           distance += Cesium.Cartesian3.distance(positions[i], positions[i + 1]); | ||||
|         } | ||||
|  | ||||
|         var repeatX = distance / entity.polyline.width.getValue(); | ||||
|         // 根据地图缩放程度调整repeatX | ||||
|         var cameraHeight = that.sdk.viewer.camera.positionCartographic.height; | ||||
|         var boundingSphere = new Cesium.BoundingSphere( | ||||
|           new Cesium.Cartesian3(-1000000, 0, 0), // 中心点坐标 | ||||
|           500000 // 半径(距离) | ||||
|         ); | ||||
|  | ||||
|         // 获取绘图缓冲区的宽度和高度(通常是屏幕的分辨率) | ||||
|         var drawingBufferWidth = that.sdk.viewer.canvas.clientWidth; | ||||
|         var drawingBufferHeight = that.sdk.viewer.canvas.clientHeight; | ||||
|  | ||||
|         // 使用 getPixelSize 方法获取包围球在屏幕上的像素大小 | ||||
|         var groundResolution = that.sdk.viewer.scene.camera.getPixelSize(boundingSphere, drawingBufferWidth, drawingBufferHeight) | ||||
|         repeatX *= groundResolution / cameraHeight / (param.space * (canvasEle.width / canvasEle.height * 5) + 1); | ||||
|         // if (entity.polyline.material.oriRepeat) { | ||||
|  | ||||
|         if (that.sdk.viewer.scene.mode === Cesium.SceneMode.SCENE3D) { | ||||
|           let speed = repeatX / entity.polyline.oriRepeat | ||||
|           entity.polyline.oriSpeed = speed | ||||
|           entity.polyline.oriRepeatX = repeatX | ||||
|         } else { | ||||
|           let sdk3d = get3DView() | ||||
|           let sdk3dEntity = sdk3d.viewer.entities.getById(that.options.id) | ||||
|           entity.polyline.oriSpeed = sdk3dEntity.polyline.oriSpeed | ||||
|           entity.polyline.oriRepeatX = sdk3dEntity.polyline.oriRepeatX | ||||
|         } | ||||
|       } | ||||
|  | ||||
|     } | ||||
|   } | ||||
|   /**获取当前满屏横线速度 */ | ||||
|   getSceenLine(entity, options, canvasEle) { | ||||
|     let point1 = new Cesium.Cartesian2(0, this.sdk.viewer.canvas.clientHeight) | ||||
|     let point2 = new Cesium.Cartesian2(this.sdk.viewer.canvas.clientWidth / 2, this.sdk.viewer.canvas.clientHeight) | ||||
|     // var cartesian1 = this.sdk.viewer.scene.pickPosition(point1) | ||||
|     // var cartesian2 = this.sdk.viewer.scene.pickPosition(point2) | ||||
|  | ||||
|     let ray = this.sdk.viewer.camera.getPickRay(point1); | ||||
|     let cartesian1 = this.sdk.viewer.scene.globe.pick(ray, this.sdk.viewer.scene); | ||||
|  | ||||
|     let ray2 = this.sdk.viewer.camera.getPickRay(point2); | ||||
|     let cartesian2 = this.sdk.viewer.scene.globe.pick(ray2, this.sdk.viewer.scene); | ||||
|     // if (!cartesian1 || !cartesian2) { | ||||
|     //   let ray = this.sdk.viewer.camera.getPickRay(point1); | ||||
|     //   cartesian1 = this.sdk.viewer.scene.globe.pick(ray, this.sdk.viewer.scene); | ||||
|  | ||||
|     //   let ray2 = this.sdk.viewer.camera.getPickRay(point2); | ||||
|     //   cartesian2 = this.sdk.viewer.scene.globe.pick(ray2, this.sdk.viewer.scene); | ||||
|     // } | ||||
|     if (cartesian1 && cartesian2) { | ||||
|  | ||||
|  | ||||
|       var distance = Cesium.Cartesian3.distance(cartesian1, cartesian2); | ||||
|  | ||||
|       var repeatX = distance / entity.polyline.width.getValue(); | ||||
|       // 根据地图缩放程度调整repeatX | ||||
|       var cameraHeight = this.sdk.viewer.camera.positionCartographic.height; | ||||
|       var boundingSphere = new Cesium.BoundingSphere( | ||||
|         new Cesium.Cartesian3(-1000000, 0, 0), // 中心点坐标 | ||||
|         500000 // 半径(距离) | ||||
|       ); | ||||
|  | ||||
|  | ||||
|       // 获取绘图缓冲区的宽度和高度(通常是屏幕的分辨率) | ||||
|       var drawingBufferWidth = this.sdk.viewer.canvas.clientWidth; | ||||
|       var drawingBufferHeight = this.sdk.viewer.canvas.clientHeight; | ||||
|  | ||||
|       // 使用 getPixelSize 方法获取包围球在屏幕上的像素大小 | ||||
|       var groundResolution = this.sdk.viewer.scene.camera.getPixelSize(boundingSphere, drawingBufferWidth, drawingBufferHeight) | ||||
|       // repeatX *= groundResolution / cameraHeight / ((myImg.width / myImg.height * 5) + 1); | ||||
|       if (groundResolution > 700) { | ||||
|         repeatX *= groundResolution / cameraHeight / (options.space * (canvasEle.width / canvasEle.height * 5) + 1); | ||||
|       } else { | ||||
|         repeatX = undefined; | ||||
|       } | ||||
|  | ||||
|       if (this.sdk.viewer.scene.mode === Cesium.SceneMode.SCENE3D) { | ||||
|         return repeatX | ||||
|       } else { | ||||
|         let sdk3d = get3DView() | ||||
|         let sdk3dEntity = sdk3d.viewer.entities.getById(this.options.id) | ||||
|         return sdk3dEntity.polyline.oriRepeatX | ||||
|       } | ||||
|     } | ||||
|   } | ||||
|   /** | ||||
|    * 编辑框 | ||||
|    * @param {boolean} state true打开,false关闭 | ||||
| @ -1327,6 +1603,15 @@ class CurvelineObject extends Base { | ||||
|       this.attributeType = this.options.attributeType | ||||
|       // this.attributeCamera = this.options.attribute.camera.content | ||||
|       // this.attributeGoods = this.options.attribute.goods.content | ||||
|       function tabClick(e) { | ||||
|         if (e === '2' || e === 2) {//点击线条样式 | ||||
|           if (2 < _this.options.type && _this.options.type < 13) {//贴图参数 | ||||
|             document.getElementById('dashTextureDom') && (document.getElementById('dashTextureDom').style.display = 'flex') | ||||
|           } else { | ||||
|             document.getElementById('dashTextureDom') && (document.getElementById('dashTextureDom').style.display = 'none') | ||||
|           } | ||||
|         } | ||||
|       } | ||||
|  | ||||
|       // 创建标签页 | ||||
|       let tabsElm = new cy_tabs( | ||||
| @ -1590,19 +1875,82 @@ class CurvelineObject extends Base { | ||||
|  | ||||
|         let lineTypeData = [ | ||||
|           { | ||||
|             name: '实线', | ||||
|             name: '<i class="icon line"></i>实线', | ||||
|             value: '实线', | ||||
|             key: 0 | ||||
|             key: 0, | ||||
|             icon: 'line' | ||||
|           }, | ||||
|           { | ||||
|             name: '虚线', | ||||
|             name: '<i class="icon dash-line"></i>虚线', | ||||
|             value: '虚线', | ||||
|             key: 1 | ||||
|             key: 1, | ||||
|             icon: 'dash-line' | ||||
|           }, | ||||
|           { | ||||
|             name: '泛光', | ||||
|             name: '<i class="icon light-line"></i>泛光', | ||||
|             value: '泛光', | ||||
|             key: 2 | ||||
|             key: 2, | ||||
|             icon: 'light-line' | ||||
|           }, | ||||
|           { | ||||
|             name: '<i class="icon tail-line"></i>尾迹光线', | ||||
|             value: '尾迹光线', | ||||
|             key: 3, | ||||
|             icon: 'tail-line' | ||||
|           }, | ||||
|           { | ||||
|             name: '<i class="icon mult-tail-line"></i>多尾迹光线', | ||||
|             value: '多尾迹光线', | ||||
|             key: 4, | ||||
|             icon: 'mult-tail-line' | ||||
|           }, | ||||
|           { | ||||
|             name: '<i class="icon flow-dash-line1"></i>流动虚线1', | ||||
|             value: '流动虚线1', | ||||
|             key: 5, | ||||
|             icon: 'flow-dash-line1' | ||||
|           }, | ||||
|           { | ||||
|             name: '<i class="icon flow-dash-line2"></i>流动虚线2', | ||||
|             value: '流动虚线2', | ||||
|             key: 6, | ||||
|             icon: 'flow-dash-line2' | ||||
|           }, | ||||
|           { | ||||
|             name: '<i class="icon pic-line1"></i>流动箭头1', | ||||
|             value: '流动箭头1', | ||||
|             key: 7, | ||||
|             icon: 'pic-line1' | ||||
|           }, | ||||
|           { | ||||
|             name: '<i class="icon pic-line2"></i>流动箭头2', | ||||
|             value: '流动箭头2', | ||||
|             key: 8, | ||||
|             icon: 'pic-line2' | ||||
|           }, | ||||
|           { | ||||
|             name: '<i class="icon pic-line3"></i>流动箭头3', | ||||
|             value: '流动箭头3', | ||||
|             key: 9, | ||||
|             icon: 'pic-line3' | ||||
|           }, | ||||
|           { | ||||
|             name: '<i class="icon pic-line4"></i>流动箭头4', | ||||
|             value: '流动箭头4', | ||||
|             key: 10, | ||||
|             icon: 'pic-line4' | ||||
|           }, | ||||
|           { | ||||
|             name: '<i class="icon pic-line5"></i>流动箭头5', | ||||
|             value: '流动箭头5', | ||||
|             key: 11, | ||||
|             icon: 'pic-line5' | ||||
|           }, | ||||
|           { | ||||
|             name: '<i class="icon pic-line6"></i>流动箭头6', | ||||
|             value: '流动箭头6', | ||||
|             key: 12, | ||||
|             icon: 'pic-line6' | ||||
|           } | ||||
|         ] | ||||
|         let lineTypeDataLegpObject = legp( | ||||
| @ -1613,6 +1961,11 @@ class CurvelineObject extends Base { | ||||
|         ) | ||||
|         if (lineTypeDataLegpObject) { | ||||
|           lineTypeDataLegpObject.legp_search(lineTypeData) | ||||
|  | ||||
|           let iActiveElm2 = document.createElement('i') | ||||
|           iActiveElm2.className = 'icon icon-active' | ||||
|           this._DialogObject._element.content.getElementsByClassName('input-select-line-type')[0].getElementsByClassName('cy_datalist')[0].appendChild(iActiveElm2) | ||||
|  | ||||
|           let lineTypeDataLegpElm = this._DialogObject._element.content | ||||
|             .getElementsByClassName('input-select-line-type')[0] | ||||
|             .getElementsByTagName('input')[0] | ||||
| @ -1621,6 +1974,7 @@ class CurvelineObject extends Base { | ||||
|             if (lineTypeData[i].key === this.options.type) { | ||||
|               lineTypeDataLegpObject.legp_searchActive(lineTypeData[i].value) | ||||
|               lineTypeDataLegpElm.value = lineTypeData[i].value | ||||
|               iActiveElm2.className = `icon icon-active ${lineTypeData[i].icon}` | ||||
|               break | ||||
|             } | ||||
|           } | ||||
| @ -1628,6 +1982,21 @@ class CurvelineObject extends Base { | ||||
|             for (let i = 0; i < lineTypeData.length; i++) { | ||||
|               if (lineTypeData[i].value === lineTypeDataLegpElm.value) { | ||||
|                 this.lineType = lineTypeData[i].key | ||||
|                 iActiveElm2.className = `icon icon-active ${lineTypeData[i].icon}` | ||||
|  | ||||
|                 //控制参数显隐 | ||||
|                 if (2 < this.lineType && this.lineType < 13) {//贴图参数 | ||||
|                   document.getElementById('dashTextureDom') && (document.getElementById('dashTextureDom').style.display = 'flex') | ||||
|                 } else { | ||||
|                   document.getElementById('dashTextureDom') && (document.getElementById('dashTextureDom').style.display = 'none') | ||||
|                 } | ||||
|                 if (2 < this.lineType && this.lineType < 5) {//尾迹参数 | ||||
|                   document.getElementsByClassName('lineSpace')[0] && (document.getElementsByClassName('lineSpace')[0].style.display = 'none') | ||||
|                   document.getElementsByClassName('lineSpace')[1] && (document.getElementsByClassName('lineSpace')[1].style.display = 'none') | ||||
|                 } else { | ||||
|                   document.getElementsByClassName('lineSpace')[0] && (document.getElementsByClassName('lineSpace')[0].style.display = 'flex') | ||||
|                   document.getElementsByClassName('lineSpace')[1] && (document.getElementsByClassName('lineSpace')[1].style.display = 'flex') | ||||
|                 } | ||||
|                 break | ||||
|               } | ||||
|             } | ||||
| @ -2111,6 +2480,10 @@ class CurvelineObject extends Base { | ||||
|     this.attributeVr = this.options.attribute.vr.content | ||||
|     this.attributeCamera = this.options.attribute.camera.content | ||||
|     this.attributeGoods = this.options.attribute.goods.content | ||||
|     this.rotate = this.originalOptions.rotate | ||||
|     this.speed = this.originalOptions.speed | ||||
|     this.dashSize = this.originalOptions.dashSize | ||||
|     this.space = this.originalOptions.space | ||||
|     this.cameraSelect && this.cameraSelect() | ||||
|     this.goodsSelect && this.goodsSelect() | ||||
|  | ||||
|  | ||||
| @ -347,7 +347,7 @@ class EllipseObject extends Base { | ||||
|   } | ||||
|   set labelShow(v) { | ||||
|     this.options.label.show = v | ||||
|     if (this.show) { | ||||
|     if (this.show && !this.showView || this.showView == 3) { | ||||
|       this.label.show = v | ||||
|     } | ||||
|     else { | ||||
|  | ||||
| @ -162,6 +162,7 @@ class FlyRoam extends Base { | ||||
|           pitch: viewer.camera.pitch, | ||||
|           roll: viewer.camera.roll | ||||
|         } | ||||
|         this.message({text: '操作成功'}) | ||||
|       }) | ||||
|  | ||||
|       let totalTimeElm = contentElm.querySelector("input[name='totalTime']") | ||||
|  | ||||
| @ -116,42 +116,45 @@ class GroundImage extends Base { | ||||
|         break | ||||
|       } | ||||
|     } | ||||
|     let elms = this._DialogObject._element.body.getElementsByClassName('row') | ||||
|     let elms2 = this._DialogObject._element.foot.getElementsByTagName('button') | ||||
|     let elms3 = this._DialogObject._element.foot.getElementsByTagName('h4') | ||||
|     for (let i = 0; i < elms.length; i++) { | ||||
|       let mode = elms[i].getAttribute('mode') | ||||
|       if (mode !== null) { | ||||
|         if (mode == this.options.mode) { | ||||
|           elms[i].style.display = 'flex' | ||||
|     if (this._DialogObject && this._DialogObject._element && this._DialogObject._element.body) { | ||||
|       let elms = this._DialogObject._element.body.getElementsByClassName('row') | ||||
|       let elms2 = this._DialogObject._element.foot.getElementsByTagName('button') | ||||
|       let elms3 = this._DialogObject._element.foot.getElementsByTagName('h4') | ||||
|       for (let i = 0; i < elms.length; i++) { | ||||
|         let mode = elms[i].getAttribute('mode') | ||||
|         if (mode !== null) { | ||||
|           if (mode == this.options.mode) { | ||||
|             elms[i].style.display = 'flex' | ||||
|           } | ||||
|           else { | ||||
|             elms[i].style.display = 'none' | ||||
|           } | ||||
|         } | ||||
|         else { | ||||
|           elms[i].style.display = 'none' | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|     for (let i = 0; i < elms2.length; i++) { | ||||
|       let mode = elms2[i].getAttribute('mode') | ||||
|       if (mode !== null) { | ||||
|         if (mode == this.options.mode) { | ||||
|           elms2[i].style.display = 'block' | ||||
|         } | ||||
|         else { | ||||
|           elms2[i].style.display = 'none' | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|     for (let i = 0; i < elms3.length; i++) { | ||||
|       let mode = elms3[i].getAttribute('mode') | ||||
|       if (mode !== null) { | ||||
|         if (mode == this.options.mode) { | ||||
|           elms3[i].style.display = 'block' | ||||
|         } | ||||
|         else { | ||||
|           elms3[i].style.display = 'none' | ||||
|       } | ||||
|       for (let i = 0; i < elms2.length; i++) { | ||||
|         let mode = elms2[i].getAttribute('mode') | ||||
|         if (mode !== null) { | ||||
|           if (mode == this.options.mode) { | ||||
|             elms2[i].style.display = 'block' | ||||
|           } | ||||
|           else { | ||||
|             elms2[i].style.display = 'none' | ||||
|           } | ||||
|         } | ||||
|       } | ||||
|       for (let i = 0; i < elms3.length; i++) { | ||||
|         let mode = elms3[i].getAttribute('mode') | ||||
|         if (mode !== null) { | ||||
|           if (mode == this.options.mode) { | ||||
|             elms3[i].style.display = 'block' | ||||
|           } | ||||
|           else { | ||||
|             elms3[i].style.display = 'none' | ||||
|           } | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|  | ||||
|     const img = new Image(); | ||||
|     img.crossOrigin = 'Anonymous'; | ||||
|     img.src = this.replaceHost(this.options.url, this.options.host); | ||||
| @ -1947,6 +1950,10 @@ class GroundImage extends Base { | ||||
|     this.flipeX = this.options.flipe.x | ||||
|     this.flipeY = this.options.flipe.y | ||||
|     this.show = this.options.show | ||||
|     this.mode = this.options.mode | ||||
|     this.heightMode = this.options.heightMode | ||||
|     this.billboardScale = this.options.billboard.scale | ||||
|     this.labelShow = this.options.label.show | ||||
|   } | ||||
|  | ||||
|   async remove() { | ||||
|  | ||||
| @ -17,6 +17,18 @@ function html(that) { | ||||
|     </div> | ||||
|     <span class="custom-divider"></span> | ||||
|     <div class="div-item"> | ||||
|         <div class="row"> | ||||
|             <div class="col" mode="0"> | ||||
|                 <button class="anchor btn">调整锚点</button> | ||||
|             </div> | ||||
|             <div class="col mode-box"> | ||||
|                 <span class="label" style="flex: unset;">军标模式</span> | ||||
|                 <div class="mode"></div> | ||||
|             </div> | ||||
|         </div> | ||||
|     </div> | ||||
|     <span class="custom-divider" mode="0"></span> | ||||
|     <div class="div-item" mode="0"> | ||||
|         <div class="row"> | ||||
|             <div class="col"> | ||||
|                 <span class="label">旋转角度</span> | ||||
| @ -50,7 +62,7 @@ function html(that) { | ||||
|         </div> | ||||
|     </div> | ||||
|     <span class="custom-divider"></span> | ||||
|     <div class="div-item"> | ||||
|     <div class="div-item" mode="0"> | ||||
|         <div class="row"> | ||||
|             <div class="col" style="flex: 5;"> | ||||
|                 <span class="label">文字内容</span> | ||||
| @ -70,9 +82,9 @@ function html(that) { | ||||
|                 <div class="textColor"></div> | ||||
|             </div> | ||||
|             <div class="col"> | ||||
|                 <span class="label">字体大小</span> | ||||
|                 <span class="label">文字大小</span> | ||||
|                 <div class="input-number input-number-unit-2"> | ||||
|                     <input class="input" type="number" title="" min="1" max="99" @model="textFontSize"> | ||||
|                     <input class="input" type="number" title="" min="1" max="99" step="1" @model="textFontSize"> | ||||
|                     <span class="unit">px</span> | ||||
|                     <span class="arrow"></span> | ||||
|                 </div> | ||||
| @ -101,6 +113,98 @@ function html(that) { | ||||
|             </div> | ||||
|         </div> | ||||
|     </div> | ||||
|     <div class="div-item" mode="1"> | ||||
|         <div class="row"> | ||||
|             <div class="col height-mode-box" style="flex: 0 0 155px;margin-right: 10px;"> | ||||
|                 <span class="label" style="flex: 0 0 56px;">高度模式</span> | ||||
|                 <div class="height-mode"></div> | ||||
|             </div> | ||||
|             <div class="col" style="margin: 0 10px;"> | ||||
|                 <div class="height-box" style="display: flex; align-items: center;"> | ||||
|                     <span class="label" style="flex: 0 0 56px;">高度</span> | ||||
|                     <div class="input-number input-number-unit-1"> | ||||
|                         <input class="input height" type="number" title="" min="-9999999" max="999999999"> | ||||
|                         <span class="unit">m</span> | ||||
|                         <span class="arrow"></span> | ||||
|                     </div> | ||||
|                 </div> | ||||
|             </div> | ||||
|             <div class="col" style="margin-left: 10px;"> | ||||
|                 <span class="label">图标倍数</span> | ||||
|                 <div class="input-number input-number-unit-1"> | ||||
|                     <input class="input" type="number" title="" data-min="0.1" max="99" @model="billboardScale"> | ||||
|                     <span class="unit">倍</span> | ||||
|                     <span class="arrow"></span> | ||||
|                 </div> | ||||
|             </div> | ||||
|         </div> | ||||
|         <div class="row"> | ||||
|             <div class="col" style="flex: 0 0 155px;margin-right: 10px;"> | ||||
|                 <span class="label">视野缩放</span> | ||||
|                 <input class="btn-switch" type="checkbox" @model="billboardScaleByDistance"> | ||||
|             </div> | ||||
|             <div class="col" style="margin: 0 10px;"> | ||||
|                 <span class="label">最近距离</span> | ||||
|                 <div class="input-number input-number-unit-1"> | ||||
|                     <input class="input" type="number" title="" min="1" max="99999999" @model="billboardNear"> | ||||
|                     <span class="unit">m</span> | ||||
|                     <span class="arrow"></span> | ||||
|                 </div> | ||||
|             </div> | ||||
|             <div class="col" style="margin-left: 10px;"> | ||||
|                 <span class="label">最远距离</span> | ||||
|                 <div class="input-number input-number-unit-1"> | ||||
|                     <input class="input" type="number" title="" min="1" max="99999999" @model="billboardFar"> | ||||
|                     <span class="unit">m</span> | ||||
|                     <span class="arrow"></span> | ||||
|                 </div> | ||||
|             </div> | ||||
|         </div> | ||||
|         <h4>文字设置</h4> | ||||
|         <div class="row"> | ||||
|             <div class="col" style="flex: 0 0 80px;margin: 0 10px 0 0;;"> | ||||
|                 <span class="label" style="flex: none;">显隐</span> | ||||
|                 <input class="btn-switch" type="checkbox" @model="labelShow"> | ||||
|             </div> | ||||
|             <div class="col font-select-box" style="margin: 0 0px;flex: 0 0 160px;"> | ||||
|                 <span class="label" style="flex: none;">字体选择</span> | ||||
|                 <div class="input input-select font-select"></div> | ||||
|             </div> | ||||
|             <div class="col" style="margin: 0 10px;"> | ||||
|                 <span class="label">文字大小</span> | ||||
|                 <div class="input-number input-number-unit-2"> | ||||
|                     <input class="input label-font-size" type="number" title="" min="1" max="99" step="1" style="width: 70px;"> | ||||
|                     <span class="unit">px</span> | ||||
|                     <span class="arrow"></span> | ||||
|                 </div> | ||||
|             </div> | ||||
|             <div class="col" style="margin-left: 10px;"> | ||||
|                 <span class="label">文字颜色</span> | ||||
|                 <div class="labelColor"></div> | ||||
|             </div> | ||||
|         </div> | ||||
|         <div class="row" style="justify-content: flex-start;"> | ||||
|             <div class="col font-select-box" style="margin: 0 0px;flex: 0 0 70px;"> | ||||
|                 <span class="label" style="flex: none;">文字偏移</span> | ||||
|             </div> | ||||
|             <div class="col" style="margin: 0 10px;flex: 0 0 100px;"> | ||||
|                 <span class="label">x</span> | ||||
|                 <div class="input-number input-number-unit-2"> | ||||
|                     <input class="input label-offset-x" type="number" title="" min="-999" max="999" step="1"> | ||||
|                     <span class="unit">px</span> | ||||
|                     <span class="arrow"></span> | ||||
|                 </div> | ||||
|             </div> | ||||
|             <div class="col" style="margin: 0 10px;flex: 0 0 100px;"> | ||||
|                 <span class="label">y</span> | ||||
|                 <div class="input-number input-number-unit-2"> | ||||
|                     <input class="input label-offset-y" type="number" title="" min="-999" max="999" step="1"> | ||||
|                     <span class="unit">px</span> | ||||
|                     <span class="arrow"></span> | ||||
|                 </div> | ||||
|             </div> | ||||
|         </div> | ||||
|     </div> | ||||
|     <span class="custom-divider"></span> | ||||
|     <div class="div-item attribute-info"> | ||||
|         <div class="row"> | ||||
|  | ||||
										
											
												File diff suppressed because it is too large
												Load Diff
											
										
									
								
							| @ -14,6 +14,8 @@ import { | ||||
|  | ||||
| class LabelObject extends Base { | ||||
|   #updateBillboardImageTimeout | ||||
|   #canvas = document.createElement('canvas') | ||||
|   #canvas2 = document.createElement('canvas') | ||||
|   constructor(sdk, options = {}, model) { | ||||
|     super(sdk, options) | ||||
|     this.model = model | ||||
| @ -438,11 +440,12 @@ class LabelObject extends Base { | ||||
|     this.updateBillboardImage() | ||||
|   } | ||||
|   updateBillboardImage() { | ||||
|     clearTimeout(this.#updateBillboardImageTimeout) | ||||
|     this.#updateBillboardImageTimeout = setTimeout(() => { | ||||
|       clearTimeout(this.#updateBillboardImageTimeout) | ||||
|       this.entity && (this.entity.billboard.image = this.getcanvas()) | ||||
|     }, 500) | ||||
|     this.entity.billboard.image = this.getcanvas() | ||||
|     // clearTimeout(this.#updateBillboardImageTimeout) | ||||
|     // this.#updateBillboardImageTimeout = setTimeout(() => { | ||||
|     //   clearTimeout(this.#updateBillboardImageTimeout) | ||||
|     //   this.entity.billboard.image = this.getcanvas() | ||||
|     // }, 500) | ||||
|   } | ||||
|   get lineColor() { | ||||
|     return this.options.pixelOffset | ||||
| @ -489,9 +492,8 @@ class LabelObject extends Base { | ||||
|   // } | ||||
|  | ||||
|   getcanvas() { | ||||
|     const canvas = document.createElement('canvas') | ||||
|     const ctx = canvas.getContext('2d') | ||||
|  | ||||
|     const ctx = this.#canvas.getContext('2d') | ||||
|     ctx.clearRect(0, 0, this.#canvas.width, this.#canvas.height); | ||||
|     ctx.font = this.options.fontSize + 'px ' + this.font | ||||
|     let texts = this.options.text.split('\n') | ||||
|     let canvasWidth = 0 | ||||
| @ -509,9 +511,8 @@ class LabelObject extends Base { | ||||
|     if (canvasWidth < this.options.lineWidth) { | ||||
|       canvasWidth = this.options.lineWidth | ||||
|     } | ||||
|     canvas.width = canvasWidth | ||||
|  | ||||
|     canvas.height = this.options.pixelOffset + canvasHeight | ||||
|     this.#canvas.width = canvasWidth | ||||
|     this.#canvas.height = this.options.pixelOffset + canvasHeight | ||||
|     const linearGradient = ctx.createLinearGradient( | ||||
|       0, | ||||
|       0, | ||||
| @ -558,15 +559,14 @@ class LabelObject extends Base { | ||||
|     ctx.stroke() | ||||
|     ctx.closePath() | ||||
|  | ||||
|     const canvas2 = document.createElement('canvas') | ||||
|     const ctx2 = canvas2.getContext('2d') | ||||
|     canvas2.width = canvas.width + 10 | ||||
|     canvas2.height = canvas.height + 10 | ||||
|     ctx2.drawImage(canvas, 5, 5); | ||||
|     const ctx2 = this.#canvas2.getContext('2d') | ||||
|     this.#canvas2.width = this.#canvas.width + 10 | ||||
|     this.#canvas2.height = this.#canvas.height + 10 | ||||
|     ctx2.drawImage(this.#canvas, 5, 5); | ||||
|  | ||||
|     // const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); | ||||
|     // ctx.putImageData(imageData, 40, 40); | ||||
|     return canvas2 | ||||
|     return this.#canvas2.toDataURL("image/png") | ||||
|   } | ||||
|  | ||||
|   remove() { | ||||
|  | ||||
| @ -334,7 +334,7 @@ class PincerArrowObject extends Base { | ||||
|   } | ||||
|   set labelShow(v) { | ||||
|     this.options.label.show = v | ||||
|     if (this.show) { | ||||
|     if (this.show && !this.showView || this.showView == 3) { | ||||
|       this.label.show = v | ||||
|     } | ||||
|     else { | ||||
|  | ||||
| @ -355,7 +355,7 @@ class PolygonObject extends Base { | ||||
|   } | ||||
|   set labelShow(v) { | ||||
|     this.options.label.show = v | ||||
|     if (this.show) { | ||||
|     if (this.show && !this.showView || this.showView == 3) { | ||||
|       this.label.show = v | ||||
|     } else { | ||||
|       this.label.show = false | ||||
|  | ||||
| @ -517,7 +517,7 @@ class PolyhedronObject extends Base { | ||||
|   } | ||||
|   set labelShow(v) { | ||||
|     this.options.label.show = v | ||||
|     if (this.show) { | ||||
|     if (this.show && !this.showView || this.showView == 3) { | ||||
|       this.label.show = v | ||||
|     } | ||||
|     else { | ||||
|  | ||||
| @ -125,6 +125,7 @@ class PolylineObject extends Base { | ||||
|     this.operate = {} | ||||
|     this.nodePoints = [] | ||||
|     this.unitNum = 0 | ||||
|     this.inputSpeed = (options.speed && Math.pow(options.speed, -1) * 100) || 10 | ||||
|     this.Dialog = _Dialog | ||||
|     if (!this.options.positions || this.options.positions.length < 2) { | ||||
|       this._error = '线段最少需要两个坐标!' | ||||
| @ -153,7 +154,10 @@ class PolylineObject extends Base { | ||||
|   } | ||||
|   set color(v) { | ||||
|     this.options.color = v || '#ff0000' | ||||
|     this.entity.polyline.material = this.getMaterial(this.options.color, this.options.type, this.entity, this.options) | ||||
|     let params = { ...this.options } | ||||
|     params.speed = this.inputSpeed | ||||
|     // this.entity.polyline.material = this.getMaterial(this.options.color, this.options.type, this.entity, this.options) | ||||
|     this.entity.polyline.material = this.getMaterial(this.options.color, this.options.type, this.entity, params) | ||||
|     if (this._elms.color) { | ||||
|       this._elms.color.forEach((item, i) => { | ||||
|         let colorPicker = new YJColorPicker({ | ||||
| @ -180,9 +184,13 @@ class PolylineObject extends Base { | ||||
|   } | ||||
|  | ||||
|   set speed(v) { | ||||
|     // this.options.speed = v | ||||
|     this.options.speed = v !== 0 ? Math.pow(v, -1) * 100 : 0 | ||||
|     this.entity.polyline.material = this.getMaterial(this.options.color, this.options.type, this.entity, this.options) | ||||
|     this.options.speed = v | ||||
|     this.inputSpeed = v !== 0 ? Math.pow(v, -1) * 100 : 0 | ||||
|     let params = { ...this.options } | ||||
|     params.speed = this.inputSpeed | ||||
|     // this.options.speed = v !== 0 ? Math.pow(v, -1) * 100 : 0 | ||||
|     // this.entity.polyline.material = this.getMaterial(this.options.color, this.options.type, this.entity, this.options) | ||||
|     this.entity.polyline.material = this.getMaterial(this.options.color, this.options.type, this.entity, params) | ||||
|   } | ||||
|   get dashSize() { | ||||
|     return this.options.dashSize | ||||
| @ -190,7 +198,10 @@ class PolylineObject extends Base { | ||||
|  | ||||
|   set dashSize(v) { | ||||
|     this.options.dashSize = v | ||||
|     this.entity.polyline.material = this.getMaterial(this.options.color, this.options.type, this.entity, this.options) | ||||
|     let params = { ...this.options } | ||||
|     params.speed = this.inputSpeed | ||||
|     // this.entity.polyline.material = this.getMaterial(this.options.color, this.options.type, this.entity, this.options) | ||||
|     this.entity.polyline.material = this.getMaterial(this.options.color, this.options.type, this.entity, params) | ||||
|   } | ||||
|  | ||||
|   get rotate() { | ||||
| @ -206,7 +217,10 @@ class PolylineObject extends Base { | ||||
|       }) | ||||
|  | ||||
|     this.options.rotate = v | ||||
|     this.entity.polyline.material = this.getMaterial(this.options.color, this.options.type, this.entity, this.options) | ||||
|     let params = { ...this.options } | ||||
|     params.speed = this.inputSpeed | ||||
|     // this.entity.polyline.material = this.getMaterial(this.options.color, this.options.type, this.entity, this.options) | ||||
|     this.entity.polyline.material = this.getMaterial(this.options.color, this.options.type, this.entity, params) | ||||
|   } | ||||
|  | ||||
|   get space() { | ||||
| @ -215,7 +229,10 @@ class PolylineObject extends Base { | ||||
|  | ||||
|   set space(v) { | ||||
|     this.options.space = v | ||||
|     this.entity.polyline.material = this.getMaterial(this.options.color, this.options.type, this.entity, this.options) | ||||
|     let params = { ...this.options } | ||||
|     params.speed = this.inputSpeed | ||||
|     // this.entity.polyline.material = this.getMaterial(this.options.color, this.options.type, this.entity, this.options) | ||||
|     this.entity.polyline.material = this.getMaterial(this.options.color, this.options.type, this.entity, params) | ||||
|   } | ||||
|  | ||||
|   get length() { | ||||
| @ -458,13 +475,15 @@ class PolylineObject extends Base { | ||||
|         break | ||||
|       } | ||||
|     } | ||||
|     let params = { ...this.options } | ||||
|     params.speed = this.inputSpeed | ||||
|     this.entity && | ||||
|       this.entity.polyline && | ||||
|       (this.entity.polyline.material = this.getMaterial( | ||||
|         this.options.color, | ||||
|         this.options.type, | ||||
|         this.entity, | ||||
|         this.options | ||||
|         params | ||||
|       )) | ||||
|   } | ||||
|   get noseToTail() { | ||||
| @ -682,7 +701,7 @@ class PolylineObject extends Base { | ||||
|   } | ||||
|   set labelShow(v) { | ||||
|     this.options.label.show = v | ||||
|     if (this.show) { | ||||
|     if (this.show && !this.showView || this.showView == 3) { | ||||
|       this.label.show = v | ||||
|       setTimeout(() => { | ||||
|         this.label.position = [ | ||||
| @ -825,7 +844,6 @@ class PolylineObject extends Base { | ||||
|   set labelLineColor(v) { | ||||
|     this.options.label.lineColor = v | ||||
|     this.label.lineColor = v | ||||
|     let _this = this | ||||
|     if (this._elms.labelLineColor) { | ||||
|       this._elms.labelLineColor.forEach((item, i) => { | ||||
|         let lineColorPicker = new YJColorPicker({ | ||||
| @ -840,6 +858,29 @@ class PolylineObject extends Base { | ||||
|           }, //点击确认按钮事件回调 | ||||
|           clear: () => { | ||||
|             this.labelLineColor = 'rgba(0,255,255,0.5)' | ||||
|           } //点击清空按钮事件回调 | ||||
|         }) | ||||
|         this._elms.labelLineColor[i] = lineColorPicker | ||||
|       }) | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   get labelBackgroundColorStart() { | ||||
|     return this.options.label.backgroundColor[0] | ||||
|   } | ||||
|   set labelBackgroundColorStart(v) { | ||||
|     this.options.label.backgroundColor[0] = v | ||||
|     this.label.backgroundColor = [v, this.label.backgroundColor[1]] | ||||
|     if (this._elms.labelBackgroundColorStart) { | ||||
|       this._elms.labelBackgroundColorStart.forEach((item, i) => { | ||||
|         let labelBackgroundColorStartPicker = new YJColorPicker({ | ||||
|           el: item.el, | ||||
|           size: 'mini', //颜色box类型 | ||||
|           alpha: true, //是否开启透明度 | ||||
|           defaultColor: this.labelBackgroundColorStart, | ||||
|           disabled: false, //是否禁止打开颜色选择器 | ||||
|           openPickerAni: 'opacity', //打开颜色选择器动画 | ||||
|           sure: color => { | ||||
|             this.labelBackgroundColorStart = color | ||||
|           }, //点击确认按钮事件回调 | ||||
|           clear: () => { | ||||
| @ -848,10 +889,11 @@ class PolylineObject extends Base { | ||||
|         }) | ||||
|         this._elms.labelBackgroundColorStart[ | ||||
|           i | ||||
|         ] = _this.labelBackgroundColorStartPicker | ||||
|         ] = labelBackgroundColorStartPicker | ||||
|       }) | ||||
|     } | ||||
|   } | ||||
|    | ||||
|   get labelBackgroundColorEnd() { | ||||
|     return this.options.label.backgroundColor[1] | ||||
|   } | ||||
| @ -1349,11 +1391,13 @@ class PolylineObject extends Base { | ||||
|  | ||||
|     that.entity.polyline.oriWidth = that.options.width | ||||
|     that.judgeLine(that.entity, that.options) | ||||
|     let params = { ...that.options } | ||||
|     params.speed = that.inputSpeed | ||||
|     that.entity.polyline.material = that.getMaterial( | ||||
|       that.options.color, | ||||
|       that.options.type, | ||||
|       that.entity, | ||||
|       that.options | ||||
|       params | ||||
|     ) | ||||
|     that.sdk._entityZIndex++ | ||||
|     PolylineObject.createLabel(that) | ||||
| @ -1367,10 +1411,10 @@ class PolylineObject extends Base { | ||||
|       that.options.lengthByMeter = res | ||||
|       that.lengthUnit = that.options['length-unit'] | ||||
|       syncData(that.sdk, that.options.id) | ||||
|       if (that.options.show) { | ||||
|         setSplitDirection(0, that.options.id) | ||||
|       } | ||||
|     }) | ||||
|     if (that.options.show) { | ||||
|       setSplitDirection(0, that.options.id) | ||||
|     } | ||||
|  | ||||
|  | ||||
|     // if (this.options['nose-to-tail']) { | ||||
| @ -1480,39 +1524,41 @@ class PolylineObject extends Base { | ||||
|     //   let ray2 = this.sdk.viewer.camera.getPickRay(point2); | ||||
|     //   cartesian2 = this.sdk.viewer.scene.globe.pick(ray2, this.sdk.viewer.scene); | ||||
|     // } | ||||
|  | ||||
|     var distance = Cesium.Cartesian3.distance(cartesian1, cartesian2); | ||||
|  | ||||
|     var repeatX = distance / entity.polyline.width.getValue(); | ||||
|     // 根据地图缩放程度调整repeatX | ||||
|     var cameraHeight = this.sdk.viewer.camera.positionCartographic.height; | ||||
|     var boundingSphere = new Cesium.BoundingSphere( | ||||
|       new Cesium.Cartesian3(-1000000, 0, 0), // 中心点坐标 | ||||
|       500000 // 半径(距离) | ||||
|     ); | ||||
|     if (cartesian1 && cartesian2) { | ||||
|  | ||||
|  | ||||
|     // 获取绘图缓冲区的宽度和高度(通常是屏幕的分辨率) | ||||
|     var drawingBufferWidth = this.sdk.viewer.canvas.clientWidth; | ||||
|     var drawingBufferHeight = this.sdk.viewer.canvas.clientHeight; | ||||
|       var distance = Cesium.Cartesian3.distance(cartesian1, cartesian2); | ||||
|  | ||||
|     // 使用 getPixelSize 方法获取包围球在屏幕上的像素大小 | ||||
|     var groundResolution = this.sdk.viewer.scene.camera.getPixelSize(boundingSphere, drawingBufferWidth, drawingBufferHeight) | ||||
|     // repeatX *= groundResolution / cameraHeight / ((myImg.width / myImg.height * 5) + 1); | ||||
|     if (groundResolution > 700) { | ||||
|       repeatX *= groundResolution / cameraHeight / (options.space * (canvasEle.width / canvasEle.height * 5) + 1); | ||||
|     } else { | ||||
|       repeatX = undefined; | ||||
|       var repeatX = distance / entity.polyline.width.getValue(); | ||||
|       // 根据地图缩放程度调整repeatX | ||||
|       var cameraHeight = this.sdk.viewer.camera.positionCartographic.height; | ||||
|       var boundingSphere = new Cesium.BoundingSphere( | ||||
|         new Cesium.Cartesian3(-1000000, 0, 0), // 中心点坐标 | ||||
|         500000 // 半径(距离) | ||||
|       ); | ||||
|  | ||||
|  | ||||
|       // 获取绘图缓冲区的宽度和高度(通常是屏幕的分辨率) | ||||
|       var drawingBufferWidth = this.sdk.viewer.canvas.clientWidth; | ||||
|       var drawingBufferHeight = this.sdk.viewer.canvas.clientHeight; | ||||
|  | ||||
|       // 使用 getPixelSize 方法获取包围球在屏幕上的像素大小 | ||||
|       var groundResolution = this.sdk.viewer.scene.camera.getPixelSize(boundingSphere, drawingBufferWidth, drawingBufferHeight) | ||||
|       // repeatX *= groundResolution / cameraHeight / ((myImg.width / myImg.height * 5) + 1); | ||||
|       if (groundResolution > 700) { | ||||
|         repeatX *= groundResolution / cameraHeight / (options.space * (canvasEle.width / canvasEle.height * 5) + 1); | ||||
|       } else { | ||||
|         repeatX = undefined; | ||||
|       } | ||||
|  | ||||
|       if (this.sdk.viewer.scene.mode === Cesium.SceneMode.SCENE3D) { | ||||
|         return repeatX | ||||
|       } else { | ||||
|         let sdk3d = get3DView() | ||||
|         let sdk3dEntity = sdk3d.viewer.entities.getById(this.options.id) | ||||
|         return sdk3dEntity.polyline.oriRepeatX | ||||
|       } | ||||
|     } | ||||
|  | ||||
|     if (this.sdk.viewer.scene.mode === Cesium.SceneMode.SCENE3D) { | ||||
|       return repeatX | ||||
|     } else { | ||||
|       let sdk3d = get3DView() | ||||
|       let sdk3dEntity = sdk3d.viewer.entities.getById(this.options.id) | ||||
|       return sdk3dEntity.polyline.oriRepeatX | ||||
|     } | ||||
|  | ||||
|   } | ||||
|   /** | ||||
|    * 编辑框 | ||||
|  | ||||
| @ -138,7 +138,7 @@ class RadarScan extends Base { | ||||
|     }) | ||||
|     that.sdk._entityZIndex++ | ||||
|     if (that.sdk.viewer._element.className === 'cesium-viewer 2d') { | ||||
|       that.entity.ellipse.height = 1000000 | ||||
|       that.entity.ellipse.height = 1 | ||||
|     } | ||||
|     RadarScan.createLabel(that) | ||||
|     syncData(that.sdk, that.options.id) | ||||
|  | ||||
| @ -424,7 +424,7 @@ class RadarScanStereoscopic extends Base { | ||||
|   } | ||||
|   set labelShow(v) { | ||||
|     this.options.label.show = v | ||||
|     if (this.show) { | ||||
|     if (this.show && !this.showView || this.showView == 3) { | ||||
|       this.label.show = v | ||||
|     } | ||||
|     else { | ||||
|  | ||||
| @ -5,7 +5,7 @@ class Corridor extends Base { | ||||
|   // /** | ||||
|   //  * @constructor | ||||
|   //  * @description 道路 | ||||
|   //  * @param sdk  | ||||
|   //  * @param sdk | ||||
|   //  * @param options {object} 属性 | ||||
|   //  * @param options.name{string} 名称 | ||||
|   //  * @param options.image{string | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement} 指定 Image、URL、Canvas 或 Video 的属性 | ||||
| @ -67,7 +67,7 @@ class Corridor extends Base { | ||||
|     //     material: new Cesium.ImageMaterialProperty({ | ||||
|     //       image: this.options.image, | ||||
|     //       repeat: new Cesium.Cartesian2(100, 1.0), | ||||
|     //       color: Cesium.Color.TOMATO  | ||||
|     //       color: Cesium.Color.TOMATO | ||||
|     //     }) | ||||
|     //   } | ||||
|     // }); | ||||
| @ -217,10 +217,10 @@ class Corridor extends Base { | ||||
|       let aa = 0 | ||||
|  | ||||
|       const shader = ` | ||||
|         uniform sampler2D image;  | ||||
|         uniform sampler2D image; | ||||
|         uniform vec4 color; | ||||
|         uniform vec2 repeat; | ||||
|        | ||||
|  | ||||
|         czm_material czm_getMaterial(czm_materialInput materialInput){ | ||||
|         czm_material material=czm_getDefaultMaterial(materialInput); | ||||
|         mat2 rotationMatrix = mat2(cos(radians(-rotate)), sin(radians(-rotate)), -sin(radians(-rotate)), cos(radians(-rotate))); | ||||
|  | ||||
							
								
								
									
										39
									
								
								src/Obj/Base/RoadObject/_element.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										39
									
								
								src/Obj/Base/RoadObject/_element.js
									
									
									
									
									
										Normal file
									
								
							| @ -0,0 +1,39 @@ | ||||
| function html() { | ||||
|   return ` | ||||
|     <span class="custom-divider"></span> | ||||
|     <div class="div-item"> | ||||
|         <div class="row"> | ||||
|             <div class="col"> | ||||
|                 <span class="label">名称</span> | ||||
|                 <input class="input" maxlength="40" type="text" @model="name"> | ||||
|             </div> | ||||
|             <div class="col road-box"> | ||||
|                 <span class="label" style="flex: 0 0 56px;">道路类型</span> | ||||
|                 <div class="road-type"></div> | ||||
|             </div> | ||||
|         </div> | ||||
|     </div> | ||||
|     <span class="custom-divider"></span> | ||||
|     <div class="div-item"> | ||||
|         <div class="row"> | ||||
|             <div class="col"> | ||||
|                 <span class="label">车道宽度</span> | ||||
|                 <div class="input-number input-number-unit-1"> | ||||
|                     <input class="input" type="number" title="" max="99999" min="1" step="1" @model="carRoadWidth"> | ||||
|                     <span class="arrow"></span> | ||||
|                 </div> | ||||
|             </div> | ||||
|             <div class="col"> | ||||
|                 <span class="label">人行道宽度</span> | ||||
|                 <div class="input-number input-number-unit-1"> | ||||
|                     <input class="input" type="number" title="" max="99999" min="1" step="1" @model="sideWidth"> | ||||
|                     <span class="arrow"></span> | ||||
|                 </div> | ||||
|             </div> | ||||
|         </div> | ||||
|     </div> | ||||
|     <span class="custom-divider"></span> | ||||
|     ` | ||||
| } | ||||
|  | ||||
| export { html } | ||||
							
								
								
									
										92
									
								
								src/Obj/Base/RoadObject/eventBinding.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										92
									
								
								src/Obj/Base/RoadObject/eventBinding.js
									
									
									
									
									
										Normal file
									
								
							| @ -0,0 +1,92 @@ | ||||
| class eventBinding { | ||||
|   constructor() { | ||||
|     this.element = {} | ||||
|   } | ||||
|   static event = {} | ||||
|  | ||||
|   getEvent(name) { | ||||
|     return eventBinding.event[name] | ||||
|   } | ||||
|  | ||||
|   getEventAll() { | ||||
|     return eventBinding.event | ||||
|   } | ||||
|  | ||||
|   setEvent(name, event) { | ||||
|     eventBinding.event[name] = event | ||||
|   } | ||||
|  | ||||
|   on(that, elements) { | ||||
|     for (let i = 0; i < elements.length; i++) { | ||||
|       let Event = [] | ||||
|       let isEvent = false | ||||
|       let removeName = [] | ||||
|       if (!elements[i] || !elements[i].attributes) { | ||||
|         continue; | ||||
|       } | ||||
|       for (let m of elements[i].attributes) { | ||||
|         switch (m.name) { | ||||
|           case '@model': { | ||||
|             isEvent = true | ||||
|             if (elements[i].type == 'checkbox') { | ||||
|               Event.push((e) => { that[m.value] = e.target.checked }) | ||||
|               elements[i].checked = that[m.value] | ||||
|             } | ||||
|             else { | ||||
|               Event.push((e) => { | ||||
|                 let value = e.target.value | ||||
|                 if (e.target.type == 'number') { | ||||
|                   value = Number(value) | ||||
|                 } | ||||
|                 that[m.value] = value | ||||
|               }) | ||||
|               if (elements[i].nodeName == 'IMG') { | ||||
|                 elements[i].src = that[m.value] | ||||
|               } | ||||
|               else { | ||||
|                 elements[i].value = that[m.value] | ||||
|               } | ||||
|             } | ||||
|             if (this.element[m.value]) { | ||||
|               this.element[m.value].push(elements[i]) | ||||
|             } | ||||
|             else { | ||||
|               this.element[m.value] = [elements[i]] | ||||
|             } | ||||
|             removeName.push(m.name) | ||||
|             break; | ||||
|           } | ||||
|           case '@click': { | ||||
|             elements[i].addEventListener('click', (e) => { | ||||
|               if (typeof (that.Dialog[m.value]) === 'function') { | ||||
|                 that.Dialog[m.value](e) | ||||
|               } | ||||
|             }); | ||||
|             removeName.push(m.name) | ||||
|             // elements[i].attributes.removeNamedItem(m.name) | ||||
|             break; | ||||
|           } | ||||
|         } | ||||
|         // elements[i].attributes[m] = undefined | ||||
|       } | ||||
|       for (let n = 0; n < removeName.length; n++) { | ||||
|         elements[i].attributes.removeNamedItem(removeName[n]) | ||||
|       } | ||||
|  | ||||
|       if (isEvent) { | ||||
|         let ventType = 'input' | ||||
|         if (elements[i].tagName != 'INPUT' || elements[i].type == 'checkbox') { | ||||
|           ventType = 'change' | ||||
|         } | ||||
|         elements[i].addEventListener(ventType, (e) => { | ||||
|           for (let t = 0; t < Event.length; t++) { | ||||
|             Event[t](e) | ||||
|           } | ||||
|         }); | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| } | ||||
|  | ||||
| const EventBinding = new eventBinding(); | ||||
| export default EventBinding; | ||||
							
								
								
									
										1549
									
								
								src/Obj/Base/RoadObject/index-8.4.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										1549
									
								
								src/Obj/Base/RoadObject/index-8.4.js
									
									
									
									
									
										Normal file
									
								
							
										
											
												File diff suppressed because it is too large
												Load Diff
											
										
									
								
							
							
								
								
									
										1704
									
								
								src/Obj/Base/RoadObject/index-last.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										1704
									
								
								src/Obj/Base/RoadObject/index-last.js
									
									
									
									
									
										Normal file
									
								
							
										
											
												File diff suppressed because it is too large
												Load Diff
											
										
									
								
							
							
								
								
									
										889
									
								
								src/Obj/Base/RoadObject/index-拐角连接.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										889
									
								
								src/Obj/Base/RoadObject/index-拐角连接.js
									
									
									
									
									
										Normal file
									
								
							| @ -0,0 +1,889 @@ | ||||
| /** | ||||
|  * @description 道路 | ||||
|  */ | ||||
| import Dialog from '../../Element/Dialog'; | ||||
| import { html } from "./_element"; | ||||
| import EventBinding from '../../Element/Dialog/eventBinding'; | ||||
| import Base from "../index"; | ||||
| import { syncData } from '../../../Global/MultiViewportMode' | ||||
| import { setSplitDirection, syncSplitData, setActiveId } from '../../../Global/SplitScreen' | ||||
| import { setActiveViewer, closeRotateAround, closeViewFollow } from '../../../Global/global' | ||||
|  | ||||
| class Road extends Base { | ||||
|   /** | ||||
|    * @constructor | ||||
|    * @param sdk | ||||
|    * @description 道路 | ||||
|    * @param options {object} 道路属性 | ||||
|    * @param options.name=未命名对象 {string} 名称 | ||||
|    * @param options.carRoadWidth=2 {number} 车道宽度 | ||||
|    * @param options.sideWidth=2 {number} 人行道宽度 | ||||
|    * @param options.positions=[] {array} 道路positions | ||||
|    * @param options.roadImage='' {string} 车道贴图 | ||||
|    * @param options.sideImage='' {string} 人行道贴图 | ||||
|    * @param Dialog {object} 弹框对象 | ||||
|    * @param Dialog.confirmCallBack {function} 弹框确认时的回调 | ||||
|    * */ | ||||
|   constructor(sdk, options = {}, _Dialog = {}) { | ||||
|     super(sdk, options); | ||||
|     this.viewer = this.sdk.viewer | ||||
|     this.options.name = options.name || '道路' | ||||
|     this.options.carRoadWidth = options.carRoadWidth || 10 | ||||
|     this.options.sideWidth = options.sideWidth || 5 | ||||
|     this.options.positions = options.positions || [] | ||||
|     this.options.roadImage = options.roadImage || (this.getSourceRootPath() + '/img/roadPhoto.png') | ||||
|     this.options.sideImage = options.sideImage || (this.getSourceRootPath() + '/img/sidePhoto.png') | ||||
|     this.options.show = (options.show || options.show === false) ? options.show : true | ||||
|     this.Dialog = _Dialog | ||||
|     this._EventBinding = new EventBinding() | ||||
|     this._elms = {}; | ||||
|     this.positionArea = [] | ||||
|     this.positions = [] | ||||
|     this.lineEntity = '' | ||||
|  | ||||
|     this.sdk.addIncetance(this.options.id, this) | ||||
|     Road.create(this) | ||||
|   } | ||||
|  | ||||
|   // 创建道路 | ||||
|   static create(that) { | ||||
|     let positions = [] | ||||
|     that.options.positions.forEach(v => { | ||||
|       positions.push(new Cesium.Cartesian3.fromDegrees(v.lng, v.lat, v.alt)) | ||||
|     }) | ||||
|  | ||||
|     let area = [[], [], []] | ||||
|     area[1] = that.createLineBufferPolygon2(positions, that.options.carRoadWidth / 2) | ||||
|     area[0] = that.createLineBufferPolygonSide(area[1][2], -that.options.sideWidth) | ||||
|     area[2] = that.createLineBufferPolygonSide(area[1][1], that.options.sideWidth) | ||||
|  | ||||
|     //判断道路边是否相交 | ||||
|     for (let i = 0; i < area[0].length - 1; i++) { | ||||
|  | ||||
|       let leftItem = area[0][i] | ||||
|       let leftItem2 = area[0][i + 1] | ||||
|       let rightItem = area[2][i] | ||||
|       let rightItem2 = area[2][i + 1] | ||||
|       let carItem = area[1][0][i] | ||||
|       let carItem2 = area[1][0][i + 1] | ||||
|       let leftLine = that.getIntersects(leftItem[1], leftItem[2], leftItem2[1], leftItem2[2]) | ||||
|       let rightLine = that.getIntersects(rightItem[1], rightItem[2], rightItem2[1], rightItem2[2]) | ||||
|  | ||||
|       console.log(leftLine, 'leftLine') | ||||
|       if (leftLine) {//左侧相交 | ||||
|         //获取右侧延长交点 | ||||
|         let point1 = that.getExtendPoint(rightItem[1], rightItem[2], 1000) | ||||
|         let point2 = that.getExtendPoint(rightItem2[2], rightItem2[1], 1000) | ||||
|         let rightIntersection = that.getIntersects(rightItem[2], point1, rightItem2[1], point2) | ||||
|         //将其他几条边都延长 | ||||
|         let leftLineNeiPoint = that.getExtendPoint(leftItem[0], leftItem[3], 1000) | ||||
|         let carLeftPoint = that.getExtendPoint(carItem[3], carItem[2], 1000) | ||||
|         let carRightPoint = that.getExtendPoint(carItem[0], carItem[1], 1000) | ||||
|         let rightLineNeiPoint = that.getExtendPoint(rightItem[0], rightItem[3], 1000) | ||||
|  | ||||
|  | ||||
|  | ||||
|  | ||||
|         //跟左侧里相交点 | ||||
|         let leftLineNei = that.getIntersects(leftLine, rightIntersection, leftItem[0], leftLineNeiPoint) | ||||
|         //跟车道左侧相交点 | ||||
|         let carLeft = that.getIntersects(leftLine, rightIntersection, carItem[3], carLeftPoint) | ||||
|         //跟车道右侧相交点 | ||||
|         let carRight = that.getIntersects(leftLine, rightIntersection, carItem[0], carRightPoint) | ||||
|         let rightLineNei = that.getIntersects(leftLine, rightIntersection, rightItem[0], rightLineNeiPoint) | ||||
|  | ||||
|         // let leftLineNei = that.getIntersects(leftLine, rightItem[2], leftItem[0], leftItem[3]) | ||||
|         // let carLeft = that.getIntersects(leftLine, rightItem[2], carItem[3], carItem[2]) | ||||
|         // let carRight = that.getIntersects(leftLine, rightItem[2], carItem[0], carItem[1]) | ||||
|         // let rightLineNei = that.getIntersects(leftLine, rightItem[2], rightItem[0], rightItem[3]) | ||||
|  | ||||
|         // let leftLineNei = that.getIntersects(leftLine, intersection, leftItem[0], leftItem[3]) | ||||
|         // //跟车道左侧相交点 | ||||
|         // let carLeft = that.getIntersects(leftLine, intersection, carItem[3], carItem[2]) | ||||
|         // //跟车道右侧相交点 | ||||
|         // let carRight = that.getIntersects(leftLine, intersection, carItem[0], carItem[1]) | ||||
|         // let rightLineNei = that.getIntersects(leftLine, intersection, rightItem[0], rightItem[3]) | ||||
|  | ||||
|         leftItem[2] = leftLine | ||||
|         leftItem[3] = leftLineNei | ||||
|         carItem[2] = carLeft | ||||
|         carItem[1] = carRight | ||||
|         rightItem[3] = rightLineNei | ||||
|         rightItem[2] = rightIntersection | ||||
|         console.log(leftItem, carItem, rightItem, 'leftItemleft') | ||||
|  | ||||
|  | ||||
|         //将其他几条边都延长 | ||||
|         let leftLineNeiPoint2 = that.getExtendPoint(leftItem2[3], leftItem2[0], 1000) | ||||
|         let carLeftPoint2 = that.getExtendPoint(carItem2[2], carItem2[3], 1000) | ||||
|         let carRightPoint2 = that.getExtendPoint(carItem2[1], carItem2[0], 1000) | ||||
|         let rightLineNeiPoint2 = that.getExtendPoint(rightItem2[3], rightItem2[0], 1000) | ||||
|  | ||||
|         // let leftLineNei2 = that.getIntersects(leftLine, rightItem2[1], leftItem2[0], leftItem2[3]) | ||||
|         // let carLeft2 = that.getIntersects(leftLine, rightItem2[1], carItem2[3], carItem2[2]) | ||||
|         // let carRight2 = that.getIntersects(leftLine, rightItem2[1], carItem2[0], carItem2[1]) | ||||
|         // let rightLineNei2 = that.getIntersects(leftLine, rightItem2[1], rightItem2[0], rightItem2[3]) | ||||
|  | ||||
|  | ||||
|  | ||||
|         let leftLineNei2 = that.getIntersects(leftLine, rightIntersection, leftItem2[3], leftLineNeiPoint2) | ||||
|         let carLeft2 = that.getIntersects(leftLine, rightIntersection, carItem2[2], carLeftPoint2) | ||||
|         let carRight2 = that.getIntersects(leftLine, rightIntersection, carItem2[1], carRightPoint2) | ||||
|         let rightLineNei2 = that.getIntersects(leftLine, rightIntersection, rightItem2[3], rightLineNeiPoint2) | ||||
|  | ||||
|         // let arr = [leftLine, rightIntersection, leftItem2[3], leftLineNeiPoint2] | ||||
|         // arr.forEach((item, index) => { | ||||
|         //   that.sdk.viewer.entities.add({ | ||||
|         //     name: 'node-secondary-edit-point', | ||||
|         //     index: i, | ||||
|         //     position: item, | ||||
|         //     billboard: { | ||||
|         //       image: that.getSourceRootPath() + '/img/point.png', | ||||
|         //       width: 15, | ||||
|         //       height: 15, | ||||
|         //       disableDepthTestDistance: Number.POSITIVE_INFINITY, | ||||
|         //       color: Cesium.Color.WHITE.withAlpha(0.99) | ||||
|         //     }, | ||||
|         //     label: { | ||||
|         //       text: '' + index, | ||||
|         //       pixelOffset: { x: 0, y: -20 }, | ||||
|         //     }, | ||||
|         //   }) | ||||
|         // }) | ||||
|  | ||||
|         // let leftLineNei2 = that.getIntersects(leftLine, intersection, leftItem2[0], leftItem2[3]) | ||||
|         // //跟车道左侧相交点 | ||||
|         // let carLeft2 = that.getIntersects(leftLine, intersection, carItem2[3], carItem2[2]) | ||||
|         // //跟车道右侧相交点 | ||||
|         // let carRight2 = that.getIntersects(leftLine, intersection, carItem2[0], carItem2[1]) | ||||
|         // let rightLineNei2 = that.getIntersects(leftLine, intersection, rightItem2[0], rightItem2[3]) | ||||
|  | ||||
|         leftItem2[1] = leftLine | ||||
|         leftItem2[0] = leftLineNei2 | ||||
|         carItem2[3] = carLeft2 | ||||
|         carItem2[0] = carRight2 | ||||
|         rightItem2[0] = rightLineNei2 | ||||
|         rightItem2[1] = rightIntersection | ||||
|         console.log(leftItem2, carItem2, rightItem2, 'leftItem2left') | ||||
|  | ||||
|       } else if (rightLine) {//右侧相交 | ||||
|  | ||||
|         //获取左侧延长交点 | ||||
|         let point1 = that.getExtendPoint(leftItem[1], leftItem[2], 1000) | ||||
|         let point2 = that.getExtendPoint(leftItem2[2], leftItem2[1], 1000) | ||||
|         let rightIntersection = that.getIntersects(leftItem[2], point1, leftItem2[1], point2) | ||||
|         //将其他几条边都延长 | ||||
|         let leftLineNeiPoint = that.getExtendPoint(leftItem[0], leftItem[3], 1000) | ||||
|         let carLeftPoint = that.getExtendPoint(carItem[3], carItem[2], 1000) | ||||
|         let carRightPoint = that.getExtendPoint(carItem[0], carItem[1], 1000) | ||||
|         let rightLineNeiPoint = that.getExtendPoint(rightItem[0], rightItem[3], 1000) | ||||
|  | ||||
|         // //跟左侧里相交点 | ||||
|         let leftLineNei = that.getIntersects(rightLine, rightIntersection, leftItem[0], leftLineNeiPoint) | ||||
|         //跟车道左侧相交点 | ||||
|         let carLeft = that.getIntersects(rightLine, rightIntersection, carItem[3], carLeftPoint) | ||||
|         //跟车道右侧相交点 | ||||
|         let carRight = that.getIntersects(rightLine, rightIntersection, carItem[0], carRightPoint) | ||||
|         let rightLineNei = that.getIntersects(rightLine, rightIntersection, rightItem[0], rightLineNeiPoint) | ||||
|         // //跟左侧里相交点 | ||||
|         // let leftLineNei = that.getIntersects(rightLine, leftItem[2], leftItem[0], leftItem[3]) | ||||
|         // //跟车道左侧相交点 | ||||
|         // let carLeft = that.getIntersects(rightLine, leftItem[2], carItem[3], carItem[2]) | ||||
|         // //跟车道右侧相交点 | ||||
|         // let carRight = that.getIntersects(rightLine, leftItem[2], carItem[0], carItem[1]) | ||||
|         // let rightLineNei = that.getIntersects(rightLine, leftItem[2], rightItem[0], rightItem[3]) | ||||
|  | ||||
|  | ||||
|         leftItem[2] = rightIntersection | ||||
|         leftItem[3] = leftLineNei | ||||
|         carItem[2] = carLeft | ||||
|         carItem[1] = carRight | ||||
|         rightItem[3] = rightLineNei | ||||
|         rightItem[2] = rightLine | ||||
|         console.log(leftItem, carItem, rightItem, 'leftItemright') | ||||
|  | ||||
|         //将其他几条边都延长 | ||||
|         let leftLineNeiPoint2 = that.getExtendPoint(leftItem2[3], leftItem2[0], 1000) | ||||
|         let carLeftPoint2 = that.getExtendPoint(carItem2[2], carItem2[3], 1000) | ||||
|         let carRightPoint2 = that.getExtendPoint(carItem2[1], carItem2[0], 1000) | ||||
|         let rightLineNeiPoint2 = that.getExtendPoint(rightItem2[3], rightItem2[0], 1000) | ||||
|  | ||||
|         let leftLineNei2 = that.getIntersects(rightLine, rightIntersection, leftItem2[3], leftLineNeiPoint2) | ||||
|         //跟车道左侧相交点 | ||||
|         let carLeft2 = that.getIntersects(rightLine, rightIntersection, carItem2[2], carLeftPoint2) | ||||
|         //跟车道右侧相交点 | ||||
|         let carRight2 = that.getIntersects(rightLine, rightIntersection, carItem2[1], carRightPoint2) | ||||
|         let rightLineNei2 = that.getIntersects(rightLine, rightIntersection, rightItem2[3], rightLineNeiPoint2) | ||||
|         // let leftLineNei2 = that.getIntersects(rightLine, leftItem2[1], leftItem2[0], leftItem2[3]) | ||||
|         // //跟车道左侧相交点 | ||||
|         // let carLeft2 = that.getIntersects(rightLine, leftItem2[1], carItem2[3], carItem2[2]) | ||||
|         // //跟车道右侧相交点 | ||||
|         // let carRight2 = that.getIntersects(rightLine, leftItem2[1], carItem2[0], carItem2[1]) | ||||
|         // let rightLineNei2 = that.getIntersects(rightLine, leftItem2[1], rightItem2[0], rightItem2[3]) | ||||
|  | ||||
|         leftItem2[1] = rightIntersection | ||||
|         leftItem2[0] = leftLineNei2 | ||||
|         carItem2[3] = carLeft2 | ||||
|         carItem2[0] = carRight2 | ||||
|         rightItem2[0] = rightLineNei2 | ||||
|         rightItem2[1] = rightLine | ||||
|         console.log(leftItem2, carItem2, rightItem2, 'leftItem2right') | ||||
|  | ||||
|       } | ||||
|     } | ||||
|  | ||||
|  | ||||
|     console.log(area[0], 'area') | ||||
|  | ||||
|     if (that.viewer.entities.getById(that.options.id)) { | ||||
|       that.viewer.entities.getById(that.options.id)._children.forEach((item) => { | ||||
|         that.viewer.entities.remove(item); | ||||
|       }); | ||||
|       that.viewer.entities.remove(that.viewer.entities.getById(that.options.id)) | ||||
|     } | ||||
|     that.lineEntity = that.viewer.entities.add(new Cesium.Entity({ id: that.options.id, show: that.options.show })) | ||||
|  | ||||
|     const myImg = new Image() | ||||
|     myImg.src = that.options.roadImage | ||||
|     myImg.onload = function () { | ||||
|       console.log(area[1][0], 'arr') | ||||
|       area[1][0].forEach((item, index) => { | ||||
|         that.viewer.entities.add({ | ||||
|           // id: that.options.id, | ||||
|           parent: that.lineEntity, | ||||
|           polygon: { | ||||
|             hierarchy: new Cesium.PolygonHierarchy(item), | ||||
|             material: new Cesium.ImageMaterialProperty({ | ||||
|               image: that.options.roadImage, | ||||
|               transparent: true,// 如果图片有透明部分,需要设置为 true | ||||
|               repeat: that.calculateTextureRepeat(item, myImg) | ||||
|             }), | ||||
|             stRotation: that.calculateRoadAngle(positions[index], positions[index + 1]) | ||||
|           } | ||||
|         }); | ||||
|       }) | ||||
|     } | ||||
|  | ||||
|     const myImg2 = new Image() | ||||
|     myImg2.src = that.options.sideImage | ||||
|     myImg2.onload = function () { | ||||
|       area[0].forEach((item, index) => { | ||||
|         that.viewer.entities.add({ | ||||
|           parent: that.lineEntity, | ||||
|           polygon: { | ||||
|             hierarchy: new Cesium.PolygonHierarchy(item), | ||||
|             material: new Cesium.ImageMaterialProperty({ | ||||
|               image: that.options.sideImage, | ||||
|               transparent: true,// 如果图片有透明部分,需要设置为 true | ||||
|               repeat: that.calculateTextureRepeat(item, myImg2) | ||||
|             }), | ||||
|             stRotation: that.calculateRoadAngle(positions[index], positions[index + 1]) | ||||
|           } | ||||
|         }); | ||||
|       }) | ||||
|  | ||||
|       area[2].forEach((item, index) => { | ||||
|         that.viewer.entities.add({ | ||||
|           polygon: { | ||||
|             hierarchy: new Cesium.PolygonHierarchy(item), | ||||
|             material: new Cesium.ImageMaterialProperty({ | ||||
|               image: that.options.sideImage, | ||||
|               transparent: true,// 如果图片有透明部分,需要设置为 true | ||||
|               repeat: that.calculateTextureRepeat(item, myImg2) | ||||
|             }), | ||||
|             stRotation: that.calculateRoadAngle(positions[index], positions[index + 1]) | ||||
|           } | ||||
|         }); | ||||
|       }) | ||||
|  | ||||
|     } | ||||
|  | ||||
|   } | ||||
|   getExtendPoint(position1, position2, distance) { | ||||
|     // let position1 = Cesium.Cartesian3.fromDegrees(p1[0], p1[1], 0); | ||||
|     // let position2 = Cesium.Cartesian3.fromDegrees(p2[0], p2[1], 0); | ||||
|     let pot = Cesium.Cartesian3.subtract(position2, position1, new Cesium.Cartesian3());//方向 | ||||
|     var dir = Cesium.Cartesian3.normalize(pot, new Cesium.Cartesian3());//向量归一化 | ||||
|  | ||||
|     var ray = new Cesium.Ray(position1, dir); | ||||
|     let np = Cesium.Ray.getPoint(ray, distance * 10);//计算延长点 | ||||
|     return np | ||||
|   } | ||||
|   getArr(arr1, arr2) { | ||||
|     arr2 = arr2.reverse() | ||||
|     let polygon = [] | ||||
|     for (let index = 0; index < arr1.length - 1; index++) { | ||||
|       polygon.push([arr1[index], arr1[index + 1], arr2[index + 1], arr2[index]]) | ||||
|     } | ||||
|     return polygon | ||||
|   } | ||||
|  | ||||
|   calculateRoadAngle(startPoint, endPoint) { | ||||
|     // 1. 获取地表法向量 | ||||
|     const normal = Cesium.Ellipsoid.WGS84.geodeticSurfaceNormal(startPoint); | ||||
|  | ||||
|     // 2. 构建精确ENU坐标系 | ||||
|     const enuMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(startPoint, undefined, normal); | ||||
|     const inverseMatrix = Cesium.Matrix4.inverse(enuMatrix, new Cesium.Matrix4()); | ||||
|  | ||||
|     // 3. 转换终点并计算水平向量 | ||||
|     const localEnd = Cesium.Matrix4.multiplyByPoint(inverseMatrix, endPoint, new Cesium.Cartesian3()); | ||||
|     const horizontalVec = new Cesium.Cartesian2(localEnd.x, localEnd.y); | ||||
|     Cesium.Cartesian2.normalize(horizontalVec, horizontalVec); | ||||
|  | ||||
|     const north = new Cesium.Cartesian2(1, 0); | ||||
|  | ||||
|     const angle = Cesium.Cartesian2.angleBetween(north, horizontalVec); | ||||
|     const cross = Cesium.Cartesian2.cross(north, horizontalVec, new Cesium.Cartesian2()); | ||||
|     return cross < 0 ? angle : -angle; | ||||
|   } | ||||
|  | ||||
|   calculatePolygonOrientation(positions) { | ||||
|  | ||||
|     // 假设 position 是 Cesium.Cartesian3 对象,表示地球上的某个点 | ||||
|     var position = positions[0] | ||||
|     // 获取东、北、上坐标系 | ||||
|     var eastNorthUp = Cesium.Transforms.eastNorthUpToFixedFrame(position); | ||||
|     // northAxis 是北方向向量 | ||||
|     var northAxis = eastNorthUp.getColumn(1, new Cesium.Cartesian3()); | ||||
|     Cesium.Cartesian3.normalize(northAxis, northAxis); | ||||
|  | ||||
|     const direction = Cesium.Cartesian3.subtract(positions[0], positions[1], new Cesium.Cartesian3()); | ||||
|     Cesium.Cartesian3.normalize(direction, direction); | ||||
|  | ||||
|  | ||||
|     const dot = Cesium.Cartesian3.dot(northAxis, direction); | ||||
|     const magA = Cesium.Cartesian3.magnitude(northAxis); | ||||
|     const magB = Cesium.Cartesian3.magnitude(direction); | ||||
|     return Math.acos(dot / (magA * magB)); | ||||
|   } | ||||
|   calculateTextureRepeat(polygonPositions, textureSize, meterPerPixel = 0.01) { | ||||
|     // 验证纹理尺寸 | ||||
|     if (!textureSize.width || !textureSize.height) { | ||||
|       throw new Error('Texture size must contain width and height in pixels'); | ||||
|     } | ||||
|  | ||||
|     // 创建多边形几何体 | ||||
|     const geometry = Cesium.PolygonGeometry.createGeometry( | ||||
|       new Cesium.PolygonGeometry({ | ||||
|         polygonHierarchy: new Cesium.PolygonHierarchy(polygonPositions), | ||||
|         vertexFormat: Cesium.VertexFormat.POSITION_ONLY | ||||
|       }) | ||||
|     ); | ||||
|  | ||||
|     // 计算多边形面积(平方米) | ||||
|     let area = 0; | ||||
|     const indices = geometry.indices; | ||||
|     const positions = geometry.attributes.position.values; | ||||
|     for (let i = 0; i < indices.length; i += 3) { | ||||
|       const i0 = indices[i] * 3; | ||||
|       const i1 = indices[i + 1] * 3; | ||||
|       const i2 = indices[i + 2] * 3; | ||||
|  | ||||
|       const p0 = new Cesium.Cartesian3(positions[i0], positions[i0 + 1], positions[i0 + 2]); | ||||
|       const p1 = new Cesium.Cartesian3(positions[i1], positions[i1 + 1], positions[i1 + 2]); | ||||
|       const p2 = new Cesium.Cartesian3(positions[i2], positions[i2 + 1], positions[i2 + 2]); | ||||
|  | ||||
|       const cross = Cesium.Cartesian3.cross( | ||||
|         Cesium.Cartesian3.subtract(p1, p0, new Cesium.Cartesian3()), | ||||
|         Cesium.Cartesian3.subtract(p2, p0, new Cesium.Cartesian3()), | ||||
|         new Cesium.Cartesian3() | ||||
|       ); | ||||
|       area += Cesium.Cartesian3.magnitude(cross) * 0.5; | ||||
|     } | ||||
|  | ||||
|     // 将像素尺寸转换为实际尺寸(平方米) | ||||
|     const textureWidthMeters = textureSize.width * meterPerPixel; | ||||
|     const textureHeightMeters = textureSize.height * meterPerPixel; | ||||
|     const textureArea = textureWidthMeters * textureHeightMeters; | ||||
|  | ||||
|     // 计算各轴向重复次数 | ||||
|     const repeatX = Math.sqrt(area) / textureWidthMeters; | ||||
|     const repeatY = Math.sqrt(area) / textureHeightMeters; | ||||
|  | ||||
|     return new Cesium.Cartesian2(Math.max(1, Math.ceil(repeatX)), 1.0); | ||||
|   } | ||||
|   swapLastElements(arr1, arr2) { | ||||
|     const last = arr1[arr1.length - 1] | ||||
|     const first = arr2[0] | ||||
|     arr1[arr1.length - 1] = first | ||||
|     arr2[0] = last | ||||
|  | ||||
|     return [arr1, arr2]; | ||||
|   } | ||||
|   createLineBufferPolygonSide(positions, width) { | ||||
|     let area = [] | ||||
|     for (let i = 0; i < positions.length; i++) { | ||||
|       const posi = positions[i]; | ||||
|  | ||||
|       const dir = Cesium.Cartesian3.subtract(posi[1], posi[0], new Cesium.Cartesian3()); | ||||
|       Cesium.Cartesian3.normalize(dir, dir); | ||||
|  | ||||
|       // 获取垂直向量(基于Z轴) | ||||
|       const perp = Cesium.Cartesian3.cross(dir, Cesium.Cartesian3.UNIT_Z, new Cesium.Cartesian3()); | ||||
|       Cesium.Cartesian3.normalize(perp, perp); | ||||
|  | ||||
|       // 生成偏移向量 | ||||
|       const offset = Cesium.Cartesian3.multiplyByScalar(perp, width, new Cesium.Cartesian3()); | ||||
|       let point1 = Cesium.Cartesian3.add(posi[0], offset, new Cesium.Cartesian3()) | ||||
|       let point3 = Cesium.Cartesian3.add(posi[1], offset, new Cesium.Cartesian3()) | ||||
|  | ||||
|       // i == positions.length - 2 ? area.push(start, point1, end, point3) : area.push(start, point1) | ||||
|       area.push([posi[0], point1, point3, posi[1]]) | ||||
|     } | ||||
|     // let arr = [] | ||||
|     // for (let i = 0; i < area.length - 2; i += 2) { | ||||
|     //   arr.push([area[i], area[i + 1], area[i + 3], area[i + 2]]) | ||||
|     // } | ||||
|     return area | ||||
|   } | ||||
|   createLineBufferPolygon2(positions, width) { | ||||
|     let area = [] | ||||
|     let leftPositions = []; | ||||
|     let rightPositions = []; | ||||
|  | ||||
|     for (let i = 0; i < positions.length - 1; i++) { | ||||
|       const start = positions[i]; | ||||
|       // const end = positions[i + 1] || positions[i - 1]; | ||||
|       const end = positions[i + 1]; | ||||
|  | ||||
|       const dir = Cesium.Cartesian3.subtract(end, start, new Cesium.Cartesian3()); | ||||
|       Cesium.Cartesian3.normalize(dir, dir); | ||||
|  | ||||
|       // 获取垂直向量(基于Z轴) | ||||
|       const perp = Cesium.Cartesian3.cross(dir, Cesium.Cartesian3.UNIT_Z, new Cesium.Cartesian3()); | ||||
|       Cesium.Cartesian3.normalize(perp, perp); | ||||
|  | ||||
|       const dir2 = Cesium.Cartesian3.subtract(start, end, new Cesium.Cartesian3()); | ||||
|       Cesium.Cartesian3.normalize(dir2, dir2); | ||||
|  | ||||
|       // 获取垂直向量(基于Z轴) | ||||
|       const perp2 = Cesium.Cartesian3.cross(dir2, Cesium.Cartesian3.UNIT_Z, new Cesium.Cartesian3()); | ||||
|       Cesium.Cartesian3.normalize(perp2, perp2); | ||||
|  | ||||
|  | ||||
|  | ||||
|  | ||||
|       // 生成偏移向量 | ||||
|       const offset = Cesium.Cartesian3.multiplyByScalar(perp, width, new Cesium.Cartesian3()); | ||||
|       const offset2 = Cesium.Cartesian3.multiplyByScalar(perp, -width, new Cesium.Cartesian3()); | ||||
|  | ||||
|       const offsetEnd = Cesium.Cartesian3.multiplyByScalar(perp2, -width, new Cesium.Cartesian3()); | ||||
|       const offsetEnd2 = Cesium.Cartesian3.multiplyByScalar(perp2, width, new Cesium.Cartesian3()); | ||||
|  | ||||
|       let point1 = Cesium.Cartesian3.add(start, offset, new Cesium.Cartesian3()) | ||||
|       let point2 = Cesium.Cartesian3.add(start, offset2, new Cesium.Cartesian3()) | ||||
|       let point3 = Cesium.Cartesian3.add(end, offsetEnd, new Cesium.Cartesian3()) | ||||
|       let point4 = Cesium.Cartesian3.add(end, offsetEnd2, new Cesium.Cartesian3()) | ||||
|  | ||||
|       area.push([point1, point3, point4, point2]) | ||||
|  | ||||
|       rightPositions.push([point1, point3]) | ||||
|       leftPositions.push([point2, point4]) | ||||
|  | ||||
|       // if (i == positions.length - 2) { | ||||
|       //   area.push(point1, point2, point3, point4) | ||||
|       //   rightPositions.push(point1) | ||||
|       //   leftPositions.push(point2) | ||||
|       //   leftPositions.push(point4) | ||||
|       //   rightPositions.push(point3) | ||||
|       // } else { | ||||
|       //   area.push(point1, point2) | ||||
|       //   rightPositions.push(point1) | ||||
|       //   leftPositions.push(point2) | ||||
|       // } | ||||
|     } | ||||
|     // let arr = [] | ||||
|     // for (let i = 0; i < area.length - 2; i += 2) { | ||||
|     //   arr.push([area[i], area[i + 1], area[i + 3], area[i + 2]]) | ||||
|     // } | ||||
|     console.log(area, rightPositions, 'rightPositions') | ||||
|     let that = this | ||||
|     // return [arr, rightPositions, leftPositions] | ||||
|     return [area, rightPositions, leftPositions] | ||||
|   } | ||||
|   getIntersects(point1, point2, point3, point4) { | ||||
|     let carPoint1 = this.getLonLat(point1) | ||||
|     let carPoint2 = this.getLonLat(point2) | ||||
|     let carPoint3 = this.getLonLat(point3) | ||||
|     let carPoint4 = this.getLonLat(point4) | ||||
|     var line1 = turf.lineString([ | ||||
|       [carPoint1.lon, carPoint1.lat], | ||||
|       [carPoint2.lon, carPoint2.lat] | ||||
|     ]); | ||||
|     var line2 = turf.lineString([ | ||||
|       [carPoint3.lon, carPoint3.lat], | ||||
|       [carPoint4.lon, carPoint4.lat] | ||||
|     ]); | ||||
|     var intersects = turf.lineIntersect(line1, line2); | ||||
|     if (intersects.features.length > 0) { | ||||
|       console.log(intersects.features, 'ooooo') | ||||
|       return Cesium.Cartesian3.fromDegrees(intersects.features[0].geometry.coordinates[0], intersects.features[0].geometry.coordinates[1]) | ||||
|     } | ||||
|   } | ||||
|   getLonLat(point) { | ||||
|     let pointDe = Cesium.Cartographic.fromCartesian(point) | ||||
|     const longitude = Cesium.Math.toDegrees(pointDe.longitude); | ||||
|     const latitude = Cesium.Math.toDegrees(pointDe.latitude); | ||||
|     return { lon: longitude, lat: latitude } | ||||
|  | ||||
|   } | ||||
|   createLineBufferPolygon(viewer, positions, width) { | ||||
|     // 计算每个线段的左右偏移点 | ||||
|     const leftPositions = []; | ||||
|     const rightPositions = []; | ||||
|  | ||||
|     for (let i = 0; i < positions.length; i++) { | ||||
|       const start = positions[i]; | ||||
|       const end = positions[i + 1] || positions[i - 1]; | ||||
|  | ||||
|       // 计算线段方向向量 | ||||
|       const direction = Cesium.Cartesian3.subtract(end, start, new Cesium.Cartesian3()); | ||||
|       // const direction = Cesium.Cartesian3.subtract(start, end, new Cesium.Cartesian3()); | ||||
|       Cesium.Cartesian3.normalize(direction, direction); | ||||
|  | ||||
|       // 计算垂直向量(使用上向量叉积) | ||||
|       const up = Cesium.Cartesian3.UNIT_Z; | ||||
|       const perpendicular = Cesium.Cartesian3.cross(direction, up, new Cesium.Cartesian3()); | ||||
|       Cesium.Cartesian3.normalize(perpendicular, perpendicular); | ||||
|  | ||||
|       // 计算左右偏移点 | ||||
|       const leftOffset = Cesium.Cartesian3.multiplyByScalar( | ||||
|         perpendicular, | ||||
|         width, | ||||
|         new Cesium.Cartesian3() | ||||
|       ); | ||||
|  | ||||
|       if (width > 0) { | ||||
|         rightPositions.unshift(Cesium.Cartesian3.add(start, leftOffset, new Cesium.Cartesian3())); | ||||
|       } else if (width < 0) { | ||||
|         rightPositions.push(Cesium.Cartesian3.add(start, leftOffset, new Cesium.Cartesian3())); | ||||
|       } | ||||
|  | ||||
|     } | ||||
|     return rightPositions | ||||
|   } | ||||
|   //计算角度 | ||||
|   calculateAangle(arr) { | ||||
|     // let fromDegreesArray = that.calSector(that.options.center, that.options.radius, that.options.startAngle, that.options.endAngle, 360, true) | ||||
|  | ||||
|     function getAangle(start, end) { | ||||
|       let rad = Math.PI / 180, | ||||
|         lat1 = start.y * rad, | ||||
|         lat2 = end.y * rad, | ||||
|         lon1 = start.x * rad, | ||||
|         lon2 = end.x * rad; | ||||
|       const a = Math.sin(lon2 - lon1) * Math.cos(lat2); | ||||
|       const b = | ||||
|         Math.cos(lat1) * Math.sin(lat2) - | ||||
|         Math.sin(lat1) * Math.cos(lat2) * Math.cos(lon2 - lon1); | ||||
|       const radians = Math.atan2(a, b) | ||||
|       const degrees = radians % (2 * Math.PI); | ||||
|       let bearing = 450 - ((degrees * 180) / Math.PI < 0 | ||||
|         ? 360 + (degrees * 180) / Math.PI | ||||
|         : (degrees * 180) / Math.PI) - 90; | ||||
|       return 360 - (bearing % 360) | ||||
|     } | ||||
|  | ||||
|     let center = arr[0] | ||||
|     let pos84_1 = arr[1] | ||||
|     let pos84_2 = arr[2] | ||||
|  | ||||
|     let start = { x: center.lng, y: center.lat } | ||||
|     let end1 = { x: pos84_1.lng, y: pos84_1.lat } | ||||
|     let end2 = { x: pos84_2.lng, y: pos84_2.lat } | ||||
|  | ||||
|     let angle1 = getAangle(start, end1) | ||||
|     let angle2 = getAangle(start, end2) | ||||
|  | ||||
|     return { | ||||
|       angle1, | ||||
|       angle2 | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   get carRoadWidth() { | ||||
|     return this.options.carRoadWidth | ||||
|   } | ||||
|  | ||||
|   set carRoadWidth(v) { | ||||
|     this.options.carRoadWidth = v | ||||
|     Road.create(this) | ||||
|  | ||||
|   } | ||||
|   get sideWidth() { | ||||
|     return this.options.sideWidth | ||||
|   } | ||||
|   set sideWidth(v) { | ||||
|     this.options.sideWidth = v | ||||
|     Road.create(this) | ||||
|   } | ||||
|   /** | ||||
|    * @description 编辑框 | ||||
|    * @param state=false {boolean} 状态: true打开, false关闭 | ||||
|    */ | ||||
|   async edit(state = false) { | ||||
|     let _this = this | ||||
|     this.originalOptions = this.deepCopyObj(this.options) | ||||
|  | ||||
|     if (this._DialogObject && this._DialogObject.close) { | ||||
|       this._DialogObject.close() | ||||
|       this._DialogObject = null | ||||
|     } | ||||
|  | ||||
|     if (state) { | ||||
|       this._DialogObject = await new Dialog(this.sdk, this.originalOptions, { | ||||
|         title: '道路属性', left: '180px', top: '100px', | ||||
|         confirmCallBack: (options) => { | ||||
|           this.name = this.name.trim() | ||||
|           if (!this.name) { | ||||
|             this.name = '道路' | ||||
|           } | ||||
|           this.originalOptions = this.deepCopyObj(this.options) | ||||
|           this._DialogObject.close() | ||||
|           this.Dialog.confirmCallBack && this.Dialog.confirmCallBack(this.originalOptions) | ||||
|           syncData(this.sdk, this.options.id) | ||||
|           syncSplitData(this.sdk, this.options.id) | ||||
|         }, | ||||
|         resetCallBack: () => { | ||||
|           this.reset() | ||||
|           this.Dialog.resetCallBack && this.Dialog.resetCallBack() | ||||
|         }, | ||||
|         closeCallBack: () => { | ||||
|           this.reset() | ||||
|           this.Dialog.closeCallBack && this.Dialog.closeCallBack() | ||||
|         }, | ||||
|         showCallBack: (show) => { | ||||
|           this.show = show | ||||
|           this.Dialog.showCallBack && this.Dialog.showCallBack() | ||||
|         } | ||||
|       }, true) | ||||
|       this._DialogObject._element.body.className = this._DialogObject._element.body.className + ' road-surface' | ||||
|       let contentElm = document.createElement('div'); | ||||
|       contentElm.innerHTML = html() | ||||
|       this._DialogObject.contentAppChild(contentElm) | ||||
|  | ||||
|  | ||||
|       // 下拉选项 | ||||
|       // let heightModeData = [ | ||||
|       //   { | ||||
|       //     name: '海拔高度', | ||||
|       //     value: '海拔高度', | ||||
|       //     key: '0', | ||||
|       //   }, | ||||
|       //   { | ||||
|       //     name: '相对地表', | ||||
|       //     value: '相对地表', | ||||
|       //     key: '1', | ||||
|       //   }, | ||||
|       //   { | ||||
|       //     name: '依附模型', | ||||
|       //     value: '依附模型', | ||||
|       //     key: '2', | ||||
|       //   } | ||||
|       // ] | ||||
|       // let heightModeObject = legp( | ||||
|       //   this._DialogObject._element.content.getElementsByClassName( | ||||
|       //     'road-box' | ||||
|       //   )[0], | ||||
|       //   '.road-type' | ||||
|       // ) | ||||
|       // if (heightModeObject) { | ||||
|       //   heightModeObject.legp_search(heightModeData) | ||||
|       //   let heightModeDataLegpElm = this._DialogObject._element.content | ||||
|       //     .getElementsByClassName('road-type')[0] | ||||
|       //     .getElementsByTagName('input')[0] | ||||
|       //   for (let i = 0; i < heightModeData.length; i++) { | ||||
|       //     if (heightModeData[i].key == this.heightMode) { | ||||
|       //       heightModeDataLegpElm.value = heightModeData[i].value | ||||
|       //       heightModeObject.legp_searchActive( | ||||
|       //         heightModeData[i].value | ||||
|       //       ) | ||||
|       //       break | ||||
|       //     } | ||||
|       //   } | ||||
|       //   heightModeDataLegpElm.addEventListener('input', () => { | ||||
|       //     for (let i = 0; i < heightModeData.length; i++) { | ||||
|       //       if (heightModeData[i].value === heightModeDataLegpElm.value) { | ||||
|       //         this.heightMode = heightModeData[i].key | ||||
|       //         break | ||||
|       //       } | ||||
|       //     } | ||||
|       //   }) | ||||
|  | ||||
|  | ||||
|       //   this._elms.height = heightElm | ||||
|       //   this._elms.heightBox = heightBoxElm | ||||
|       //   this._elms.heightMode = heightModeDataLegpElm | ||||
|       //   this._elms.heightConfirm = heightConfirmElm | ||||
|       //   this._elms.heightModeObject = heightModeObject | ||||
|  | ||||
|       //   heightConfirmElm.addEventListener('click', () => { | ||||
|       //     this.positionEditing = false | ||||
|       //     for (let i = 0; i < this.options.positions.length; i++) { | ||||
|       //       this.options.positions[i].alt = Number((this.options.positions[i].alt + Number(heightElm.value)).toFixed(2)) | ||||
|       //       this._elms.alt[i].innerHTML = this.options.positions[i].alt | ||||
|       //     } | ||||
|       //     let fromDegreesArray = this.renewPositions(this.options.positions) | ||||
|       //     this.entity.polyline.positions = Cesium.Cartesian3.fromDegreesArrayHeights( | ||||
|       //       fromDegreesArray | ||||
|       //     ) | ||||
|  | ||||
|       //     this.positionEditing = false | ||||
|       //     PolylineObject.closeNodeEdit(this) | ||||
|       //   }) | ||||
|       // } | ||||
|  | ||||
|  | ||||
|  | ||||
|  | ||||
|  | ||||
|       let all_elm = contentElm.getElementsByTagName("*") | ||||
|       this._EventBinding.on(this, all_elm) | ||||
|       this._elms = this._EventBinding.element | ||||
|     } else { | ||||
|       // if (this._element_style) { | ||||
|       //   document.getElementsByTagName('head')[0].removeChild(this._element_style) | ||||
|       //   this._element_style = null | ||||
|       // } | ||||
|       // if (this._DialogObject && this._DialogObject.remove) { | ||||
|       //   this._DialogObject.remove() | ||||
|       //   this._DialogObject = null | ||||
|       // } | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   reset() { | ||||
|     if (!this.viewer.entities.getById(this.options.id)) { | ||||
|       return | ||||
|     } | ||||
|     this.name = this.originalOptions.name | ||||
|     this.carRoadWidth = this.originalOptions.carRoadWidth | ||||
|     this.sideWidth = this.originalOptions.sideWidth | ||||
|     this.positions = this.originalOptions.positions | ||||
|     this.roadImage = this.originalOptions.roadImage | ||||
|     this.sideImage = this.originalOptions.sideImage | ||||
|   } | ||||
|  | ||||
|   /** | ||||
|    * 飞到对应实体 | ||||
|    */ | ||||
|   async flyTo(options = {}) { | ||||
|     setActiveViewer(0) | ||||
|     closeRotateAround(this.sdk) | ||||
|     closeViewFollow(this.sdk) | ||||
|  | ||||
|     if (this.options.customView && this.options.customView.relativePosition && this.options.customView.orientation) { | ||||
|       let orientation = { | ||||
|         heading: Cesium.Math.toRadians(this.options.customView.orientation.heading || 0.0), | ||||
|         pitch: Cesium.Math.toRadians(this.options.customView.orientation.pitch || -60.0), | ||||
|         roll: Cesium.Math.toRadians(this.options.customView.orientation.roll || 0.0) | ||||
|       } | ||||
|  | ||||
|       let lng = this.options.customView.relativePosition.lng | ||||
|       let lat = this.options.customView.relativePosition.lat | ||||
|       let alt = this.options.customView.relativePosition.alt | ||||
|       let destination = Cesium.Cartesian3.fromDegrees(lng, lat, alt) | ||||
|  | ||||
|       let position = { lng: 0, lat: 0 } | ||||
|       if (this.options.position) { | ||||
|         position = { ...this.options.position } | ||||
|       } | ||||
|       else if (this.options.positions) { | ||||
|         position = { ...this.options.positions[0] } | ||||
|       } | ||||
|       else if (this.options.center) { | ||||
|         position = { ...this.options.center } | ||||
|       } | ||||
|       else if (this.options.start) { | ||||
|         position = { ...this.options.start } | ||||
|       } | ||||
|       else { | ||||
|         if (this.options.hasOwnProperty('lng')) { | ||||
|           position.lng = this.options.lng | ||||
|         } | ||||
|         if (this.options.hasOwnProperty('lat')) { | ||||
|           position.lat = this.options.lat | ||||
|         } | ||||
|         if (this.options.hasOwnProperty('alt')) { | ||||
|           position.alt = this.options.alt | ||||
|         } | ||||
|       } | ||||
|       // 如果没有高度值,则获取紧贴高度计算 | ||||
|       // if (!position.hasOwnProperty('alt')) { | ||||
|       //   position.alt = await this.getClampToHeight(position) | ||||
|       // } | ||||
|       lng = this.options.customView.relativePosition.lng + position.lng | ||||
|       lat = this.options.customView.relativePosition.lat + position.lat | ||||
|       alt = this.options.customView.relativePosition.alt + position.alt | ||||
|       destination = Cesium.Cartesian3.fromDegrees(lng, lat, alt) | ||||
|       this.sdk.viewer.camera.flyTo({ | ||||
|         destination: destination, | ||||
|         orientation: orientation | ||||
|       }) | ||||
|     } | ||||
|     else { | ||||
|       let positionArray = [] | ||||
|       for (let i = 0; i < this.positions.length; i++) { | ||||
|         let a = Cesium.Cartesian3.fromDegrees( | ||||
|           this.positions[i][0], | ||||
|           this.positions[i][1], | ||||
|           this.options.height + this.options.heightDifference / 2 | ||||
|         ) | ||||
|         positionArray.push(a.x, a.y, a.z) | ||||
|       } | ||||
|       let BoundingSphere = Cesium.BoundingSphere.fromVertices(positionArray) | ||||
|       this.viewer.camera.flyToBoundingSphere(BoundingSphere, { | ||||
|         offset: { | ||||
|           heading: Cesium.Math.toRadians(0.0), | ||||
|           pitch: Cesium.Math.toRadians(-20.0), | ||||
|           roll: Cesium.Math.toRadians(0.0) | ||||
|         } | ||||
|       }) | ||||
|  | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   getSphere() { | ||||
|     return new Promise((resolve) => { | ||||
|       // entity没有加载完成时 state 不会等于0 所以设置定时器直到获取到为止 | ||||
|       const interval = setInterval(() => { | ||||
|         const sphere = new Cesium.BoundingSphere() | ||||
|         const state = this.sdk.viewer._dataSourceDisplay.getBoundingSphere( | ||||
|           this.viewer.entities.getById(this.options.id), | ||||
|           false, | ||||
|           sphere | ||||
|         ) | ||||
|         if (state === Cesium.BoundingSphereState.DONE) { | ||||
|           clearInterval(interval) | ||||
|         } | ||||
|       }, 1000) | ||||
|     }) | ||||
|   } | ||||
|  | ||||
|   /** | ||||
|    * 删除 | ||||
|    */ | ||||
|   async remove() { | ||||
|     this.positions = [] | ||||
|     this.lineEntity = null | ||||
|  | ||||
|     if (this.viewer.entities.getById(this.options.id)) { | ||||
|       this.viewer.entities.getById(this.options.id)._children.forEach((item) => { | ||||
|         this.viewer.entities.remove(item); | ||||
|       }); | ||||
|       this.viewer.entities.remove(this.viewer.entities.getById(this.options.id)) | ||||
|     } | ||||
|  | ||||
|     if (this._DialogObject && !this._DialogObject.isDestroy) { | ||||
|       this._DialogObject.close() | ||||
|       this._DialogObject = null | ||||
|     } | ||||
|     await this.sdk.removeIncetance(this.options.id) | ||||
|     await syncData(this.sdk, this.options.id) | ||||
|   } | ||||
|  | ||||
|   flicker() { } | ||||
| } | ||||
|  | ||||
| export default Road | ||||
							
								
								
									
										615
									
								
								src/Obj/Base/RoadObject/index-直接连接.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										615
									
								
								src/Obj/Base/RoadObject/index-直接连接.js
									
									
									
									
									
										Normal file
									
								
							| @ -0,0 +1,615 @@ | ||||
| /** | ||||
|  * @description 道路 | ||||
|  */ | ||||
| import Dialog from '../../Element/Dialog'; | ||||
| import { html } from "./_element"; | ||||
| import EventBinding from '../../Element/Dialog/eventBinding'; | ||||
| import Base from "../index"; | ||||
| import { syncData } from '../../../Global/MultiViewportMode' | ||||
| import { setSplitDirection, syncSplitData, setActiveId } from '../../../Global/SplitScreen' | ||||
| import { setActiveViewer, closeRotateAround, closeViewFollow } from '../../../Global/global' | ||||
|  | ||||
| class Road extends Base { | ||||
|   /** | ||||
|    * @constructor | ||||
|    * @param sdk | ||||
|    * @description 道路 | ||||
|    * @param options {object} 道路属性 | ||||
|    * @param options.name=未命名对象 {string} 名称 | ||||
|    * @param options.carRoadWidth=2 {number} 车道宽度 | ||||
|    * @param options.sideWidth=2 {number} 人行道宽度 | ||||
|    * @param options.positions=[] {array} 道路positions | ||||
|    * @param options.roadImage='' {string} 车道贴图 | ||||
|    * @param options.sideImage='' {string} 人行道贴图 | ||||
|    * @param Dialog {object} 弹框对象 | ||||
|    * @param Dialog.confirmCallBack {function} 弹框确认时的回调 | ||||
|    * */ | ||||
|   constructor(sdk, options = {}, _Dialog = {}) { | ||||
|     super(sdk, options); | ||||
|     this.viewer = this.sdk.viewer | ||||
|     this.options.name = options.name || '道路' | ||||
|     this.options.carRoadWidth = options.carRoadWidth || 10 | ||||
|     this.options.sideWidth = options.sideWidth || 5 | ||||
|     this.options.positions = options.positions || [] | ||||
|     this.options.roadImage = options.roadImage || (this.getSourceRootPath() + '/img/roadPhoto.png') | ||||
|     this.options.sideImage = options.sideImage || (this.getSourceRootPath() + '/img/sidePhoto.png') | ||||
|     this.options.show = (options.show || options.show === false) ? options.show : true | ||||
|     this.Dialog = _Dialog | ||||
|     this._EventBinding = new EventBinding() | ||||
|     this._elms = {}; | ||||
|     this.positionArea = [] | ||||
|     this.positions = [] | ||||
|     this.lineEntity = '' | ||||
|  | ||||
|     this.sdk.addIncetance(this.options.id, this) | ||||
|     Road.create(this) | ||||
|   } | ||||
|  | ||||
|   // 创建道路 | ||||
|   static create(that) { | ||||
|     let positions = [] | ||||
|     that.options.positions.forEach(v => { | ||||
|       positions.push(new Cesium.Cartesian3.fromDegrees(v.lng, v.lat, v.alt)) | ||||
|     }) | ||||
|  | ||||
|     let area = [[], [], []] | ||||
|     area[1] = that.createLineBufferPolygon2(positions, that.options.carRoadWidth / 2) | ||||
|     area[0] = that.createLineBufferPolygonSide(area[1][2], -that.options.sideWidth) | ||||
|     area[2] = that.createLineBufferPolygonSide(area[1][1], that.options.sideWidth) | ||||
|  | ||||
|     if (that.viewer.entities.getById(that.options.id)) { | ||||
|       that.viewer.entities.getById(that.options.id)._children.forEach((item) => { | ||||
|         that.viewer.entities.remove(item); | ||||
|       }); | ||||
|       that.viewer.entities.remove(that.viewer.entities.getById(that.options.id)) | ||||
|     } | ||||
|     that.lineEntity = that.viewer.entities.add(new Cesium.Entity({ id: that.options.id, show: that.options.show })) | ||||
|  | ||||
|     const myImg = new Image() | ||||
|     myImg.src = that.options.roadImage | ||||
|     myImg.onload = function () { | ||||
|       area[1][0].forEach((item, index) => { | ||||
|         that.viewer.entities.add({ | ||||
|           // id: that.options.id, | ||||
|           parent: that.lineEntity, | ||||
|           polygon: { | ||||
|             hierarchy: new Cesium.PolygonHierarchy(item), | ||||
|             material: new Cesium.ImageMaterialProperty({ | ||||
|               image: that.options.roadImage, | ||||
|               transparent: true,// 如果图片有透明部分,需要设置为 true | ||||
|               repeat: that.calculateTextureRepeat(item, myImg) | ||||
|             }), | ||||
|             stRotation: that.calculateRoadAngle(positions[index], positions[index + 1]) | ||||
|           } | ||||
|         }); | ||||
|       }) | ||||
|     } | ||||
|  | ||||
|     const myImg2 = new Image() | ||||
|     myImg2.src = that.options.sideImage | ||||
|     myImg2.onload = function () { | ||||
|       area[0].forEach((item, index) => { | ||||
|         that.viewer.entities.add({ | ||||
|           parent: that.lineEntity, | ||||
|           polygon: { | ||||
|             hierarchy: new Cesium.PolygonHierarchy(item), | ||||
|             material: new Cesium.ImageMaterialProperty({ | ||||
|               image: that.options.sideImage, | ||||
|               transparent: true,// 如果图片有透明部分,需要设置为 true | ||||
|               repeat: that.calculateTextureRepeat(item, myImg2) | ||||
|             }), | ||||
|             stRotation: that.calculateRoadAngle(positions[index], positions[index + 1]) | ||||
|           } | ||||
|         }); | ||||
|       }) | ||||
|  | ||||
|       area[2].forEach((item, index) => { | ||||
|         that.viewer.entities.add({ | ||||
|           polygon: { | ||||
|             hierarchy: new Cesium.PolygonHierarchy(item), | ||||
|             material: new Cesium.ImageMaterialProperty({ | ||||
|               image: that.options.sideImage, | ||||
|               transparent: true,// 如果图片有透明部分,需要设置为 true | ||||
|               repeat: that.calculateTextureRepeat(item, myImg2) | ||||
|             }), | ||||
|             stRotation: that.calculateRoadAngle(positions[index], positions[index + 1]) | ||||
|           } | ||||
|         }); | ||||
|       }) | ||||
|  | ||||
|     } | ||||
|  | ||||
|   } | ||||
|   getArr(arr1, arr2) { | ||||
|     arr2 = arr2.reverse() | ||||
|     let polygon = [] | ||||
|     for (let index = 0; index < arr1.length - 1; index++) { | ||||
|       polygon.push([arr1[index], arr1[index + 1], arr2[index + 1], arr2[index]]) | ||||
|     } | ||||
|     return polygon | ||||
|   } | ||||
|  | ||||
|   calculateRoadAngle(startPoint, endPoint) { | ||||
|     // 1. 获取地表法向量 | ||||
|     const normal = Cesium.Ellipsoid.WGS84.geodeticSurfaceNormal(startPoint); | ||||
|  | ||||
|     // 2. 构建精确ENU坐标系 | ||||
|     const enuMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(startPoint, undefined, normal); | ||||
|     const inverseMatrix = Cesium.Matrix4.inverse(enuMatrix, new Cesium.Matrix4()); | ||||
|  | ||||
|     // 3. 转换终点并计算水平向量 | ||||
|     const localEnd = Cesium.Matrix4.multiplyByPoint(inverseMatrix, endPoint, new Cesium.Cartesian3()); | ||||
|     const horizontalVec = new Cesium.Cartesian2(localEnd.x, localEnd.y); | ||||
|     Cesium.Cartesian2.normalize(horizontalVec, horizontalVec); | ||||
|  | ||||
|     const north = new Cesium.Cartesian2(1, 0); | ||||
|  | ||||
|     const angle = Cesium.Cartesian2.angleBetween(north, horizontalVec); | ||||
|     const cross = Cesium.Cartesian2.cross(north, horizontalVec, new Cesium.Cartesian2()); | ||||
|     return cross < 0 ? angle : -angle; | ||||
|   } | ||||
|  | ||||
|   calculatePolygonOrientation(positions) { | ||||
|  | ||||
|     // 假设 position 是 Cesium.Cartesian3 对象,表示地球上的某个点 | ||||
|     var position = positions[0] | ||||
|     // 获取东、北、上坐标系 | ||||
|     var eastNorthUp = Cesium.Transforms.eastNorthUpToFixedFrame(position); | ||||
|     // northAxis 是北方向向量 | ||||
|     var northAxis = eastNorthUp.getColumn(1, new Cesium.Cartesian3()); | ||||
|     Cesium.Cartesian3.normalize(northAxis, northAxis); | ||||
|  | ||||
|     const direction = Cesium.Cartesian3.subtract(positions[0], positions[1], new Cesium.Cartesian3()); | ||||
|     Cesium.Cartesian3.normalize(direction, direction); | ||||
|  | ||||
|  | ||||
|     const dot = Cesium.Cartesian3.dot(northAxis, direction); | ||||
|     const magA = Cesium.Cartesian3.magnitude(northAxis); | ||||
|     const magB = Cesium.Cartesian3.magnitude(direction); | ||||
|     return Math.acos(dot / (magA * magB)); | ||||
|   } | ||||
|   calculateTextureRepeat(polygonPositions, textureSize, meterPerPixel = 0.01) { | ||||
|     // 验证纹理尺寸 | ||||
|     if (!textureSize.width || !textureSize.height) { | ||||
|       throw new Error('Texture size must contain width and height in pixels'); | ||||
|     } | ||||
|  | ||||
|     // 创建多边形几何体 | ||||
|     const geometry = Cesium.PolygonGeometry.createGeometry( | ||||
|       new Cesium.PolygonGeometry({ | ||||
|         polygonHierarchy: new Cesium.PolygonHierarchy(polygonPositions), | ||||
|         vertexFormat: Cesium.VertexFormat.POSITION_ONLY | ||||
|       }) | ||||
|     ); | ||||
|  | ||||
|     // 计算多边形面积(平方米) | ||||
|     let area = 0; | ||||
|     const indices = geometry.indices; | ||||
|     const positions = geometry.attributes.position.values; | ||||
|     for (let i = 0; i < indices.length; i += 3) { | ||||
|       const i0 = indices[i] * 3; | ||||
|       const i1 = indices[i + 1] * 3; | ||||
|       const i2 = indices[i + 2] * 3; | ||||
|  | ||||
|       const p0 = new Cesium.Cartesian3(positions[i0], positions[i0 + 1], positions[i0 + 2]); | ||||
|       const p1 = new Cesium.Cartesian3(positions[i1], positions[i1 + 1], positions[i1 + 2]); | ||||
|       const p2 = new Cesium.Cartesian3(positions[i2], positions[i2 + 1], positions[i2 + 2]); | ||||
|  | ||||
|       const cross = Cesium.Cartesian3.cross( | ||||
|         Cesium.Cartesian3.subtract(p1, p0, new Cesium.Cartesian3()), | ||||
|         Cesium.Cartesian3.subtract(p2, p0, new Cesium.Cartesian3()), | ||||
|         new Cesium.Cartesian3() | ||||
|       ); | ||||
|       area += Cesium.Cartesian3.magnitude(cross) * 0.5; | ||||
|     } | ||||
|  | ||||
|     // 将像素尺寸转换为实际尺寸(平方米) | ||||
|     const textureWidthMeters = textureSize.width * meterPerPixel; | ||||
|     const textureHeightMeters = textureSize.height * meterPerPixel; | ||||
|     const textureArea = textureWidthMeters * textureHeightMeters; | ||||
|  | ||||
|     // 计算各轴向重复次数 | ||||
|     const repeatX = Math.sqrt(area) / textureWidthMeters; | ||||
|     const repeatY = Math.sqrt(area) / textureHeightMeters; | ||||
|  | ||||
|     return new Cesium.Cartesian2(Math.max(1, Math.ceil(repeatX)), 1.0); | ||||
|   } | ||||
|   swapLastElements(arr1, arr2) { | ||||
|     const last = arr1[arr1.length - 1] | ||||
|     const first = arr2[0] | ||||
|     arr1[arr1.length - 1] = first | ||||
|     arr2[0] = last | ||||
|  | ||||
|     return [arr1, arr2]; | ||||
|   } | ||||
|   createLineBufferPolygonSide(positions, width) { | ||||
|     let area = [] | ||||
|     for (let i = 0; i < positions.length - 1; i++) { | ||||
|       const start = positions[i]; | ||||
|       const end = positions[i + 1]; | ||||
|  | ||||
|       const dir = Cesium.Cartesian3.subtract(end, start, new Cesium.Cartesian3()); | ||||
|       Cesium.Cartesian3.normalize(dir, dir); | ||||
|  | ||||
|       // 获取垂直向量(基于Z轴) | ||||
|       const perp = Cesium.Cartesian3.cross(dir, Cesium.Cartesian3.UNIT_Z, new Cesium.Cartesian3()); | ||||
|       Cesium.Cartesian3.normalize(perp, perp); | ||||
|  | ||||
|       // 生成偏移向量 | ||||
|       const offset = Cesium.Cartesian3.multiplyByScalar(perp, width, new Cesium.Cartesian3()); | ||||
|       let point1 = Cesium.Cartesian3.add(start, offset, new Cesium.Cartesian3()) | ||||
|       let point3 = Cesium.Cartesian3.add(end, offset, new Cesium.Cartesian3()) | ||||
|  | ||||
|       i == positions.length - 2 ? area.push(start, point1, end, point3) : area.push(start, point1) | ||||
|     } | ||||
|     let arr = [] | ||||
|     for (let i = 0; i < area.length - 2; i += 2) { | ||||
|       arr.push([area[i], area[i + 1], area[i + 3], area[i + 2]]) | ||||
|     } | ||||
|     return arr | ||||
|   } | ||||
|   createLineBufferPolygon2(positions, width) { | ||||
|     let area = [] | ||||
|     let leftPositions = []; | ||||
|     let rightPositions = []; | ||||
|  | ||||
|     for (let i = 0; i < positions.length - 1; i++) { | ||||
|       const start = positions[i]; | ||||
|       // const end = positions[i + 1] || positions[i - 1]; | ||||
|       const end = positions[i + 1]; | ||||
|  | ||||
|       const dir = Cesium.Cartesian3.subtract(end, start, new Cesium.Cartesian3()); | ||||
|       Cesium.Cartesian3.normalize(dir, dir); | ||||
|  | ||||
|       // 获取垂直向量(基于Z轴) | ||||
|       const perp = Cesium.Cartesian3.cross(dir, Cesium.Cartesian3.UNIT_Z, new Cesium.Cartesian3()); | ||||
|       Cesium.Cartesian3.normalize(perp, perp); | ||||
|  | ||||
|  | ||||
|       // 生成偏移向量 | ||||
|       const offset = Cesium.Cartesian3.multiplyByScalar(perp, width, new Cesium.Cartesian3()); | ||||
|       const offset2 = Cesium.Cartesian3.multiplyByScalar(perp, -width, new Cesium.Cartesian3()); | ||||
|       let point1 = Cesium.Cartesian3.add(start, offset, new Cesium.Cartesian3()) | ||||
|       let point2 = Cesium.Cartesian3.add(start, offset2, new Cesium.Cartesian3()) | ||||
|       let point3 = Cesium.Cartesian3.add(end, offset, new Cesium.Cartesian3()) | ||||
|       let point4 = Cesium.Cartesian3.add(end, offset2, new Cesium.Cartesian3()) | ||||
|  | ||||
|       if (i == positions.length - 2) { | ||||
|         area.push(point1, point2, point3, point4) | ||||
|         rightPositions.push(point1) | ||||
|         leftPositions.push(point2) | ||||
|         leftPositions.push(point4) | ||||
|         rightPositions.push(point3) | ||||
|       } else { | ||||
|         area.push(point1, point2) | ||||
|         rightPositions.push(point1) | ||||
|         leftPositions.push(point2) | ||||
|       } | ||||
|     } | ||||
|     let arr = [] | ||||
|     for (let i = 0; i < area.length - 2; i += 2) { | ||||
|       arr.push([area[i], area[i + 1], area[i + 3], area[i + 2]]) | ||||
|     } | ||||
|     return [arr, rightPositions, leftPositions] | ||||
|   } | ||||
|   createLineBufferPolygon(viewer, positions, width) { | ||||
|     // 计算每个线段的左右偏移点 | ||||
|     const leftPositions = []; | ||||
|     const rightPositions = []; | ||||
|  | ||||
|     for (let i = 0; i < positions.length; i++) { | ||||
|       const start = positions[i]; | ||||
|       const end = positions[i + 1] || positions[i - 1]; | ||||
|  | ||||
|       // 计算线段方向向量 | ||||
|       const direction = Cesium.Cartesian3.subtract(end, start, new Cesium.Cartesian3()); | ||||
|       // const direction = Cesium.Cartesian3.subtract(start, end, new Cesium.Cartesian3()); | ||||
|       Cesium.Cartesian3.normalize(direction, direction); | ||||
|  | ||||
|       // 计算垂直向量(使用上向量叉积) | ||||
|       const up = Cesium.Cartesian3.UNIT_Z; | ||||
|       const perpendicular = Cesium.Cartesian3.cross(direction, up, new Cesium.Cartesian3()); | ||||
|       Cesium.Cartesian3.normalize(perpendicular, perpendicular); | ||||
|  | ||||
|       // 计算左右偏移点 | ||||
|       const leftOffset = Cesium.Cartesian3.multiplyByScalar( | ||||
|         perpendicular, | ||||
|         width, | ||||
|         new Cesium.Cartesian3() | ||||
|       ); | ||||
|  | ||||
|       if (width > 0) { | ||||
|         rightPositions.unshift(Cesium.Cartesian3.add(start, leftOffset, new Cesium.Cartesian3())); | ||||
|       } else if (width < 0) { | ||||
|         rightPositions.push(Cesium.Cartesian3.add(start, leftOffset, new Cesium.Cartesian3())); | ||||
|       } | ||||
|  | ||||
|     } | ||||
|     return rightPositions | ||||
|   } | ||||
|  | ||||
|   get carRoadWidth() { | ||||
|     return this.options.carRoadWidth | ||||
|   } | ||||
|  | ||||
|   set carRoadWidth(v) { | ||||
|     this.options.carRoadWidth = v | ||||
|     Road.create(this) | ||||
|  | ||||
|   } | ||||
|   get sideWidth() { | ||||
|     return this.options.sideWidth | ||||
|   } | ||||
|   set sideWidth(v) { | ||||
|     this.options.sideWidth = v | ||||
|     Road.create(this) | ||||
|   } | ||||
|   /** | ||||
|    * @description 编辑框 | ||||
|    * @param state=false {boolean} 状态: true打开, false关闭 | ||||
|    */ | ||||
|   async edit(state = false) { | ||||
|     let _this = this | ||||
|     this.originalOptions = this.deepCopyObj(this.options) | ||||
|  | ||||
|     if (this._DialogObject && this._DialogObject.close) { | ||||
|       this._DialogObject.close() | ||||
|       this._DialogObject = null | ||||
|     } | ||||
|  | ||||
|     if (state) { | ||||
|       this._DialogObject = await new Dialog(this.sdk, this.originalOptions, { | ||||
|         title: '道路属性', left: '180px', top: '100px', | ||||
|         confirmCallBack: (options) => { | ||||
|           this.name = this.name.trim() | ||||
|           if (!this.name) { | ||||
|             this.name = '道路' | ||||
|           } | ||||
|           this.originalOptions = this.deepCopyObj(this.options) | ||||
|           this._DialogObject.close() | ||||
|           this.Dialog.confirmCallBack && this.Dialog.confirmCallBack(this.originalOptions) | ||||
|           syncData(this.sdk, this.options.id) | ||||
|           syncSplitData(this.sdk, this.options.id) | ||||
|         }, | ||||
|         resetCallBack: () => { | ||||
|           this.reset() | ||||
|           this.Dialog.resetCallBack && this.Dialog.resetCallBack() | ||||
|         }, | ||||
|         closeCallBack: () => { | ||||
|           this.reset() | ||||
|           this.Dialog.closeCallBack && this.Dialog.closeCallBack() | ||||
|         }, | ||||
|         showCallBack: (show) => { | ||||
|           this.show = show | ||||
|           this.Dialog.showCallBack && this.Dialog.showCallBack() | ||||
|         } | ||||
|       }, true) | ||||
|       this._DialogObject._element.body.className = this._DialogObject._element.body.className + ' road-surface' | ||||
|       let contentElm = document.createElement('div'); | ||||
|       contentElm.innerHTML = html() | ||||
|       this._DialogObject.contentAppChild(contentElm) | ||||
|  | ||||
|  | ||||
|       // 下拉选项 | ||||
|       // let heightModeData = [ | ||||
|       //   { | ||||
|       //     name: '海拔高度', | ||||
|       //     value: '海拔高度', | ||||
|       //     key: '0', | ||||
|       //   }, | ||||
|       //   { | ||||
|       //     name: '相对地表', | ||||
|       //     value: '相对地表', | ||||
|       //     key: '1', | ||||
|       //   }, | ||||
|       //   { | ||||
|       //     name: '依附模型', | ||||
|       //     value: '依附模型', | ||||
|       //     key: '2', | ||||
|       //   } | ||||
|       // ] | ||||
|       // let heightModeObject = legp( | ||||
|       //   this._DialogObject._element.content.getElementsByClassName( | ||||
|       //     'road-box' | ||||
|       //   )[0], | ||||
|       //   '.road-type' | ||||
|       // ) | ||||
|       // if (heightModeObject) { | ||||
|       //   heightModeObject.legp_search(heightModeData) | ||||
|       //   let heightModeDataLegpElm = this._DialogObject._element.content | ||||
|       //     .getElementsByClassName('road-type')[0] | ||||
|       //     .getElementsByTagName('input')[0] | ||||
|       //   for (let i = 0; i < heightModeData.length; i++) { | ||||
|       //     if (heightModeData[i].key == this.heightMode) { | ||||
|       //       heightModeDataLegpElm.value = heightModeData[i].value | ||||
|       //       heightModeObject.legp_searchActive( | ||||
|       //         heightModeData[i].value | ||||
|       //       ) | ||||
|       //       break | ||||
|       //     } | ||||
|       //   } | ||||
|       //   heightModeDataLegpElm.addEventListener('input', () => { | ||||
|       //     for (let i = 0; i < heightModeData.length; i++) { | ||||
|       //       if (heightModeData[i].value === heightModeDataLegpElm.value) { | ||||
|       //         this.heightMode = heightModeData[i].key | ||||
|       //         break | ||||
|       //       } | ||||
|       //     } | ||||
|       //   }) | ||||
|  | ||||
|  | ||||
|       //   this._elms.height = heightElm | ||||
|       //   this._elms.heightBox = heightBoxElm | ||||
|       //   this._elms.heightMode = heightModeDataLegpElm | ||||
|       //   this._elms.heightConfirm = heightConfirmElm | ||||
|       //   this._elms.heightModeObject = heightModeObject | ||||
|  | ||||
|       //   heightConfirmElm.addEventListener('click', () => { | ||||
|       //     this.positionEditing = false | ||||
|       //     for (let i = 0; i < this.options.positions.length; i++) { | ||||
|       //       this.options.positions[i].alt = Number((this.options.positions[i].alt + Number(heightElm.value)).toFixed(2)) | ||||
|       //       this._elms.alt[i].innerHTML = this.options.positions[i].alt | ||||
|       //     } | ||||
|       //     let fromDegreesArray = this.renewPositions(this.options.positions) | ||||
|       //     this.entity.polyline.positions = Cesium.Cartesian3.fromDegreesArrayHeights( | ||||
|       //       fromDegreesArray | ||||
|       //     ) | ||||
|  | ||||
|       //     this.positionEditing = false | ||||
|       //     PolylineObject.closeNodeEdit(this) | ||||
|       //   }) | ||||
|       // } | ||||
|  | ||||
|  | ||||
|  | ||||
|  | ||||
|  | ||||
|       let all_elm = contentElm.getElementsByTagName("*") | ||||
|       this._EventBinding.on(this, all_elm) | ||||
|       this._elms = this._EventBinding.element | ||||
|     } else { | ||||
|       // if (this._element_style) { | ||||
|       //   document.getElementsByTagName('head')[0].removeChild(this._element_style) | ||||
|       //   this._element_style = null | ||||
|       // } | ||||
|       // if (this._DialogObject && this._DialogObject.remove) { | ||||
|       //   this._DialogObject.remove() | ||||
|       //   this._DialogObject = null | ||||
|       // } | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   reset() { | ||||
|     if (!this.viewer.entities.getById(this.options.id)) { | ||||
|       return | ||||
|     } | ||||
|     this.name = this.originalOptions.name | ||||
|     this.carRoadWidth = this.originalOptions.carRoadWidth | ||||
|     this.sideWidth = this.originalOptions.sideWidth | ||||
|     this.positions = this.originalOptions.positions | ||||
|     this.roadImage = this.originalOptions.roadImage | ||||
|     this.sideImage = this.originalOptions.sideImage | ||||
|   } | ||||
|  | ||||
|   /** | ||||
|    * 飞到对应实体 | ||||
|    */ | ||||
|   async flyTo(options = {}) { | ||||
|     setActiveViewer(0) | ||||
|     closeRotateAround(this.sdk) | ||||
|     closeViewFollow(this.sdk) | ||||
|  | ||||
|     if (this.options.customView && this.options.customView.relativePosition && this.options.customView.orientation) { | ||||
|       let orientation = { | ||||
|         heading: Cesium.Math.toRadians(this.options.customView.orientation.heading || 0.0), | ||||
|         pitch: Cesium.Math.toRadians(this.options.customView.orientation.pitch || -60.0), | ||||
|         roll: Cesium.Math.toRadians(this.options.customView.orientation.roll || 0.0) | ||||
|       } | ||||
|  | ||||
|       let lng = this.options.customView.relativePosition.lng | ||||
|       let lat = this.options.customView.relativePosition.lat | ||||
|       let alt = this.options.customView.relativePosition.alt | ||||
|       let destination = Cesium.Cartesian3.fromDegrees(lng, lat, alt) | ||||
|  | ||||
|       let position = { lng: 0, lat: 0 } | ||||
|       if (this.options.position) { | ||||
|         position = { ...this.options.position } | ||||
|       } | ||||
|       else if (this.options.positions) { | ||||
|         position = { ...this.options.positions[0] } | ||||
|       } | ||||
|       else if (this.options.center) { | ||||
|         position = { ...this.options.center } | ||||
|       } | ||||
|       else if (this.options.start) { | ||||
|         position = { ...this.options.start } | ||||
|       } | ||||
|       else { | ||||
|         if (this.options.hasOwnProperty('lng')) { | ||||
|           position.lng = this.options.lng | ||||
|         } | ||||
|         if (this.options.hasOwnProperty('lat')) { | ||||
|           position.lat = this.options.lat | ||||
|         } | ||||
|         if (this.options.hasOwnProperty('alt')) { | ||||
|           position.alt = this.options.alt | ||||
|         } | ||||
|       } | ||||
|       // 如果没有高度值,则获取紧贴高度计算 | ||||
|       // if (!position.hasOwnProperty('alt')) { | ||||
|       //   position.alt = await this.getClampToHeight(position) | ||||
|       // } | ||||
|       lng = this.options.customView.relativePosition.lng + position.lng | ||||
|       lat = this.options.customView.relativePosition.lat + position.lat | ||||
|       alt = this.options.customView.relativePosition.alt + position.alt | ||||
|       destination = Cesium.Cartesian3.fromDegrees(lng, lat, alt) | ||||
|       this.sdk.viewer.camera.flyTo({ | ||||
|         destination: destination, | ||||
|         orientation: orientation | ||||
|       }) | ||||
|     } | ||||
|     else { | ||||
|       let positionArray = [] | ||||
|       for (let i = 0; i < this.positions.length; i++) { | ||||
|         let a = Cesium.Cartesian3.fromDegrees( | ||||
|           this.positions[i][0], | ||||
|           this.positions[i][1], | ||||
|           this.options.height + this.options.heightDifference / 2 | ||||
|         ) | ||||
|         positionArray.push(a.x, a.y, a.z) | ||||
|       } | ||||
|       let BoundingSphere = Cesium.BoundingSphere.fromVertices(positionArray) | ||||
|       this.viewer.camera.flyToBoundingSphere(BoundingSphere, { | ||||
|         offset: { | ||||
|           heading: Cesium.Math.toRadians(0.0), | ||||
|           pitch: Cesium.Math.toRadians(-20.0), | ||||
|           roll: Cesium.Math.toRadians(0.0) | ||||
|         } | ||||
|       }) | ||||
|  | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   getSphere() { | ||||
|     return new Promise((resolve) => { | ||||
|       // entity没有加载完成时 state 不会等于0 所以设置定时器直到获取到为止 | ||||
|       const interval = setInterval(() => { | ||||
|         const sphere = new Cesium.BoundingSphere() | ||||
|         const state = this.sdk.viewer._dataSourceDisplay.getBoundingSphere( | ||||
|           this.viewer.entities.getById(this.options.id), | ||||
|           false, | ||||
|           sphere | ||||
|         ) | ||||
|         if (state === Cesium.BoundingSphereState.DONE) { | ||||
|           clearInterval(interval) | ||||
|         } | ||||
|       }, 1000) | ||||
|     }) | ||||
|   } | ||||
|  | ||||
|   /** | ||||
|    * 删除 | ||||
|    */ | ||||
|   async remove() { | ||||
|     this.positions = [] | ||||
|     this.lineEntity = null | ||||
|  | ||||
|     if (this.viewer.entities.getById(this.options.id)) { | ||||
|       this.viewer.entities.getById(this.options.id)._children.forEach((item) => { | ||||
|         this.viewer.entities.remove(item); | ||||
|       }); | ||||
|       this.viewer.entities.remove(this.viewer.entities.getById(this.options.id)) | ||||
|     } | ||||
|  | ||||
|     if (this._DialogObject && !this._DialogObject.isDestroy) { | ||||
|       this._DialogObject.close() | ||||
|       this._DialogObject = null | ||||
|     } | ||||
|     await this.sdk.removeIncetance(this.options.id) | ||||
|     await syncData(this.sdk, this.options.id) | ||||
|   } | ||||
|  | ||||
|   flicker() { } | ||||
| } | ||||
|  | ||||
| export default Road | ||||
							
								
								
									
										1023
									
								
								src/Obj/Base/RoadObject/index-面大小一致.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										1023
									
								
								src/Obj/Base/RoadObject/index-面大小一致.js
									
									
									
									
									
										Normal file
									
								
							
										
											
												File diff suppressed because it is too large
												Load Diff
											
										
									
								
							
							
								
								
									
										1207
									
								
								src/Obj/Base/RoadObject/index.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										1207
									
								
								src/Obj/Base/RoadObject/index.js
									
									
									
									
									
										Normal file
									
								
							
										
											
												File diff suppressed because it is too large
												Load Diff
											
										
									
								
							| @ -344,7 +344,7 @@ class SectorObject extends Base { | ||||
|   } | ||||
|   set labelShow(v) { | ||||
|     this.options.label.show = v | ||||
|     if (this.show) { | ||||
|     if (this.show && !this.showView || this.showView == 3) { | ||||
|       this.label.show = v | ||||
|     } | ||||
|     else { | ||||
|  | ||||
| @ -321,7 +321,7 @@ class StraightArrowObject extends Base { | ||||
|   } | ||||
|   set labelShow(v) { | ||||
|     this.options.label.show = v | ||||
|     if (this.show) { | ||||
|     if (this.show && !this.showView || this.showView == 3) { | ||||
|       this.label.show = v | ||||
|     } | ||||
|     else { | ||||
|  | ||||
							
								
								
									
										243
									
								
								src/Obj/Base/TextBox/index.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										243
									
								
								src/Obj/Base/TextBox/index.js
									
									
									
									
									
										Normal file
									
								
							| @ -0,0 +1,243 @@ | ||||
| /** | ||||
|  * 文本框 | ||||
|  */ | ||||
| import Base from "../index"; | ||||
| import { setActiveViewer, closeRotateAround, closeViewFollow } from '../../../Global/global' | ||||
| class TextBox extends Base { | ||||
|   /** | ||||
|    * @constructor | ||||
|    * @param sdk | ||||
|    * @description 文本框 | ||||
|    * @param options {object} 属性 | ||||
|    * @param options.id=id | ||||
|    * @param options.position=[]位置 | ||||
|    * @param options.text=文本框内容 | ||||
|    * @param options.show=true {boolean}是否显示 | ||||
|    * @param callback=方法回调 | ||||
|    * @param Dialog {object} 弹框对象 | ||||
|    * @param Dialog.confirmCallBack {function} 弹框确认时的回调 | ||||
|    * */ | ||||
|   constructor(sdk, options = {}, callback = null) { | ||||
|     // this.sdk = { ...sdk } | ||||
|     // this.options = { ...options } | ||||
|     super(sdk, options) | ||||
|     this.options.position = options.position || [] | ||||
|     this.options.text = options.text || '' | ||||
|     this.options.show = (options.show || options.show === false) ? options.show : true | ||||
|     this.clickTextDom = undefined | ||||
|     this.handler = undefined | ||||
|     this.textDom = undefined | ||||
|     this.create(this) | ||||
|     this.sdk.addIncetance(this.options.id, this) | ||||
|     this.callback = callback | ||||
|   } | ||||
|  | ||||
|   async create(that) { | ||||
|     let viewer = that.sdk.viewer | ||||
|     // 创建div元素 | ||||
|     let dom = document.createElement('span'); | ||||
|     dom.id = that.options.id | ||||
|     dom.className = 'popup-textarea' | ||||
|     // 创建textarea元素 | ||||
|     var textarea = document.createElement('textarea'); | ||||
|     textarea.className = 'textarea' | ||||
|     textarea.value = that.options.text; | ||||
|     // 设置textarea的属性,例如行数和列数 | ||||
|     textarea.rows = 6; | ||||
|     textarea.style.resize = 'none' | ||||
|     // 将textarea添加到div中 | ||||
|     dom.appendChild(textarea); | ||||
|     (!that.options.show) && (dom.style.display = 'none') | ||||
|     // 将div添加到body中 | ||||
|     // document.body.appendChild(dom); | ||||
|  | ||||
|     // 配置CSS样式和内容结构 | ||||
|     viewer.cesiumWidget.container.appendChild(dom); | ||||
|     let posi = Cesium.Cartesian3.fromDegrees(that.options.position.lng, that.options.position.lat, that.options.position.alt) | ||||
|     that.handler = function () { | ||||
|       const position = Cesium.SceneTransforms.wgs84ToWindowCoordinates( | ||||
|         viewer.scene, posi | ||||
|       ); | ||||
|       if (position) { | ||||
|         let width = dom.clientWidth * 1 | ||||
|         let height = dom.clientHeight * 1 | ||||
|         dom.style.left = `${position.x - width / 2}px`; | ||||
|         dom.style.top = `${position.y - height}px`; | ||||
|       } | ||||
|     } | ||||
|     viewer.scene.postRender.addEventListener(that.handler); | ||||
|     that.textDom = dom; | ||||
|  | ||||
|   } | ||||
|   async isClick(posi, id) { | ||||
|     let params = [ | ||||
|       { | ||||
|         position: posi | ||||
|       }, | ||||
|       id, | ||||
|       null | ||||
|     ] | ||||
|  | ||||
|     this.clickCallBack({ position: posi }, id, null) | ||||
|   } | ||||
|   async setHandeler(data) { | ||||
|     let that = this | ||||
|  | ||||
|     let cartesian = this.sdk.viewer.scene.pickPosition(new Cesium.Cartesian2(data.x, data.y)); //屏幕坐标转为笛卡尔空间坐标 | ||||
|     // if (!cartesian) return; | ||||
|  | ||||
|     // let c = Cesium.Cartographic.fromCartesian(position); | ||||
|     if (!cartesian) { | ||||
|       const ray = this.sdk.viewer.camera.getPickRay(new Cesium.Cartesian2(data.x, data.y)); | ||||
|       cartesian = this.sdk.viewer.scene.globe.pick(ray, this.sdk.viewer.scene); | ||||
|     } | ||||
|  | ||||
|     if (Cesium.defined(cartesian)) { | ||||
|       that.sdk.viewer.scene.postRender.removeEventListener(that.handler); | ||||
|  | ||||
|       var cartographic = Cesium.Cartographic.fromCartesian(cartesian); | ||||
|       var longitude = Cesium.Math.toDegrees(cartographic.longitude); | ||||
|       var latitude = Cesium.Math.toDegrees(cartographic.latitude); | ||||
|  | ||||
|       let height = await that.getClampToHeight({ lng: longitude, lat: latitude }) | ||||
|       that.position = { | ||||
|         lng: longitude, | ||||
|         lat: latitude, | ||||
|         alt: cartographic.height | ||||
|         // alt: height | ||||
|       } | ||||
|       let posi = Cesium.Cartesian3.fromDegrees(longitude, latitude, cartographic.height) | ||||
|  | ||||
|       that.handler = function () { | ||||
|         const position = Cesium.SceneTransforms.wgs84ToWindowCoordinates( | ||||
|           that.sdk.viewer.scene, posi | ||||
|         ); | ||||
|         if (position) { | ||||
|           let width = that.textDom.clientWidth * 1 | ||||
|           let height = that.textDom.clientHeight * 1 | ||||
|           that.textDom.style.left = `${position.x - width / 2}px`; | ||||
|           that.textDom.style.top = `${position.y - height}px`; | ||||
|         } | ||||
|       } | ||||
|       that.sdk.viewer.scene.postRender.addEventListener(that.handler); | ||||
|     } | ||||
|   } | ||||
|   async getwords(words) { | ||||
|     this.options.text = words | ||||
|     this.callback(this.options) | ||||
|   } | ||||
|   async returnFun() { | ||||
|     return this.handler | ||||
|   } | ||||
|   get onClick() { | ||||
|     return this.clickCallBack | ||||
|   } | ||||
|   set onClick(val) { | ||||
|     if (val && typeof val !== 'function') { | ||||
|       console.error('val:', val, '不是一个function') | ||||
|     } else { | ||||
|       this.clickCallBack = val | ||||
|     } | ||||
|   } | ||||
|   get show() { | ||||
|     return this.options.show | ||||
|   } | ||||
|   set show(v) { | ||||
|     this.options.show = v | ||||
|     this.textDom && (this.textDom.style.display = v ? 'block' : 'none'); | ||||
|   } | ||||
|   get position() { | ||||
|     return this.options.position | ||||
|   } | ||||
|   set position(v) { | ||||
|     this.options.position = v | ||||
|   } | ||||
|   async flyTo(options = {}) { | ||||
|     setActiveViewer(0) | ||||
|     closeRotateAround(this.sdk) | ||||
|     closeViewFollow(this.sdk) | ||||
|  | ||||
|     if (this.options.customView && this.options.customView.relativePosition && this.options.customView.orientation) { | ||||
|       let orientation = { | ||||
|         heading: Cesium.Math.toRadians(this.options.customView.orientation.heading || 0.0), | ||||
|         pitch: Cesium.Math.toRadians(this.options.customView.orientation.pitch || -60.0), | ||||
|         roll: Cesium.Math.toRadians(this.options.customView.orientation.roll || 0.0) | ||||
|       } | ||||
|  | ||||
|       let lng = this.options.customView.relativePosition.lng | ||||
|       let lat = this.options.customView.relativePosition.lat | ||||
|       let alt = this.options.customView.relativePosition.alt | ||||
|       let destination = Cesium.Cartesian3.fromDegrees(lng, lat, alt) | ||||
|  | ||||
|       let position = { lng: 0, lat: 0 } | ||||
|       if (this.options.position) { | ||||
|         position = { ...this.options.position } | ||||
|       } | ||||
|       else if (this.options.position) { | ||||
|         position = { ...this.options.position[0] } | ||||
|       } | ||||
|       else if (this.options.center) { | ||||
|         position = { ...this.options.center } | ||||
|       } | ||||
|       else if (this.options.start) { | ||||
|         position = { ...this.options.start } | ||||
|       } | ||||
|       else { | ||||
|         if (this.options.hasOwnProperty('lng')) { | ||||
|           position.lng = this.options.lng | ||||
|         } | ||||
|         if (this.options.hasOwnProperty('lat')) { | ||||
|           position.lat = this.options.lat | ||||
|         } | ||||
|         if (this.options.hasOwnProperty('alt')) { | ||||
|           position.alt = this.options.alt | ||||
|         } | ||||
|       } | ||||
|       // 如果没有高度值,则获取紧贴高度计算 | ||||
|       // if (!position.hasOwnProperty('alt')) { | ||||
|       //   position.alt = await this.getClampToHeight(position) | ||||
|       // } | ||||
|       lng = this.options.customView.relativePosition.lng + position.lng | ||||
|       lat = this.options.customView.relativePosition.lat + position.lat | ||||
|       alt = this.options.customView.relativePosition.alt + position.alt | ||||
|       destination = Cesium.Cartesian3.fromDegrees(lng, lat, alt) | ||||
|       this.sdk.viewer.camera.flyTo({ | ||||
|         destination: destination, | ||||
|         orientation: orientation | ||||
|       }) | ||||
|     } | ||||
|     else { | ||||
|       let positionArray = [] | ||||
|       let a = Cesium.Cartesian3.fromDegrees( | ||||
|         this.position.lng, | ||||
|         this.position.lat, | ||||
|         this.position.alt | ||||
|       ) | ||||
|       positionArray.push(a.x, a.y, a.z) | ||||
|  | ||||
|       let BoundingSphere = Cesium.BoundingSphere.fromVertices(positionArray) | ||||
|       this.viewer.camera.flyToBoundingSphere(BoundingSphere, { | ||||
|         offset: { | ||||
|           heading: Cesium.Math.toRadians(0.0), | ||||
|           pitch: Cesium.Math.toRadians(-20.0), | ||||
|           roll: Cesium.Math.toRadians(0.0) | ||||
|         } | ||||
|       }) | ||||
|  | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   async remove() { | ||||
|     if (this.handler) { | ||||
|       this.sdk.viewer.scene.postRender.removeEventListener(this.handler); | ||||
|       this.handler = undefined | ||||
|     } | ||||
|     if (this.textDom && this.textDom.parentNode) { | ||||
|       this.sdk.viewer.cesiumWidget.container.removeChild(this.textDom); | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   flicker() { } | ||||
| } | ||||
|  | ||||
| export default TextBox | ||||
| @ -649,7 +649,7 @@ class GroundText extends Base { | ||||
|       ctx.font = 200 + 'px serif' | ||||
|       ctx.fillStyle = 'rgba(255, 255, 255, 0)' | ||||
|       ctx.fillRect(0, 0, maxWidth + 30, 210) | ||||
|       ctx.fillStyle = this.options.color | ||||
|       ctx.fillStyle = 'rgba(255, 255, 255, 1)' | ||||
|       ctx.font = '200px serif' | ||||
|       ctx.fillText(textArray[i], 0, 210 * (i + 1)) | ||||
|     } | ||||
|  | ||||
| @ -508,7 +508,7 @@ class StandText extends Base { | ||||
|       ctx.font = 200 + "px serif"; | ||||
|       ctx.fillStyle = 'rgba(255, 255, 255, 0)' | ||||
|       ctx.fillRect(0, 0, maxWidth + 30, 210) | ||||
|       ctx.fillStyle = this.options.color; | ||||
|       ctx.fillStyle = 'rgba(255, 255, 255, 1)'; | ||||
|       ctx.font = "200px serif"; | ||||
|       ctx.fillText(textArray[i], 0, 210 * (i+1)); | ||||
|     } | ||||
|  | ||||
| @ -1,188 +1,188 @@ | ||||
| function html() { | ||||
|     return ` | ||||
|     <span class="custom-divider"></span> | ||||
|     <div class="div-item"> | ||||
|       <div class="row"> | ||||
|         <div class="col"> | ||||
|           <span class="label" style="flex: 0 0 70px;">名称</span> | ||||
|           <input class="input" maxlength="40" type="text" @model="name"> | ||||
|         </div> | ||||
|         <div class="col"></div> | ||||
|   return ` | ||||
|   <span class="custom-divider"></span> | ||||
|   <div class="div-item"> | ||||
|     <div class="row"> | ||||
|       <div class="col"> | ||||
|         <span class="label" style="flex: 0 0 70px;">名称</span> | ||||
|         <input class="input" maxlength="40" type="text" @model="name"> | ||||
|       </div> | ||||
|       <div class="col"></div> | ||||
|     </div> | ||||
|     <span class="custom-divider"></span> | ||||
|     <div class="div-item"> | ||||
|       <div class="row"> | ||||
|         <div class="col"> | ||||
|           <span class="label" style="flex: 0 0 70px;">起始点高度</span> | ||||
|           <div class="input-number input-number-unit-1 height-box"> | ||||
|             <input class="input" type="number" title="" min="-9999999" max="999999999" @model="height"> | ||||
|             <span class="unit">m</span> | ||||
|             <span class="arrow"></span> | ||||
|           </div> | ||||
|         </div> | ||||
|         <div class="col"> | ||||
|           <span class="label">模型倍数</span> | ||||
|           <div class="input-number input-number-unit-2"> | ||||
|             <input class="input" type="number" title="" min="0" max="99999" step="1" @model="scale"> | ||||
|             <span class="unit">倍</span> | ||||
|             <span class="arrow"></span> | ||||
|           </div> | ||||
|   </div> | ||||
|   <span class="custom-divider"></span> | ||||
|   <div class="div-item"> | ||||
|     <div class="row"> | ||||
|       <div class="col"> | ||||
|         <span class="label" style="flex: 0 0 70px;">起始点高度</span> | ||||
|         <div class="input-number input-number-unit-1 height-box"> | ||||
|           <input class="input" type="number" title="" min="-9999999" max="999999999" @model="height"> | ||||
|           <span class="unit">m</span> | ||||
|           <span class="arrow"></span> | ||||
|         </div> | ||||
|       </div> | ||||
|       <div class="row"> | ||||
|         <div class="col"> | ||||
|           <span class="label" style="flex: 0 0 70px;">运行速度</span> | ||||
|           <div class="input-number input-number-unit-3"> | ||||
|             <input class="input" type="number" title="" min="0" max="99999999" step="1" @model="speed"> | ||||
|             <span class="unit">m/s</span> | ||||
|             <span class="arrow"></span> | ||||
|           </div> | ||||
|         </div> | ||||
|         <div class="col"> | ||||
|           <span class="label">延迟运动</span> | ||||
|           <div class="input-number input-number-unit-3"> | ||||
|             <input class="input" type="number" title="" min="0" max="9999999" @model="delay"> | ||||
|             <span class="unit">ms</span> | ||||
|             <span class="arrow"></span> | ||||
|           </div> | ||||
|         </div> | ||||
|       </div> | ||||
|       <div class="row"> | ||||
|         <div class="col"> | ||||
|           <span class="label" style="flex: 0 0 70px;">更换模型</span> | ||||
|           <button class="btn" @click="clickChangeModel">选择</button> | ||||
|         </div> | ||||
|         <div class="col"> | ||||
|           <span class="label">模型方向</span> | ||||
|           <button class="btn model-rotate-btn" @click="modelRotate">开始调整</button> | ||||
|           <svg class="icon-rubric"><use xlink:href="#yj-icon-rubric"></use></svg> | ||||
|       <div class="col"> | ||||
|         <span class="label">模型倍数</span> | ||||
|         <div class="input-number input-number-unit-2"> | ||||
|           <input class="input" type="number" title="" min="0" max="99999" step="1" @model="scale"> | ||||
|           <span class="unit">倍</span> | ||||
|           <span class="arrow"></span> | ||||
|         </div> | ||||
|       </div> | ||||
|     </div> | ||||
|     <span class="custom-divider"></span> | ||||
|     <div class="div-item"> | ||||
|       <div class="row"> | ||||
|         <div class="col"> | ||||
|           <div class="btn-group"> | ||||
|             <button class="btn" style="border-radius: 5px 0 0 5px;" name="firstPerson" | ||||
|               data-state="true"><span>第一视角</span></button> | ||||
|             <button class="btn" style="border-radius: 0 5px 5px 0;" name="firstPerson" | ||||
|               data-state="false"><span>第三视角</span></button> | ||||
|           </div> | ||||
|     <div class="row"> | ||||
|       <div class="col"> | ||||
|         <span class="label" style="flex: 0 0 70px;">运行速度</span> | ||||
|         <div class="input-number input-number-unit-3"> | ||||
|           <input class="input" type="number" title="" min="0" max="99999999" step="1" @model="speed"> | ||||
|           <span class="unit">m/s</span> | ||||
|           <span class="arrow"></span> | ||||
|         </div> | ||||
|       </div> | ||||
|       <div class="col"> | ||||
|         <span class="label">延迟运动</span> | ||||
|         <div class="input-number input-number-unit-3"> | ||||
|           <input class="input" type="number" title="" min="0" max="9999999" @model="delay"> | ||||
|           <span class="unit">ms</span> | ||||
|           <span class="arrow"></span> | ||||
|         </div> | ||||
|       </div> | ||||
|     </div> | ||||
|     <div class="div-item div-item-switch"> | ||||
|       <div class="row"> | ||||
|         <div class="col"> | ||||
|           <span class="label">路径显隐</span> | ||||
|           <input class="btn-switch" type="checkbox" @model="lineShow"> | ||||
|         </div> | ||||
|         <div class="col"> | ||||
|           <span class="label">模型显隐</span> | ||||
|           <input class="btn-switch" type="checkbox" @model="modelShow"> | ||||
|         </div> | ||||
|         <div class="col"> | ||||
|           <span class="label">实时路径</span> | ||||
|           <input class="btn-switch" type="checkbox" @model="realTimeRoute"> | ||||
|         </div> | ||||
|     <div class="row"> | ||||
|       <div class="col"> | ||||
|         <span class="label" style="flex: 0 0 70px;">更换模型</span> | ||||
|         <button class="btn" @click="clickChangeModel">选择</button> | ||||
|       </div> | ||||
|       <div class="row"> | ||||
|         <div class="col"> | ||||
|           <span class="label">编辑</span> | ||||
|           <input class="btn-switch" type="checkbox" @model="lineEdit"> | ||||
|         </div> | ||||
|         <div class="col"> | ||||
|           <span class="label">路径圆滑</span> | ||||
|           <input class="btn-switch" type="checkbox" @model="smooth"> | ||||
|         </div> | ||||
|         <div class="col"> | ||||
|           <span class="label">环线</span> | ||||
|           <input class="btn-switch" type="checkbox" @model="noseToTail"> | ||||
|         </div> | ||||
|       <div class="col"> | ||||
|         <span class="label">模型方向</span> | ||||
|         <button class="btn model-rotate-btn" @click="modelRotate">开始调整</button> | ||||
|         <svg class="icon-rubric"><use xlink:href="#yj-icon-rubric"></use></svg> | ||||
|       </div> | ||||
|       <div class="row"> | ||||
|         <div class="col"> | ||||
|           <span class="label">轨迹贴地</span> | ||||
|           <input class="btn-switch" type="checkbox" @model="ground"> | ||||
|         </div> | ||||
|         <div class="col"> | ||||
|           <span class="label">轨迹循环</span> | ||||
|           <input class="btn-switch" type="checkbox" @model="loop"> | ||||
|         </div> | ||||
|         <div class="col"> | ||||
|           <span class="label">轨迹动画</span> | ||||
|           <input class="btn-switch" type="checkbox" @model="state"> | ||||
|         </div> | ||||
|       </div> | ||||
|       <div class="row"> | ||||
|         <div class="col"> | ||||
|           <span class="label">路径方向</span> | ||||
|           <input class="btn-switch" type="checkbox" @model="routeDirection"> | ||||
|         </div> | ||||
|         <div class="col" style="margin-right: 33px;"> | ||||
|           <span class="label">视角跟随</span> | ||||
|           <input class="btn-switch" type="checkbox" @model="viewFollow"> | ||||
|         </div> | ||||
|         <div class="col" style="margin: 0px;"> | ||||
|           <span class="label">模型动画</span> | ||||
|           <div class="input input-select model-animate-select"></div> | ||||
|     </div> | ||||
|   </div> | ||||
|   <span class="custom-divider"></span> | ||||
|   <div class="div-item"> | ||||
|     <div class="row"> | ||||
|       <div class="col"> | ||||
|         <div class="btn-group"> | ||||
|           <button class="btn" style="border-radius: 5px 0 0 5px;" name="firstPerson" | ||||
|             data-state="true"><span>第一视角</span></button> | ||||
|           <button class="btn" style="border-radius: 0 5px 5px 0;" name="firstPerson" | ||||
|             data-state="false"><span>第三视角</span></button> | ||||
|         </div> | ||||
|       </div> | ||||
|     </div> | ||||
|     <span class="custom-divider"></span> | ||||
|     <div class="div-item"> | ||||
|       <div class="row"> | ||||
|         <div class="col"> | ||||
|           <span class="label">文字开关</span> | ||||
|           <input class="btn-switch" type="checkbox" @model="labelShow"> | ||||
|         </div> | ||||
|         <div class="col"></div> | ||||
|   </div> | ||||
|   <div class="div-item div-item-switch"> | ||||
|     <div class="row"> | ||||
|       <div class="col"> | ||||
|         <span class="label">路径显隐</span> | ||||
|         <input class="btn-switch" type="checkbox" @model="lineShow"> | ||||
|       </div> | ||||
|       <div class="row"> | ||||
|         <div class="col" style="margin-right: 14px;"> | ||||
|           <span class="label">字体颜色</span> | ||||
|           <div class="labelColor"></div> | ||||
|         </div> | ||||
|         <div class="col font-select-box"> | ||||
|           <span class="label" style="flex: none;">字体选择</span> | ||||
|           <div class="input input-select font-select"></div> | ||||
|         </div> | ||||
|         <div class="col"> | ||||
|           <span class="label">字体大小</span> | ||||
|           <div class="input-number input-number-unit-2" style="width: 82px;"> | ||||
|             <input class="input" type="number" title="" min="1" max="99" @model="labelFontSize"> | ||||
|             <span class="unit">px</span> | ||||
|             <span class="arrow"></span> | ||||
|           </div> | ||||
|         </div> | ||||
|       <div class="col"> | ||||
|         <span class="label">模型显隐</span> | ||||
|         <input class="btn-switch" type="checkbox" @model="modelShow"> | ||||
|       </div> | ||||
|       <div class="row"> | ||||
|         <div class="col"> | ||||
|           <span class="label">视野缩放</span> | ||||
|           <input class="btn-switch" type="checkbox" @model="labelScaleByDistance"> | ||||
|         </div> | ||||
|         <div class="col"> | ||||
|           <span class="label">最近距离</span> | ||||
|           <div class="input-number input-number-unit-1" style="width: 82px;"> | ||||
|             <input class="input" type="number" title="" min="1" max="99999999" @model="labelNear"> | ||||
|             <span class="unit">m</span> | ||||
|             <span class="arrow"></span> | ||||
|           </div> | ||||
|         </div> | ||||
|         <div class="col"> | ||||
|           <span class="label">最远距离</span> | ||||
|           <div class="input-number input-number-unit-1" style="width: 82px;"> | ||||
|             <input class="input" type="number" title="" min="1" max="99999999" @model="labelFar"> | ||||
|             <span class="unit">m</span> | ||||
|             <span class="arrow"></span> | ||||
|           </div> | ||||
|       <div class="col"> | ||||
|         <span class="label">实时路径</span> | ||||
|         <input class="btn-switch" type="checkbox" @model="realTimeRoute"> | ||||
|       </div> | ||||
|     </div> | ||||
|     <div class="row"> | ||||
|       <div class="col"> | ||||
|         <span class="label">编辑</span> | ||||
|         <input class="btn-switch" type="checkbox" @model="lineEdit"> | ||||
|       </div> | ||||
|       <div class="col"> | ||||
|         <span class="label">路径圆滑</span> | ||||
|         <input class="btn-switch" type="checkbox" @model="smooth"> | ||||
|       </div> | ||||
|       <div class="col"> | ||||
|         <span class="label">环线</span> | ||||
|         <input class="btn-switch" type="checkbox" @model="noseToTail"> | ||||
|       </div> | ||||
|     </div> | ||||
|     <div class="row"> | ||||
|       <div class="col"> | ||||
|         <span class="label">轨迹贴地</span> | ||||
|         <input class="btn-switch" type="checkbox" @model="ground"> | ||||
|       </div> | ||||
|       <div class="col"> | ||||
|         <span class="label">轨迹循环</span> | ||||
|         <input class="btn-switch" type="checkbox" @model="loop"> | ||||
|       </div> | ||||
|       <div class="col"> | ||||
|         <span class="label">轨迹动画</span> | ||||
|         <input class="btn-switch" type="checkbox" @model="state"> | ||||
|       </div> | ||||
|     </div> | ||||
|     <div class="row"> | ||||
|       <div class="col"> | ||||
|         <span class="label">路径方向</span> | ||||
|         <input class="btn-switch" type="checkbox" @model="routeDirection"> | ||||
|       </div> | ||||
|       <div class="col" style="margin-right: 33px;"> | ||||
|         <span class="label">视角跟随</span> | ||||
|         <input class="btn-switch" type="checkbox" @model="viewFollow"> | ||||
|       </div> | ||||
|       <div class="col" style="margin: 0px;"> | ||||
|         <span class="label">模型动画</span> | ||||
|         <div class="input input-select model-animate-select"></div> | ||||
|       </div> | ||||
|     </div> | ||||
|   </div> | ||||
|   <span class="custom-divider"></span> | ||||
|   <div class="div-item"> | ||||
|     <div class="row"> | ||||
|       <div class="col"> | ||||
|         <span class="label">文字开关</span> | ||||
|         <input class="btn-switch" type="checkbox" @model="labelShow"> | ||||
|       </div> | ||||
|       <div class="col"></div> | ||||
|     </div> | ||||
|     <div class="row"> | ||||
|       <div class="col" style="margin-right: 14px;"> | ||||
|         <span class="label">字体颜色</span> | ||||
|         <div class="labelColor"></div> | ||||
|       </div> | ||||
|       <div class="col font-select-box"> | ||||
|         <span class="label" style="flex: none;">字体选择</span> | ||||
|         <div class="input input-select font-select"></div> | ||||
|       </div> | ||||
|       <div class="col"> | ||||
|         <span class="label">字体大小</span> | ||||
|         <div class="input-number input-number-unit-2" style="width: 82px;"> | ||||
|           <input class="input" type="number" title="" min="1" max="99" @model="labelFontSize"> | ||||
|           <span class="unit">px</span> | ||||
|           <span class="arrow"></span> | ||||
|         </div> | ||||
|       </div> | ||||
|     </div> | ||||
|     <span class="custom-divider"></span> | ||||
|     ` | ||||
|     <div class="row"> | ||||
|       <div class="col"> | ||||
|         <span class="label">视野缩放</span> | ||||
|         <input class="btn-switch" type="checkbox" @model="labelScaleByDistance"> | ||||
|       </div> | ||||
|       <div class="col"> | ||||
|         <span class="label">最近距离</span> | ||||
|         <div class="input-number input-number-unit-1" style="width: 82px;"> | ||||
|           <input class="input" type="number" title="" min="1" max="99999999" @model="labelNear"> | ||||
|           <span class="unit">m</span> | ||||
|           <span class="arrow"></span> | ||||
|         </div> | ||||
|       </div> | ||||
|       <div class="col"> | ||||
|         <span class="label">最远距离</span> | ||||
|         <div class="input-number input-number-unit-1" style="width: 82px;"> | ||||
|           <input class="input" type="number" title="" min="1" max="99999999" @model="labelFar"> | ||||
|           <span class="unit">m</span> | ||||
|           <span class="arrow"></span> | ||||
|         </div> | ||||
|       </div> | ||||
|     </div> | ||||
|   </div> | ||||
|   <span class="custom-divider"></span> | ||||
|   ` | ||||
| } | ||||
|  | ||||
| export { html } | ||||
|  | ||||
| @ -1666,9 +1666,10 @@ class TrajectoryMotion extends Base { | ||||
|         if (!cartesian3) { | ||||
|           return | ||||
|         } | ||||
|         coordinates = _this.cartesian3Towgs84(cartesian3, viewer); | ||||
|         let pos84 = _this.cartesian3Towgs84(cartesian3, viewer); | ||||
|         coordinates = [pos84.lng, pos84.lat, pos84.alt + 1.8] | ||||
|         position = cartesian3 | ||||
|         positionCamera = Cesium.Cartesian3.fromDegrees(coordinates.lng, coordinates.lat, coordinates.alt + 1.8) | ||||
|         positionCamera = Cesium.Cartesian3.fromDegrees(coordinates[0], coordinates[1], coordinates[2]) | ||||
|         let positions_smooth = [] | ||||
|         for (let i = 0; i <= 1000; i++) { | ||||
|           if ((i / 1000) > (distance / _this.distance)) { | ||||
| @ -1791,7 +1792,7 @@ class TrajectoryMotion extends Base { | ||||
|           else { | ||||
|             if (_this.sdk.viewer.trackedEntity) { | ||||
|               _this.sdk.viewer.camera.setView({ | ||||
|                 destination: Cesium.Cartesian3.fromDegrees(coordinates.lng, coordinates.lat, _this.sdk.viewer.camera.positionCartographic.height), | ||||
|                 destination: Cesium.Cartesian3.fromDegrees(coordinates[0], coordinates[1], _this.sdk.viewer.camera.positionCartographic.height), | ||||
|                 orientation: { | ||||
|                   heading: Cesium.Math.toRadians(-90), | ||||
|                   pitch: 0, | ||||
|  | ||||
| @ -253,7 +253,7 @@ class WallRealStereoscopic extends Base { | ||||
|   } | ||||
|   set labelShow(v) { | ||||
|     this.options.label.show = v | ||||
|     if (this.show) { | ||||
|     if (this.show && !this.showView || this.showView == 3) { | ||||
|       this.label.show = v | ||||
|     } | ||||
|     else { | ||||
|  | ||||
| @ -157,7 +157,7 @@ class WallStereoscopic extends Base { | ||||
|   } | ||||
|   set labelShow(v) { | ||||
|     this.options.label.show = v | ||||
|     if (this.show) { | ||||
|     if (this.show && !this.showView || this.showView == 3) { | ||||
|       this.label.show = v | ||||
|     } | ||||
|     else { | ||||
|  | ||||
| @ -243,7 +243,7 @@ class WallRealStereoscopic extends Base { | ||||
|   } | ||||
|   set labelShow(v) { | ||||
|     this.options.label.show = v | ||||
|     if (this.show) { | ||||
|     if (this.show && !this.showView || this.showView == 3) { | ||||
|       this.label.show = v | ||||
|     } | ||||
|     else { | ||||
|  | ||||
| @ -88,6 +88,10 @@ class WallStereoscopic extends Base { | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   get type() { | ||||
|     return 'wallStereoscopic' | ||||
|   } | ||||
|  | ||||
|   static createLabel(that) { | ||||
|     // 标签 | ||||
|     that.label = new LabelObject(that.sdk, { | ||||
| @ -191,7 +195,7 @@ class WallStereoscopic extends Base { | ||||
|   } | ||||
|   set labelShow(v) { | ||||
|     this.options.label.show = v | ||||
|     if (this.show) { | ||||
|     if (this.show && !this.showView || this.showView == 3) { | ||||
|       this.label.show = v | ||||
|     } | ||||
|     else { | ||||
|  | ||||
| @ -9,6 +9,7 @@ import Tools from "../../Tools"; | ||||
| import { getHost, getToken } from "../../on"; | ||||
| import { regLeftClickCallback, regRightClickCallback, regMoveCallback } from "../../Global/ClickCallback"; | ||||
| import { regLeftClickCallback as regLeftClickCallback2, regRightClickCallback as regRightClickCallback2, regMoveCallback as regMoveCallback2 } from "../../Global/SplitScreen/ClickCallback"; | ||||
| import { regLeftClickCallback as regLeftClickCallback3, regRightClickCallback as regRightClickCallback3, regMoveCallback as regMoveCallback3 } from "../../Global/MultiViewportMode/ClickCallback"; | ||||
| import { setSplitDirection, syncSplitData, getSdk } from "../../Global/SplitScreen"; | ||||
| import { syncData, getSdk as get2DSdk } from '../../Global/MultiViewportMode' | ||||
| import { setActiveViewer, closeRotateAround, closeViewFollow } from '../../Global/global' | ||||
| @ -68,7 +69,7 @@ class Base extends Tools { | ||||
|     let sdk2D = get2DSdk().sdkD | ||||
|     if (!sdk2D) { | ||||
|       this.#_showView = v | ||||
|       if(this.entity) { | ||||
|       if (this.entity) { | ||||
|         this.entity._showView = v | ||||
|       } | ||||
|       return | ||||
| @ -290,7 +291,7 @@ class Base extends Tools { | ||||
|       let destination = Cesium.Cartesian3.fromDegrees(lng, lat, alt) | ||||
|  | ||||
|       let position = { lng: 0, lat: 0 } | ||||
|       if (this.options.position) { | ||||
|       if (this.options.position && Object.prototype.toString.call(this.options.position) === '[object Object]') { | ||||
|         position = { ...this.options.position } | ||||
|       } | ||||
|       else if (this.options.positions) { | ||||
| @ -361,12 +362,17 @@ class Base extends Tools { | ||||
|       console.error('val:', val, '不是一个function') | ||||
|     } else { | ||||
|       let sdkD = getSdk().sdkD | ||||
|       let sdk2D = get2DSdk().sdkD | ||||
|       if (sdkD && this.sdk === sdkD) { | ||||
|         if (this.clickCallBack == null && this.options && this.options.id) { | ||||
|           regLeftClickCallback2(this.options.id, this.leftClickCB, this) | ||||
|         } | ||||
|       } | ||||
|       else { | ||||
|       else if (sdk2D && this.sdk === sdk2D) { | ||||
|         if (this.clickCallBack == null && this.options && this.options.id) { | ||||
|           regLeftClickCallback3(this.options.id, this.leftClickCB, this) | ||||
|         } | ||||
|       } else { | ||||
|         if (this.clickCallBack == null && this.options && this.options.id) { | ||||
|           regLeftClickCallback(this.options.id, this.leftClickCB, this) | ||||
|         } | ||||
| @ -384,12 +390,17 @@ class Base extends Tools { | ||||
|       console.error('val:', val, '不是一个function') | ||||
|     } else { | ||||
|       let sdkD = getSdk().sdkD | ||||
|       let sdk2D = get2DSdk().sdkD | ||||
|       if (sdkD && this.sdk === sdkD) { | ||||
|         if (this.rightClickCallBack == null && this.entity && this.entity.id) { | ||||
|           regRightClickCallback2(this.entity.id, this.rightClickCB, this) | ||||
|         } | ||||
|       } | ||||
|       else { | ||||
|       else if (sdk2D && this.sdk === sdk2D) { | ||||
|         if (this.clickCallBack == null && this.options && this.options.id) { | ||||
|           regRightClickCallback3(this.options.id, this.leftClickCB, this) | ||||
|         } | ||||
|       } else { | ||||
|         if (this.rightClickCallBack == null && this.entity && this.entity.id) { | ||||
|           regRightClickCallback(this.entity.id, this.rightClickCB, this) | ||||
|         } | ||||
| @ -407,12 +418,17 @@ class Base extends Tools { | ||||
|       console.error('val:', val, '不是一个function') | ||||
|     } else { | ||||
|       let sdkD = getSdk().sdkD | ||||
|       let sdk2D = get2DSdk().sdkD | ||||
|       if (sdkD && this.sdk === sdkD) { | ||||
|         if (this.mouseMoveCallBack == null && this.entity && this.entity.id) { | ||||
|           regMoveCallback2(this.entity.id, this.mouseMoveCB, this) | ||||
|         } | ||||
|       } | ||||
|       else { | ||||
|       else if (sdk2D && this.sdk === sdk2D) { | ||||
|         if (this.clickCallBack == null && this.options && this.options.id) { | ||||
|           regMoveCallback3(this.options.id, this.leftClickCB, this) | ||||
|         } | ||||
|       } else { | ||||
|         if (this.mouseMoveCallBack == null && this.entity && this.entity.id) { | ||||
|           regMoveCallback(this.entity.id, this.mouseMoveCB, this) | ||||
|         } | ||||
| @ -436,7 +452,7 @@ class Base extends Tools { | ||||
|  | ||||
|       let position = { lng: 0, lat: 0 } | ||||
|       let relativePosition = { ...cameraPosition84 } | ||||
|       if (this.options.position) { | ||||
|       if (this.options.position && Object.prototype.toString.call(this.options.position) === '[object Object]') { | ||||
|         position = { ...this.options.position } | ||||
|       } | ||||
|       else if (this.options.positions) { | ||||
|  | ||||
| @ -78,6 +78,7 @@ class Dialog extends BaseDialog { | ||||
|       this.footAppChild(div) | ||||
|       if (this.options.updateHeightCallBack) { | ||||
|         let heightBtn = document.createElement('button'); | ||||
|         heightBtn.className = 'update-height' | ||||
|         heightBtn.innerHTML = '<svg class="icon-updateheigh"><use xlink:href="#yj-icon-updateheight"></use></svg>更新高程' | ||||
|         heightBtn.style.width = 'auto' | ||||
|         heightBtn.addEventListener('click', () => { | ||||
|  | ||||
| @ -1,6 +1,13 @@ | ||||
| class cy_tabs { | ||||
|   constructor(id, clickTabCallBack, sdk) { | ||||
|     let elm = document.getElementById(id); | ||||
|   constructor(boxElm, clickTabCallBack, sdk) { | ||||
|     let elm | ||||
|     if(typeof boxElm === 'string') { | ||||
|       elm = document.getElementById(boxElm); | ||||
|     } | ||||
|     else { | ||||
|       elm = boxElm | ||||
|     } | ||||
|     // let elm = document.getElementById(id); | ||||
|     let pane = elm.getElementsByTagName('DIV-cy-tab-pane') | ||||
|  | ||||
|     let tabTop = `<div class="DIV-cy-tab-top">` | ||||
| @ -37,7 +44,9 @@ | ||||
|     tabContent = tabContent + `</div>` | ||||
|  | ||||
|     let BoxElm = document.createElement('div'); | ||||
|     BoxElm.setAttribute('id', id) | ||||
|     if(typeof boxElm === 'string') { | ||||
|       BoxElm.setAttribute('id', boxElm) | ||||
|     } | ||||
|     BoxElm.setAttribute('class', 'DIV-cy-tabs') | ||||
|     BoxElm.innerHTML = tabTop + tabContent | ||||
|     elm.parentNode.insertBefore(BoxElm, elm); | ||||
|  | ||||
| @ -56,8 +56,8 @@ class richText { | ||||
|       MENU_CONF: { | ||||
|         uploadImage: { | ||||
|           fieldName: 'file', | ||||
|           maxFileSize: 50 * 1024 * 1024, | ||||
|           base64LimitSize: 50 * 1024 * 1024, // 50M 以下插入 base64 | ||||
|           // maxFileSize: 50 * 1024 * 1024, | ||||
|           // base64LimitSize: 50 * 1024 * 1024, // 50M 以下插入 base64 | ||||
|           server: this.uploadImageServer, | ||||
|           // // 上传之前触发 | ||||
|           // onBeforeUpload(file) { // TS 语法 | ||||
| @ -95,18 +95,18 @@ class richText { | ||||
|           //   console.log(`${file.name} 上传出错`, err, res) | ||||
|           // }, | ||||
|  | ||||
|           // // 自定义上传 | ||||
|           // async customUpload(file, insertFn) {  // TS 语法 | ||||
|           //   // async customUpload(file, insertFn) {                   // JS 语法 | ||||
|           //   // file 即选中的文件 | ||||
|           //   // 自己实现上传,并得到图片 url alt href | ||||
|           //   // 最后插入图片 | ||||
|           //   console.log(file, insertFn) | ||||
|           //   insertFn(url, file.name) | ||||
|           // } | ||||
|           // 自定义上传 | ||||
|           async customUpload(file, insertFn) {  // TS 语法 | ||||
|             // async customUpload(file, insertFn) {                   // JS 语法 | ||||
|             // file 即选中的文件 | ||||
|             // 自己实现上传,并得到图片 url alt href | ||||
|             // 最后插入图片 | ||||
|             let url = await _this.upload(file) | ||||
|             insertFn((_this.host = _this.host || getHost()) + '/' + url) | ||||
|           } | ||||
|         }, | ||||
|         uploadVideo: { | ||||
|           maxFileSize: 500 * 1024 * 1024, | ||||
|           // maxFileSize: 500 * 1024 * 1024, | ||||
|           server: this.uploadVideoServer, | ||||
|           allowedFileTypes: ['video/mp4', 'video/mp3', 'video/ogg', 'video/webm', 'video/avi'], | ||||
|           // 自定义上传 | ||||
|  | ||||
| @ -160,6 +160,64 @@ class YJColorPicker { | ||||
|       let dropbtns = picker.getElementsByClassName('ew-color-dropbtns')[0] | ||||
|       picker.insertBefore(colorInputBox, dropbtns) | ||||
|  | ||||
|       RInput.addEventListener('blur', (e) => { | ||||
|         let value = e.target.value | ||||
|         if (e.target.value || (e.target.dataset.null !== 'undefined' && e.target.dataset.null !== '' && !Boolean(e.target.dataset.null))) { | ||||
|           value = Number(value) | ||||
|           if ((e.target.max) && value > Number(e.target.max)) { | ||||
|             value = Number(e.target.max) | ||||
|           } | ||||
|           if ((e.target.min) && value < Number(e.target.min)) { | ||||
|             value = Number(e.target.min) | ||||
|           } | ||||
|           if ((e.target.dataset.min) && value < Number(e.target.dataset.min)) { | ||||
|             value = Number(e.target.dataset.min) | ||||
|           } | ||||
|           RInput.value = parseInt(value) | ||||
|           _this.colorPicker.hsba = colorRgbaToHsba(`rgb(${RInput.value}, ${GInput.value}, ${BInput.value})`) | ||||
|           _this.colorPicker.changeColor(_this.colorPicker, _this.colorPicker.pickerPanel.offsetWidth,_this.colorPicker.pickerPanel.offsetHeight) | ||||
|         } | ||||
|       }) | ||||
|       GInput.addEventListener('blur', (e) => { | ||||
|         let value = e.target.value | ||||
|         if (e.target.value || (e.target.dataset.null !== 'undefined' && e.target.dataset.null !== '' && !Boolean(e.target.dataset.null))) { | ||||
|           value = Number(value) | ||||
|           if ((e.target.max) && value > Number(e.target.max)) { | ||||
|             value = Number(e.target.max) | ||||
|           } | ||||
|           if ((e.target.min) && value < Number(e.target.min)) { | ||||
|             value = Number(e.target.min) | ||||
|           } | ||||
|           if ((e.target.dataset.min) && value < Number(e.target.dataset.min)) { | ||||
|             value = Number(e.target.dataset.min) | ||||
|           } | ||||
|           GInput.value = parseInt(value) | ||||
|           _this.colorPicker.hsba = colorRgbaToHsba(`rgb(${RInput.value}, ${GInput.value}, ${BInput.value})`) | ||||
|           _this.colorPicker.changeColor(_this.colorPicker, _this.colorPicker.pickerPanel.offsetWidth,_this.colorPicker.pickerPanel.offsetHeight) | ||||
|         } | ||||
|       }) | ||||
|       BInput.addEventListener('blur', (e) => { | ||||
|         let value = e.target.value | ||||
|         if (e.target.value || (e.target.dataset.null !== 'undefined' && e.target.dataset.null !== '' && !Boolean(e.target.dataset.null))) { | ||||
|           value = Number(value) | ||||
|           if ((e.target.max) && value > Number(e.target.max)) { | ||||
|             value = Number(e.target.max) | ||||
|           } | ||||
|           if ((e.target.min) && value < Number(e.target.min)) { | ||||
|             value = Number(e.target.min) | ||||
|           } | ||||
|           if ((e.target.dataset.min) && value < Number(e.target.dataset.min)) { | ||||
|             value = Number(e.target.dataset.min) | ||||
|           } | ||||
|           BInput.value = parseInt(value) | ||||
|           _this.colorPicker.hsba = colorRgbaToHsba(`rgb(${RInput.value}, ${GInput.value}, ${BInput.value})`) | ||||
|           _this.colorPicker.changeColor(_this.colorPicker, _this.colorPicker.pickerPanel.offsetWidth,_this.colorPicker.pickerPanel.offsetHeight) | ||||
|         } | ||||
|       }) | ||||
|  | ||||
|  | ||||
|  | ||||
|  | ||||
|       if (options.alpha) { | ||||
|         Inputs[0].style.width = '52px' | ||||
|         Inputs[1].style.width = '52px' | ||||
| @ -170,7 +228,6 @@ class YJColorPicker { | ||||
|         <input class="input" type="number" title="" step="0.01" min="0" max="1"> | ||||
|         <span class="arrow"></span>` | ||||
|         pickerInput.parentNode.insertBefore(pickAlpha, pickerInput.nextSibling) | ||||
|         pickerInput.style.width = '106px' | ||||
|         pickAlpha.style.width = '66px' | ||||
|         pickAlpha.style.margin = '0 6px 0 0' | ||||
|         AInput = pickAlpha.getElementsByClassName('input')[0] | ||||
| @ -202,7 +259,7 @@ class YJColorPicker { | ||||
|           AInput.value = parseInt(_this.pickAlphaInputValue * 100) / 100 | ||||
|         } | ||||
|         else { | ||||
|           AInput.value = CesiumColor ? parseInt(CesiumColor.alpha * 100) / 100 : 1 | ||||
|           AInput.value = CesiumColor ? parseInt(Number(CesiumColor.alpha.toFixed(2)) * 100) / 100 : 1 | ||||
|         } | ||||
|         _this.pickAlphaInputValue = AInput.value | ||||
|         box.style.background = Cesium.Color.fromCssColorString(_this.colorPicker.config.defaultColor || '#ffffff').withAlpha(AInput.value).toCssColorString() | ||||
| @ -374,7 +431,7 @@ class YJColorPicker { | ||||
|     function clickDefineColor(color) { | ||||
|       if (AInput) { | ||||
|         let c = Cesium.Color.fromCssColorString(color) | ||||
|         AInput.value = parseInt(c.alpha * 100) / 100 | ||||
|         AInput.value = parseInt(Number(c.alpha.toFixed(2)) * 100) / 100 | ||||
|       } | ||||
|     } | ||||
|  | ||||
| @ -459,6 +516,44 @@ class YJColorPicker { | ||||
|       } | ||||
|     } | ||||
|  | ||||
|     function colorRgbaToHsba(e) { | ||||
|       var t = e.slice(e.indexOf("(") + 1, e.lastIndexOf(")")).split(",") | ||||
|         , r = t.length < 4 ? 1 : Number(t[3]) | ||||
|         , n = Number(t[0]) / 255 | ||||
|         , o = Number(t[1]) / 255 | ||||
|         , i = Number(t[2]) / 255 | ||||
|         , a = void 0 | ||||
|         , s = void 0 | ||||
|         , l = void 0 | ||||
|         , c = Math.min(n, o, i) | ||||
|         , d = l = Math.max(n, o, i) | ||||
|         , u = d - c; | ||||
|       if (d === c) | ||||
|           a = 0; | ||||
|       else { | ||||
|           switch (d) { | ||||
|           case n: | ||||
|               a = (o - i) / u + (o < i ? 6 : 0); | ||||
|               break; | ||||
|           case o: | ||||
|               a = 2 + (i - n) / u; | ||||
|               break; | ||||
|           case i: | ||||
|               a = 4 + (n - o) / u | ||||
|           } | ||||
|           a = Math.round(60 * a) | ||||
|       } | ||||
|       s = 0 === d ? 0 : 1 - c / d; | ||||
|       return s = Math.round(100 * s), | ||||
|       l = Math.round(100 * l), | ||||
|       { | ||||
|           h: a, | ||||
|           s: s, | ||||
|           b: l, | ||||
|           a: r | ||||
|       } | ||||
|   } | ||||
|  | ||||
|     function pickerInputChange(v) { | ||||
|       if (_this.colorPicker && _this.colorPicker.pickerInput) { | ||||
|         let rgbaColor = colorHexToRgba(v || _this.colorPicker.pickerInput.value) | ||||
|  | ||||
| @ -50,7 +50,8 @@ export default class CircleDiffuseMaterialProperty { | ||||
|       let color = this.colors[ratio[i]] | ||||
|       _sourceColor = _sourceColor + ` | ||||
|         if(dis < float(${Number(ratio[i]) / 2})) { | ||||
|           material.diffuse = 1.5 * vec4(${color.red},${color.green},${color.blue},${color.alpha}).rgb; | ||||
|           material.diffuse = vec4(0.0,0.0,0.0,0.0).rgb; | ||||
|           material.emission = 1.0 * vec4(${color.red},${color.green},${color.blue},${color.alpha}).rgb; | ||||
|         } | ||||
|         ` | ||||
|     } | ||||
|  | ||||
							
								
								
									
										113
									
								
								src/Obj/Materail/RoadTextureMaterialProperty.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										113
									
								
								src/Obj/Materail/RoadTextureMaterialProperty.js
									
									
									
									
									
										Normal file
									
								
							| @ -0,0 +1,113 @@ | ||||
| /* | ||||
|  * @Description: 流动线 | ||||
|  */ | ||||
| function RoadTexture() { | ||||
|   class RoadTextureMaterialProperty { | ||||
|     constructor(options) { | ||||
|       this._definitionChanged = new Cesium.Event(); | ||||
|       this._image = undefined; | ||||
|       this._repeat = undefined; | ||||
|       this._stRotation = undefined; | ||||
|       this._repeatLength = undefined; | ||||
|       this.image = options.image || ""; | ||||
|       this.repeat = options.repeat || 1.0; | ||||
|       this.stRotation = options.stRotation || 0.0; | ||||
|       // this.rotations = options.rotations || new Array(100).fill(0.0); | ||||
|     } | ||||
|  | ||||
|     get isConstant() { | ||||
|       return false; | ||||
|     } | ||||
|  | ||||
|     get definitionChanged() { | ||||
|       return this._definitionChanged; | ||||
|     } | ||||
|  | ||||
|     getType(time) { | ||||
|       return Cesium.Material.RoadTextureMaterialType; | ||||
|     } | ||||
|  | ||||
|     getValue(time, result) { | ||||
|       if (!Cesium.defined(result)) { | ||||
|         result = {}; | ||||
|       } | ||||
|       result.image = Cesium.Property.getValueOrDefault( | ||||
|         this._image, | ||||
|         time, | ||||
|         "", | ||||
|         result.image | ||||
|       ); | ||||
|       result.repeat = Cesium.Property.getValueOrDefault( | ||||
|         this._repeat, | ||||
|         time, | ||||
|         1.0, | ||||
|         result.repeat | ||||
|       ); | ||||
|       result.stRotation = Cesium.Property.getValueOrDefault( | ||||
|         this._stRotation, | ||||
|         time, | ||||
|         0.0, | ||||
|         result.stRotation | ||||
|       ); | ||||
|       console.log(result, 'result') | ||||
|       return result; | ||||
|     } | ||||
|  | ||||
|     equals(other) { | ||||
|       return ( | ||||
|         this === other || | ||||
|         (other instanceof RoadTextureMaterialProperty && | ||||
|           Cesium.Property.equals(this._image, other._image) && | ||||
|           Cesium.Property.equals(this._repeat, other._repeat) && | ||||
|           // Cesium.Property.equals(this._rotations, other._rotations) && | ||||
|           Cesium.Property.equals(this._stRotation, other._stRotation) | ||||
|         ) | ||||
|       ); | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   Object.defineProperties(RoadTextureMaterialProperty.prototype, { | ||||
|     image: Cesium.createPropertyDescriptor("image"), | ||||
|     repeat: Cesium.createPropertyDescriptor("repeat"), | ||||
|     repeatLength: Cesium.createPropertyDescriptor("stRotation"), | ||||
|   }); | ||||
|  | ||||
|   Cesium.RoadTextureMaterialProperty = RoadTextureMaterialProperty; | ||||
|   Cesium.Material.RoadTextureMaterialProperty = "RoadTextureMaterialProperty"; | ||||
|   Cesium.Material.RoadTextureMaterialType = "RoadTextureMaterialType"; | ||||
|   Cesium.Material.RoadTextureMaterialSource = ` | ||||
|         uniform sampler2D image; | ||||
|         uniform float repeat; | ||||
|         czm_material czm_getMaterial(czm_materialInput materialInput) | ||||
|         { | ||||
|           czm_material material = czm_getDefaultMaterial(materialInput); | ||||
|           vec2 st = materialInput.st; | ||||
|           st.s *= repeat; | ||||
|           mat2 rot = mat2(cos(stRotation), -sin(stRotation), sin(stRotation), cos(stRotation)); | ||||
|           vec2 newSt = rot * (st - 0.5) + 0.5; | ||||
|  | ||||
|           vec4 colorImage = texture2D(image, newSt); | ||||
|           material.diffuse = colorImage.rgb; | ||||
|           return material; | ||||
|         } | ||||
|        `; | ||||
|   Cesium.Material._materialCache.addMaterial( | ||||
|     Cesium.Material.RoadTextureMaterialType, | ||||
|     { | ||||
|       fabric: { | ||||
|         type: Cesium.Material.RoadTextureMaterialType, | ||||
|         uniforms: { | ||||
|           image: '', | ||||
|           repeat: 1.0, | ||||
|           stRotation: 0.0, | ||||
|         }, | ||||
|         source: Cesium.Material.RoadTextureMaterialSource, | ||||
|       }, | ||||
|       translucent: function (material) { | ||||
|         return true; | ||||
|       }, | ||||
|     } | ||||
|   ); | ||||
| } | ||||
|  | ||||
| export { RoadTexture } | ||||
| @ -70,7 +70,7 @@ function StreamWall1() { | ||||
|       fragColor.rgb = color.rgb / 1.0;\n\ | ||||
|       fragColor = czm_gammaCorrect(fragColor);\n\ | ||||
|       material.alpha = colorImage.a * color.a;\n\ | ||||
|       material.diffuse = (colorImage.rgb+color.rgb)/2.0;\n\ | ||||
|       material.diffuse = color.rgb/20.0;\n\ | ||||
|       material.emission = fragColor.rgb;\n\ | ||||
|       return material;\n\ | ||||
|       }"; | ||||
| @ -208,6 +208,14 @@ function StreamWall2() { | ||||
|           Property.equals(this.repeat, other._repeat) && | ||||
|           Property.equals(this.repeats, other._repeats) | ||||
|       }; | ||||
|       // let code2 = 'material.diffuse = color.rgb*1.0;' | ||||
|       // if (uniforms.is2D) { | ||||
|       //   code2 = ` | ||||
|       //     material.diffuse = color.rgb*0.0; | ||||
|       //     material.emission = color.rgb * 1.0; | ||||
|       //   ` | ||||
|       // } | ||||
|       // console.log(code2, uniforms.is2D) | ||||
|       // 将定义的材质对象添加到cesium的材质队列中 | ||||
|       Material._materialCache.addMaterial(MaterialType, { | ||||
|         fabric: { | ||||
| @ -230,8 +238,8 @@ function StreamWall2() { | ||||
|               else { | ||||
|                 material.alpha = 1.0; | ||||
|               } | ||||
|               material.diffuse = colorImage.rgb*color.rgb*0.0; | ||||
|               material.emission = colorImage.rgb*color.rgb * 1.4; | ||||
|               material.diffuse = colorImage.rgb * color.rgb*0.0; | ||||
|               material.emission = colorImage.rgb * color.rgb * 1.0; | ||||
|               return material; | ||||
|           }`, | ||||
|           components: { | ||||
|  | ||||
| @ -7,6 +7,7 @@ import { PolylineFlow } from './PolylineFlowMaterialProperty' | ||||
| import { PolylineFlowMult } from './PolylineFlowMultMaterialProperty' | ||||
| import { FlowDashedLine } from './FlowDashedLineFlowMaterialProperty' | ||||
| import { LineTexture } from './LineTextureMaterialProperty' | ||||
| import { RoadTexture } from './RoadTextureMaterialProperty' | ||||
|  | ||||
| function init_material() { | ||||
|   StreamWall1() | ||||
| @ -19,6 +20,7 @@ function init_material() { | ||||
|   PolylineFlowMult() | ||||
|   FlowDashedLine() | ||||
|   LineTexture() | ||||
|   RoadTexture() | ||||
| } | ||||
|  | ||||
| export { init_material } | ||||
|  | ||||
| @ -598,7 +598,6 @@ class Tools { | ||||
|     if (entity) { | ||||
|       arr[type + ''] ? (entity.polyline.width = entity.polyline.oriWidth + arr[type + '']) : (entity.polyline.width = entity.polyline.oriWidth) | ||||
|     } | ||||
|  | ||||
|     switch (Number(type)) { | ||||
|  | ||||
|       case 1: //虚线 | ||||
| @ -880,38 +879,38 @@ class Tools { | ||||
|  | ||||
|     let ray2 = this.sdk.viewer.camera.getPickRay(point2); | ||||
|     let cartesian2 = this.sdk.viewer.scene.globe.pick(ray2, this.sdk.viewer.scene); | ||||
|     if (cartesian1 && cartesian2) { | ||||
|       var distance = Cesium.Cartesian3.distance(cartesian1, cartesian2); | ||||
|  | ||||
|     var distance = Cesium.Cartesian3.distance(cartesian1, cartesian2); | ||||
|       var repeatX = distance / entity.polyline.width.getValue(); | ||||
|       // 根据地图缩放程度调整repeatX | ||||
|       var cameraHeight = this.sdk.viewer.camera.positionCartographic.height; | ||||
|       var boundingSphere = new Cesium.BoundingSphere( | ||||
|         new Cesium.Cartesian3(-1000000, 0, 0), // 中心点坐标 | ||||
|         500000 // 半径(距离) | ||||
|       ); | ||||
|  | ||||
|     var repeatX = distance / entity.polyline.width.getValue(); | ||||
|     // 根据地图缩放程度调整repeatX | ||||
|     var cameraHeight = this.sdk.viewer.camera.positionCartographic.height; | ||||
|     var boundingSphere = new Cesium.BoundingSphere( | ||||
|       new Cesium.Cartesian3(-1000000, 0, 0), // 中心点坐标 | ||||
|       500000 // 半径(距离) | ||||
|     ); | ||||
|       // 获取绘图缓冲区的宽度和高度(通常是屏幕的分辨率) | ||||
|       var drawingBufferWidth = this.sdk.viewer.canvas.clientWidth; | ||||
|       var drawingBufferHeight = this.sdk.viewer.canvas.clientHeight; | ||||
|  | ||||
|     // 获取绘图缓冲区的宽度和高度(通常是屏幕的分辨率) | ||||
|     var drawingBufferWidth = this.sdk.viewer.canvas.clientWidth; | ||||
|     var drawingBufferHeight = this.sdk.viewer.canvas.clientHeight; | ||||
|       // 使用 getPixelSize 方法获取包围球在屏幕上的像素大小 | ||||
|       var groundResolution = this.sdk.viewer.scene.camera.getPixelSize(boundingSphere, drawingBufferWidth, drawingBufferHeight) | ||||
|       // repeatX *= groundResolution / cameraHeight / ((myImg.width / myImg.height * 5) + 1); | ||||
|       if (groundResolution > 700) { | ||||
|         repeatX *= groundResolution / cameraHeight / (options.space * (canvasEle.width / canvasEle.height * 5) + 1); | ||||
|       } else { | ||||
|         repeatX = undefined; | ||||
|       } | ||||
|  | ||||
|     // 使用 getPixelSize 方法获取包围球在屏幕上的像素大小 | ||||
|     var groundResolution = this.sdk.viewer.scene.camera.getPixelSize(boundingSphere, drawingBufferWidth, drawingBufferHeight) | ||||
|     // repeatX *= groundResolution / cameraHeight / ((myImg.width / myImg.height * 5) + 1); | ||||
|     if (groundResolution > 700) { | ||||
|       repeatX *= groundResolution / cameraHeight / (options.space * (canvasEle.width / canvasEle.height * 5) + 1); | ||||
|     } else { | ||||
|       repeatX = undefined; | ||||
|       if (this.sdk.viewer.scene.mode === Cesium.SceneMode.SCENE3D) { | ||||
|         return repeatX | ||||
|       } else { | ||||
|         let sdk3d = get3DView() | ||||
|         let sdk3dEntity = sdk3d.viewer.entities.getById(this.options.id) | ||||
|         return sdk3dEntity.polyline.oriRepeatX | ||||
|       } | ||||
|     } | ||||
|  | ||||
|     if (this.sdk.viewer.scene.mode === Cesium.SceneMode.SCENE3D) { | ||||
|       return repeatX | ||||
|     } else { | ||||
|       let sdk3d = get3DView() | ||||
|       let sdk3dEntity = sdk3d.viewer.entities.getById(this.options.id) | ||||
|       return sdk3dEntity.polyline.oriRepeatX | ||||
|     } | ||||
|  | ||||
|   } | ||||
|  | ||||
|   /*创建直箭头图片*/ | ||||
| @ -1494,6 +1493,23 @@ class Tools { | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   message(option={}) { | ||||
|     let type = option.type || 'success' | ||||
|     let text = option.text || '' | ||||
|     let duration = option.duration || 1500 | ||||
|  | ||||
|     let message = document.getElementById('YJ-custom-message'); | ||||
|     if (message) { | ||||
|       document.body.removeChild(message) | ||||
|     } | ||||
|     message = document.createElement('div') | ||||
|     message.id = 'YJ-custom-message' | ||||
|     message.innerHTML = ` | ||||
|       <i><?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1755929961282" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5064" width="16" height="16" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M874.119618 149.859922A510.816461 510.816461 0 0 0 511.997 0.00208a509.910462 509.910462 0 0 0-362.119618 149.857842c-199.817789 199.679789-199.817789 524.581447 0 724.260236a509.969462 509.969462 0 0 0 362.119618 149.857842A508.872463 508.872463 0 0 0 874.119618 874.120158c199.836789-199.679789 199.836789-524.581447 0-724.260236zM814.94268 378.210681L470.999043 744.132295a15.359984 15.359984 0 0 1-5.887994 4.095996c-1.751998 1.180999-2.913997 2.362998-5.276994 2.913997a34.499964 34.499964 0 0 1-13.469986 2.914997 45.547952 45.547952 0 0 1-12.897986-2.303998l-4.095996-2.363997a45.291952 45.291952 0 0 1-7.009992-4.095996l-196.902793-193.789796a34.126964 34.126964 0 0 1-10.555989-25.186973c0-9.37399 3.583996-18.74698 9.98399-25.186974a36.429962 36.429962 0 0 1 50.372947 0l169.98382 167.423824L763.389735 330.220732a37.059961 37.059961 0 0 1 50.371947-1.732998 33.647965 33.647965 0 0 1 11.165988 25.186973 35.544963 35.544963 0 0 1-9.98399 24.575974v-0.04z m0 0" fill="#52C41A" p-id="5065"></path></svg></i>${text} | ||||
|     ` | ||||
|     document.body.appendChild(message) | ||||
|     message.classList.add(type) | ||||
|   } | ||||
|  | ||||
| } | ||||
|  | ||||
|  | ||||
| @ -46,23 +46,25 @@ class YJEarth { | ||||
|     // setCesiumIndexedDBMaxSize(getCesiumIndexedDBMaxSize()) | ||||
|     setCesiumManageIndexexDBState(getCesiumManageIndexexDBState()) | ||||
|     this.proj = new Proj() | ||||
|     this.clickTextDom = undefined | ||||
|     this.isLeftClick = false | ||||
|     this.init() | ||||
|     setSvg() | ||||
|   } | ||||
|  | ||||
|   addIncetance(id, obj) { | ||||
|     this.entityMap.set(id, obj) | ||||
|     this.entityMap.set(id + '', obj) | ||||
|   } | ||||
|  | ||||
|   getIncetance(id) { | ||||
|     return this.entityMap.get(id) | ||||
|     return this.entityMap.get(id + '') | ||||
|   } | ||||
|  | ||||
|   removeIncetance(id) { | ||||
|     this.entityMap.delete(id) | ||||
|     unRegLeftClickCallback(id) | ||||
|     unRegRightClickCallback(id) | ||||
|     unregMoveCallback(id) | ||||
|     unRegLeftClickCallback(this, id) | ||||
|     unRegRightClickCallback(this, id) | ||||
|     unregMoveCallback(this, id) | ||||
|  | ||||
|     syncSplitData(this, id) | ||||
|   } | ||||
| @ -221,11 +223,11 @@ class YJEarth { | ||||
|  | ||||
|     document.fonts.ready.then(() => { | ||||
|       for (let [id, obj] of this.entityMap) { | ||||
|         if('labelFontFamily' in obj) { | ||||
|         if ('labelFontFamily' in obj) { | ||||
|           obj.labelFontFamily = obj.labelFontFamily | ||||
|         } | ||||
|       } | ||||
|        | ||||
|  | ||||
|     }); | ||||
|  | ||||
|     // const font = new FontFace( | ||||
| @ -413,6 +415,96 @@ class YJEarth { | ||||
|         }) | ||||
|       ) | ||||
|     } | ||||
|  | ||||
|  | ||||
|     let ClickHandler = new Cesium.ScreenSpaceEventHandler(_this.viewer.canvas) | ||||
|     ClickHandler.setInputAction((movement) => { | ||||
|       let textList = document.getElementsByClassName('popup-textarea') | ||||
|       _this.isLeftClick = false | ||||
|       for (let i = textList.length - 1; i > -1; i--) { | ||||
|         let left = returnNumber(textList[i].style.left) | ||||
|         let top = returnNumber(textList[i].style.top) | ||||
|         let width = textList[i].clientWidth * 1 | ||||
|         let height = textList[i].clientHeight * 1 | ||||
|         let x = movement.position.x | ||||
|         let y = movement.position.y | ||||
|         if (x > left && x < left + width && y > top && y < top + height) { | ||||
|           if (_this.clickTextDom) { | ||||
|             _this.clickTextDom.style['pointer-events'] = 'none' | ||||
|           } | ||||
|           _this.clickTextDom = textList[i] | ||||
|           textList[i].style['pointer-events'] = 'all' | ||||
|           textList[i].querySelector('textarea').focus() | ||||
|           _this.isLeftClick = true | ||||
|           _this.entityMap.get(_this.clickTextDom.id).isClick(movement.position, _this.clickTextDom.id) | ||||
|           break; | ||||
|         } | ||||
|       } | ||||
|  | ||||
|       let mousedown = undefined | ||||
|       let mousemove = undefined | ||||
|       let mouseup = undefined | ||||
|       let fun = undefined | ||||
|       let handler = undefined | ||||
|  | ||||
|       if (_this.isLeftClick) { | ||||
|         let click = false | ||||
|         let layerX = 0 | ||||
|         let layerY = 0 | ||||
|  | ||||
|         mousedown = function (e) { | ||||
|           layerX = e.layerX | ||||
|           layerY = e.layerY | ||||
|           click = true | ||||
|         } | ||||
|         mousemove = function (e) { | ||||
|           if (!click) { | ||||
|             return | ||||
|           } | ||||
|           let width = _this.clickTextDom.clientWidth * 1 | ||||
|           let height = _this.clickTextDom.clientHeight * 1 | ||||
|           let param = { | ||||
|             x: e.clientX - layerX + width / 2, | ||||
|             y: e.clientY - layerY + height, | ||||
|           } | ||||
|           _this.entityMap.get(_this.clickTextDom.id).setHandeler(param) | ||||
|  | ||||
|         } | ||||
|         mouseup = function (e) { | ||||
|           if (!click) { | ||||
|             return | ||||
|           } | ||||
|           click = false | ||||
|         } | ||||
|  | ||||
|         _this.clickTextDom.addEventListener('mousedown', mousedown); | ||||
|         document.addEventListener('mousemove', mousemove); | ||||
|         document.addEventListener('mouseup', mouseup); | ||||
|       } | ||||
|       // 点击其他地方取消 | ||||
|       if (!_this.isLeftClick && _this.clickTextDom) { | ||||
|         _this.clickTextDom.removeEventListener('mousedown', mousedown); | ||||
|         document.removeEventListener('mousemove', mousemove); | ||||
|         document.removeEventListener('mouseup', mouseup); | ||||
|         _this.entityMap.get(_this.clickTextDom.id).getwords(_this.clickTextDom.getElementsByTagName('textarea')[0].value) | ||||
|  | ||||
|         _this.clickTextDom.style['pointer-events'] = 'none' | ||||
|         _this.clickTextDom = undefined | ||||
|  | ||||
|       } | ||||
|     }, Cesium.ScreenSpaceEventType.LEFT_CLICK) | ||||
|  | ||||
|     // ClickHandler.setInputAction((movement) => { | ||||
|     //   if (_this.clickTextDom) { | ||||
|     //     _this.clickTextDom.style['pointer-events'] = 'none' | ||||
|     //     _this.clickTextDom = undefined | ||||
|     //   } | ||||
|     // }, Cesium.ScreenSpaceEventType.LEFT_CLICK) | ||||
|     function returnNumber(str) { | ||||
|       let index = str.indexOf('px') | ||||
|       return Number(str.slice(0, index)) | ||||
|     } | ||||
|  | ||||
|   } | ||||
|  | ||||
|   destroy() { | ||||
|  | ||||
							
								
								
									
										1
									
								
								static/3rdparty/ewPlugins.min.js
									
									
									
									
										vendored
									
									
								
							
							
						
						
									
										1
									
								
								static/3rdparty/ewPlugins.min.js
									
									
									
									
										vendored
									
									
								
							| @ -810,6 +810,7 @@ | ||||
|             else | ||||
|                 this.init(o, this.config) | ||||
|         } | ||||
|         this.changeColor = g | ||||
|         this.close = () => { | ||||
|           this.pickerFlag = !this.pickerFlag, | ||||
|           this.picker.style.opacity = 0 | ||||
|  | ||||
| @ -1429,6 +1429,24 @@ | ||||
|   margin-bottom: 10px; | ||||
|   display: flex; | ||||
|   position: relative; | ||||
|   overflow-y: auto; | ||||
| } | ||||
|  | ||||
| .DIV-cy-tabs .DIV-cy-tab-top::-webkit-scrollbar { | ||||
|   width: 4px; | ||||
|   height: 4px; | ||||
| } | ||||
|  | ||||
| .DIV-cy-tabs .DIV-cy-tab-top::-webkit-scrollbar-thumb { | ||||
|   border-radius: 5px; | ||||
|   -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); | ||||
|   background-color: rgba(var(--color-sdk-base-rgb)); | ||||
| } | ||||
|  | ||||
| .DIV-cy-tabs .DIV-cy-tab-top::-webkit-scrollbar-track { | ||||
|   -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); | ||||
|   border-radius: 5px; | ||||
|   background-color: rgba(var(--color-sdk-base-rgb), 0.1); | ||||
| } | ||||
|  | ||||
| .DIV-cy-tabs .DIV-cy-tab-top::after { | ||||
| @ -1473,7 +1491,14 @@ | ||||
|   border-bottom: 2px solid #dddddd00; | ||||
|   position: relative; | ||||
|   z-index: 2; | ||||
|   white-space: nowrap; | ||||
|   user-select: none; | ||||
|   cursor: pointer; | ||||
|   -webkit-pointer-events: auto; | ||||
|   -moz-pointer-events: auto; | ||||
|   -ms-pointer-events: auto; | ||||
|   -o-pointer-events: auto; | ||||
|   pointer-events: auto; | ||||
| } | ||||
|  | ||||
| .DIV-cy-tabs .DIV-cy-tab-pane-title-p span { | ||||
| @ -2718,7 +2743,7 @@ | ||||
|  | ||||
| /* 贴地svg */ | ||||
| .YJ-custom-base-dialog.ground-svg>.content { | ||||
|   width: 535px; | ||||
|   width: 560px; | ||||
| } | ||||
|  | ||||
| .YJ-custom-base-dialog.ground-svg>.content>div .div-item:nth-of-type(2) .row .col .label { | ||||
| @ -3094,6 +3119,45 @@ | ||||
|   background-size: 100% 100%; | ||||
| } | ||||
|  | ||||
| /* 文本框 */ | ||||
| .popup-textarea { | ||||
|   /* width: 212px; */ | ||||
|   width: 161px; | ||||
|   /* height: 154px; */ | ||||
|   height: 119px; | ||||
|   display: block; | ||||
|   pointer-events: none; | ||||
|   position: absolute; | ||||
|   /* z-index: 99; */ | ||||
|   background: url(../../img/pop.png) 100% 100% no-repeat; | ||||
|   background-size: 100% 100%; | ||||
|   padding: 5px 5px 0px 5px; | ||||
| } | ||||
| .popup-textarea textarea{ | ||||
|   width: 158px; | ||||
|   height: 95px; | ||||
|   background-color: unset!important; | ||||
|   border: unset!important; | ||||
|   color: #fff; | ||||
| } | ||||
|  | ||||
| .popup-textarea textarea::-webkit-scrollbar { | ||||
|   width: 8px !important; | ||||
|   /* height: 8px!important; */ | ||||
| } | ||||
|  | ||||
| .popup-textarea textarea::-webkit-scrollbar-thumb { | ||||
|   border-radius: 5px !important; | ||||
|   -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important; | ||||
|   background-color: rgba(var(--color-sdk-base-rgb)) !important; | ||||
| } | ||||
|  | ||||
| .popup-textarea textarea::-webkit-scrollbar-track { | ||||
|   -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important; | ||||
|   border-radius: 5px !important; | ||||
|   background-color: rgba(var(--color-sdk-base-rgb), 0.1) !important; | ||||
| } | ||||
|  | ||||
| /* 贴地图片 */ | ||||
| .YJ-custom-base-dialog.ground-image>.content { | ||||
|   width: 560px; | ||||
| @ -3550,22 +3614,36 @@ | ||||
|   border: 1.5px solid; | ||||
|   border-image: linear-gradient(to bottom, var(--color-sdk-gradual)) 1; | ||||
|   color: #fff; | ||||
|   min-width: 200px; | ||||
|   min-height: 120px; | ||||
|   box-sizing: border-box; | ||||
|   /* -webkit-pointer-events: none; | ||||
|   -moz-pointer-events: none; | ||||
|   -ms-pointer-events: none; | ||||
|   -o-pointer-events: none; | ||||
|   pointer-events: none; */ | ||||
| } | ||||
|  | ||||
| .billboard-attribute-box .DIV-cy-tabs { | ||||
|   height: 100%; | ||||
|   display: flex; | ||||
|   flex-direction: column; | ||||
|   backdrop-filter: blur(2px); | ||||
| } | ||||
|  | ||||
| .billboard-attribute-box .DIV-cy-tabs .DIV-cy-tab-top .DIV-cy-tab-pane-title { | ||||
|   padding: 0 2px; | ||||
| } | ||||
|  | ||||
| .billboard-attribute-box .DIV-cy-tabs .DIV-cy-tab-top .DIV-cy-tab-pane-title:first-child { | ||||
|   padding-left: 0; | ||||
| } | ||||
|  | ||||
| .billboard-attribute-box .DIV-cy-tabs .DIV-cy-tab-top .DIV-cy-tab-pane-title:last-child { | ||||
|   padding-right: 0; | ||||
| } | ||||
| .billboard-attribute-box .DIV-cy-tabs .DIV-cy-tab-top .DIV-cy-tab-pane-title span{ | ||||
|  | ||||
| .billboard-attribute-box .DIV-cy-tabs .DIV-cy-tab-top .DIV-cy-tab-pane-title span { | ||||
|   margin: 0 5px; | ||||
| } | ||||
|  | ||||
| @ -3573,4 +3651,168 @@ | ||||
|   padding: 0 5px 5px 5px; | ||||
|   box-sizing: border-box; | ||||
|   flex: 1; | ||||
| } | ||||
|   overflow: auto; | ||||
| } | ||||
|  | ||||
| .billboard-attribute-box .DIV-cy-tabs .DIV-cy-tab-content::-webkit-scrollbar { | ||||
|   width: 8px; | ||||
|   height: 8px; | ||||
| } | ||||
|  | ||||
| .billboard-attribute-box .DIV-cy-tabs .DIV-cy-tab-content::-webkit-scrollbar-thumb { | ||||
|   border-radius: 5px; | ||||
|   -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); | ||||
|   background-color: rgba(var(--color-sdk-base-rgb)); | ||||
| } | ||||
|  | ||||
| .billboard-attribute-box .DIV-cy-tabs .DIV-cy-tab-content::-webkit-scrollbar-track { | ||||
|   -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); | ||||
|   border-radius: 5px; | ||||
|   background-color: rgba(var(--color-sdk-base-rgb), 0.1); | ||||
| } | ||||
|  | ||||
| .billboard-attribute-box .DIV-cy-tabs .DIV-cy-tab-content-pane { | ||||
|   width: 100%; | ||||
|   height: 100%; | ||||
| } | ||||
|  | ||||
| .billboard-attribute-box .DIV-cy-tabs .DIV-cy-tab-content-pane iframe { | ||||
|   border: none; | ||||
| } | ||||
|  | ||||
| .billboard-attribute-box .billboard-attribute-box-line { | ||||
|   position: absolute; | ||||
|   width: 0px; | ||||
|   /* border-left: 1px solid rgba(var(--color-sdk-base-rgb), 0.5); */ | ||||
|   border-left: 1px solid rgba(var(--color-sdk-base-rgb), 1); | ||||
|   /* transform: rotate(45deg); */ | ||||
|   transform-origin: 0px 0px; | ||||
|   -webkit-pointer-events: none; | ||||
|   -moz-pointer-events: none; | ||||
|   -ms-pointer-events: none; | ||||
|   -o-pointer-events: none; | ||||
|   pointer-events: none; | ||||
| } | ||||
|  | ||||
| .billboard-attribute-box .drag-nook { | ||||
|   position: absolute; | ||||
|   width: 12px; | ||||
|   height: 12px; | ||||
|   display: block; | ||||
|   user-select: none; | ||||
|   -webkit-pointer-events: auto; | ||||
|   -moz-pointer-events: auto; | ||||
|   -ms-pointer-events: auto; | ||||
|   -o-pointer-events: auto; | ||||
|   pointer-events: auto; | ||||
|   z-index: 3; | ||||
|   clip-path: polygon(0% 100%, 100% 100%, 50% 50%); | ||||
|   background-image: linear-gradient(to top, #ffffff 1px, #00000000 1px); | ||||
|   background-size: 100% 3px; | ||||
|   /* background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAJRJREFUWEftltsJgFAMQ5NNdBJ1Eh3NTdRJdJPIBQXF50/p/WgHSNNDCSGch877EQbyIyCpBtAa/cZEsj9qXwhImgEURgZA8rTzzkAiYGVgITm+ErC6/Ek3vycMAkHAnYCkAUDKAosZSTaeSZiCqIwgCgJBIG8CWyXzKySSZBGBu+afStYBqIxMfJdSo8WPslHJgsAKWjkmIRBy/c8AAAAASUVORK5CYII='); */ | ||||
| } | ||||
|  | ||||
| .billboard-attribute-box .drag-nook.left-top { | ||||
|   top: -6px; | ||||
|   left: -6px; | ||||
|   cursor: se-resize; | ||||
|   transform: rotate(-45deg); | ||||
|   display: none; | ||||
| } | ||||
|  | ||||
| .billboard-attribute-box .drag-nook.right-top { | ||||
|   top: -6px; | ||||
|   right: -6px; | ||||
|   cursor: ne-resize; | ||||
|   transform: rotate(45deg); | ||||
|   display: none; | ||||
| } | ||||
|  | ||||
| .billboard-attribute-box .table { | ||||
|   background-color: #ffffff00; | ||||
|   color: #ffffff; | ||||
|   overflow: hidden; | ||||
|   border: 1px solid rgba(var(--color-sdk-base-rgb), 0.5); | ||||
| } | ||||
|  | ||||
| .billboard-attribute-box .table .table-head .tr { | ||||
|   border-top: none; | ||||
|   border-left: none; | ||||
|   border-right: none; | ||||
| } | ||||
|  | ||||
| .billboard-attribute-box .table .tr { | ||||
|   display: flex; | ||||
|   border: 1px solid rgba(var(--color-sdk-base-rgb), 0.5); | ||||
|   border-right: none; | ||||
| } | ||||
| .billboard-attribute-box .table .tr .th, .billboard-attribute-box .table .tr .td { | ||||
|   border-right: 1px solid rgba(var(--color-sdk-base-rgb), 0.5); | ||||
|   display: flex; | ||||
|   justify-content: center; | ||||
| } | ||||
| .billboard-attribute-box .table .tr .th:last-child, .billboard-attribute-box .table .tr .td:last-child { | ||||
|   border-right: none; | ||||
| } | ||||
|  | ||||
|  | ||||
| .billboard-attribute-box .table .table-body .tr { | ||||
|   border-bottom: none; | ||||
|   border-left: none; | ||||
| } | ||||
|  | ||||
| .billboard-attribute-box .table .table-body .tr:first-child { | ||||
|   border-top: none; | ||||
| } | ||||
|  | ||||
| #YJ-custom-message { | ||||
|   /* 固定在顶部中央 */ | ||||
|   position: fixed; | ||||
|   top: 0; | ||||
|   left: 50%; | ||||
|   transform: translate(-50%, 0%); | ||||
|   /* 初始位置在屏幕顶部外 */ | ||||
|  | ||||
|   /* 样式美化 */ | ||||
|   display: flex; | ||||
|   border-radius: 4px; | ||||
|   font-size: 14px; | ||||
|   padding: 15px 20px; | ||||
|   width: 380px; | ||||
|   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | ||||
|   z-index: 9999999; | ||||
|  | ||||
|  | ||||
|   /* 动画定义 */ | ||||
|   animation: YJ-custom-message-slideDown 0.5s forwards, | ||||
|     YJ-custom-message-fadeOut 0.5s 1500ms forwards; | ||||
| } | ||||
|  | ||||
| #YJ-custom-message i { | ||||
|   margin: 2px 10px 0 0; | ||||
|   display: flex; | ||||
|   align-items: center; | ||||
|   width: 16px; | ||||
| } | ||||
|  | ||||
| #YJ-custom-message.success { | ||||
|   background-color: #f0f9eb; | ||||
|   color: rgb(82, 196, 26); | ||||
| } | ||||
|  | ||||
| /* 滑入动画 */ | ||||
| @keyframes YJ-custom-message-slideDown { | ||||
|   to { | ||||
|     top: 20px; | ||||
|     /* 移动到屏幕顶部 */ | ||||
|   } | ||||
| } | ||||
|  | ||||
| /* 淡出动画 - 1500ms后执行 */ | ||||
| @keyframes YJ-custom-message-fadeOut { | ||||
|   to { | ||||
|     opacity: 0; | ||||
|     top: -200px | ||||
|       /* 移回顶部外 */ | ||||
|   } | ||||
| } | ||||
|  | ||||
										
											Binary file not shown.
										
									
								
							
							
								
								
									
										
											BIN
										
									
								
								static/img/pop.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										
											BIN
										
									
								
								static/img/pop.png
									
									
									
									
									
										Normal file
									
								
							
										
											Binary file not shown.
										
									
								
							| After Width: | Height: | Size: 868 B | 
							
								
								
									
										
											BIN
										
									
								
								static/img/roadPhoto.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										
											BIN
										
									
								
								static/img/roadPhoto.png
									
									
									
									
									
										Normal file
									
								
							
										
											Binary file not shown.
										
									
								
							| After Width: | Height: | Size: 40 KiB | 
							
								
								
									
										
											BIN
										
									
								
								static/img/roadTexture.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										
											BIN
										
									
								
								static/img/roadTexture.png
									
									
									
									
									
										Normal file
									
								
							
										
											Binary file not shown.
										
									
								
							| After Width: | Height: | Size: 1.9 KiB | 
							
								
								
									
										
											BIN
										
									
								
								static/img/sidePhoto.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										
											BIN
										
									
								
								static/img/sidePhoto.png
									
									
									
									
									
										Normal file
									
								
							
										
											Binary file not shown.
										
									
								
							| After Width: | Height: | Size: 47 KiB | 
		Reference in New Issue
	
	Block a user