百度地图获取 省、市、县 边界

百度地图api

添加覆盖物

https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/addOverlay

 

 

 

 

 获取边界的方法

https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html#a8b54

 

 示例

 获取数据方式1

 可以获取 rs.boundaries 里这种形式的字符串，但是这种字符串每次获取后使用都需要先处理成数组，每次使用都要处理也挺麻烦的，还不如直接转成json数组字符串后再保存

121.432606, 30.687898;121.432778, 30.686555;121.433259, 30.685891;121.433826, 30.68603;121.434096, 30.686618;121.434582, 30.686869;121.436222, 30.6871;121.436011, 30.687458;121.435832, 30.687534;121.435593, 30.687583;121.435265, 30.687603;121.434488, 30.687682;121.433905, 30.687776;121.433292, 30.687948;121.432903, 30.688057;121.432606, 30.687898

 

 

 获取数据方式2

也可以获取多段线的经纬度坐标点，然后转成json字符串，但是本身经纬度坐标数据就很多，再在每个坐标点的前面加 lng 和 lat 描述，无意是增大了文件的体积

 

 

 

 

 获取数据方式3

 保存成下面这种数组格式应该是使用快捷有占用空间小的形式了

[[117.09158, 32.536075], [117.091907, 32.536158], [117.092353, 32.536217], [117.093127, 32.536233], [117.093634, 32.536193], [117.09411, 32.536127], [117.094645, 32.536138], [117.095182, 32.536149], [117.096283, 32.536526], [117.096626, 32.536659], [117.097101, 32.536732], [117.097488, 32.536765], [117.09789, 32.536912], [117.098337, 32.537061], [117.09865, 32.537231], [117.099112, 32.537543], [117.099632, 32.538009], [117.09996, 32.538148],

  

    //字符串封装为json字符串
    function spiltStr(city) {
        var t = new Date().getTime();
        var points = "[";
        var separator = "";
        $.each(city.split(";"), function(index, value) {
            points += separator + "[" + value + "]";
            separator = ", "
        });
        points += "]";
        console.log(points);
        console.log(new Date().getTime() - t); // 4
    }

 示例代码

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
            body,
            html,
            #allmap {
                width: 100%;
                height: 100%;
                overflow: hidden;
                margin: 0;
                font-family: "微软雅黑";
            }
        </style>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak="></script>
        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
        <title>添加行政区划</title>
    </head>
    <body>
        <div id="getCity" style="margin: 1% 40%;">
            <input type="text" placeholder="请输入行政区名字" />
            <button id="city">获取行政区边界坐标</button>
        </div>
        <div id="allmap"></div>
    </body>
</html>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(116.403765, 39.914850), 5);
    map.enableScrollWheelZoom();
    
    $('#city').click(function() {
        var city = $(':input').val();
        var bdary = new BMap.Boundary();
        
        bdary.get(city, function(rs) { //获取行政区域
            map.clearOverlays(); //清除地图覆盖物      
            var count = rs.boundaries.length; //行政区域的点有多少个
            //console.log(rs.boundaries);
            if(count === 0) {
                alert('未能获取当前输入行政区域');
                return;
            }
            var pointArray = [];
            for(var i = 0; i < count; i++) {
                var ply = new BMap.Polygon(rs.boundaries[i], {
                    strokeWeight: 2,
                    strokeColor: "#ff0000"
                }); //建立多边形覆盖物
                //console.log(ply);
                spiltStr(rs.boundaries[i]);
                map.addOverlay(ply); //添加覆盖物
                pointArray = pointArray.concat(ply.getPath());
            }
            map.setViewport(pointArray); //调整视野 
        });
    });
    //字符串封装为json字符串
    function spiltStr(city) {
        var t = new Date().getTime();
        var points = "[";
        var separator = "";
        $.each(city.split(";"), function(index, value) {
            points += separator + "[" + value + "]";
            separator = ", "
        });
        points += "]";
        console.log(points);
        console.log(new Date().getTime() - t); // 4
    }
    function spiltStr333(city) { // 效率相对较低
        var t = new Date().getTime();
        var points = [];
        $.each(city.split(";"), function(index, value) {
            points.push(value.split(','));
        });
        var data = JSON.stringify(points);
        console.log(data);
        console.log(new Date().getTime() - t); // 7
    }
    function spiltStr222(city) { // 占用空间大
        var points = [];
        $.each(city.split(";"), function(index, value) {
            var point = {};
            point.lng = value.split(',')[0];
            point.lat = value.split(',')[1];
            points.push(point);
        });
        var data = JSON.stringify(points);
        //console.log("data " + data);
    }
</script>

 

posted @ 2021-07-09 17:22  1156740846  阅读(2251)  评论(0)  编辑  收藏  举报