街镇懒加载数据

src/mock/index.js

-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

 <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') {