vue中基于高德的多行政区域覆盖

前言

此系列共分为以下几篇

  • 《vue中高德地图的使用》
  • 《vue中基于高德的多行政区域覆盖》 (本篇)
  • 《vue中高德搭配echarts做数据迁徙流线图》

本篇效果

行政区域展示.png

实现步骤

1. 思路分析

基于上一篇的基础讲解,再来看本篇目的,行政区域展示(秒变及背景),其实就是基于在经纬度坐标系上将某个/些行政区域规划出来。如果仔细看官方文档的前端er,则更是发现在文档中提供灵了一个行政区域上色的工具方法。因此基础思路如下:

  1. 加载基础坐标系;
  2. 给定具体行政区域上色;
  3. 多行政区域循环;

2. 代码分析

==详细代码在文章底部==

初始化地图
// 略 见文章底部详细代码
行政区域蒙层加载
areaBG (cityName) {
    // 加载行政区划插件
    AMap.service('AMap.DistrictSearch', function() {
        let opts = {
        subdistrict: 1,   // 返回下一级行政区
        extensions: 'all',  // 返回行政区边界坐标组等具体信息
        level: 'city'  // 查询行政级别为市
        };
        // 实例化DistrictSearch
        let district = new AMap.DistrictSearch(opts);
        district.setLevel('district');
        // 行政区查询
        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++) {
            //生成行政区划polygon
            let polygon = new AMap.Polygon({
                map: new AMap.Map("map", {
                    center: [105.397428, 35.90923],
                    zoom: 5
                });,   // 坐标系及主题
                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);
            }
        }
        });
    });
}
方法调用
this.areaBG('辽宁省');

得到如下地图示例:(此处添加了个人的'mapStyle')

行政区域-辽宁省.png

那么,如果是多个行政区域,如何循环遍历呢?

多区域加载

机智的各位已经发现了,我们前面其实已经把城市名字提出来了,那么直接遍历即可。

// 行政区域加载
let cities = ['北京市','郑州市','西安市','呼和浩特','辽宁省'];
for(let i = 0; i < _cities.length; i ++){
    this.areaBG(map, cities[i]);
}

至此,目的完成:


行政区域展示.png

附:代码

<div class="map" id="map"></div>
methods: {
    // 加载行政区域
    areaBG (map, cityName) {
        AMap.service('AMap.DistrictSearch', function () {
            let opts = {
                subdistrict: 1,   // 返回下一级行政区
                extensions: 'all',  // 返回行政区边界坐标组等具体信息
                level: 'city'  // 查询行政级别为市
            };
            // 实例化DistrictSearch
            let district = new AMap.DistrictSearch(opts);
            district.setLevel('district');
            // 行政区查询
            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++) {
                        // 生成行政区划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);
                    }
                }
            });
        });
    },
    // 初始化地图,并加载行政区域
    mapInit () {
        let map = new AMap.Map("partnerMap", {
            center: [105.397428, 35.90923],
            mapStyle: "amap://styles/bfb1bb3feb0db7082367abca96b8d214", // 设置地图的显示样式
            zoom: 5
        });

        // 行政区域加载
        let cities = ['北京市','郑州市','西安市','呼和浩特','辽宁省'];
            for(let i = 0; i < _cities.length; i ++){
            this.areaBG(map, cities[i]);
        }
    }
}
mounted () {
    this.mapInit();
}

推荐阅读更多精彩内容

  • 基于Vue的一些资料 内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 element★...
    尝了又尝阅读 307评论 0 1
  • UI组件 element- 饿了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的组件库 m...
    柴东啊阅读 9,730评论 8 112
  • UI组件 element- 饿了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的组件库 m...
    小姜先森o0O阅读 4,717评论 2 65
  • UI组件 element- 饿了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的组件库 m...
    王喂马_阅读 4,177评论 4 68
  • UI组件 element- 饿了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的组件库 m...
    你猜_3214阅读 8,508评论 3 113