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 @@
## Project setup
```
pnpm install
pnpm i i2d --registry=http://core.pashanhoo.com:8932/repository/npm-public/
pnpm install @turf/bbox
```
### Compiles and hot-reloads for development
```
pnpm run serve
```
### Compiles and minifies for production
```
pnpm run build
```
### Lints and fixes files
```
pnpm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
......
......@@ -8,8 +8,12 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"@turf/bbox": "^7.0.0",
"axios": "^1.7.2",
"core-js": "^3.8.3",
"vue": "^2.6.14"
"i2d": "^0.0.5",
"vue": "^2.6.14",
"vue-router": "3.5.1"
},
"devDependencies": {
"@babel/core": "^7.12.16",
......
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/home-map">首页地图</router-link>
<br>
<router-link to="/dk-map">加载地块</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
name: 'App'
}
</script>
......
<template>
<div id="map">
</div>
</template>
<script>
import * as i2d from "i2d";
import 'leaflet/dist/leaflet.css'
import 'i2d/dist/i2d.css'
import L from "leaflet";
import {bbox} from "@turf/bbox";
export default {
name: 'DkMap',
data() {
return {
mapOptions: {
copyright: false,
basemaps: [
{
type: 'group',
name: '天地图电子',
layers: [
{
type: 'tdt',
layer: 'vec_d',
key: i2d.Token.tiandituArr,
crs: i2d.CRS.EPSG4490,
},
{
type: 'tdt',
layer: 'vec_z',
key: i2d.Token.tiandituArr,
crs: i2d.CRS.EPSG4490,
}
],
icon: './dz.png',
show: true
}
],
zoom: 12,
minZoom: 1,
maxZoom: 16,
// 纬度在前
center: [34.247161, 108.944213],
crs: i2d.CRS.EPSG4490
}
}
},
mounted() {
// 从数据库读取的地块信息
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]]]}
const geojson = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": dkCoord
}
]
}
// eslint-disable-next-line no-unused-vars
const map = new i2d.Map('map', this.mapOptions)
const geoJsonLayer = new i2d.Layer.GeoJsonLayer({
name: "安徽各市",
data: geojson,
// 渲染颜色
symbol: {
type: "polygon",
styleOptions: {
fillOpacity: 0.6,
fillColor: "#ff0044",
outline: true
}
}
})
map.addLayer(geoJsonLayer)
//地块自带外包矩形
if (dkCoord.bbox) {
//定位到矩形
map.fitBounds(L.latLngBounds([
[dkCoord.bbox[1], dkCoord.bbox[0]],
[dkCoord.bbox[3], dkCoord.bbox[2]]
]));
} else {
const result = bbox(geojson);
map.fitBounds(L.latLngBounds([
[result[1], result[0]],
[result[3], result[2]]
]));
}
}
}
</script>
<style scoped>
#map {
position: absolute;
margin: 0;
height: 60%;
width: 60%;
}
</style>
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
<template>
<div id="map">
</div>
</template>
<script>
import * as i2d from "i2d";
import 'leaflet/dist/leaflet.css'
import 'i2d/dist/i2d.css'
export default {
name: 'HomeMap',
data() {
return {
mapOptions: {
copyright: false,
basemaps: [
{
type: 'group',
name: '天地图电子',
layers: [
{
type: 'tdt',
layer: 'vec_d',
key: i2d.Token.tiandituArr,
crs: i2d.CRS.EPSG4490,
},
{
type: 'tdt',
layer: 'vec_z',
key: i2d.Token.tiandituArr,
crs: i2d.CRS.EPSG4490,
}
],
icon: './dz.png',
show: true
},
{
type: 'group',
name: '天地图地形',
layers: [
{
type: 'tdt',
layer: 'ter_d',
key: i2d.Token.tiandituArr,
errorTileUrl: 'img/tile/errortile.png',
crs: i2d.CRS.EPSG4490
},
{
type: 'tdt',
layer: 'ter_z',
key: i2d.Token.tiandituArr,
crs: i2d.CRS.EPSG4490
}
],
icon: './dx.png'
},
{
type: 'group',
name: '天地图影像',
layers: [
{
type: 'tdt', layer: 'img_d', key: i2d.Token.tiandituArr,
crs: i2d.CRS.EPSG4490
},
{
type: 'tdt', layer: 'img_z', key: i2d.Token.tiandituArr,
crs: i2d.CRS.EPSG4490
}
],
icon: './yx.png',
//必须给最后一个底图配置zindex要不然最后底图切换专题图层不展示
// 要比专题图层小
zIndex: 1
}
],
zoom: 12,
minZoom: 4,
maxZoom: 20,
// 纬度在前
center: [34.247161, 108.944213],
crs: i2d.CRS.EPSG4490,
control: {
scale: true,
locationBar: {
crs: 'CGCS2000_GK_Zone_3',
template: '<div>经度:{lng}</div> <div>纬度:{lat}</div> <div>层级:{level}</div>'
},
zoom: {position: 'bottomleft'},
toolBar: {
position: 'bottomleft',
item: ['home', 'fullscreen', 'clear']
},
mapSwitch: {
position: 'bottomright'
}
}
}
}
},
mounted() {
const map = new i2d.Map('map', this.mapOptions)
map.on('baselayerchange', (map) => {
map.sourceTarget.getLayers().forEach(lyr => {
console.log(lyr.name, lyr.zIndex)
})
map.sourceTarget.getBasemaps().forEach(lyr => {
console.log(lyr.name, lyr.zIndex)
})
})
}
}
</script>
<style scoped>
#map {
position: absolute;
margin: 0;
height: 60%;
width: 60%;
}
</style>
import Vue from 'vue'
import App from './App.vue'
import router from "./router";
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App),
}).$mount('#app')
......
import Vue from 'vue' //引入Vue
import Router from 'vue-router' //引入vue-router
import HomeMap from '@/components/HomeMap' //引入根目录下的Hello.vue组件
import DkMap from '@/components/DkMap' //引入根目录下的Hello.vue组件
Vue.use(Router) //Vue全局使用Router
export default new Router({
routes: [
{
path: '/home-map',
name: 'HomeMap',
component: HomeMap
},
{
path: '/dk-map',
name: 'DkMap',
component: DkMap
}
]
})
\ No newline at end of file