Skip to content

GIS / i2d-demo-vue2

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

行政区导航

1 parent 90daaf6b
Expand all
Inline Side-by-side
Showing 7 changed files with 226 additions and 13 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>
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
......