import { map, AMap, onMapMounted } from './index'
|
|
// 行政区划缓存
|
var districtPolygonMap = new Map()
|
// 当前显示的区县
|
var activeDistrict = undefined
|
export default {
|
// 绘制区县边界
|
drawDistrict(districtName, isNew) {
|
if (!districtName) return
|
onMapMounted(() => {
|
if (!isNew && districtPolygonMap.has(districtName)) {
|
const { polygon, mask } = districtPolygonMap.get(districtName)
|
map.add(polygon)
|
map.setFitView(polygon)
|
map.setMask(mask)
|
activeDistrict = polygon
|
} else {
|
var district = new AMap.DistrictSearch({
|
extensions: 'all', //返回行政区边界坐标等具体信息
|
level: 'district', //设置查询行政区级别为区
|
})
|
district.search(districtName, function (status, result) {
|
if (status === 'complete') {
|
var bounds = result.districtList[0].boundaries //获取边界信息
|
var mask = []
|
var polygon = []
|
for (var i = 0; i < bounds.length; i++) {
|
mask.push([bounds[i]])
|
|
//生成行政区划 polygon
|
const districtPolygon = new AMap.Polygon({
|
map: map, //显示该覆盖物的地图对象
|
strokeWeight: 2, //轮廓线宽度
|
path: bounds[i], //多边形轮廓线的节点坐标数组
|
fillOpacity: 0, //多边形填充透明度
|
fillColor: '#0077ff',
|
strokeColor: '#99ffff', //线条颜色
|
})
|
|
polygon.push(districtPolygon)
|
}
|
activeDistrict = polygon
|
districtPolygonMap.set(districtName, { polygon, mask })
|
map.setFitView(polygon, true)
|
map.setMask(mask)
|
}
|
})
|
}
|
})
|
},
|
removeDistrict() {
|
onMapMounted(() => {
|
if (activeDistrict) {
|
map.remove(activeDistrict)
|
activeDistrict = undefined
|
}
|
})
|
},
|
districtLayer(districtName) {
|
onMapMounted(() => {
|
//2、创建省市简易行政区图层
|
var distProvince = new AMap.DistrictLayer.Province({
|
zIndex: 10, //设置图层层级
|
zooms: [2, 15], //设置图层显示范围
|
adcode: districtName, //设置行政区 adcode
|
depth: 2, //设置数据显示层级，0：显示国家面，1：显示省级，当国家为中国时设置depth为2的可以显示市一级
|
})
|
// 3、设置行政区图层样式
|
distProvince.setStyles({
|
'stroke-width': 2, //描边线宽
|
fill: function (data) {
|
//设置区域填充颜色，可根据回调信息返回区域信息设置不同填充色
|
//回调返回区域信息数据，字段包括 SOC(国家代码)、NAME_ENG(英文名称)、NAME_CHN(中文名称)等
|
//国家代码名称说明参考 https://a.amap.com/jsapi_demos/static/demo-center/js/soc-list.json
|
return '#ffffffe7'
|
},
|
})
|
//4、将简易行政区图层添加到地图
|
map.add(distProvince)
|
})
|
},
|
}
|
