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

最新推荐文章于 2024-06-30 14:45:53 发布

逆袭的菜鸟X

最新推荐文章于 2024-06-30 14:45:53 发布

阅读量2.5k

点赞数 1

分类专栏：我的前端

本文链接：https://blog.csdn.net/weixin_36445197/article/details/105178700

版权

我的前端专栏收录该内容

87 篇文章 4 订阅

订阅专栏

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、效果图与完整代码

效果图

源码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="https://a.amap.com/Loca/static/dist/jquery.min.js"></script>
    <script src="https://webapi.amap.com/maps?key=2da678792428d85bd3f0c0e26b25c54b&v=1.4.15&plugin=Map3D"></script>
    <script src="https://webapi.amap.com/loca?key=2da678792428d85bd3f0c0e26b25c54b&v=1.3.0"></script>
</head>

<body>
    <div id='map' style='width:800px; height:600px;'></div>
    <script>
        window.onload = function() {
            const map = new AMap.Map('map', {
                pitch: 50, // 地图俯仰角度，有效范围 0 度- 83 度
                viewMode: '3D', // 地图模式
                mapStyle: 'amap://styles/8b1ff64d2c968f4f84c2a5f5ef562cfb', // 地图主题
                zoom: 8, //设置地图的缩放级别
                zooms: [8, 20], // 缩放级别限制
                center: [113.509464, 34.662878],
            });
            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;

                    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);
                    }

                })
            })
        }
    </script>
</body>

</html>

逆袭的菜鸟X

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
H5数据可视化(高德地图绘制行政区)

1、高德地图可视化项目搭建参考我的上篇文章完成基本搭建：H5数据可视化(高德地图构建项目)2、使用高德行政区查询该部分主要参照官方教程即可，其中使用行政区划查询服务前要先引入该插件，具体的引入方式请参考教程：插件的使用。下面列出我的代码实例，官方文档教程点这里 AMap.plugin('AMap.DistrictSearch', function() { ...
复制链接

扫一扫

专栏目录