目的
为了准确的对相关各省市县区的边界范围及标注,用于自定义高清矢量地图。
效果图
先上一张效果图,以家乡渭南为例:
(代码中做了判断,仅为县级区域时显示背景色,省市均仅显示边界轮廓)
选择颜色
选择区域
核心代码
district = new AMap.DistrictSearch(opts);
district.search('6101', function(status, result) {
if(status=='complete'){
getData(result.districtList[0],0,0);
}
});
function getData(data,level) {
//设置省、市不显示背景
var fillOpacityValue = 0.2;
if (level == 'province' || level == 'city') {
fillOpacityValue = 0;
}
var bounds = data.boundaries;
if (bounds) {
for (var i = 0, l = bounds.length; i < l; i++) {
var polygon = new AMap.Polygon({
map: map,
strokeWeight: 1,
strokeColor: '#0091ea',
fillColor: selectValue,
fillOpacity: fillOpacityValue,
path: bounds[i]
});
polygons.push(polygon);
}
map.setFitView();//地图自适应
}
//清空下一级别的下拉列表
if (level === 'province') {
citySelect.innerHTML = '';
districtSelect.innerHTML = '';
areaSelect.innerHTML = '';
} else if (level === 'city') {
districtSelect.innerHTML = '';
areaSelect.innerHTML = '';
} else if (level === 'district') {
areaSelect.innerHTML = '';
}
var subList = data.districtList;
if (subList) {
var contentSub = new Option('--请选择--');
var curlevel = subList[0].level;
var curList = document.querySelector('#' + curlevel);
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;
curList.add(contentSub);
}
}
}