H5数据可视化(高德地图绘制行政区)

1、高德地图可视化项目搭建

参考我的上篇文章完成基本搭建：H5数据可视化(高德地图构建项目)

2、使用高德行政区查询

该部分主要参照官方教程即可，其中使用行政区划查询服务前要先引入该插件，具体的引入方式请参考教程：插件的使用。
下面列出我的代码实例，官方文档教程点这里

 AMap.plugin('AMap.DistrictSearch', function() {
                var opts = {
                    subdistrict: 0, // 获取边界不需要返回下级行政区
                    extensions: "all", // 返回行政区边界坐标组等具体信息
                    level: "city" // 查询行政级别为 市
                };
                var district = new AMap.DistrictSearch(opts);
                district.search('郑州市', function(status, result) {
                    // 查询成功时，result即为对应的行政区信息
                    var bounds = result.districtList[0].boundaries;
                    // ...下一步绘制覆盖物在这里进行
                })
            })

3、绘制行政区覆盖

高德地图绘制覆盖物教程

                    for (var i = 0, l = bounds.length; i < l; i++) {
                        var polygonbox = new AMap.Polygon({
                            strokeWeight: 3,
                            path: bounds[i],
                            fillOpacity: 0.9,
                            fillColor: "#6e3fc8",
                            strokeColor: "#6e3fc8",
                            extData: {
                                IDname: "郑州",
                                Center: "传递内容"
                            }
                        });
                        map.add(polygonbox);
                    }

4、效果图与完整代码

效果图

源码：