| | |
| | | * @Author: shuishen 1109946754@qq.com |
| | | * @Date: 2024-11-09 15:41:35 |
| | | * @LastEditors: shuishen 1109946754@qq.com |
| | | * @LastEditTime: 2024-11-26 11:02:59 |
| | | * @LastEditTime: 2024-11-26 19:08:39 |
| | | * @FilePath: \bigScreen\src\views\pd\components\dynamicPanel.vue |
| | | * @Description: |
| | | * |
| | |
| | | title: '典型案例3', |
| | | content: '危险化学品运输事故: 北片区某企业的危化品运输车辆发生侧翻,大量盐酸流至路面,如不采取措施,将造成污染事故,影响到赣江下游水质。', |
| | | |
| | | showModel: true, |
| | | |
| | | |
| | | oneCentent: '2024年09月16日14时,北片区某公司的危化品运输车辆发生侧翻,大量盐酸流至路面。', |
| | | onePointPosition: { |
| | | lng: 115.10248629, |
| | | lat: 27.28112873 |
| | | lng: 115.10639786, |
| | | lat: 27.28116943 |
| | | }, |
| | | onetime: 0, |
| | | onetime: 8000, |
| | | |
| | | twoContent: '调度金龙水库清水,稀释污染团。', |
| | | twoPointPosition: { |
| | | lng: 115.10488545, |
| | | lat: 27.27678110 |
| | | }, |
| | | twotime: 0, |
| | | twotime: 13000, |
| | | |
| | | threeContent: '转输至江西粤鹏环保高新技术开发有限公司事故应急池、初期雨水池。', |
| | | threePointPosition: { |
| | | lng: 115.10545135, |
| | | lat: 27.28043872 |
| | | }, |
| | | threetime: 0, |
| | | threetime: 18000, |
| | | |
| | | fourContent: '转输至江西腾龙源环保科技有限公司事故应急池、初期雨水池。', |
| | | fourPointPosition: { |
| | | lng: 115.10332118, |
| | | lat: 27.27831698 |
| | | }, |
| | | fourtime: 0, |
| | | fourtime: 23000, |
| | | }, |
| | | ] |
| | | }) |
| | |
| | | const dynamicHtmlLayer = new DC.HtmlLayer('dynamicHtmlLayer').addTo(window.$viewer) |
| | | const dynamicLineVectorLayer = new DC.VectorLayer('dynamicLineVectorLayer').addTo(window.$viewer) |
| | | |
| | | let modelPosition = [ |
| | | { |
| | | lng: 115.10601196, |
| | | lat: 27.28378838 |
| | | }, |
| | | { |
| | | lng: 115.10602432, |
| | | lat: 27.28339800 |
| | | }, |
| | | { |
| | | lng: 115.10600450, |
| | | lat: 27.28319338, |
| | | }, |
| | | { |
| | | lng: 115.10605031, |
| | | lat: 27.28294272, |
| | | }, |
| | | { |
| | | lng: 115.10610404, |
| | | lat: 27.28267996 |
| | | }, |
| | | { |
| | | lng: 115.10614202, |
| | | lat: 27.28248175 |
| | | }, |
| | | { |
| | | lng: 115.10620011, |
| | | lat: 27.28221311 |
| | | }, |
| | | { |
| | | lng: 115.10640155, |
| | | lat: 27.28121605 |
| | | }, |
| | | |
| | | ] |
| | | |
| | | let positions = modelPosition.map(i => [i.lng, i.lat, 60].join(',')).join(';') |
| | | console.log(positions, 1111111) |
| | | let tc = new DC.TrackController(window.$viewer) |
| | | let track = new DC.Track(positions, 5) |
| | | track.setModel(VITE_APP_BASE + 'gltf/111.gltf', { |
| | | scale: 0.005, |
| | | color: DC.Color.RED, |
| | | // nodeTransformations: { |
| | | // rotation: window.$Cesium.Quaternion.fromHeadingPitchRoll(window.$Cesium.Math.toRadians(0), window.$Cesium.Math.toRadians(0), window.$Cesium.Math.toRadians(0)), |
| | | // } |
| | | }) |
| | | |
| | | tc.addTrack(track) |
| | | |
| | | |
| | | const schemeStart = (item) => { |
| | | emit('closePanel') |
| | | clearAll() |
| | | |
| | | window.$viewer.flyToPosition(new DC.Position(item.onePointPosition.lng, item.onePointPosition.lat, 400, 0, -90, 0), () => { |
| | | let oneCenter = DC.Position.fromObject(item.onePointPosition) |
| | | let oneCircle = new DC.Circle(oneCenter, 20) |
| | | oneCircle.setStyle({ |
| | | material: new DC.CircleWaveMaterialProperty({ |
| | | color: DC.Color.RED.withAlpha(0.9), |
| | | speed: 20, |
| | | count: 5, |
| | | gradient: 0.5 |
| | | if (item.showModel) { |
| | | window.$viewer.flyToPosition("115.10587903,27.28374884,400,0,-90", () => { |
| | | tc.play() |
| | | tc.viewTrack(track, { |
| | | mode: '2', |
| | | pitch: -90, |
| | | range: 400 |
| | | }) |
| | | }) |
| | | dynamicVectorLayer.addOverlay(oneCircle) |
| | | } |
| | | |
| | | let oneCentent = new DC.DivIcon( |
| | | new DC.Position(item.onePointPosition.lng, item.onePointPosition.lat, 70), |
| | | `<div class="dynamic-map-popup"> |
| | | timeOne = setTimeout(() => { |
| | | function oneLoad () { |
| | | let oneCenter = DC.Position.fromObject(item.onePointPosition) |
| | | let oneCircle = new DC.Circle(oneCenter, 20) |
| | | oneCircle.setStyle({ |
| | | material: new DC.CircleWaveMaterialProperty({ |
| | | color: DC.Color.RED.withAlpha(0.9), |
| | | speed: 20, |
| | | count: 5, |
| | | gradient: 0.5 |
| | | }) |
| | | }) |
| | | dynamicVectorLayer.addOverlay(oneCircle) |
| | | |
| | | let oneCentent = new DC.DivIcon( |
| | | new DC.Position(item.onePointPosition.lng, item.onePointPosition.lat, 70), |
| | | `<div class="dynamic-map-popup"> |
| | | <div class="content-wrap"> |
| | | <div class="content"> |
| | | <p>${item.oneCentent}</p> |
| | |
| | | </div> |
| | | <div class="arrow"></div> |
| | | </div>` |
| | | // <p>特征污染物:${item.specificPollutant}</p> |
| | | ) |
| | | dynamicHtmlLayer.addOverlay(oneCentent) |
| | | }, 3) |
| | | // <p>特征污染物:${item.specificPollutant}</p> |
| | | ) |
| | | dynamicHtmlLayer.addOverlay(oneCentent) |
| | | } |
| | | if (item.showModel) { |
| | | oneLoad() |
| | | } else { |
| | | window.$viewer.flyToPosition(new DC.Position(item.onePointPosition.lng, item.onePointPosition.lat, 400, 0, -90, 0), () => { |
| | | oneLoad() |
| | | }, 3) |
| | | } |
| | | }, item.onetime) |
| | | |
| | | item.linePosition && (lineTime = setTimeout(() => { |
| | | let polyline = new DC.Polyline(item.linePosition) |