Skip to content

GIS / i2d-demo-vue2

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

init

1 parent 19e3c7e2
Expand all
Inline Side-by-side
Showing 17 changed files with 270 additions and 84 deletions
...@@ -2,23 +2,7 @@ ...@@ -2,23 +2,7 @@
2 2
3 ## Project setup 3 ## Project setup
4 ``` 4 ```
5 pnpm install 5 pnpm i i2d --registry=http://core.pashanhoo.com:8932/repository/npm-public/
6 pnpm install @turf/bbox
6 ``` 7 ```
7 8
8 ### Compiles and hot-reloads for development
9 ```
10 pnpm run serve
11 ```
12
13 ### Compiles and minifies for production
14 ```
15 pnpm run build
16 ```
17
18 ### Lints and fixes files
19 ```
20 pnpm run lint
21 ```
22
23 ### Customize configuration
24 See [Configuration Reference](https://cli.vuejs.org/config/).
......
...@@ -8,8 +8,12 @@ ...@@ -8,8 +8,12 @@
8 "lint": "vue-cli-service lint" 8 "lint": "vue-cli-service lint"
9 }, 9 },
10 "dependencies": { 10 "dependencies": {
11 "@turf/bbox": "^7.0.0",
12 "axios": "^1.7.2",
11 "core-js": "^3.8.3", 13 "core-js": "^3.8.3",
12 "vue": "^2.6.14" 14 "i2d": "^0.0.5",
15 "vue": "^2.6.14",
16 "vue-router": "3.5.1"
13 }, 17 },
14 "devDependencies": { 18 "devDependencies": {
15 "@babel/core": "^7.12.16", 19 "@babel/core": "^7.12.16",
......
1 <template> 1 <template>
2 <div id="app"> 2 <div id="app">
3 <img alt="Vue logo" src="./assets/logo.png"> 3 <p>
4 <HelloWorld msg="Welcome to Your Vue.js App"/> 4 <!-- 使用 router-link 组件来导航. -->
5 <!-- 通过传入 `to` 属性指定链接. -->
6 <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
7 <router-link to="/home-map">首页地图</router-link>
8 <br>
9 <router-link to="/dk-map">加载地块</router-link>
10 </p>
11 <!-- 路由出口 -->
12 <!-- 路由匹配到的组件将渲染在这里 -->
13 <router-view></router-view>
5 </div> 14 </div>
6 </template> 15 </template>
7 16
8 <script> 17 <script>
9 import HelloWorld from './components/HelloWorld.vue'
10 18
11 export default { 19 export default {
12 name: 'App', 20 name: 'App'
13 components: {
14 HelloWorld
15 }
16 } 21 }
17 </script> 22 </script>
18 23
......
1 <template>
2 <div id="map">
3 </div>
4 </template>
5
6 <script>
7 import * as i2d from "i2d";
8 import 'leaflet/dist/leaflet.css'
9 import 'i2d/dist/i2d.css'
10 import L from "leaflet";
11 import {bbox} from "@turf/bbox";
12
13
14 export default {
15 name: 'DkMap',
16 data() {
17 return {
18 mapOptions: {
19 copyright: false,
20 basemaps: [
21 {
22 type: 'group',
23 name: '天地图电子',
24 layers: [
25 {
26 type: 'tdt',
27 layer: 'vec_d',
28 key: i2d.Token.tiandituArr,
29 crs: i2d.CRS.EPSG4490,
30 },
31 {
32 type: 'tdt',
33 layer: 'vec_z',
34 key: i2d.Token.tiandituArr,
35 crs: i2d.CRS.EPSG4490,
36 }
37 ],
38 icon: './dz.png',
39 show: true
40 }
41 ],
42 zoom: 12,
43 minZoom: 1,
44 maxZoom: 16,
45 // 纬度在前
46 center: [34.247161, 108.944213],
47 crs: i2d.CRS.EPSG4490
48 }
49 }
50 },
51 mounted() {
52 // 从数据库读取的地块信息
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]]]}
54 const geojson = {
55 "type": "FeatureCollection",
56 "features": [
57 {
58 "type": "Feature",
59 "geometry": dkCoord
60 }
61 ]
62 }
63 // eslint-disable-next-line no-unused-vars
64 const map = new i2d.Map('map', this.mapOptions)
65 const geoJsonLayer = new i2d.Layer.GeoJsonLayer({
66 name: "安徽各市",
67 data: geojson,
68 // 渲染颜色
69 symbol: {
70 type: "polygon",
71 styleOptions: {
72 fillOpacity: 0.6,
73 fillColor: "#ff0044",
74 outline: true
75 }
76 }
77 })
78 map.addLayer(geoJsonLayer)
79
80 //地块自带外包矩形
81 if (dkCoord.bbox) {
82 //定位到矩形
83 map.fitBounds(L.latLngBounds([
84 [dkCoord.bbox[1], dkCoord.bbox[0]],
85 [dkCoord.bbox[3], dkCoord.bbox[2]]
86 ]));
87 } else {
88 const result = bbox(geojson);
89 map.fitBounds(L.latLngBounds([
90 [result[1], result[0]],
91 [result[3], result[2]]
92 ]));
93 }
94
95 }
96 }
97 </script>
98
99 <style scoped>
100 #map {
101 position: absolute;
102 margin: 0;
103 height: 60%;
104 width: 60%;
105 }
106 </style>
1 <template>
2 <div class="hello">
3 <h1>{{ msg }}</h1>
4 <p>
5 For a guide and recipes on how to configure / customize this project,<br>
6 check out the
7 <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
8 </p>
9 <h3>Installed CLI Plugins</h3>
10 <ul>
11 <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
12 <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
13 </ul>
14 <h3>Essential Links</h3>
15 <ul>
16 <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
17 <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
18 <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
19 <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
20 <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
21 </ul>
22 <h3>Ecosystem</h3>
23 <ul>
24 <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
25 <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
26 <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
27 <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
28 <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
29 </ul>
30 </div>
31 </template>
32
33 <script>
34 export default {
35 name: 'HelloWorld',
36 props: {
37 msg: String
38 }
39 }
40 </script>
41
42 <!-- Add "scoped" attribute to limit CSS to this component only -->
43 <style scoped>
44 h3 {
45 margin: 40px 0 0;
46 }
47 ul {
48 list-style-type: none;
49 padding: 0;
50 }
51 li {
52 display: inline-block;
53 margin: 0 10px;
54 }
55 a {
56 color: #42b983;
57 }
58 </style>
1 <template>
2 <div id="map">
3 </div>
4 </template>
5
6 <script>
7 import * as i2d from "i2d";
8 import 'leaflet/dist/leaflet.css'
9 import 'i2d/dist/i2d.css'
10
11 export default {
12 name: 'HomeMap',
13 data() {
14 return {
15 mapOptions: {
16 copyright: false,
17 basemaps: [
18 {
19 type: 'group',
20 name: '天地图电子',
21 layers: [
22 {
23 type: 'tdt',
24 layer: 'vec_d',
25 key: i2d.Token.tiandituArr,
26 crs: i2d.CRS.EPSG4490,
27 },
28 {
29 type: 'tdt',
30 layer: 'vec_z',
31 key: i2d.Token.tiandituArr,
32 crs: i2d.CRS.EPSG4490,
33 }
34 ],
35 icon: './dz.png',
36 show: true
37 },
38 {
39 type: 'group',
40 name: '天地图地形',
41 layers: [
42 {
43 type: 'tdt',
44 layer: 'ter_d',
45 key: i2d.Token.tiandituArr,
46 errorTileUrl: 'img/tile/errortile.png',
47 crs: i2d.CRS.EPSG4490
48 },
49 {
50 type: 'tdt',
51 layer: 'ter_z',
52 key: i2d.Token.tiandituArr,
53 crs: i2d.CRS.EPSG4490
54 }
55 ],
56 icon: './dx.png'
57 },
58 {
59 type: 'group',
60 name: '天地图影像',
61 layers: [
62 {
63 type: 'tdt', layer: 'img_d', key: i2d.Token.tiandituArr,
64 crs: i2d.CRS.EPSG4490
65 },
66 {
67 type: 'tdt', layer: 'img_z', key: i2d.Token.tiandituArr,
68 crs: i2d.CRS.EPSG4490
69 }
70 ],
71 icon: './yx.png',
72 //必须给最后一个底图配置zindex要不然最后底图切换专题图层不展示
73 // 要比专题图层小
74 zIndex: 1
75 }
76 ],
77 zoom: 12,
78 minZoom: 4,
79 maxZoom: 20,
80 // 纬度在前
81 center: [34.247161, 108.944213],
82 crs: i2d.CRS.EPSG4490,
83 control: {
84 scale: true,
85 locationBar: {
86 crs: 'CGCS2000_GK_Zone_3',
87 template: '<div>经度:{lng}</div> <div>纬度:{lat}</div> <div>层级:{level}</div>'
88 },
89 zoom: {position: 'bottomleft'},
90 toolBar: {
91 position: 'bottomleft',
92 item: ['home', 'fullscreen', 'clear']
93 },
94 mapSwitch: {
95 position: 'bottomright'
96 }
97 }
98 }
99 }
100 },
101 mounted() {
102 const map = new i2d.Map('map', this.mapOptions)
103 map.on('baselayerchange', (map) => {
104 map.sourceTarget.getLayers().forEach(lyr => {
105 console.log(lyr.name, lyr.zIndex)
106 })
107 map.sourceTarget.getBasemaps().forEach(lyr => {
108 console.log(lyr.name, lyr.zIndex)
109 })
110 })
111 }
112 }
113 </script>
114
115 <style scoped>
116 #map {
117 position: absolute;
118 margin: 0;
119 height: 60%;
120 width: 60%;
121 }
122 </style>
1 import Vue from 'vue' 1 import Vue from 'vue'
2 import App from './App.vue' 2 import App from './App.vue'
3 import router from "./router";
3 4
4 Vue.config.productionTip = false 5 Vue.config.productionTip = false
5 6
6 new Vue({ 7 new Vue({
8 router,
7 render: h => h(App), 9 render: h => h(App),
8 }).$mount('#app') 10 }).$mount('#app')
......
1 import Vue from 'vue' //引入Vue
2 import Router from 'vue-router' //引入vue-router
3 import HomeMap from '@/components/HomeMap' //引入根目录下的Hello.vue组件
4 import DkMap from '@/components/DkMap' //引入根目录下的Hello.vue组件
5
6 Vue.use(Router) //Vue全局使用Router
7
8 export default new Router({
9 routes: [
10 {
11 path: '/home-map',
12 name: 'HomeMap',
13 component: HomeMap
14 },
15 {
16 path: '/dk-map',
17 name: 'DkMap',
18 component: DkMap
19 }
20 ]
21 })
...\ No newline at end of file ...\ No newline at end of file