1 一般使用

使用地图进行基础展示，不添加其它功能；

• 1）添加 DOM 节点：

<div style="height:100%" id="container" tabindex="0"></div>

• 2）引入 AMap：

import AMap from 'AMap'

• 3）在 methods 中定义初始化函数：

init() {
  const me = this
  const map = new AMap.Map('container', {
    center: [120.514709, 31.277568],
    resizeEnable: true,
    zoom: 14,
    lang: 'zh-CN'
  })
  // 此处添加 map 的点击事件，用于获取点击的地理位置
  // getLnglat 为回调函数，可以在点击事件中获取位置
  // AMap.event.addListener(map, 'click', getLnglat)

  // 加载只显示指定区域的相关插件
  // 只显示指定的城市，其它城市被覆盖
  AMap.plugin('AMap.DistrictSearch', function() {
    // 创建实例
    new AMap.DistrictSearch({
      extensions: 'all',
      subdistrict: 0
    }).search('苏州', function(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,
        // 边界的颜色
        strokeColor: 'rgb(20,164,173)',
        strokeWeight: 4,
        strokeOpacity: 0.5,
        // 以外地区覆盖的颜色
        fillColor: '#ccffff',
        fillOpacity: 1,
        strokeStyle: 'dashed',
        strokeDasharray: [10, 2, 10]
      })
      polygon.setPath(pathArray)
      map.add(polygon)
    })
  })
}

• 4）在 mounted 中执行；

mounted() {
  this.init()
},

2 添加自定义区块

在项目中遇到需要在地图上添加小区区块的需求，结合 geojson 实现；
使用 wms 实现较为复杂，且需另外建立服务；
以下均在 init 函数中添加；

• 1）引入 geojson

import geoJsonData2 from './Export_Output'

• 2）创建实例对象

const geoJson = new AMap.GeoJSON({
  // GeoJSON对象
  geoJSON: geoJsonData2,
  // 还可以自定义getMarker和getPolyline
  getPolygon: function(geojson, lnglats) {
    return new AMap.Polygon({
      path: lnglats,
      fillOpacity: 0.8,
      strokeColor: 'rgba(0, 0, 0, 0.3)',
      fillColor: 'rgba(0, 0, 205, 0.6)'
    })
  }
})

• 3）如果需要可以添加点击对象

geoJson.on('click', function(ev) {
  // _geoJsonProperties 用于获取 geojson 每个元素中的 properties 属性值
  // properties 是创建 shp 文件时添加的，在转为 geojson 时会被放置在 properties 中
  me.$emit('set-dma-and-visible', ev.target.Ce.extData._geoJsonProperties['小区'])
})

• 4）将区块实例添加至地图上

map.add(geoJson)

• 5）另注：
  • shp 文件转 geojson 可以在 https://mapshaper.org/ 上实现；

3 添加标注点和文本框

向地图的指定坐标添加标记点和文本框，并绑定点击事件；
以下均在 init 函数中添加；

for (const i of this.pointInfoList) {
	// 添加标记圆点
   const circleMarker = new AMap.CircleMarker({
     // 此处设置圆心
     center: [i[0], i[1]],
     radius: 8,
     strokeColor: 'white',
     strokeWeight: 2,
     strokeOpacity: 0.5,
     fillColor: this.selectedPsn === i[4].toString() ? 'rgba(255,0,0,1)' : 'rgba(0,0,255,1)',
     // fillColor: 'rgba(0,0,255,1)',
     fillOpacity: 0.5,
     zIndex: 10,
     bubble: true,
     cursor: 'pointer',
     // 设置可点击属性
     clickable: true,
     // 以下两个都是自定义属性
     psn: i[4],
     pointIndex: i[5]
   })
   // 将定义的标记点实例添加到地图中
   circleMarker.setMap(map)
   map.add(circleMarker)

	// 添加文本框
   const text = new AMap.Text({
     // 设置文本内容，html 也可以字符串形式放入
     text: i[2],
     anchor: 'center',
     draggable: true,
     cursor: 'pointer',
     // 设置文本框样式
     style: {
       'padding': '5px 5px',
       'margin-bottom': '5px',
       'border-radius': '8px',
       'background-color': this.selectedPsn === i[4].toString() ? 'rgba(51,153,255,0.8)' : 'rgba(255,255,255,0.5)',
       'border-width': 0,
       'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
       'text-align': 'center',
       'font-size': '14px',
       'color': this.selectedPsn === i[4].toString() ? 'white' : '#000'
     },
     // 设置偏置，单位是像素，不是经纬度
     offset: new AMap.Pixel(30, -24),
     // 设置坐标
     position: [i[0], i[1]],
     // 自定义属性
     psn: i[4],
     pointIndex: i[5]
   })
   text.setMap(map)
   map.add(text)

   // 定义点击事件
   const markerClickEvent = function(e) {
     me.$emit('clickPoint', e.target.w.psn, e.target.w.pointIndex)
     me.selectedPosition = [i[0], i[1]]
   }
   // 给文本框和标记原点添加点击事件
   AMap.event.addListener(text, 'click', markerClickEvent)
   AMap.event.addListener(circleMarker, 'click', markerClickEvent)
 }