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 224 additions and 11 deletions
......@@ -11,7 +11,7 @@
"@turf/bbox": "^7.0.0",
"axios": "^1.7.2",
"core-js": "^3.8.3",
"i2d": "^0.0.5",
"i2d": "^0.1.0",
"vue": "^2.6.14",
"vue-router": "3.5.1"
},
......
This diff could not be displayed because it is too large.
<template>
<div id="app">
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<table>
<tbody>
<tr>
<td>
<router-link to="/home-map">首页地图</router-link>
<br>
</td>
<td>
<router-link to="/dk-map">加载地块</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
</td>
<td>
<router-link to="/xzq-map">行政区定位</router-link>
</td>
</tr>
</tbody>
</table>
<router-view></router-view>
</div>
</template>
......
<template>
<div>
<table>
<tbody>
<tr>
<td v-for="feature in features" :key="feature.properties.adcode">
<button v-if="feature.properties.adcode!=='100000_JD'" @click="districtNavigate(feature.properties.adcode,feature)">{{ feature.properties.name }}</button>
</td>
</tr>
<tr></tr>
<tr>
<td v-for="feature in secondFeatures" :key="feature.properties.adcode">
<button style="background-color: aquamarine" v-if="feature.properties.adcode!=='100000_JD'" @click="secondDistrictNavigate(feature.properties.adcode,feature)">{{ feature.properties.name }}</button>
</td>
</tr>
<tr></tr>
<tr>
<td v-for="feature in thirdFeatures" :key="feature.properties.adcode">
<button style="background-color: red" v-if="feature.properties.adcode!=='100000_JD'" @click="thirdDistrictNavigate(feature.properties.adcode,feature)">{{ feature.properties.name }}</button>
</td>
</tr>
</tbody>
</table>
<div id="map">
</div>
</div>
</template>
<script>
import * as i2d from "i2d";
import 'leaflet/dist/leaflet.css'
import 'i2d/dist/i2d.css'
import axios from "axios";
export default {
name: 'XzqMap',
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'
}
}
},
features: [],
secondFeatures: [],
thirdFeatures: [],
map: null,
geoJsonLayer: null
}
},
mounted() {
this.map = new i2d.Map('map', this.mapOptions)
this.geoJsonLayer = new i2d.Layer.GeoJsonLayer({
crs: 'EPSG:4326',
name: "行政区"
})
this.map.addLayer(this.geoJsonLayer)
axios.get("http://192.168.2.236/areas/100000.json").then((response) => {
if (response.status === 200) {
this.features = response.data.features;
} else {
alert("服务异常")
}
})
},
methods: {
districtNavigate(districtCode, feature) {
if (districtCode) {
this.secondFeatures = []
this.thirdFeatures = []
this.geoJsonLayer.clear()
this.geoJsonLayer.load({
data: feature,
flyTo: true
})
axios.get("http://192.168.2.236/areas/" + districtCode + ".json").then((response) => {
if (response.status === 200) {
this.secondFeatures = response.data.features;
} else {
alert("服务异常")
}
})
}
},
secondDistrictNavigate(districtCode, feature) {
if (districtCode) {
if (feature.properties.level !== "district") {
axios.get("http://192.168.2.236/areas/" + districtCode + ".json").then((response) => {
if (response.status === 200) {
this.thirdFeatures = response.data.features;
} else {
alert("服务异常")
}
});
}
this.geoJsonLayer.clear()
this.geoJsonLayer.load({
data: feature,
flyTo: true
})
}
},
thirdDistrictNavigate(districtCode, feature) {
if (districtCode) {
this.geoJsonLayer.clear()
this.geoJsonLayer.load({
data: feature,
flyTo: true
})
}
}
}
}
</script>
<style scoped>
#map {
position: absolute;
margin: 0;
height: 80%;
width: 80%;
}
</style>
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组件
import HomeMap from '@/components/HomeMap'
import DkMap from '@/components/DkMap'
import XzqMap from '@/components/XzqMap.vue' //引入根目录下的Hello.vue组件
Vue.use(Router) //Vue全局使用Router
......@@ -16,6 +17,11 @@ export default new Router({
path: '/dk-map',
name: 'DkMap',
component: DkMap
},
{
path: '/xzq-map',
name: 'DkMap',
component: XzqMap
}
]
})
\ No newline at end of file
......