import { map, AMap, onMapMounted } from './index' // 行政区划缓存 var districtPolygonMap = new Map() // 当前显示的区县 var activeDistrict = undefined export default { // 绘制区县边界 drawDistrictMask(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) } }) } }) }, // 绘制区县边界 drawDistrict(districtName, isNew) { if (!districtName) return onMapMounted(() => { if (!isNew && districtPolygonMap.has(districtName)) { const districtPolygon = districtPolygonMap.get(districtName) map.add(districtPolygon) map.setFitView(districtPolygon) activeDistrict = districtPolygon } else { var district = new AMap.DistrictSearch({ extensions: 'all', //返回行政区边界坐标等具体信息 level: 'district', //设置查询行政区级别为区 }) district.search(districtName, function (status, result) { var bounds = result.districtList[0].boundaries //获取边界信息 if (bounds) { for (var i = 0; i < bounds.length; i++) { //生成行政区划 polygon const districtPolygon = new AMap.Polygon({ map: map, //显示该覆盖物的地图对象 strokeWeight: 1, //轮廓线宽度 path: bounds[i], //多边形轮廓线的节点坐标数组 fillOpacity: 0.4, //多边形填充透明度 fillColor: '#0077ff', strokeColor: '#CC66CC', //线条颜色 }) districtPolygonMap.set(districtName, districtPolygon) activeDistrict = districtPolygon map.setFitView(districtPolygon, true) } } }) } }) }, 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) }) }, }