f7563079 by jikai

111111

1 parent 33dfa599
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 }