增加曹路金桥楼栋数据

05ed529a · 郭铭瑶 · c158d5af · 05ed529a · 05ed529a · 05ed529a
Commit 05ed529a authored Apr 20, 2020 by 郭铭瑶 🤘
9 changed files
--- a/src/mock/caolu-building.js
+++ b/src/mock/caolu-building.js
--- a/src/mock/caolu.js
+++ b/src/mock/caolu.js
@@ -49,7 +49,7 @@ export default {
    [121.646363, 31.29713]
  ],
  'community': [{
-    name: '民风小区',
+    name: '川沙路326弄',
    address: '川沙路326弄',
    level: 2,
    location: [121.666008, 31.279523],
@@ -199,7 +199,7 @@ export default {
  }, {
    'name': '银丰苑',
    'address': '银峰路549弄1-171号',
-    'level': 2,
+    'level': 1,
    'location': [121.68779, 31.267045],
    'path': [
      [121.688748, 31.268906],
@@ -283,7 +283,7 @@ export default {
      [121.666823, 31.275305]
    ]
  }, {
-    name: '顾路阳光苑南区',
+    name: '民耀路268弄',
    address: '民耀路268弄1-34号',
    level: 1,
    location: [121.652693, 31.272165],
@@ -343,7 +343,7 @@ export default {
      [121.65355, 31.275371]
    ]
  }, {
-    'name': '民同路10弄',
+    'name': '民同10弄',
    'address': '民同路10弄1-6号',
    'level': 1,
    'location': [121.650247, 31.274278],
@@ -355,7 +355,7 @@ export default {
      [121.650771, 31.274374]
    ]
  }, {
-    name: '阳光苑1期至3期',
+    name: '民同路40弄',
    address: '民同路40弄',
    level: 1,
    location: [121.650688, 31.273385],
@@ -374,7 +374,7 @@ export default {
      [121.649847, 31.2739]
    ]
  }, {
-    name: '顾路阳光苑-北区',
+    name: '民耀路98弄',
    address: '民耀路98弄1-27号民耀路96、100号',
    level: 1,
    location: [121.65162, 31.274128],

--- a/src/mock/index.js
+++ b/src/mock/index.js
 import caolu from './caolu'
+import caoluBuilding from './caolu-building'
 import dongming from './dongming'
 import gaodong from './gaodong'
 import gaoxing from './gaoxing'
@@ -6,6 +7,7 @@ import hangtou from './hangtou'
 import hudong from './hudong'
 import huamu from './huamu'
 import jinqiao from './jinqiao'
+import jinqiaoBuilding from './jinqiao-building'
 import jinyang from './jinyang'
 import jinyangBuilding from './jinyang-building'
 import lujiazui from './lujiazui'
@@ -79,4 +81,6 @@ export const mockBuilding = {
  jinyangBuilding,
  yangjingBuilding,
  chuanshaBuilding,
+  caoluBuilding,
+  jinqiaoBuilding,
 }
--- a/src/mock/jinqiao-building.js
+++ b/src/mock/jinqiao-building.js
--- a/src/mock/jinqiao.js
+++ b/src/mock/jinqiao.js
@@ -141,7 +141,7 @@ export default {
    [121.588871, 31.283549]
  ],
  'community': [{
-    'name': '张桥小区(佳林路)',
+    'name': '张桥小区',
    'address': '佳林路962弄1-12号',
    'level': 2,
    'location': [121.611623, 31.264485],
@@ -169,13 +169,18 @@ export default {
  }, {
    'name': '永宁路136弄',
    'address': '永宁路136弄',
-    'level': 2,
-    'location': [121.609949, 31.265870],
-    'path': [],
+    'level': 3,
+    'location': [121.609849,31.266232],
+    'path': [
+      [121.609977,31.265773],
+      [121.610384,31.266146],
+      [121.609743,31.266751],
+      [121.609322,31.266429],
+    ],
  }, {
-    'name': '永建路86弄小区',
+    'name': '永建路86弄',
    'address': '永建路86弄1-35号',
-    'level': 3,
+    'level': 2,
    'location': [121.615862, 31.263585],
    'path': [
      [121.616596, 31.264696],
@@ -191,21 +196,25 @@ export default {
      [121.616596, 31.264696]
    ]
  }, {
-    'name': '永宁路122弄小区',
+    'name': '永宁路122弄',
    'address': '浦东永宁路122弄',
    'level': 2,
    'location': [121.611175, 31.266957],
    'path': [
-      [121.611294, 31.267317],
-      [121.611581, 31.266932],
-      [121.611073, 31.266609],
-      [121.610754, 31.266957],
-      [121.611294, 31.267317]
+      // [121.611294, 31.267317],
+      // [121.611581, 31.266932],
+      // [121.611073, 31.266609],
+      // [121.610754, 31.266957],
+      // [121.611294, 31.267317]
+      [121.610788,31.26697],
+      [121.611092,31.26662],
+      [121.611623,31.266957],
+      [121.611327,31.267333],
    ]
  }, {
    name: '佳虹小区2期',
    address: '永业路188弄1-16号',
-    level: 3,
+    level: 1,
    location: [121.615809, 31.266854],
    path: [
      [121.616591, 31.266715],
@@ -243,14 +252,14 @@ export default {
      [121.614611, 31.266765]
    ]
  }, {
-    name: '金浦小区(金桥路)',
+    name: '金浦小区',
    address: '金桥路2552弄',
    level: 2,
    location: [ 121.602448, 31.234428 ],
    path:
    [ [ 121.602684, 31.233716 ],
      [ 121.602543, 31.233776 ],
-      [ 121.601809, 31.233891 ],
+      [121.601806,31.233886],
      [ 121.601322, 31.234546 ],
      [ 121.601277, 31.234643 ],
      [ 121.601986, 31.234916 ],
@@ -262,7 +271,7 @@ export default {
  }, {
    name: '三桥小区北区',
    address: '金桥路3299弄',
-    level: 3,
+    level: 2,
    location: [121.607794, 31.223276],
    path: [
      [121.607369, 31.22352],
@@ -275,14 +284,13 @@ export default {
  }, {
    name: '三桥小区南区',
    address: '金桥路3379弄',
-    level: 3,
+    level: 2,
    location: [121.608724, 31.221391],
    path: [
-      [121.608287, 31.221735],
-      [121.608818, 31.221908],
-      [121.609191, 31.221053],
-      [121.60858, 31.220899],
-      [121.608287, 31.221735]
+      [121.608158,31.221643],
+      [121.608405,31.220808],
+      [121.609006,31.221],
+      [121.608668,31.221799],
    ]
  }, {
    'name': '金舍苑',
@@ -318,7 +326,7 @@ export default {
      [121.610413, 31.261459]
    ]
  }, {
-    'name': '金石苑(佳高路)',
+    'name': '金石苑',
    'address': '杨高北路5291弄1-30号',
    'level': 2,
    'location': [121.606535, 31.264609],
@@ -340,19 +348,19 @@ export default {
      [121.607277, 31.263272]
    ]
  }, {
-    name: '阳光欧洲城金色米兰苑',
+    name: '金色米兰苑',
    address: '佳乐路255弄1-53号',
    level: 2,
    location: [121.61519, 31.269524],
    path: [
      [121.61354, 31.27024],
      [121.616576, 31.27019],
-      [121.616622, 31.2701],
-      [121.616624, 31.268635],
+      [121.616623,31.270096],
+      [121.616657,31.268637],
      [121.616528, 31.268589],
      [121.615924, 31.268633],
      [121.615557, 31.268695],
-      [121.614495, 31.268878],
+      [121.61451,31.268849],
      [121.614453, 31.26891],
      [121.614455, 31.269241],
      [121.614224, 31.269241],
@@ -363,8 +371,8 @@ export default {
      [121.61354, 31.27024]
    ]
  }, {
-    name: '永业小区南区',
-    address: '佳林路',
+    name: '永业路42弄、94弄',
+    address: '永业路42弄、94弄',
    level: 2,
    location: [121.614423, 31.264846],
    path: [
@@ -398,7 +406,7 @@ export default {
      [121.614625, 31.266108]
    ]
  }, {
-    'name': '永建路152弄小区',
+    'name': '永建路152弄',
    'address': '永建路152弄1-6号',
    'level': 3,
    'location': [121.616155, 31.264658],
@@ -410,9 +418,9 @@ export default {
      [121.615734, 31.264578]
    ]
  }, {
-    name: '永业小区北区',
+    name: '佳虹路50弄、佳林路919弄',
    address: '佳虹路50弄1-30号',
-    level: 3,
+    level: 2,
    location: [121.61312, 31.266007],
    path: [
      [121.61197, 31.265369],

--- a/src/router/index.js
+++ b/src/router/index.js
 import Vue from 'vue'
 import Router from 'vue-router'
 const Main = () => import('@/views/main.vue')
+const Test = () => import('@/views/test.vue')

 Vue.use(Router)

@@ -9,7 +10,12 @@ export default new Router({
    {
      path: '/',
      name: 'main',
-      component: Main
-    }
+      component: Main,
+    },
+    {
+      path: '/test',
+      name: 'test',
+      component: Test,
+    },
  ]
 })
--- a/src/util/common.js
+++ b/src/util/common.js
@@ -11,4 +11,35 @@ export default{
      return []
    }
  },
+  similar(str1, str2) {
+    if (!str1 || !str2 || typeof(str1) != 'string' || typeof(str2) != 'string') {
+      console.error('参数需要是string类型！')
+      return 0
+    }
+
+    const len1 = str1.length
+    const len2 = str2.length
+    const arr = []
+
+    for (let i = 0; i <= len1; i++) {
+      arr[i] = []
+      arr[i][0] = i
+    }
+    for (let i = 0; i <= len2; i++) {
+      arr[0][i] = i
+    }
+
+    let temp
+    for (let i = 1; i <= len1; i++) {
+      for (let j = 1; j <= len2; j++) {
+        if (str1.charAt(i - 1) == str2.charAt(j - 1)) {
+          temp = 0
+        } else {
+          temp = 1
+        }
+        arr[i][j] = Math.min(arr[i - 1][j - 1] + temp, arr[i][j - 1] + 1, arr[i - 1][j] + 1)
+      }
+    }
+    return (1 - arr[len1][len2] / Math.max(len1, len2)).toFixed(3)
+  }
 }
--- a/src/views/main.vue
+++ b/src/views/main.vue
@@ -4,15 +4,6 @@
      <Panel v-for="street in streetList" :key="street" :name="street">
        {{areaList[street].name}}小区列表
        <div slot="content" class="community-list">
-          <!-- <Button
-            v-for="(item, index) in areaList[street].community"
-            :key="item.name + index"
-            @click="handleView(item)"
-            size="small"
-            type="text"
-            long>
-            {{item.name}}
-          </Button> -->
          <div v-for="(item, index) in areaList[street].community" :key="item.name + index" style="display:flex;justify-content:space-between;">
            <Button
              @click="handleView(item)"
@@ -27,7 +18,7 @@
      </Panel>
    </Collapse>
    <Modal v-model="detailModal" width="90%" :footer-hide="true">
-      <Table :columns="columns" :data="detailData" size="small" :max-height="tableHeight"/>
+      <Table v-if="detailModal" :columns="columns" :data="detailData" size="small" :max-height="tableHeight"/>
    </Modal>
  </div>
 </template>
@@ -110,7 +101,7 @@ export default {
        {
          title: '小区',
          key: 'name',
-          minWidth: 100,
+          minWidth: 150,
          fixed: 'left',
          align: 'center',
        },
@@ -259,8 +250,13 @@ export default {
      this.addMarker(name)
    },
    handleDetail({name}) {
-      if (!this.buildingList[`${this.curStreet}Building`]) return
-      this.detailData = this.buildingList[`${this.curStreet}Building`].building.filter(item => item.name.indexOf(name) >= 0)
+      const buildingList = this.buildingList[`${this.curStreet}Building`]
+      if (!buildingList) return
+      // this.detailData = buildingList.building.filter(item => item.name.indexOf(name) >= 0)
+      this.detailData = buildingList.building.filter(item => {
+        const buildingName = item.name && item.name.replace('(补)', '').replace('（补）', '')
+        return buildingName.indexOf(name) >= 0
+      })
      this.detailModal = true
    },
    handleSelect(key) {

--- a/src/views/test.vue
+++ b/src/views/test.vue
+<template>
+  <div id="container">
+    <Collapse v-model="curStreet" @on-change="handleSelect" class="menu" accordion>
+      <Panel v-for="street in streetList" :key="street" :name="street">
+        {{areaList[street].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;">
+            <Button
+              @click="handleView(item)"
+              size="small"
+              type="text"
+              long>
+              {{item.name}}
+            </Button>
+            <a @click="handleDetail(item)" style="display:block;min-width:5rem;text-align:right;">详情</a>
+          </div>
+        </div>
+      </Panel>
+    </Collapse>
+    <Modal v-model="detailModal" width="90%" :footer-hide="true">
+      <Table :columns="columns" :data="detailData" size="small" :max-height="tableHeight"/>
+    </Modal>
+  </div>
+</template>
+
+<script>
+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, mockBuilding} from '@/mock/index.js'
+export default {
+  name: 'Test',
+  data() {
+    return {
+      map: null,
+      buildingOptions: {
+        hideWithoutStyle:false,//是否隐藏设定区域外的楼块
+        areas:[
+          { //围栏1
+            //visible:false,//是否可见
+            rejectTexture:true,//是否屏蔽自定义地图的纹理
+            color1: 'ff99ff00',//楼顶颜色
+            color2: 'ff999900',//楼面颜色
+            path: [
+              [121.498447,31.217582],
+              [121.498466,31.218851],
+              [121.497402,31.218943],
+              [121.497423,31.217595],
+            ]
+          },
+          {
+            rejectTexture:true,//是否屏蔽自定义地图的纹理
+            color1: 'ffcc0000',//楼顶颜色
+            color2: 'ffaa0000',//楼面颜色
+            path: [
+              [121.497898,31.217932],
+              [121.498456,31.217945],
+              [121.498445,31.218445],
+              [121.49791,31.218376],
+            ]
+          },
+          {
+            rejectTexture:true,//是否屏蔽自定义地图的纹理
+            color1: 'ffffff00',//楼顶颜色
+            color2: 'ffffcc00',//楼面颜色
+            path: [
+              [121.498696,31.218295],
+              [121.498679,31.217744],
+              [121.499197,31.217747],
+              [121.499243,31.218324],
+            ]
+          },
+        ]
+      },
+      mapConfig: {
+        resizeEnable: true,
+        rotateEnable:true,
+        pitchEnable:true,
+        showLabel: true,
+        zoom: 15,
+        pitch:0,
+        rotation:45,
+        viewMode:'3D',//开启3D视图,默认为关闭
+        buildingAnimation:true,//楼块出现是否带动画
+        expandZoomRange:true,
+        zooms: [10,20],
+        center: [121.544379, 31.221517], // 浦东新区
+        showIndoorMap:false,
+        // mapStyle:'amap://styles/light',
+        features:['bg','road'],
+      },
+      areaList: mockCommunity,
+      buildingList: mockBuilding,
+      streetList: [],
+      curStreetPolygon: null,
+      curStreet: null,
+      markerList: [],
+      detailModal: false,
+      columns: [
+        {
+          title: '小区',
+          key: 'name',
+          minWidth: 100,
+          fixed: 'left',
+          align: 'center',
+        },
+        {
+          title: '楼栋号',
+          key: 'buildingNo',
+          minWidth: 100,
+          fixed: 'left',
+          align: 'center',
+        },
+        {
+          title: '房屋性质',
+          key: 'type',
+          minWidth: 100,
+          align: 'center',
+        },
+        {
+          title: '房龄',
+          key: 'age',
+          minWidth: 100,
+          align: 'center',
+        },
+        {
+          title: '层高',
+          key: 'high',
+          minWidth: 100,
+          align: 'center',
+        },
+        {
+          title: '4层以上是否有70岁以上老人',
+          key: 'hasOld',
+          minWidth: 130,
+          align: 'center',
+        },
+        {
+          title: '4层以上是否有行动不便的残障人员',
+          key: 'hasDisabled',
+          minWidth: 150,
+          align: 'center',
+        },
+        {
+          title: '是否已有业主发起加梯动员',
+          key: 'hasMobilizatin',
+          minWidth: 130,
+          align: 'center',
+        },
+        {
+          title: '楼内邻里关系是否和睦',
+          key: 'hasPeace',
+          minWidth: 130,
+          align: 'center',
+        },
+        {
+          title: '楼内业主自住率是否高于80%',
+          key: 'hasSelf',
+          minWidth: 130,
+          align: 'center',
+        },
+        {
+          title: '一楼是否非居',
+          key: 'hasNonliving',
+          minWidth: 130,
+          align: 'center',
+        },
+        {
+          title: '是否有地下层',
+          key: 'hasUnderground',
+          minWidth: 130,
+          align: 'center',
+        },
+        {
+          title: '占用车道',
+          key: 'hasLane',
+          minWidth: 100,
+          align: 'center',
+        },
+        {
+          title: '占用绿化',
+          key: 'hasGreening',
+          minWidth: 100,
+          align: 'center',
+        },
+        {
+          title: '占用车位',
+          key: 'hasParking',
+          minWidth: 100,
+          align: 'center',
+        },
+        {
+          title: '楼间距',
+          key: 'spacing',
+          minWidth: 100,
+          align: 'center',
+        },
+        {
+          title: '连廊长度',
+          key: 'corridorLength',
+          minWidth: 100,
+          align: 'center',
+        },
+        {
+          title: '居民意愿',
+          key: 'intention',
+          minWidth: 100,
+          align: 'center',
+        },
+      ],
+      detailData: [],
+    }
+  },
+  mounted() {
+    this.$nextTick(this.initMap)
+  },
+  methods: {
+    initMap(area) {
+      this.map = new AMap.Map('container', this.mapConfig)
+      // this.initLayers()
+      this.addController()
+      // this.addMarker()
+      this.addEvents()
+      this.highlightPudong()
+      this.initMenu()
+    },
+    initMenu() {
+      const streets = Object.keys(this.areaList)
+      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) {
+            result = street
+          }
+        })
+        this.streetList = [result]
+        this.$nextTick(() => { // 为了展开默认街镇小区列表
+          this.curStreet = result
+          this.handleSelect([this.curStreet])
+        })
+      } else {
+        this.streetList = streets
+      }
+    },
+    handleView({name, address, location}) {
+      this.map.setZoomAndCenter(18, location)
+      this.showDetail(null, location, {title: name, content: address})
+      this.addMarker(name)
+    },
+    handleDetail({name}) {
+      if (!this.buildingList[`${this.curStreet}Building`]) return
+      this.detailData = this.buildingList[`${this.curStreet}Building`].building.filter(item => item.name.indexOf(name) >= 0)
+      this.detailModal = true
+    },
+    handleSelect(key) {
+      if (!key || key.length <= 0) return
+      this.map.setZoomAndCenter(15, this.areaList[key[0]].location)
+      if (this.curStreetPolygon) {
+        // this.map.remove(this.curStreetPolygon) // 移除之前的街镇区域底色
+        this.map.clearMap()
+      }
+      this.initLayers(key)
+      this.highlightArea(this.areaList[key[0]])
+    },
+    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.buildingList[`${street}Building`]) {
+          communityList.push(...this.buildingList[`${street}Building`].community) // 添加个别不同色的，手动上色的楼栋
+        }
+      } else {
+        keys.forEach(key => {
+          communityList.push(...this.areaList[key].community)
+        })
+      }
+      const buildingOptions = {
+        areas: communityList.map(item => {
+          if (item.type != 'building') {
+            new AMap.Polygon({
+              zIndex: 10,
+              bubble:false,
+              fillColor: 'green',
+              fillOpacity:0.2,
+              strokeWeight:1,
+              path: item.path,
+              map:this.map
+            }).on('click', e => {
+              const location = [e.lnglat.getLng(), e.lnglat.getLat()]
+              console.log(e.lnglat.getLng() + ',' + e.lnglat.getLat())
+              // this.handleView(item)
+            })
+          }
+          return {
+            rejectTexture:true,//是否屏蔽自定义地图的纹理
+            color1: this.$com.switchBuildingColor(item.level)[0],//楼顶颜色
+            color2: this.$com.switchBuildingColor(item.level)[1],//楼面颜色
+            path: item.path || []
+          }
+        })
+      }
+      const buildingLayer = new AMap.Buildings({zIndex:130,merge:false,sort:false,zooms:[10,20]})
+      buildingLayer.setStyle(buildingOptions)
+      this.map.setLayers([
+        new AMap.TileLayer({}),
+        buildingLayer
+      ])
+
+      // 框起的建筑物区域底板颜色(不写则无底色，不影响建筑颜色)
+      // new AMap.Polygon({
+      //   bubble:false,
+      //   fillColor: 'green',
+      //   fillOpacity:0.2,
+      //   strokeWeight:1,
+      //   path: buildingOptions.areas[0].path,
+      //   map:this.map
+      // }).on('click', e => {
+      //   const location = [e.lnglat.getLng(), e.lnglat.getLat()]
+      //   this.map.setZoomAndCenter(18.8, location)
+      // })
+      // new AMap.Polygon({
+      //   bubble:true,
+      //   fillOpacity:0.2,
+      //   strokeWeight:1,
+      //   path:this.buildingOptions.areas[1].path,
+      //   map:this.map
+      // })
+    },
+    addController() { // 添加地图控制器
+      this.map.addControl(new AMap.ControlBar({
+        showZoomBar:false,
+        showControlButton:true,
+        position:{
+          right:'10px',
+          top:'10px'
+        }
+      }))
+    },
+    addMarker(name) {
+      this.map.remove(this.markerList) // 移除之前的marker
+      if (!this.buildingList[`${this.curStreet}Building`]) return
+      const whichImage = (intention) => {
+        if (intention.indexOf('一') >= 0) {
+          return {
+            src: star1,
+            size: [10, 15],
+          }
+        } else if (intention.indexOf('二') >= 0 || intention.indexOf('两') >= 0) {
+          return {
+            src: star2,
+            size: [15, 15],
+          }
+        } else if (intention.indexOf('三') >= 0) {
+          return {
+            src: star3,
+            size: [20, 15],
+          }
+        }
+      }
+      const markerList = []
+      this.buildingList[`${this.curStreet}Building`].building.forEach(item => {
+        if(item.name.indexOf(name) >= 0 && item.lon && item.lat && item.intention) {
+          const image = whichImage(item.intention)
+          const style = {
+            img:image.src,
+            size:image.size,//可见区域的大小
+            fitZoom:18,//最合适的级别
+            scaleFactor:2,//地图放大一级的缩放比例系数
+            maxScale:1.4,//最大放大比例
+            minScale:0.8//最小放大比例
+          }
+          const marker = new AMap.ElasticMarker({
+            position: [item.lon, item.lat],
+            zooms:[16,20],
+            extData: {
+              title: item.buildingNo,
+              content: `居民意愿度:${item.intention}`
+            },
+            styles:[
+              {
+                icon:{
+                  ancher:[0,30],//锚点
+                  ...style,
+                }
+              },
+              {
+                icon:{
+                  ancher:[0,45],//锚点
+                  ...style,
+                }
+              },
+              {
+                icon:{
+                  ancher:[0,60],//锚点
+                  ...style,
+                }
+              },
+              {
+                icon:{
+                  ancher:[0,80],//锚点
+                  ...style,
+                }
+              },
+              {
+                icon:{
+                  ancher:[0,100],//锚点
+                  ...style,
+                }
+              }
+            ],
+            zoomStyleMapping: {
+              16:0,
+              17:1,
+              18:2,
+              19:3,
+              20:4,
+            }
+          }).on('click', e => {
+            const location = [e.lnglat.getLng(), e.lnglat.getLat()]
+            this.showDetail(e, location, marker.getExtData())
+          })
+          markerList.push(marker)
+        }
+      })
+      this.map.add(markerList)
+      this.markerList = markerList
+      // new AMap.Marker({
+      //   map: this.map,
+      //   position: [121.498973,31.218018],
+      //   extData: {
+      //     title: '测试点击',
+      //     content: '测试额外附加数据',
+      //   },
+      //   icon: new AMap.Icon({
+      //     size: new AMap.Size(30, 30),  //图标大小
+      //     image: require('@/assets/images/attorney.png'),
+      //     // imageOffset: new AMap.Pixel(0, -60)
+      //   })
+      // }).on('click', e => {
+      //   const location = [e.lnglat.getLng(), e.lnglat.getLat()]
+      //   this.showDetail(e, location, marker.getExtData())
+      // })
+    },
+    showDetail(e, location, data) {
+      // TODO
+      const infoWindow = new AMap.InfoWindow({
+        content: `
+            <div>
+              <b>${data.title}</b>
+              <p>${data.content || '暂无其他信息'}</p>
+            </div>
+          `
+      })
+      infoWindow.open(this.map, location)
+    },
+    addEvents() {
+      this.map.on('click', e => {
+        const location = [e.lnglat.getLng(), e.lnglat.getLat()]
+        // this.map.setZoomAndCenter(18.8, location)
+        console.log(e.lnglat.getLng() + ',' + e.lnglat.getLat())
+      })
+    },
+    highlightArea(area) {
+      if (!area.path || area.path <= 0) return
+      const polygon = new AMap.Polygon({
+        zIndex: 1,
+        strokeWeight: 3,
+        strokeStyle:'dashed',
+        path: area.path,
+        fillOpacity: 0.2,
+        fillColor: '#80d8ff',
+        strokeColor: '#0091ea'
+      }).on('click', e => {
+        console.log(e.lnglat.getLng() + ',' + e.lnglat.getLat())
+      })
+      this.curStreetPolygon = polygon
+
+      // const outer = [
+      //   new AMap.LngLat(-360,90,true),
+      //   new AMap.LngLat(-360,-90,true),
+      //   new AMap.LngLat(360,-90,true),
+      //   new AMap.LngLat(360,90,true),
+      // ]
+      // const holes = [area.path]
+      // const pathArray = [
+      //   outer
+      // ]
+      // pathArray.push.apply(pathArray,holes)
+      // const polygon1 = new AMap.Polygon( {
+      //   pathL:pathArray,
+      //   //线条颜色，使用16进制颜色代码赋值。默认值为#006600
+      //   strokeColor: 'rgb(20,164,173)',
+      //   strokeWeight: 4,
+      //   //轮廓线透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
+      //   strokeOpacity:0.5,
+      //   //多边形填充颜色，使用16进制颜色代码赋值，如：#FFAA00
+      //   fillColor: 'rgba(255,255,255,0.3)',
+      //   //多边形填充透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
+      //   fillOpacity: 1,
+      //   //轮廓线样式，实线:solid，虚线:dashed
+      //   strokeStyle:'dashed',
+      //   /*勾勒形状轮廓的虚线和间隙的样式，此属性在strokeStyle 为dashed 时有效， 此属性在
+      //       ie9+浏览器有效 取值：
+      //       实线：[0,0,0]
+      //       虚线：[10,10] ，[10,10] 表示10个像素的实线和10个像素的空白（如此反复）组成的虚线
+      //       点画线：[10,2,10]， [10,2,10] 表示10个像素的实线和2个像素的空白 + 10个像素的实
+      //       线和10个像素的空白 （如此反复）组成的虚线*/
+      //   strokeDasharray:[10,2,10]
+      // })
+      // polygon1.setPath(pathArray)
+      // this.map.add(polygon1)
+
+      this.map.add([polygon])
+    },
+    highlightPudong() {
+      // new AMap.DistrictSearch({
+      //   level: 'district',
+      //   subdistric: 1,
+      // }).search('浦东新区', (status, result) => {
+      //   console.log('---浦东新区街镇---', result.districtList[0].districtList)
+      // })
+
+      // 给浦东新区添加蓝色遮罩
+      // new AMap.DistrictSearch({
+      //   level: 'district',
+      //   extensions: 'all',
+      //   subdistric: 1,
+      // }).search('浦东新区', (staus, result) => {
+      //   var bounds = result.districtList[0].boundaries
+      //   var polygon = new AMap.Polygon({
+      //     strokeWeight: 1,
+      //     path: bounds[0],
+      //     fillOpacity: 0.4,
+      //     fillColor: '#80d8ff',
+      //     strokeColor: '#0091ea'
+      //   })
+      //   this.map.add([polygon])
+      // })
+
+      // 只显示浦东新区，其他置灰
+      // new AMap.DistrictSearch({
+      //   extensions:'all',
+      //   subdistrict:0
+      // }).search('浦东新区',(status,result) => {
+      //   // 外多边形坐标数组和内多边形坐标数组
+      //   const outer = [
+      //     new AMap.LngLat(-360,90,true),
+      //     new AMap.LngLat(-360,-90,true),
+      //     new AMap.LngLat(360,-90,true),
+      //     new AMap.LngLat(360,90,true),
+      //   ]
+      //   const holes = result.districtList[0].boundaries
+
+      //   const pathArray = [
+      //     outer
+      //   ]
+      //   pathArray.push.apply(pathArray,holes)
+      //   const polygon = new AMap.Polygon( {
+      //     pathL:pathArray,
+      //     //线条颜色，使用16进制颜色代码赋值。默认值为#006600
+      //     strokeColor: 'rgb(20,164,173)',
+      //     strokeWeight: 4,
+      //     //轮廓线透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
+      //     strokeOpacity:0.5,
+      //     //多边形填充颜色，使用16进制颜色代码赋值，如：#FFAA00
+      //     fillColor: 'rgba(255,255,255,0.3)',
+      //     //多边形填充透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
+      //     fillOpacity: 1,
+      //     //轮廓线样式，实线:solid，虚线:dashed
+      //     strokeStyle:'dashed',
+      //     /*勾勒形状轮廓的虚线和间隙的样式，此属性在strokeStyle 为dashed 时有效， 此属性在
+      //         ie9+浏览器有效 取值：
+      //         实线：[0,0,0]
+      //         虚线：[10,10] ，[10,10] 表示10个像素的实线和10个像素的空白（如此反复）组成的虚线
+      //         点画线：[10,2,10]， [10,2,10] 表示10个像素的实线和2个像素的空白 + 10个像素的实
+      //         线和10个像素的空白 （如此反复）组成的虚线*/
+      //     strokeDasharray:[10,2,10]
+      //   })
+      //   polygon.setPath(pathArray)
+      //   this.map.add(polygon)
+      // })
+    },
+  },
+  computed: {
+    tableHeight() {
+      return screen.height / 2
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+#container
+  width 100%
+  height 100%
+  resize both
+  position relative
+  cursor auto
+  .menu
+    position absolute
+    width 18%
+    text-align left
+    top 1rem
+    left 1rem
+    z-index 100
+    max-height 90vh
+    overflow-y auto
+</style>
+<style lang="stylus">
+.amap-logo
+.amap-copyright
+  display none !important
+.amap-icon
+  img
+    width 100%
+    height 100%
+.menu
+  .ivu-collapse-content
+    max-height 80vh
+    overflow-y auto
+    overflow-x hidden
+    padding 0 1rem
+    .ivu-collapse-content-box
+      padding 1rem 0
+      button
+        text-align left
+        font-size 1rem
+</style>