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 829 additions and 19 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>
<button @click="removeGraphicLayer">移出graphic图层</button>
<div id="map">
</div>
</div>
</template>
<script>
......@@ -45,9 +48,26 @@ export default {
// 纬度在前
center: [34.247161, 108.944213],
crs: i2d.CRS.EPSG4490
},
colors: ["#FFEDA0", "#FED976", "#FEB24C", "#FD8D3C", "#FC4E2A", "#E31A1C", "#BD0026", "#800026"],
map: null,
graphicLayer: null
}
},
methods: {
getArrayRandomOne(arr) {
const n = Math.floor(Math.random() * arr.length)
return arr[n]
},
removeGraphicLayer() {
if (this.graphicLayer) {
// 移出图层
this.map.removeLayer(this.graphicLayer)
// 销魂图层
this.graphicLayer.destroy()
}
},
},
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]]]}
......@@ -56,12 +76,538 @@ export default {
"features": [
{
"type": "Feature",
"geometry": dkCoord
"geometry": {
"bbox": [
126.03867381995315,
30.931927433113856,
126.04503594875791,
30.939514725477864
],
"type": "Polygon",
"coordinates": [
[
[
126.04127520446629,
30.939514725477864
],
[
126.04377230927992,
30.93881960784222
],
[
126.04332664844026,
30.937915552996117
],
[
126.04237115160002,
30.9363554853939
],
[
126.04215927170368,
30.93624139621903
],
[
126.04262377763028,
30.935679099571022
],
[
126.04354464025664,
30.93388626967902
],
[
126.04363428175124,
30.933169137722185
],
[
126.04503594875791,
30.93255794571354
],
[
126.04482901291135,
30.931927433113856
],
[
126.04305706342336,
30.932797864441227
],
[
126.03867381995315,
30.93460090076218
],
[
126.04127520446629,
30.939514725477864
]
]
]
},
"properties": {
"Id": 0,
"dkh": "FG52K9756-002",
"wz": "同兴村",
"tfbh": "I51H134002",
"tbbh": "448",
"ssqdlh": "702",
"sshdlh": "102",
"bcgdmj": 0.396,
"psnl": "充分满足",
"ggnl": "充分满足",
"dxbw": "平原低阶",
"zays": "盐碱",
"zdgx": "薄层型",
"nltwh": "高",
"swdyx": "丰富",
"qjcd": "清洁",
"yxtch": "20",
"pd": 0.3
}
},
{
"type": "Feature",
"geometry": {
"bbox": [
126.03523202362737,
30.9370592475255,
126.04110232335631,
30.940919299594437
],
"type": "Polygon",
"coordinates": [
[
[
126.03612469963673,
30.940919299594437
],
[
126.0387805796563,
30.940176044637667
],
[
126.04110232335631,
30.93952629860218
],
[
126.04104263663659,
30.939267656150548
],
[
126.04052535173344,
30.938392250929894
],
[
126.03976931995192,
30.9370592475255
],
[
126.03885412358487,
30.938332564210327
],
[
126.03817767409612,
30.938969222552544
],
[
126.03783944935175,
30.938312668636968
],
[
126.03523202362737,
30.939312482777378
],
[
126.03612469963673,
30.940919299594437
]
]
]
},
"properties": {
"Id": 0,
"dkh": "FG52K9756-001",
"wz": "同兴村",
"tfbh": "I51H134001",
"tbbh": "212",
"ssqdlh": "602",
"sshdlh": "102",
"bcgdmj": 3.219,
"psnl": "充分满足",
"ggnl": "满足",
"dxbw": "平原中阶",
"zays": "痦薄",
"zdgx": "松散型",
"nltwh": "高",
"swdyx": "丰富",
"qjcd": "清洁",
"yxtch": "120",
"pd": 2
}
},
{
"type": "Feature",
"geometry": {
"bbox": [
126.04532640224102,
30.921617099431955,
126.05379331158817,
30.93749197624271
],
"type": "Polygon",
"coordinates": [
[
[
126.04871486705144,
30.93749197624271
],
[
126.04846190345619,
30.931176956135005
],
[
126.04827119179015,
30.931188875614115
],
[
126.04844297749084,
30.93070448557421
],
[
126.04846190345619,
30.931176956135005
],
[
126.04853196704721,
30.931172577160513
],
[
126.04897202529332,
30.93104218953198
],
[
126.04949357580745,
30.930276162214454
],
[
126.04908611446831,
30.93026801298777
],
[
126.04968915725023,
30.929982790050413
],
[
126.04909426369511,
30.929013032063267
],
[
126.04991606228327,
30.928882166940983
],
[
126.05103021438244,
30.92665386274274
],
[
126.05379331158817,
30.925284251483845
],
[
126.05208706723067,
30.922100959772024
],
[
126.05169233905838,
30.921617099431955
],
[
126.05021449588128,
30.92249568794426
],
[
126.04765791472528,
30.927357668644618
],
[
126.04675639656466,
30.928943097133928
],
[
126.04812421722215,
30.931709825281875
],
[
126.04532640224102,
30.932735690774848
],
[
126.04871486705144,
30.93749197624271
]
]
]
},
"properties": {
"Id": 0,
"dkh": "FG52K9756-003",
"wz": "武德路",
"tfbh": "I51H134003",
"tbbh": "212",
"ssqdlh": "605",
"sshdlh": "103",
"bcgdmj": 1.017,
"psnl": "满足",
"ggnl": "基本满足",
"dxbw": "丘陵上部",
"zays": "酸化",
"zdgx": "紧实型",
"nltwh": "中",
"swdyx": "一般",
"qjcd": "清洁",
"yxtch": "120",
"pd": 3
}
},
{
"type": "Feature",
"geometry": {
"bbox": [
126.02845013770947,
30.93611055509564,
126.03612469963673,
30.94242506807376
],
"type": "Polygon",
"coordinates": [
[
[
126.03068450384012,
30.94242506807376
],
[
126.03612469963673,
30.940919299594437
],
[
126.03345317491528,
30.93611055509564
],
[
126.02845013770947,
30.938587787110183
],
[
126.03068450384012,
30.94242506807376
]
]
]
},
"properties": {
"Id": 0,
"dkh": "FG52K9756-004",
"wz": "武德路",
"tfbh": "I51H134004",
"tbbh": "392",
"ssqdlh": "606",
"sshdlh": "109",
"bcgdmj": 2.2905,
"psnl": "满足",
"ggnl": "基本满足",
"dxbw": "山地坡上",
"zays": "渍潜",
"zdgx": "夹层型",
"nltwh": "中",
"swdyx": "一般",
"qjcd": "尚清洁",
"yxtch": "120",
"pd": 8
}
},
{
"type": "Feature",
"geometry": {
"bbox": [
126.01426677009727,
30.93212755460195,
126.03068450384012,
30.945388031855657
],
"type": "Polygon",
"coordinates": [
[
[
126.01426677009727,
30.935187664737384
],
[
126.01902694141916,
30.945388031855657
],
[
126.03068450384012,
30.94242506807376
],
[
126.02845013770947,
30.938587787110183
],
[
126.02189275884767,
30.940919299594274
],
[
126.02111558801971,
30.938976372524166
],
[
126.02412712497835,
30.937664896751752
],
[
126.02130988072656,
30.934653359793117
],
[
126.02228134426161,
30.934216201202336
],
[
126.02053270989848,
30.933439030374192
],
[
126.01999840495432,
30.93212755460195
],
[
126.01426677009727,
30.935187664737384
]
]
]
},
"properties": {
"Id": 0,
"dkh": "FG52K9756-005",
"wz": "佳富村",
"tfbh": "I51H134005",
"tbbh": "424",
"ssqdlh": "607",
"sshdlh": "120",
"bcgdmj": 2.5785,
"psnl": "基本满足",
"ggnl": "基本满足",
"dxbw": "宽谷盆地",
"zays": "障碍层次",
"zdgx": "上紧下松型",
"nltwh": "低",
"swdyx": "不丰富",
"qjcd": "尚清洁",
"yxtch": "120",
"pd": 11
}
},
{
"type": "Feature",
"geometry": {
"bbox": [
126.03046614992456,
30.929397064375333,
126.03778772086163,
30.93256762292026
],
"type": "Polygon",
"coordinates": [
[
[
126.03138293793768,
30.93256762292026
],
[
126.03336931196566,
30.932007363578975
],
[
126.03373606362345,
30.93170210542672
],
[
126.03441300785039,
30.9314531144467
],
[
126.03600178344641,
30.930868737215974
],
[
126.03692186551598,
30.93053031622486
],
[
126.03778772086163,
30.93000825638399
],
[
126.03758399019218,
30.929626261378587
],
[
126.03704919718463,
30.929728126713428
],
[
126.0369855313502,
30.92993185738288
],
[
126.03673086801336,
30.929995523217087
],
[
126.03524108749218,
30.930466650390482
],
[
126.03459169598295,
30.929397064375333
],
[
126.03046614992456,
30.930950510730725
],
[
126.03138293793768,
30.93256762292026
]
]
]
},
"properties": {
"Id": 0,
"dkh": "FG52K9756-006",
"wz": "佳富村",
"tfbh": "I51H134006",
"tbbh": "422",
"ssqdlh": "60008",
"sshdlh": "123",
"bcgdmj": 0.4245,
"psnl": "不满足",
"ggnl": "不满足",
"dxbw": "山间盆地",
"zays": "无",
"zdgx": "海绵型",
"nltwh": "低",
"swdyx": "不丰富",
"qjcd": "尚清洁",
"yxtch": "60",
"pd": 15
}
}
],
"fileName": "test/test"
}
// eslint-disable-next-line no-unused-vars
const map = new i2d.Map('map', this.mapOptions)
this.map = new i2d.Map('map', this.mapOptions)
const _self = this;
const geoJsonLayer = new i2d.Layer.GeoJsonLayer({
name: "安徽各市",
data: geojson,
......@@ -69,30 +615,81 @@ export default {
symbol: {
type: "polygon",
styleOptions: {
fillOpacity: 0.6,
fillColor: "#ff0044",
outline: true
fill: true,
// image: "img/fill/redLine.png",
// imageOpacity: 1,
fillOpacity: 0.5,
outline: true,
outlineWidth: 2,
outlineOpacity: 1,
outlineColor: "white"
},
callback: function () {
return {
fillColor: _self.getArrayRandomOne(_self.colors)
}
}
}
})
map.addLayer(geoJsonLayer)
this.map.addLayer(geoJsonLayer)
//地块自带外包矩形
if (dkCoord.bbox) {
//定位到矩形
map.fitBounds(L.latLngBounds([
this.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([
this.map.fitBounds(L.latLngBounds([
[result[1], result[0]],
[result[3], result[2]]
]));
}
// 创建矢量数据图层
this.graphicLayer = new i2d.Layer.GraphicLayer()
this.map.addLayer(this.graphicLayer)
const graphic = new i2d.Graphic.Marker({
latlng: [40.20340350096175, 101.15070299421159],
style: {
image: "./mark1.png",
width: 32,
height: 44,
horizontalOrigin: i2d.HorizontalOrigin.CENTER,
verticalOrigin: i2d.VerticalOrigin.BOTTOM,
label: {
text: "照片1",
color: "#ff0000",
font_size: 20,
offsetY: 42
}
}
})
this.graphicLayer.addGraphic(graphic)
const graphic1 = new i2d.Graphic.Marker({
latlng: [40.30340350096175, 101.10070299421159],
style: {
image: "./mark1.png",
width: 32,
height: 44,
horizontalOrigin: i2d.HorizontalOrigin.CENTER,
verticalOrigin: i2d.VerticalOrigin.BOTTOM,
label: {
text: "照片2",
color: "#ff0000",
font_size: 20,
offsetY: 42
}
}
})
this.graphicLayer.addGraphic(graphic1)
}
}
</script>
......
<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
......