vue前端开发仿钉图系列（4）右侧行政区绘制的开发详解

　　行政区绘制是基于高德地图的api，需要在高德提供的代码基础上做好html代码在vue页面上的适配。核心功能就是选择省市区，可以根据需要绘制对应选中的地图图层。整理总结不易，如需全部代码，请联系我15098950589（微信同号）。和以往一样，先发一下效果图。

 

 

　　行政区查询核心代码如下

 

 

getData(data, level) {
var citySelect = document.getElementById('city');
var districtSelect = document.getElementById('district');
var areaSelect = document.getElementById('street');

 

var bounds = data.boundaries;

 

if (bounds) {
var polygon
for (var i = 0, l = bounds.length; i < l; i++) {
polygon = new AMap.Polygon({
map: this.map,
strokeWeight: 1,
strokeColor: '#0091ea',
fillColor: '#80d8ff',
fillOpacity: 0.2,
path: bounds[i]
});
//console.log('选择面锚点',bounds[i])
this.districtPolygons.push(polygon);
}

 

this.surArea = parseFloat(polygon.getArea(false) / 1000000)
.toFixed(2) + ''
this.polygonMarkers = polygon.getOptions().path
console.log('选择面锚点', polygon.getOptions().path)
this.map.setFitView(); //地图自适应
}

 

//清空下一级别的下拉列表
if (level === 'province') {
citySelect.innerHTML = '';
if (districtSelect) {
districtSelect.innerHTML = '';
}
if (areaSelect) {
areaSelect.innerHTML = '';
}

 

} else if (level === 'city') {
if (districtSelect) {
districtSelect.innerHTML = '';
}
if (areaSelect) {
areaSelect.innerHTML = '';
}
} else if (level === 'district') {
if (areaSelect) {
areaSelect.innerHTML = '';
}
}

 

var subList = data.districtList;
if (subList) {
var contentSub = new Option('--请选择--');
var curlevel = subList[0].level;
var curList = document.querySelector('#' + curlevel);
console.log(curlevel)
if (curList) {
curList.add(contentSub);
}

 

for (var i = 0, l = subList.length; i < l; i++) {
var name = subList[i].name;
var levelSub = subList[i].level;
var cityCode = subList[i].citycode;
contentSub = new Option(name);
contentSub.setAttribute("value", levelSub);
contentSub.center = subList[i].center;
contentSub.adcode = subList[i].adcode;
if (curList) {
curList.add(contentSub);
}
}
}
if (level === 'district') {
setTimeout(() => {
//选择到地区弹出编辑页面
this.layerType = 2;
this.rightEditVisible = true;
this.isFromEdit = false;
setTimeout(() => {
this.$refs.rightEdit.initData()
}, 500)
}, 1000)
}
},
search(obj, e) {
// alert(this.sProvince)
// console.log('地区', obj)
console.log(obj)
console.log(e)
//清除地图上所有覆盖物
for (var i = 0, l = this.districtPolygons.length; i < l; i++) {
this.districtPolygons[i].setMap(null);
}
var option = obj[obj.options.selectedIndex];
var keyword = option.text; //关键字
var adcode = option.adcode;

 

console.log('当前选中项', option, keyword, adcode)
this.district.setLevel(option.value); //行政区级别
this.district.setExtensions('all');
//行政区查询
//按照adcode进行查询可以保证数据返回的唯一性
this.district.search(adcode, function(status, result) {
if (status === 'complete') {
getData(result.districtList[0], obj.id);
}
});
},

 

 

 　　整理总结不易，如需全部代码，请联系我15098950589（微信同号）。