Skip to content

P
pudong-elevator-map
Commit b4ddafaf authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

街镇懒加载数据

parent 8910fcab
Hide whitespace changes
Inline Side-by-side
Showing with 212 additions and 164 deletions
src/mock/index.js
View file @ b4ddafaf
import caolu from './caolu'
// import caoluBuilding from './caolu-building'
import dongming from './dongming'
// import dongmingBuilding from './dongming-building'
import gaodong from './gaodong'
// import gaodongBuilding from './gaodong-building'
import gaoxing from './gaoxing'
// import gaoxingBuilding from './gaoxing-building'
import hangtou from './hangtou'
// import hangtouBuilding from './hangtou-building'
import hudong from './hudong'
// import hudongBuilding from './hudong-building'
import huamu from './huamu'
// import huamuBuilding from './huamu-building'
import jinqiao from './jinqiao'
// import jinqiaoBuilding from './jinqiao-building'
import jinyang from './jinyang'
// import jinyangBuilding from './jinyang-building'
import lujiazui from './lujiazui'
// import lujiazuiBuilding from './lujiazui-building'
import shuyuan from './shuyuan'
// import shuyuanBuilding from './shuyuan-building'
import beicai from './beicai'
// import beicaiBuilding from './beicai-building'
import kangqiao from './kangqiao'
// import kangqiaoBuilding from './kangqiao-building'
import nanhui from './nanhui'
// import nanhuiBuilding from './nanhui-building'
import nanmatou from './nanmatou'
// import nanmatouBuilding from './nanmatou-building'
import nicheng from './nicheng'
// import nichengBuilding from './nicheng-building'
import puxing from './puxing'
// import puxingBuilding from './puxing-building'
import sanlin from './sanlin'
// import sanlinBuilding from './sanlin-building'
import tangzhen from './tangzhen'
// import tangzhenBuilding from './tangzhen-building'
import wanxiang from './wanxiang'
// import wanxiangBuilding from './wanxiang-building'
import weifang from './weifang'
// import weifangBuilding from './weifang-building'
import xinchang from './xinchang'
// import xinchangBuilding from './xinchang-building'
import xuanqiao from './xuanqiao'
// import xuanqiaoBuilding from './xuanqiao-building'
import yangjing from './yangjing'
// import yangjingBuilding from './yangjing-building'
import zhangjiang from './zhangjiang'
// import zhangjiangBuilding from './zhangjiang-building'
import zhoupu from './zhoupu'
// import zhoupuBuilding from './zhoupu-building'
import zhuqiao from './zhuqiao'
// import zhuqiaoBuilding from './zhuqiao-building'
import chuansha from './chuansha'
// import chuanshaBuilding from './chuansha-building'
import datuan from './datuan'
// import datuanBuilding from './datuan-building'
import gaoqiao from './gaoqiao'
// import gaoqiaoBuilding from './gaoqiao-building'
import heqing from './heqing'
// import heqingBuilding from './heqing-building'
import laogang from './laogang'
// import laogangBuilding from './laogang-building'
import shanggang from './shanggang'
// import shanggangBuilding from './shanggang-building'
import tangqiao from './tangqiao'
// import tangqiaoBuilding from './tangqiao-building'
import huinan from './huinan'
// import huinanBuilding from './huinan-building'
// import caolu from './caolu'
// // import caoluBuilding from './caolu-building'
// import dongming from './dongming'
// // import dongmingBuilding from './dongming-building'
// import gaodong from './gaodong'
// // import gaodongBuilding from './gaodong-building'
// import gaoxing from './gaoxing'
// // import gaoxingBuilding from './gaoxing-building'
// import hangtou from './hangtou'
// // import hangtouBuilding from './hangtou-building'
// import hudong from './hudong'
// // import hudongBuilding from './hudong-building'
// import huamu from './huamu'
// // import huamuBuilding from './huamu-building'
// import jinqiao from './jinqiao'
// // import jinqiaoBuilding from './jinqiao-building'
// import jinyang from './jinyang'
// // import jinyangBuilding from './jinyang-building'
// import lujiazui from './lujiazui'
// // import lujiazuiBuilding from './lujiazui-building'
// import shuyuan from './shuyuan'
// // import shuyuanBuilding from './shuyuan-building'
// import beicai from './beicai'
// // import beicaiBuilding from './beicai-building'
// import kangqiao from './kangqiao'
// // import kangqiaoBuilding from './kangqiao-building'
// import nanhui from './nanhui'
// // import nanhuiBuilding from './nanhui-building'
// import nanmatou from './nanmatou'
// // import nanmatouBuilding from './nanmatou-building'
// import nicheng from './nicheng'
// // import nichengBuilding from './nicheng-building'
// import puxing from './puxing'
// // import puxingBuilding from './puxing-building'
// import sanlin from './sanlin'
// // import sanlinBuilding from './sanlin-building'
// import tangzhen from './tangzhen'
// // import tangzhenBuilding from './tangzhen-building'
// import wanxiang from './wanxiang'
// // import wanxiangBuilding from './wanxiang-building'
// import weifang from './weifang'
// // import weifangBuilding from './weifang-building'
// import xinchang from './xinchang'
// // import xinchangBuilding from './xinchang-building'
// import xuanqiao from './xuanqiao'
// // import xuanqiaoBuilding from './xuanqiao-building'
// import yangjing from './yangjing'
// // import yangjingBuilding from './yangjing-building'
// import zhangjiang from './zhangjiang'
// // import zhangjiangBuilding from './zhangjiang-building'
// import zhoupu from './zhoupu'
// // import zhoupuBuilding from './zhoupu-building'
// import zhuqiao from './zhuqiao'
// // import zhuqiaoBuilding from './zhuqiao-building'
// import chuansha from './chuansha'
// // import chuanshaBuilding from './chuansha-building'
// import datuan from './datuan'
// // import datuanBuilding from './datuan-building'
// import gaoqiao from './gaoqiao'
// // import gaoqiaoBuilding from './gaoqiao-building'
// import heqing from './heqing'
// // import heqingBuilding from './heqing-building'
// import laogang from './laogang'
// // import laogangBuilding from './laogang-building'
// import shanggang from './shanggang'
// // import shanggangBuilding from './shanggang-building'
// import tangqiao from './tangqiao'
// // import tangqiaoBuilding from './tangqiao-building'
// import huinan from './huinan'
// // import huinanBuilding from './huinan-building'
export const mockCommunity = {
caolu,
dongming,
gaodong,
gaoxing,
hangtou,
hudong,
huamu,
jinqiao,
jinyang,
lujiazui,
shuyuan,
beicai,
kangqiao,
nanhui,
nanmatou,
nicheng,
puxing,
sanlin,
tangzhen,
wanxiang,
weifang,
xinchang,
xuanqiao,
yangjing,
zhangjiang,
zhoupu,
zhuqiao,
chuansha,
datuan,
gaoqiao,
heqing,
laogang,
shanggang,
tangqiao,
huinan,
}
// export const mockBuilding = {
// jinyangBuilding,
// yangjingBuilding,
// chuanshaBuilding,
// caoluBuilding,
// jinqiaoBuilding,
// sanlinBuilding,
// shanggangBuilding,
// laogangBuilding,
// tangqiaoBuilding,
// huinanBuilding,
// heqingBuilding,
// datuanBuilding,
// gaoqiaoBuilding,
// zhuqiaoBuilding,
// zhoupuBuilding,
// zhangjiangBuilding,
// tangzhenBuilding,
// xinchangBuilding,
// xuanqiaoBuilding,
// weifangBuilding,
// wanxiangBuilding,
// puxingBuilding,
// nichengBuilding,
// nanmatouBuilding,
// nanhuiBuilding,
// kangqiaoBuilding,
// beicaiBuilding,
// lujiazuiBuilding,
// hangtouBuilding,
// gaoxingBuilding,
// gaodongBuilding,
// hudongBuilding,
// dongmingBuilding,
// huamuBuilding,
// shuyuanBuilding,
// export const mockCommunity = {
// caolu,
// dongming,
// gaodong,
// gaoxing,
// hangtou,
// hudong,
// huamu,
// jinqiao,
// jinyang,
// lujiazui,
// shuyuan,
// beicai,
// kangqiao,
// nanhui,
// nanmatou,
// nicheng,
// puxing,
// sanlin,
// tangzhen,
// wanxiang,
// weifang,
// xinchang,
// xuanqiao,
// yangjing,
// zhangjiang,
// zhoupu,
// zhuqiao,
// chuansha,
// datuan,
// gaoqiao,
// heqing,
// laogang,
// shanggang,
// tangqiao,
// huinan,
// }
// // export const mockBuilding = {
// // jinyangBuilding,
// // yangjingBuilding,
// // chuanshaBuilding,
// // caoluBuilding,
// // jinqiaoBuilding,
// // sanlinBuilding,
// // shanggangBuilding,
// // laogangBuilding,
// // tangqiaoBuilding,
// // huinanBuilding,
// // heqingBuilding,
// // datuanBuilding,
// // gaoqiaoBuilding,
// // zhuqiaoBuilding,
// // zhoupuBuilding,
// // zhangjiangBuilding,
// // tangzhenBuilding,
// // xinchangBuilding,
// // xuanqiaoBuilding,
// // weifangBuilding,
// // wanxiangBuilding,
// // puxingBuilding,
// // nichengBuilding,
// // nanmatouBuilding,
// // nanhuiBuilding,
// // kangqiaoBuilding,
// // beicaiBuilding,
// // lujiazuiBuilding,
// // hangtouBuilding,
// // gaoxingBuilding,
// // gaodongBuilding,
// // hudongBuilding,
// // dongmingBuilding,
// // huamuBuilding,
// // shuyuanBuilding,
// // }
src/views/main.vue
View file @ b4ddafaf
<template>
<div id="container">
<template v-if="curStreetData.name && curStreet">
<Collapse v-model="curStreet" @on-change="handleSelect" class="menu" accordion>
<Panel v-for="street in streetList" :key="street" :name="street">
{{areaList[street].name}}小区列表
{{curStreetData.name}}小区列表
<div slot="content" class="community-list">
<div v-for="(item, index) in areaList[street].community" :key="item.name + index" style="display:flex;justify-content:space-between;">
<div v-for="(item, index) in curStreetData.community" :key="item.name + index" style="display:flex;justify-content:space-between;">
<Button
@click="handleView(item)"
size="small"
......@@ -17,6 +18,7 @@
</div>
</Panel>
</Collapse>
</template>
<Modal v-model="detailModal" width="90%" :footer-hide="true">
<Table v-if="detailModal" :columns="columns" :data="detailData" size="small" :max-height="tableHeight"/>
</Modal>
......@@ -28,7 +30,8 @@ const {AMap} = window
const star1 = require('@/assets/images/star1.png')
const star2 = require('@/assets/images/star2.png')
const star3 = require('@/assets/images/star3.png')
import {mockCommunity} from '@/mock/index.js'
// import {mockCommunity} from '@/mock/index.js'
import axios from 'axios'
export default {
name: 'Map3D',
data() {
......@@ -90,7 +93,6 @@ export default {
// mapStyle:'amap://styles/light',
features:['bg','road'],
},
areaList: mockCommunity,
streetList: [],
curStreetPolygon: null,
curStreet: null,
......@@ -209,6 +211,44 @@ export default {
},
],
detailData: [],
refer: {
beicai: '北蔡',
caolu: '曹路',
chuansha: '川沙',
datuan: '大团',
dongming: '东明',
gaodong: '高东',
gaoqiao: '高桥',
gaoxing: '高行',
hangtou: '航头',
heqing: '合庆',
huamu: '花木',
hudong: '沪东',
huinan: '惠南',
jinqiao: '金桥',
jinyang: '金杨',
kangqiao: '康桥',
laogang: '老港',
lujiazui: '陆家嘴',
nanhui: '南汇新城',
nanmatou: '南码头',
nicheng: '泥城',
puxing: '浦兴',
sanlin: '三林',
shanggang: '上钢',
shuyuan: '书院',
tangqiao: '塘桥',
tangzhen: '唐镇',
wanxiang: '万祥',
weifang: '潍坊',
xinchang: '新场',
xuanqiao: '宣桥',
yangjing: '洋泾',
zhangjiang: '张江',
zhoupu: '周浦',
zhuqiao: '祝桥',
},
curStreetData: {},
}
},
mounted() {
......@@ -225,12 +265,12 @@ export default {
this.initMenu()
},
initMenu() {
const streets = Object.keys(this.areaList)
const streets = Object.keys(this.refer)
if (this.$route.query && this.$route.query.name) { // 判断路由有街镇则显示该街镇列表，没街镇显示所有街镇列表
const streetName = this.$route.query.name
let result = null
streets.forEach(street => {
if (streetName.indexOf(this.areaList[street].name) >= 0) {
if (streetName.indexOf(this.refer[street]) >= 0) {
result = street
}
})
......@@ -258,28 +298,36 @@ export default {
},
handleSelect(key) {
if (!key || key.length <= 0) return
this.map.setZoomAndCenter(15, this.areaList[key[0]].location)
const streetData = require(`@/mock/${key[0]}.js`).default
this.curStreetData = streetData
this.map.setZoomAndCenter(15, streetData.location)
if (this.curStreetPolygon) {
// this.map.remove(this.curStreetPolygon) // 移除之前的街镇区域底色
this.map.clearMap()
}
this.initLayers(key)
this.highlightArea(this.areaList[key[0]])
this.highlightArea(streetData)
},
initLayers(street = null) { // 添加基础图层和建筑物图层
const keys = Object.keys(this.areaList)
if (keys.length <= 0) return
const communityList = []
if (street) {
communityList.push(...this.areaList[street].community)
if (this.buildingData) {
communityList.push(...this.buildingData.community) // 添加个别不同色的，手动上色的楼栋
}
} else {
keys.forEach(key => {
communityList.push(...this.areaList[key].community)
})
// const keys = Object.keys(this.areaList)
// if (keys.length <= 0) return
// const communityList = []
// if (street) {
// communityList.push(...this.areaList[street].community)
// if (this.buildingData) {
// communityList.push(...this.buildingData.community) // 添加个别不同色的，手动上色的楼栋
// }
// } else {
// keys.forEach(key => {
// communityList.push(...this.areaList[key].community)
// })
// }
if (!this.curStreetData.name) return
const communityList = [...this.curStreetData.community]
if (this.buildingData) {
communityList.push(...this.buildingData.community)
}
const buildingOptions = {
areas: communityList.map(item => {
if (item.type != 'building') {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment