Skip to content

GIS / i2d-demo-vue2

Go to a project
Toggle navigation
Toggle navigation pinning
425eac3d by 苗菁
Options

行政区导航

1 parent 90daaf6b
Inline Side-by-side
Showing 7 changed files with 834 additions and 24 deletions
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
11 "@turf/bbox": "^7.0.0", 11 "@turf/bbox": "^7.0.0",
12 "axios": "^1.7.2", 12 "axios": "^1.7.2",
13 "core-js": "^3.8.3", 13 "core-js": "^3.8.3",
14 "i2d": "^0.0.5", 14 "i2d": "^0.1.0",
15 "vue": "^2.6.14", 15 "vue": "^2.6.14",
16 "vue-router": "3.5.1" 16 "vue-router": "3.5.1"
17 }, 17 },
......
This diff could not be displayed because it is too large.
1 <template> 1 <template>
2 <div id="app"> 2 <div id="app">
3 <p> 3 <table>
4 <!-- 使用 router-link 组件来导航. --> 4 <tbody>
5 <!-- 通过传入 `to` 属性指定链接. --> 5 <tr>
6 <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> 6 <td>
7 <router-link to="/home-map">首页地图</router-link> 7 <router-link to="/home-map">首页地图</router-link>
8 <br> 8 </td>
9 <router-link to="/dk-map">加载地块</router-link> 9 <td>
10 </p> 10 <router-link to="/dk-map">加载地块</router-link>
11 <!-- 路由出口 --> 11 </td>
12 <!-- 路由匹配到的组件将渲染在这里 --> 12 <td>
13 <router-link to="/xzq-map">行政区定位</router-link>
14 </td>
15 </tr>
16 </tbody>
17 </table>
13 <router-view></router-view> 18 <router-view></router-view>
14 </div> 19 </div>
15 </template> 20 </template>
......
1 <template> 1 <template>
2 <div id="map"> 2 <div>
3 <button @click="removeGraphicLayer">移出graphic图层</button>
4 <div id="map">
5 </div>
3 </div> 6 </div>
4 </template> 7 </template>
5 8
...@@ -45,9 +48,26 @@ export default { ...@@ -45,9 +48,26 @@ export default {
45 // 纬度在前 48 // 纬度在前
46 center: [34.247161, 108.944213], 49 center: [34.247161, 108.944213],
47 crs: i2d.CRS.EPSG4490 50 crs: i2d.CRS.EPSG4490
48 } 51 },
52 colors: ["#FFEDA0", "#FED976", "#FEB24C", "#FD8D3C", "#FC4E2A", "#E31A1C", "#BD0026", "#800026"],
53 map: null,
54 graphicLayer: null
49 } 55 }
50 }, 56 },
57 methods: {
58 getArrayRandomOne(arr) {
59 const n = Math.floor(Math.random() * arr.length)
60 return arr[n]
61 },
62 removeGraphicLayer() {
63 if (this.graphicLayer) {
64 // 移出图层
65 this.map.removeLayer(this.graphicLayer)
66 // 销魂图层
67 this.graphicLayer.destroy()
68 }
69 },
70 },
51 mounted() { 71 mounted() {
52 // 从数据库读取的地块信息 72 // 从数据库读取的地块信息
53 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]]]} 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]]]}
...@@ -56,12 +76,538 @@ export default { ...@@ -56,12 +76,538 @@ export default {
56 "features": [ 76 "features": [
57 { 77 {
58 "type": "Feature", 78 "type": "Feature",
59 "geometry": dkCoord 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 }
60 } 604 }
61 ] 605 ],
606 "fileName": "test/test"
62 } 607 }
63 // eslint-disable-next-line no-unused-vars 608 // eslint-disable-next-line no-unused-vars
64 const map = new i2d.Map('map', this.mapOptions) 609 this.map = new i2d.Map('map', this.mapOptions)
610 const _self = this;
65 const geoJsonLayer = new i2d.Layer.GeoJsonLayer({ 611 const geoJsonLayer = new i2d.Layer.GeoJsonLayer({
66 name: "安徽各市", 612 name: "安徽各市",
67 data: geojson, 613 data: geojson,
...@@ -69,30 +615,81 @@ export default { ...@@ -69,30 +615,81 @@ export default {
69 symbol: { 615 symbol: {
70 type: "polygon", 616 type: "polygon",
71 styleOptions: { 617 styleOptions: {
72 fillOpacity: 0.6, 618 fill: true,
73 fillColor: "#ff0044", 619 // image: "img/fill/redLine.png",
74 outline: true 620 // imageOpacity: 1,
621 fillOpacity: 0.5,
622 outline: true,
623 outlineWidth: 2,
624 outlineOpacity: 1,
625 outlineColor: "white"
626 },
627 callback: function () {
628 return {
629 fillColor: _self.getArrayRandomOne(_self.colors)
630 }
75 } 631 }
76 } 632 }
77 }) 633 })
78 map.addLayer(geoJsonLayer) 634 this.map.addLayer(geoJsonLayer)
79 635
80 //地块自带外包矩形 636 //地块自带外包矩形
81 if (dkCoord.bbox) { 637 if (dkCoord.bbox) {
82 //定位到矩形 638 //定位到矩形
83 map.fitBounds(L.latLngBounds([ 639 this.map.fitBounds(L.latLngBounds([
84 [dkCoord.bbox[1], dkCoord.bbox[0]], 640 [dkCoord.bbox[1], dkCoord.bbox[0]],
85 [dkCoord.bbox[3], dkCoord.bbox[2]] 641 [dkCoord.bbox[3], dkCoord.bbox[2]]
86 ])); 642 ]));
87 } else { 643 } else {
88 //地块不含外包矩形 自己计算 644 //地块不含外包矩形 自己计算
89 const result = bbox(geojson); 645 const result = bbox(geojson);
90 map.fitBounds(L.latLngBounds([ 646 this.map.fitBounds(L.latLngBounds([
91 [result[1], result[0]], 647 [result[1], result[0]],
92 [result[3], result[2]] 648 [result[3], result[2]]
93 ])); 649 ]));
94 } 650 }
95 651
652 // 创建矢量数据图层
653 this.graphicLayer = new i2d.Layer.GraphicLayer()
654 this.map.addLayer(this.graphicLayer)
655
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
96 } 693 }
97 } 694 }
98 </script> 695 </script>
......
1 <template>
2 <div>
3 <table>
4 <tbody>
5 <tr>
6 <td v-for="feature in features" :key="feature.properties.adcode">
7 <button v-if="feature.properties.adcode!=='100000_JD'" @click="districtNavigate(feature.properties.adcode,feature)">{{ feature.properties.name }}</button>
8 </td>
9 </tr>
10 <tr></tr>
11 <tr>
12 <td v-for="feature in secondFeatures" :key="feature.properties.adcode">
13 <button style="background-color: aquamarine" v-if="feature.properties.adcode!=='100000_JD'" @click="secondDistrictNavigate(feature.properties.adcode,feature)">{{ feature.properties.name }}</button>
14 </td>
15 </tr>
16 <tr></tr>
17 <tr>
18 <td v-for="feature in thirdFeatures" :key="feature.properties.adcode">
19 <button style="background-color: red" v-if="feature.properties.adcode!=='100000_JD'" @click="thirdDistrictNavigate(feature.properties.adcode,feature)">{{ feature.properties.name }}</button>
20 </td>
21 </tr>
22 </tbody>
23 </table>
24 <div id="map">
25 </div>
26 </div>
27 </template>
28
29 <script>
30 import * as i2d from "i2d";
31 import 'leaflet/dist/leaflet.css'
32 import 'i2d/dist/i2d.css'
33 import axios from "axios";
34
35 export default {
36 name: 'XzqMap',
37 data() {
38 return {
39 mapOptions: {
40 copyright: false,
41 basemaps: [
42 {
43 type: 'group',
44 name: '天地图电子',
45 layers: [
46 {
47 type: 'tdt',
48 layer: 'vec_d',
49 key: i2d.Token.tiandituArr,
50 crs: i2d.CRS.EPSG4490,
51 },
52 {
53 type: 'tdt',
54 layer: 'vec_z',
55 key: i2d.Token.tiandituArr,
56 crs: i2d.CRS.EPSG4490,
57 }
58 ],
59 icon: './dz.png',
60 show: true
61 },
62 {
63 type: 'group',
64 name: '天地图地形',
65 layers: [
66 {
67 type: 'tdt',
68 layer: 'ter_d',
69 key: i2d.Token.tiandituArr,
70 errorTileUrl: 'img/tile/errortile.png',
71 crs: i2d.CRS.EPSG4490
72 },
73 {
74 type: 'tdt',
75 layer: 'ter_z',
76 key: i2d.Token.tiandituArr,
77 crs: i2d.CRS.EPSG4490
78 }
79 ],
80 icon: './dx.png'
81 },
82 {
83 type: 'group',
84 name: '天地图影像',
85 layers: [
86 {
87 type: 'tdt', layer: 'img_d', key: i2d.Token.tiandituArr,
88 crs: i2d.CRS.EPSG4490
89 },
90 {
91 type: 'tdt', layer: 'img_z', key: i2d.Token.tiandituArr,
92 crs: i2d.CRS.EPSG4490
93 }
94 ],
95 icon: './yx.png',
96 //必须给最后一个底图配置zindex要不然最后底图切换专题图层不展示
97 // 要比专题图层小
98 zIndex: 1
99 }
100 ],
101 zoom: 12,
102 minZoom: 4,
103 maxZoom: 20,
104 // 纬度在前
105 center: [34.247161, 108.944213],
106 crs: i2d.CRS.EPSG4490,
107 control: {
108 scale: true,
109 locationBar: {
110 crs: 'CGCS2000_GK_Zone_3',
111 template: '<div>经度:{lng}</div> <div>纬度:{lat}</div> <div>层级:{level}</div>'
112 },
113 zoom: {position: 'bottomleft'},
114 toolBar: {
115 position: 'bottomleft',
116 item: ['home', 'fullscreen', 'clear']
117 },
118 mapSwitch: {
119 position: 'bottomright'
120 }
121 }
122 },
123 features: [],
124 secondFeatures: [],
125 thirdFeatures: [],
126 map: null,
127 geoJsonLayer: null
128 }
129 },
130 mounted() {
131 this.map = new i2d.Map('map', this.mapOptions)
132 this.geoJsonLayer = new i2d.Layer.GeoJsonLayer({
133 crs: 'EPSG:4326',
134 name: "行政区"
135 })
136 this.map.addLayer(this.geoJsonLayer)
137 axios.get("http://192.168.2.236/areas/100000.json").then((response) => {
138 if (response.status === 200) {
139 this.features = response.data.features;
140 } else {
141 alert("服务异常")
142 }
143 })
144 },
145 methods: {
146 districtNavigate(districtCode, feature) {
147 if (districtCode) {
148 this.secondFeatures = []
149 this.thirdFeatures = []
150 this.geoJsonLayer.clear()
151 this.geoJsonLayer.load({
152 data: feature,
153 flyTo: true
154 })
155 axios.get("http://192.168.2.236/areas/" + districtCode + ".json").then((response) => {
156 if (response.status === 200) {
157 this.secondFeatures = response.data.features;
158 } else {
159 alert("服务异常")
160 }
161 })
162 }
163 },
164 secondDistrictNavigate(districtCode, feature) {
165 if (districtCode) {
166 if (feature.properties.level !== "district") {
167 axios.get("http://192.168.2.236/areas/" + districtCode + ".json").then((response) => {
168 if (response.status === 200) {
169 this.thirdFeatures = response.data.features;
170 } else {
171 alert("服务异常")
172 }
173 });
174 }
175 this.geoJsonLayer.clear()
176 this.geoJsonLayer.load({
177 data: feature,
178 flyTo: true
179 })
180 }
181 },
182 thirdDistrictNavigate(districtCode, feature) {
183 if (districtCode) {
184 this.geoJsonLayer.clear()
185 this.geoJsonLayer.load({
186 data: feature,
187 flyTo: true
188 })
189 }
190 }
191 }
192 }
193 </script>
194
195 <style scoped>
196 #map {
197 position: absolute;
198 margin: 0;
199 height: 80%;
200 width: 80%;
201 }
202 </style>
1 import Vue from 'vue' //引入Vue 1 import Vue from 'vue' //引入Vue
2 import Router from 'vue-router' //引入vue-router 2 import Router from 'vue-router' //引入vue-router
3 import HomeMap from '@/components/HomeMap' //引入根目录下的Hello.vue组件 3 import HomeMap from '@/components/HomeMap'
4 import DkMap from '@/components/DkMap' //引入根目录下的Hello.vue组件 4 import DkMap from '@/components/DkMap'
5 import XzqMap from '@/components/XzqMap.vue' //引入根目录下的Hello.vue组件
5 6
6 Vue.use(Router) //Vue全局使用Router 7 Vue.use(Router) //Vue全局使用Router
7 8
...@@ -16,6 +17,11 @@ export default new Router({ ...@@ -16,6 +17,11 @@ export default new Router({
16 path: '/dk-map', 17 path: '/dk-map',
17 name: 'DkMap', 18 name: 'DkMap',
18 component: DkMap 19 component: DkMap
20 },
21 {
22 path: '/xzq-map',
23 name: 'DkMap',
24 component: XzqMap
19 } 25 }
20 ] 26 ]
21 }) 27 })
...\ No newline at end of file ...\ No newline at end of file
......