1 一般使用

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

• 1）添加 DOM 节点：

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

• 2）引入 AMap：

import AMap from 'AMap'

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

init() {const me = thisconst 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].boundariesconst 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和getPolylinegetPolygon: 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/ 上实现；