高德地图获取行政区域以及中心点

最新推荐文章于 2024-07-07 21:25:10 发布

牟云飞

最新推荐文章于 2024-07-07 21:25:10 发布

阅读量5.7k

点赞数 1

分类专栏：地图文章标签：前端 javascript html

本文为博主牟云飞原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/myfmyfmyfmyf/article/details/127574987

版权

地图专栏收录该内容

14 篇文章

订阅专栏

博客介绍了高德地图设置行政区域及自定义文本内容的方法，文本可自动置于中心，位置偏差时能手动调整。获取文本中心点和设定文本位置较耗时，使用turf.js库处理地图算法，还对入参和高德返回数据进行处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

高德地图设置行政区域以及自定义文本内容，文本内容能够自动放置到中心位置，如果位置有偏差支持手动调整。(ps: turf.js地理空间分析库，处理各种地图算法)

/**
 * type，显示级别district 、 province、city
 * areaname ,行政区名字
 * labePosition,文字位置，没有手动设置中心点，自动设置
 * */
drawBounds('district','越秀区',[113.28637,23.127901]);

在这个方法功能里面，耗费点时间的是获取文本的中心点，设置自定义的文本样式之后，文本的位置设定耗费了一点点时间，通过设置最初点+中间点计算平均不理想，然后又通过turfjs库处理(ps: turf.js地理空间分析库，处理各种地图算法)进行处理，由于还需要进行处理入参的处理，所以又找了找高德返回的数据，发现 result.districtList[0] 返回的变量中含有中心点：

var bounds_center = result.districtList[0].center;

尝试后发现部分坐标有点便宜，然后增加手动调整，当文字位置没有手动设置中心点时，自动设置文字中心点，源代码如下

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>行政区边界查询</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    <style>
        html,body,#container{
            margin:0;
            height:100%;
        }
        .input-item-text{
            width:7rem;
        }
    </style>
</head>
<body>
<div id="container"></div>
<div class="input-card" style="visibility: hidden">
    <label style='color:grey'>行政区边界查询</label>
    <div class="input-item">
        <div class="input-item-prepend">
            <span class="input-item-text" >行政级别</span>
        </div>
        <select id="level">
            <option value="district">district</option>
            <option value="city">city</option>
            <option value="province">province</option>
        </select>

    </div>
    <div class="input-item">
        <div class="input-item-prepend">
            <span class="input-item-text" >名称/adcode</span>
        </div>
        <input id='district' type="text" value='朝阳区'>

    </div>
    <input id="draw" type="button" class="btn" value="查询" />
</div>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=改成自己key&plugin=AMap.DistrictSearch"></script>
<script type="text/javascript" src="turfjs/turf.min.js"></script>
<script type="text/javascript">


    //初始化地图对象，加载地图
    var map = new AMap.Map("container", {
        resizeEnable: true,
        center: [113.259952,23.136613],//地图中心点
        zoom: 9.5, //地图显示的缩放级别
        mapStyle: 'amap://styles/35bcbfacdd429dfe3d4fc5848ffa392e',
        showBuildingBlock: false
    });

    var district = null;
    var polygons=[];

    /**
     * type，显示级别district 、 province、city
     * areaname ,行政区名字
     * labePosition,文字位置
     * */
    function drawBounds(type,areaname,labePosition) {
        //加载行政区划插件
        if(!district){
            //实例化DistrictSearch
            var opts = {
                subdistrict: 0,   //获取边界不需要返回下级行政区
                extensions: 'all',  //返回行政区边界坐标组等具体信息
                level: 'district'  //查询行政级别为 市
            };
            district = new AMap.DistrictSearch(opts);
        }
        //行政区查询
        district.setLevel(type);
        district.search(areaname, function(status, result) {
            console.log("---document.getElementById('level').value:",document.getElementById('level').value);

            var bounds = result.districtList[0].boundaries;

            var bounds_center = result.districtList[0].center;
            if (bounds) {
                for (var i = 0, l = bounds.length; i < l; i++) {
                    //生成行政区划polygon
                    var polygon = new AMap.Polygon({
                        strokeWeight: 3,
                        path: bounds[i],
                        fillOpacity: 0,
                        fillColor: '#80d8ff',
                        strokeColor: '#80d8ff'
                    });
                    polygons.push(polygon);
                }
            }
            map.add(polygon);
            //计算中心点

            var centroid =bounds_center;
            console.log("centroid,",centroid);
            let polygonsCenter = bounds_center;
            if(labePosition!=null&&labePosition!=''){
                //如果手动设置了中心点
                 polygonsCenter = labePosition;
            }

            // 创建纯文本标记
            var text = new AMap.Text({
                text:areaname,
                anchor:'center', // 设置文本标记锚点
                draggable:true,
                cursor:'pointer',
                angle:0,
                style:{
                    'padding': '.75rem 1.25rem',
                    'margin-bottom': '1rem',
                    'border-radius': '.25rem',
                    'background-color': 'rgba(255,255,255,0)',
                    'width': '15rem',
                    'border-width': 0,
                    'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, 0)',
                    'text-align': 'center',
                    'font-size': '12px',
                    'color': 'rgba(255,255,255,1)'
                },
                position: polygonsCenter
            });
            text.setMap(map);
        });
    }

    


    /**
     * 画行政区
     */
    function initArea(){
        map.remove(polygons)//清除上次结果
        polygons = [];
        drawBounds('district','越秀区',[113.28637,23.127901]);//没有手动设置中心点，自动设置
        drawBounds('district','天河区',[113.36117,23.155445]);//没有手动设置中心点，自动设置
        drawBounds('district','白云区',[113.272712,23.25706]);//没有手动设置中心点，自动设置
        drawBounds('district','从化区');//没有手动设置中心点，自动设置
        drawBounds('district','荔湾区',[113.218969,23.067025]);//没有手动设置中心点，自动设置
        drawBounds('district','黄埔区',[113.481006,23.180997]);//没有手动设置中心点，自动设置
        drawBounds('district','花都区');//没有手动设置中心点，自动设置
        drawBounds('district','番禺区');//没有手动设置中心点，自动设置
        drawBounds('district','南沙区',[113.566774,22.706145]);//没有手动设置中心点，自动设置
        drawBounds('district','海珠区',[113.316774,23.086145]);//没有手动设置中心点，自动设置
        drawBounds('district','增城区',[113.716774,23.286145]);//没有手动设置中心点，自动设置

        map.setFitView(polygons);//视口自适应
    }

    initArea();
</script>
</body>
</html>