111111
Showing
1 changed file
with
314 additions
and
0 deletions
src/assets/js/map/tool.js
0 → 100644
1 | |||
2 | export default { | ||
3 | attributes: { | ||
4 | drawPolt: class DrawPolt { | ||
5 | constructor(arg) { | ||
6 | this.viewer = arg.viewer; | ||
7 | this.type = {}; | ||
8 | this._billboardArr = []; | ||
9 | this._lineArr = []; | ||
10 | this._gonArr = []; | ||
11 | this.handler = null; | ||
12 | } | ||
13 | get billboardArr() { | ||
14 | return this._billboardArr; | ||
15 | } | ||
16 | get polylineArr() { | ||
17 | return this._lineArr; | ||
18 | } | ||
19 | get polygonArr() { | ||
20 | return this._gonArr; | ||
21 | } | ||
22 | create(e) { | ||
23 | this.type[e].startCreate(); | ||
24 | return this.type[e]; | ||
25 | } | ||
26 | clearAll() { | ||
27 | for (var i = 0; i < this._lineArr.length; i++) { | ||
28 | var line = this._lineArr[i]; | ||
29 | line.destroy(); | ||
30 | } | ||
31 | this._lineArr = []; | ||
32 | for (var j = 0; j < this._gonArr.length; j++) { | ||
33 | var gon = this._gonArr[j]; | ||
34 | gon.destroy(); | ||
35 | } | ||
36 | this._gonArr = []; | ||
37 | for (var k = 0; k < this._billboardArr.length; k++) { | ||
38 | var billboard = this._billboardArr[k]; | ||
39 | billboard.destroy(); | ||
40 | } | ||
41 | this._billboardArr = []; | ||
42 | } | ||
43 | clearOne() { | ||
44 | if (!this.handler) { | ||
45 | this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas); | ||
46 | } | ||
47 | var that = this; | ||
48 | this.handler.setInputAction(function (evt) { | ||
49 | var pick = that.viewer.scene.pick(evt.position); | ||
50 | if (Cesium.defined(pick) && pick.id) { | ||
51 | that.viewer.entities.remove(pick.id); | ||
52 | that.handler.destroy(); | ||
53 | that.handler = null; | ||
54 | } | ||
55 | }, Cesium.ScreenSpaceEventType.LEFT_CLICK); | ||
56 | } | ||
57 | }, | ||
58 | polygon: class DrawPolygon { | ||
59 | constructor(arg) { | ||
60 | this.objId = Number((new Date()).getTime() + "" + Number(Math.random() * 1000).toFixed(0)); | ||
61 | this.viewer = arg.viewer; | ||
62 | this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas); | ||
63 | this._polygon = null; | ||
64 | this._polyline = null; | ||
65 | this._positions = []; | ||
66 | } | ||
67 | get polygon() { | ||
68 | return this._polygon; | ||
69 | } | ||
70 | get positions() { | ||
71 | return this._positions; | ||
72 | } | ||
73 | startCreate() { | ||
74 | var $this = this; | ||
75 | this.handler.setInputAction(function (evt) { //单机开始绘制 | ||
76 | var cartesian = $this.getCatesian3FromPX(evt.position); | ||
77 | if ($this._positions.length == 0) { | ||
78 | $this._positions.push(cartesian.clone()); | ||
79 | } | ||
80 | $this._positions.push(cartesian); | ||
81 | }, Cesium.ScreenSpaceEventType.LEFT_CLICK); | ||
82 | this.handler.setInputAction(function (evt) { //移动时绘制面 | ||
83 | if ($this._positions.length < 1) return; | ||
84 | var cartesian = $this.getCatesian3FromPX(evt.endPosition); | ||
85 | if ($this._positions.length == 2) { | ||
86 | if (!Cesium.defined($this._polyline)) { | ||
87 | $this._polyline = $this.createPolyline(); | ||
88 | } | ||
89 | } | ||
90 | if ($this._positions.length == 3) { | ||
91 | if ($this._polyline){ | ||
92 | $this.viewer.entities.remove($this._polyline); | ||
93 | $this._polyline = null; | ||
94 | } | ||
95 | if (!Cesium.defined($this._polygon)) { | ||
96 | $this._polygon = $this.createPolygon(); | ||
97 | $this._polygon.objId = $this.objId; | ||
98 | } | ||
99 | } | ||
100 | $this._positions.pop(); | ||
101 | $this._positions.push(cartesian); | ||
102 | }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); | ||
103 | this.handler.setInputAction(function (evt) { | ||
104 | if (!$this._polygon) return; | ||
105 | var cartesian = $this.getCatesian3FromPX(evt.position); | ||
106 | $this.handler.destroy(); | ||
107 | $this._positions.pop(); | ||
108 | $this._positions.push(cartesian); | ||
109 | }, Cesium.ScreenSpaceEventType.RIGHT_CLICK); | ||
110 | } | ||
111 | createPolygon(obj) { | ||
112 | var $this = this; | ||
113 | return this.viewer.entities.add({ | ||
114 | polygon: { | ||
115 | hierarchy: new Cesium.CallbackProperty(function () { | ||
116 | return new Cesium.PolygonHierarchy($this._positions); | ||
117 | }, false), | ||
118 | clampToGround: true, | ||
119 | show: true, | ||
120 | fill: true, | ||
121 | material: Cesium.Color.RED, | ||
122 | width: 3, | ||
123 | outlineColor: Cesium.Color.BLACK, | ||
124 | outlineWidth: 1, | ||
125 | outline: false | ||
126 | } | ||
127 | }); | ||
128 | } | ||
129 | createPolyline() { | ||
130 | var $this = this; | ||
131 | return this.viewer.entities.add({ | ||
132 | polyline: { | ||
133 | positions: new Cesium.CallbackProperty(function () { | ||
134 | return $this._positions | ||
135 | }, false), | ||
136 | clampToGround: true, | ||
137 | material: Cesium.Color.YELLOW, | ||
138 | width: 3 | ||
139 | } | ||
140 | }); | ||
141 | } | ||
142 | getCatesian3FromPX(px) { | ||
143 | var cartesian; | ||
144 | var ray = this.viewer.camera.getPickRay(px); | ||
145 | if (!ray) return null; | ||
146 | cartesian = this.viewer.scene.globe.pick(ray, this.viewer.scene); | ||
147 | return cartesian; | ||
148 | } | ||
149 | destroy() { | ||
150 | if (this.handler) { | ||
151 | this.handler.destroy(); | ||
152 | this.handler = null; | ||
153 | } | ||
154 | if (this._polygon) { | ||
155 | this.viewer.entities.remove(this._polygon); | ||
156 | this._polygon = null; | ||
157 | } | ||
158 | if (this._polyline) { | ||
159 | this.viewer.entities.remove(this._polyline); | ||
160 | this._polyline = null; | ||
161 | } | ||
162 | this._positions = []; | ||
163 | } | ||
164 | }, | ||
165 | point: class DrawBillboard { | ||
166 | constructor(arg) { | ||
167 | this.objId = Number((new Date()).getTime() + "" + Number(Math.random() * 1000).toFixed(0)); | ||
168 | this.viewer = arg.viewer; | ||
169 | this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas); | ||
170 | this._position = null; | ||
171 | this._billboard = null; | ||
172 | } | ||
173 | |||
174 | get billboard() { | ||
175 | return this._billboard; | ||
176 | } | ||
177 | get position() { | ||
178 | return this._position; | ||
179 | } | ||
180 | startCreate() { | ||
181 | var $this = this; | ||
182 | this.handler.setInputAction(function (evt) { //单机开始绘制 | ||
183 | var cartesian = $this.getCatesian3FromPX(evt.position); | ||
184 | if (!cartesian) return; | ||
185 | if(!Cesium.defined($this._billboard)){ | ||
186 | $this._billboard = $this.createBillboard(cartesian); | ||
187 | $this.handler.destroy(); | ||
188 | } | ||
189 | }, Cesium.ScreenSpaceEventType.LEFT_CLICK); | ||
190 | } | ||
191 | createBillboard(cartesian) { | ||
192 | var billboard = this.viewer.entities.add({ | ||
193 | position: cartesian, | ||
194 | billboard: { | ||
195 | image: 'img/mark4.png', | ||
196 | scale: 1, | ||
197 | horizontalOrigin: Cesium.HorizontalOrigin.CENTER, | ||
198 | verticalOrigin: Cesium.VerticalOrigin.BOTTOM, | ||
199 | heightReference:Cesium.HeightReference.CLAMP_TO_GROUND, | ||
200 | disableDepthTestDistance:Number.MAX_VALUE | ||
201 | } | ||
202 | }); | ||
203 | billboard.objId = this.objId; | ||
204 | return billboard; | ||
205 | } | ||
206 | destroy() { | ||
207 | if (this.handler) { | ||
208 | this.handler.destroy(); | ||
209 | this.handler = null; | ||
210 | } | ||
211 | if (this._billboard) { | ||
212 | this.viewer.entities.remove(this._billboard); | ||
213 | this._billboard = null; | ||
214 | } | ||
215 | this._position = null; | ||
216 | } | ||
217 | getCatesian3FromPX(px) { | ||
218 | var cartesian; | ||
219 | var ray = this.viewer.camera.getPickRay(px); | ||
220 | if (!ray) return null; | ||
221 | cartesian = this.viewer.scene.globe.pick(ray, this.viewer.scene); | ||
222 | return cartesian; | ||
223 | } | ||
224 | }, | ||
225 | polyline: class DrawPolyline { | ||
226 | constructor(arg) { | ||
227 | //设置唯一id 备用 | ||
228 | this.objId = Number((new Date()).getTime() + "" + Number(Math.random() * 1000).toFixed(0)); | ||
229 | this.viewer = arg.viewer; | ||
230 | //事件 | ||
231 | this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas); | ||
232 | this._polyline = null; | ||
233 | this._positions = []; | ||
234 | } | ||
235 | //获取线 | ||
236 | get line(){ | ||
237 | return this._polyline; | ||
238 | } | ||
239 | //获取线的坐标数组 | ||
240 | get positions(){ | ||
241 | return this._positions; | ||
242 | } | ||
243 | //开始创建 | ||
244 | startCreate() { | ||
245 | var $this = this; | ||
246 | this.handler.setInputAction(function (evt) { //单机开始绘制 | ||
247 | //屏幕坐标转地形上坐标 | ||
248 | var cartesian = $this.getCatesian3FromPX(evt.position); | ||
249 | if ($this._positions.length == 0) { | ||
250 | $this._positions.push(cartesian.clone()); | ||
251 | } | ||
252 | $this._positions.push(cartesian); | ||
253 | }, Cesium.ScreenSpaceEventType.LEFT_CLICK); | ||
254 | this.handler.setInputAction(function (evt) { //移动时绘制线 | ||
255 | if ($this._positions.length < 1) return; | ||
256 | var cartesian = $this.getCatesian3FromPX(evt.endPosition); | ||
257 | if ($this._positions.length == 2) { | ||
258 | if (!Cesium.defined($this._polyline)) { | ||
259 | $this._polyline = $this.createPolyline(); | ||
260 | } | ||
261 | } | ||
262 | if ($this._polyline) { | ||
263 | $this._positions.pop(); | ||
264 | $this._positions.push(cartesian); | ||
265 | } | ||
266 | }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); | ||
267 | this.handler.setInputAction(function (evt) { //单机开始绘制 | ||
268 | if (!$this._polyline) return; | ||
269 | var cartesian = $this.getCatesian3FromPX(evt.position); | ||
270 | $this.handler.destroy(); | ||
271 | $this._positions.pop(); | ||
272 | $this._positions.push(cartesian); | ||
273 | }, Cesium.ScreenSpaceEventType.RIGHT_CLICK); | ||
274 | } | ||
275 | createPolyline(obj) { | ||
276 | if (!obj) obj = {}; | ||
277 | var $this = this; | ||
278 | var polyline = this.viewer.entities.add({ | ||
279 | polyline: { | ||
280 | //使用cesium的peoperty | ||
281 | positions: new Cesium.CallbackProperty(function () { | ||
282 | return $this._positions | ||
283 | }, false), | ||
284 | show: true, | ||
285 | material: Cesium.Color.YELLOW, | ||
286 | width: 3, | ||
287 | clampToGround:true | ||
288 | } | ||
289 | }); | ||
290 | polyline.objId = this.objId; | ||
291 | return polyline; | ||
292 | } | ||
293 | destroy() { | ||
294 | this.linePointArr = []; | ||
295 | if (this.handler) { | ||
296 | this.handler.destroy(); | ||
297 | this.handler = null; | ||
298 | } | ||
299 | if (this._polyline) { | ||
300 | this.viewer.entities.remove(this._polyline); | ||
301 | this._polyline = null; | ||
302 | } | ||
303 | this._positions = []; | ||
304 | } | ||
305 | getCatesian3FromPX(px) { | ||
306 | var cartesian; | ||
307 | var ray = this.viewer.camera.getPickRay(px); | ||
308 | if (!ray) return null; | ||
309 | cartesian = this.viewer.scene.globe.pick(ray, this.viewer.scene); | ||
310 | return cartesian; | ||
311 | } | ||
312 | } | ||
313 | } | ||
314 | } |
-
Please register or sign in to post a comment