fuchengshen
2022-07-09 3a25c05b5ab837714f30469cdcb1e2a77d8d7f6c
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
import * as mars3d from "mars3d"
 
export let map // mars3d.Map三维地图对象
let floodByGraphic
let drawPotions
 
export const eventTarget = new mars3d.BaseClass() // 事件对象,用于抛出事件到面板中
 
/**
 * 初始化地图业务,生命周期钩子函数(必须)
 * 框架在地图初始化完成后自动调用该函数
 * @param {mars3d.Map} mapInstance 地图对象
 * @returns {void} 无
 */
export function onMounted(mapInstance) {
  map = mapInstance // 记录map
 
  // 基于polygon矢量面抬高模拟,只支持单个区域
  floodByGraphic = new mars3d.thing.FloodByGraphic({
    style: {
      color: "#007be6",
      opacity: 0.5,
      outline: false
    }
  })
  map.addThing(floodByGraphic)
 
  floodByGraphic.on(mars3d.EventType.start, function (e) {
    console.log("开始分析", e)
  })
  floodByGraphic.on(mars3d.EventType.change, function (e) {
    const height = e.height
    eventTarget.fire("heightChange", { height })
  })
  floodByGraphic.on(mars3d.EventType.end, function (e) {
    console.log("结束分析", e)
  })
}
 
/**
 * 释放当前地图业务的生命周期函数
 * @returns {void} 无
 */
export function onUnmounted() {
  map = null
 
  clearDraw()
  floodByGraphic.remove()
  floodByGraphic = null
}
 
// 绘制矩形
export function btnDrawExtent(callback) {
  clearDraw()
 
  map.graphicLayer.startDraw({
    type: "rectangle",
    style: {
      color: "#007be6",
      opacity: 0.8,
      outline: false
    },
    success: function (graphic) {
      // 绘制成功后回调
      const positions = graphic.getOutlinePositions(false)
 
      // 区域
      drawPotions = positions
 
      // 求最大、最小高度值
      showLoading()
      const result = mars3d.PolyUtil.getHeightRange(positions, map.scene)
      callback(result.minHeight, result.maxHeight)
      hideLoading()
    }
  })
}
// 绘制多边形
export function btnDraw(callback) {
  clearDraw()
 
  map.graphicLayer.startDraw({
    type: "polygon",
    style: {
      color: "#007be6",
      opacity: 0.5,
      outline: false
    },
    success: function (graphic) {
      const positions = graphic.positionsShow
 
      drawPotions = positions
 
      // 求最大、最小高度值
      showLoading()
      const result = mars3d.PolyUtil.getHeightRange(positions, map.scene)
      callback(result.minHeight, result.maxHeight)
      hideLoading()
    }
  })
}
 
export function clearDraw() {
  drawPotions = null
  map.graphicLayer.clear()
  if (floodByGraphic) {
    floodByGraphic.clear()
  }
}
 
// 开始分析
export function begin(data, callback) {
  if (drawPotions == null) {
    globalMsg("请首先绘制分析区域!")
    return
  }
  map.graphicLayer.clear()
  floodByGraphic.positions = drawPotions
 
  const minValue = Number(data.minHeight)
  const maxValue = Number(data.maxHeight)
  const speed = Number(data.speed)
 
  floodByGraphic.setOptions({
    minHeight: minValue,
    maxHeight: maxValue,
    speed: speed
  })
  floodByGraphic.start()
  callback()
}
 
// 高度选择
export function onChangeHeight(height) {
  floodByGraphic.height = height
}
 
// 自动播放
export function startPlay() {
  if (floodByGraphic.isStart) {
    floodByGraphic.stop()
  } else {
    floodByGraphic.start()
  }
}