前言

此系列共分為以下幾篇

• 《vue中高德地圖的使用》
• 《vue中基于高德的多行政區(qū)域覆蓋》 （本篇）
• 《vue中高德搭配echarts做數(shù)據(jù)遷徙流線圖》

本篇效果

行政區(qū)域展示.png

實(shí)現(xiàn)步驟

1. 思路分析

基于上一篇的基礎(chǔ)講解，再來看本篇目的，行政區(qū)域展示（秒變及背景），其實(shí)就是基于在經(jīng)緯度坐標(biāo)系上將某個(gè)/些行政區(qū)域規(guī)劃出來。如果仔細(xì)看官方文檔的前端er，則更是發(fā)現(xiàn)在文檔中提供靈了一個(gè)行政區(qū)域上色的工具方法。因此基礎(chǔ)思路如下：

1. 加載基礎(chǔ)坐標(biāo)系；
2. 給定具體行政區(qū)域上色；
3. 多行政區(qū)域循環(huán)；

2. 代碼分析

==詳細(xì)代碼在文章底部==

初始化地圖

// 略 見文章底部詳細(xì)代碼

行政區(qū)域蒙層加載

areaBG (cityName) {
    // 加載行政區(qū)劃插件
    AMap.service('AMap.DistrictSearch', function() {
        let opts = {
        subdistrict: 1,   // 返回下一級(jí)行政區(qū)
        extensions: 'all',  // 返回行政區(qū)邊界坐標(biāo)組等具體信息
        level: 'city'  // 查詢行政級(jí)別為市
        };
        // 實(shí)例化DistrictSearch
        let district = new AMap.DistrictSearch(opts);
        district.setLevel('district');
        // 行政區(qū)查詢
        district.search(`${cityName}`, function(status, result){
        // 獲取邊界信息
        let bounds = result.districtList[0].boundaries;
        // 存放行政區(qū)劃
        let polygons = [];
        if (bounds) {
            for (let i = 0, l = bounds.length; i < l; i++) {
            //生成行政區(qū)劃polygon
            let polygon = new AMap.Polygon({
                map: new AMap.Map("map", {
                    center: [105.397428, 35.90923],
                    zoom: 5
                });,   // 坐標(biāo)系及主題
                strokeWeight: 1,   
                path: bounds[i],
                fillOpacity: 0.2,
                fillColor: 'rgba(71,228,194,0.44)',
                strokeColor: 'rgba(83,204,79,0.65)'
            });
            polygons.push(polygon);
            }
        }
        });
    });
}

方法調(diào)用

this.areaBG('遼寧省');

得到如下地圖示例：(此處添加了個(gè)人的'mapStyle')

行政區(qū)域-遼寧省.png

那么，如果是多個(gè)行政區(qū)域，如何循環(huán)遍歷呢？

多區(qū)域加載

機(jī)智的各位已經(jīng)發(fā)現(xiàn)了,我們前面其實(shí)已經(jīng)把城市名字提出來了，那么直接遍歷即可。

// 行政區(qū)域加載
let cities = ['北京市','鄭州市','西安市','呼和浩特','遼寧省'];
for(let i = 0; i < _cities.length; i ++){
    this.areaBG(map, cities[i]);
}

至此，目的完成：

行政區(qū)域展示.png

附：代碼

<div class="map" id="map"></div>

methods: {
    // 加載行政區(qū)域
    areaBG (map, cityName) {
        AMap.service('AMap.DistrictSearch', function () {
            let opts = {
                subdistrict: 1,   // 返回下一級(jí)行政區(qū)
                extensions: 'all',  // 返回行政區(qū)邊界坐標(biāo)組等具體信息
                level: 'city'  // 查詢行政級(jí)別為市
            };
            // 實(shí)例化DistrictSearch
            let district = new AMap.DistrictSearch(opts);
            district.setLevel('district');
            // 行政區(qū)查詢
            district.search(`${cityName}`, function (status, result) {
                // 獲取邊界信息
                let bounds = result.districtList[0].boundaries;
                let polygons = [];
                if (bounds) {
                    for (let i = 0, l = bounds.length; i < l; i++) {
                        // 生成行政區(qū)劃polygon
                        let polygon = new AMap.Polygon({
                            map: map,
                            strokeWeight: 1,
                            path: bounds[i],
                            fillOpacity: 0.2,
                            fillColor: 'rgba(71,228,194,0.44)',
                            strokeColor: 'rgba(83,204,79,0.65)'
                        });
                        polygons.push(polygon);
                    }
                }
            });
        });
    },
    // 初始化地圖，并加載行政區(qū)域
    mapInit () {
        let map = new AMap.Map("partnerMap", {
            center: [105.397428, 35.90923],
            mapStyle: "amap://styles/bfb1bb3feb0db7082367abca96b8d214", // 設(shè)置地圖的顯示樣式
            zoom: 5
        });

        // 行政區(qū)域加載
        let cities = ['北京市','鄭州市','西安市','呼和浩特','遼寧省'];
            for(let i = 0; i < _cities.length; i ++){
            this.areaBG(map, cities[i]);
        }
    }
}

mounted () {
    this.mapInit();
}