Skip to content

GIS / i2d-demo-vue2

Go to a project
Toggle navigation
Toggle navigation pinning
b1200dcb by 苗菁
Options

行政区导航

1 parent ac56149a
Inline Side-by-side
Showing 2 changed files with 45 additions and 577 deletions
...@@ -67,550 +67,55 @@ export default { ...@@ -67,550 +67,55 @@ export default {
67 this.graphicLayer.destroy() 67 this.graphicLayer.destroy()
68 } 68 }
69 }, 69 },
70 addMarker() {
71 let graphic = new i2d.Graphic.Marker({
72 latlng: [32.3102954498753, 119.19403010080875],
73 style: {
74 rotationAngle: 49,
75 image: "./sdt.png",
76 width: 32,
77 height: 44,
78 horizontalOrigin: i2d.HorizontalOrigin.CENTER,
79 verticalOrigin: i2d.VerticalOrigin.BOTTOM
80 }
81 })
82 this.graphicLayer.addGraphic(graphic)
83
84 graphic = new i2d.Graphic.Marker({
85 latlng: [32.318242830742236, 119.21534353237826],
86 style: {
87 rotationAngle: 190,
88 image: "./sdt.png",
89 width: 32,
90 height: 44,
91 horizontalOrigin: i2d.HorizontalOrigin.CENTER,
92 verticalOrigin: i2d.VerticalOrigin.BOTTOM
93 }
94 })
95 this.graphicLayer.addGraphic(graphic)
96
97 graphic = new i2d.Graphic.Marker({
98 latlng: [32.310656694051374, 119.22235167838745],
99 style: {
100 rotationAngle: 280,
101 image: "./sdt.png",
102 width: 32,
103 height: 44,
104 horizontalOrigin: i2d.HorizontalOrigin.CENTER,
105 verticalOrigin: i2d.VerticalOrigin.BOTTOM
106 }
107 })
108 this.graphicLayer.addGraphic(graphic)
109 },
70 }, 110 },
71 mounted() { 111 mounted() {
72 // 从数据库读取的地块信息 112 // 从数据库读取的地块信息
73 const dkCoord = {"type": "Polygon", "coordinates": [[[100.98204924173348, 40.47840655548055], [101.22951318633983, 40.43081733536394], [101.14765972773921, 40.10340350096175], [100.85070299421159, 40.181449821952924], [100.98204924173348, 40.47840655548055]]]} 113 const dkCoord = {"type": "Feature", "geometry": {"bbox": [119.19403010080875, 32.3102954498753, 119.22235167838748, 32.31824283074223], "type": "Polygon", "coordinates": [[[119.19403010080875, 32.3102954498753], [119.21534353237826, 32.318242830742236], [119.22235167838745, 32.310656694051374], [119.20791069412338, 32.31047249760787], [119.19403010080875, 32.3102954498753]]]}}
74 const geojson = {
75 "type": "FeatureCollection",
76 "features": [
77 {
78 "type": "Feature",
79 "geometry": {
80 "bbox": [
81 126.03867381995315,
82 30.931927433113856,
83 126.04503594875791,
84 30.939514725477864
85 ],
86 "type": "Polygon",
87 "coordinates": [
88 [
89 [
90 126.04127520446629,
91 30.939514725477864
92 ],
93 [
94 126.04377230927992,
95 30.93881960784222
96 ],
97 [
98 126.04332664844026,
99 30.937915552996117
100 ],
101 [
102 126.04237115160002,
103 30.9363554853939
104 ],
105 [
106 126.04215927170368,
107 30.93624139621903
108 ],
109 [
110 126.04262377763028,
111 30.935679099571022
112 ],
113 [
114 126.04354464025664,
115 30.93388626967902
116 ],
117 [
118 126.04363428175124,
119 30.933169137722185
120 ],
121 [
122 126.04503594875791,
123 30.93255794571354
124 ],
125 [
126 126.04482901291135,
127 30.931927433113856
128 ],
129 [
130 126.04305706342336,
131 30.932797864441227
132 ],
133 [
134 126.03867381995315,
135 30.93460090076218
136 ],
137 [
138 126.04127520446629,
139 30.939514725477864
140 ]
141 ]
142 ]
143 },
144 "properties": {
145 "Id": 0,
146 "dkh": "FG52K9756-002",
147 "wz": "同兴村",
148 "tfbh": "I51H134002",
149 "tbbh": "448",
150 "ssqdlh": "702",
151 "sshdlh": "102",
152 "bcgdmj": 0.396,
153 "psnl": "充分满足",
154 "ggnl": "充分满足",
155 "dxbw": "平原低阶",
156 "zays": "盐碱",
157 "zdgx": "薄层型",
158 "nltwh": "高",
159 "swdyx": "丰富",
160 "qjcd": "清洁",
161 "yxtch": "20",
162 "pd": 0.3
163 }
164 },
165 {
166 "type": "Feature",
167 "geometry": {
168 "bbox": [
169 126.03523202362737,
170 30.9370592475255,
171 126.04110232335631,
172 30.940919299594437
173 ],
174 "type": "Polygon",
175 "coordinates": [
176 [
177 [
178 126.03612469963673,
179 30.940919299594437
180 ],
181 [
182 126.0387805796563,
183 30.940176044637667
184 ],
185 [
186 126.04110232335631,
187 30.93952629860218
188 ],
189 [
190 126.04104263663659,
191 30.939267656150548
192 ],
193 [
194 126.04052535173344,
195 30.938392250929894
196 ],
197 [
198 126.03976931995192,
199 30.9370592475255
200 ],
201 [
202 126.03885412358487,
203 30.938332564210327
204 ],
205 [
206 126.03817767409612,
207 30.938969222552544
208 ],
209 [
210 126.03783944935175,
211 30.938312668636968
212 ],
213 [
214 126.03523202362737,
215 30.939312482777378
216 ],
217 [
218 126.03612469963673,
219 30.940919299594437
220 ]
221 ]
222 ]
223 },
224 "properties": {
225 "Id": 0,
226 "dkh": "FG52K9756-001",
227 "wz": "同兴村",
228 "tfbh": "I51H134001",
229 "tbbh": "212",
230 "ssqdlh": "602",
231 "sshdlh": "102",
232 "bcgdmj": 3.219,
233 "psnl": "充分满足",
234 "ggnl": "满足",
235 "dxbw": "平原中阶",
236 "zays": "痦薄",
237 "zdgx": "松散型",
238 "nltwh": "高",
239 "swdyx": "丰富",
240 "qjcd": "清洁",
241 "yxtch": "120",
242 "pd": 2
243 }
244 },
245 {
246 "type": "Feature",
247 "geometry": {
248 "bbox": [
249 126.04532640224102,
250 30.921617099431955,
251 126.05379331158817,
252 30.93749197624271
253 ],
254 "type": "Polygon",
255 "coordinates": [
256 [
257 [
258 126.04871486705144,
259 30.93749197624271
260 ],
261 [
262 126.04846190345619,
263 30.931176956135005
264 ],
265 [
266 126.04827119179015,
267 30.931188875614115
268 ],
269 [
270 126.04844297749084,
271 30.93070448557421
272 ],
273 [
274 126.04846190345619,
275 30.931176956135005
276 ],
277 [
278 126.04853196704721,
279 30.931172577160513
280 ],
281 [
282 126.04897202529332,
283 30.93104218953198
284 ],
285 [
286 126.04949357580745,
287 30.930276162214454
288 ],
289 [
290 126.04908611446831,
291 30.93026801298777
292 ],
293 [
294 126.04968915725023,
295 30.929982790050413
296 ],
297 [
298 126.04909426369511,
299 30.929013032063267
300 ],
301 [
302 126.04991606228327,
303 30.928882166940983
304 ],
305 [
306 126.05103021438244,
307 30.92665386274274
308 ],
309 [
310 126.05379331158817,
311 30.925284251483845
312 ],
313 [
314 126.05208706723067,
315 30.922100959772024
316 ],
317 [
318 126.05169233905838,
319 30.921617099431955
320 ],
321 [
322 126.05021449588128,
323 30.92249568794426
324 ],
325 [
326 126.04765791472528,
327 30.927357668644618
328 ],
329 [
330 126.04675639656466,
331 30.928943097133928
332 ],
333 [
334 126.04812421722215,
335 30.931709825281875
336 ],
337 [
338 126.04532640224102,
339 30.932735690774848
340 ],
341 [
342 126.04871486705144,
343 30.93749197624271
344 ]
345 ]
346 ]
347 },
348 "properties": {
349 "Id": 0,
350 "dkh": "FG52K9756-003",
351 "wz": "武德路",
352 "tfbh": "I51H134003",
353 "tbbh": "212",
354 "ssqdlh": "605",
355 "sshdlh": "103",
356 "bcgdmj": 1.017,
357 "psnl": "满足",
358 "ggnl": "基本满足",
359 "dxbw": "丘陵上部",
360 "zays": "酸化",
361 "zdgx": "紧实型",
362 "nltwh": "中",
363 "swdyx": "一般",
364 "qjcd": "清洁",
365 "yxtch": "120",
366 "pd": 3
367 }
368 },
369 {
370 "type": "Feature",
371 "geometry": {
372 "bbox": [
373 126.02845013770947,
374 30.93611055509564,
375 126.03612469963673,
376 30.94242506807376
377 ],
378 "type": "Polygon",
379 "coordinates": [
380 [
381 [
382 126.03068450384012,
383 30.94242506807376
384 ],
385 [
386 126.03612469963673,
387 30.940919299594437
388 ],
389 [
390 126.03345317491528,
391 30.93611055509564
392 ],
393 [
394 126.02845013770947,
395 30.938587787110183
396 ],
397 [
398 126.03068450384012,
399 30.94242506807376
400 ]
401 ]
402 ]
403 },
404 "properties": {
405 "Id": 0,
406 "dkh": "FG52K9756-004",
407 "wz": "武德路",
408 "tfbh": "I51H134004",
409 "tbbh": "392",
410 "ssqdlh": "606",
411 "sshdlh": "109",
412 "bcgdmj": 2.2905,
413 "psnl": "满足",
414 "ggnl": "基本满足",
415 "dxbw": "山地坡上",
416 "zays": "渍潜",
417 "zdgx": "夹层型",
418 "nltwh": "中",
419 "swdyx": "一般",
420 "qjcd": "尚清洁",
421 "yxtch": "120",
422 "pd": 8
423 }
424 },
425 {
426 "type": "Feature",
427 "geometry": {
428 "bbox": [
429 126.01426677009727,
430 30.93212755460195,
431 126.03068450384012,
432 30.945388031855657
433 ],
434 "type": "Polygon",
435 "coordinates": [
436 [
437 [
438 126.01426677009727,
439 30.935187664737384
440 ],
441 [
442 126.01902694141916,
443 30.945388031855657
444 ],
445 [
446 126.03068450384012,
447 30.94242506807376
448 ],
449 [
450 126.02845013770947,
451 30.938587787110183
452 ],
453 [
454 126.02189275884767,
455 30.940919299594274
456 ],
457 [
458 126.02111558801971,
459 30.938976372524166
460 ],
461 [
462 126.02412712497835,
463 30.937664896751752
464 ],
465 [
466 126.02130988072656,
467 30.934653359793117
468 ],
469 [
470 126.02228134426161,
471 30.934216201202336
472 ],
473 [
474 126.02053270989848,
475 30.933439030374192
476 ],
477 [
478 126.01999840495432,
479 30.93212755460195
480 ],
481 [
482 126.01426677009727,
483 30.935187664737384
484 ]
485 ]
486 ]
487 },
488 "properties": {
489 "Id": 0,
490 "dkh": "FG52K9756-005",
491 "wz": "佳富村",
492 "tfbh": "I51H134005",
493 "tbbh": "424",
494 "ssqdlh": "607",
495 "sshdlh": "120",
496 "bcgdmj": 2.5785,
497 "psnl": "基本满足",
498 "ggnl": "基本满足",
499 "dxbw": "宽谷盆地",
500 "zays": "障碍层次",
501 "zdgx": "上紧下松型",
502 "nltwh": "低",
503 "swdyx": "不丰富",
504 "qjcd": "尚清洁",
505 "yxtch": "120",
506 "pd": 11
507 }
508 },
509 {
510 "type": "Feature",
511 "geometry": {
512 "bbox": [
513 126.03046614992456,
514 30.929397064375333,
515 126.03778772086163,
516 30.93256762292026
517 ],
518 "type": "Polygon",
519 "coordinates": [
520 [
521 [
522 126.03138293793768,
523 30.93256762292026
524 ],
525 [
526 126.03336931196566,
527 30.932007363578975
528 ],
529 [
530 126.03373606362345,
531 30.93170210542672
532 ],
533 [
534 126.03441300785039,
535 30.9314531144467
536 ],
537 [
538 126.03600178344641,
539 30.930868737215974
540 ],
541 [
542 126.03692186551598,
543 30.93053031622486
544 ],
545 [
546 126.03778772086163,
547 30.93000825638399
548 ],
549 [
550 126.03758399019218,
551 30.929626261378587
552 ],
553 [
554 126.03704919718463,
555 30.929728126713428
556 ],
557 [
558 126.0369855313502,
559 30.92993185738288
560 ],
561 [
562 126.03673086801336,
563 30.929995523217087
564 ],
565 [
566 126.03524108749218,
567 30.930466650390482
568 ],
569 [
570 126.03459169598295,
571 30.929397064375333
572 ],
573 [
574 126.03046614992456,
575 30.930950510730725
576 ],
577 [
578 126.03138293793768,
579 30.93256762292026
580 ]
581 ]
582 ]
583 },
584 "properties": {
585 "Id": 0,
586 "dkh": "FG52K9756-006",
587 "wz": "佳富村",
588 "tfbh": "I51H134006",
589 "tbbh": "422",
590 "ssqdlh": "60008",
591 "sshdlh": "123",
592 "bcgdmj": 0.4245,
593 "psnl": "不满足",
594 "ggnl": "不满足",
595 "dxbw": "山间盆地",
596 "zays": "无",
597 "zdgx": "海绵型",
598 "nltwh": "低",
599 "swdyx": "不丰富",
600 "qjcd": "尚清洁",
601 "yxtch": "60",
602 "pd": 15
603 }
604 }
605 ],
606 "fileName": "test/test"
607 }
608 // eslint-disable-next-line no-unused-vars
609 this.map = new i2d.Map('map', this.mapOptions) 114 this.map = new i2d.Map('map', this.mapOptions)
610 const _self = this; 115 const _self = this;
611 const geoJsonLayer = new i2d.Layer.GeoJsonLayer({ 116 const geoJsonLayer = new i2d.Layer.GeoJsonLayer({
612 name: "安徽各市", 117 name: "dk",
613 data: geojson, 118 data: dkCoord,
614 // 渲染颜色 119 // 渲染颜色
615 symbol: { 120 symbol: {
616 type: "polygon", 121 type: "polygon",
...@@ -642,7 +147,7 @@ export default { ...@@ -642,7 +147,7 @@ export default {
642 ])); 147 ]));
643 } else { 148 } else {
644 //地块不含外包矩形 自己计算 149 //地块不含外包矩形 自己计算
645 const result = bbox(geojson); 150 const result = bbox(dkCoord);
646 this.map.fitBounds(L.latLngBounds([ 151 this.map.fitBounds(L.latLngBounds([
647 [result[1], result[0]], 152 [result[1], result[0]],
648 [result[3], result[2]] 153 [result[3], result[2]]
...@@ -652,44 +157,7 @@ export default { ...@@ -652,44 +157,7 @@ export default {
652 // 创建矢量数据图层 157 // 创建矢量数据图层
653 this.graphicLayer = new i2d.Layer.GraphicLayer() 158 this.graphicLayer = new i2d.Layer.GraphicLayer()
654 this.map.addLayer(this.graphicLayer) 159 this.map.addLayer(this.graphicLayer)
655 160 this.addMarker()
656 const graphic = new i2d.Graphic.Marker({
657 latlng: [40.20340350096175, 101.15070299421159],
658 style: {
659 image: "./mark1.png",
660 width: 32,
661 height: 44,
662 horizontalOrigin: i2d.HorizontalOrigin.CENTER,
663 verticalOrigin: i2d.VerticalOrigin.BOTTOM,
664 label: {
665 text: "照片1",
666 color: "#ff0000",
667 font_size: 20,
668 offsetY: 42
669 }
670 }
671 })
672 this.graphicLayer.addGraphic(graphic)
673
674
675 const graphic1 = new i2d.Graphic.Marker({
676 latlng: [40.30340350096175, 101.10070299421159],
677 style: {
678 image: "./mark1.png",
679 width: 32,
680 height: 44,
681 horizontalOrigin: i2d.HorizontalOrigin.CENTER,
682 verticalOrigin: i2d.VerticalOrigin.BOTTOM,
683 label: {
684 text: "照片2",
685 color: "#ff0000",
686 font_size: 20,
687 offsetY: 42
688 }
689 }
690 })
691 this.graphicLayer.addGraphic(graphic1)
692
693 } 161 }
694 } 162 }
695 </script> 163 </script>
......