天地图行政区域数据获取

最新推荐文章于 2024-11-01 11:52:00 发布

cgf_01

最新推荐文章于 2024-11-01 11:52:00 发布

阅读量5.2k

点赞数 2

本文链接：https://blog.csdn.net/cgf_01/article/details/118578945

版权

本文介绍如何在天地图接口下架后，使用高德地图服务获取行政区域数据，并通过JavaScript实现经纬度转换，以生成JSON文件导出中心点和多边形信息。

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

天地图行政区域数据接口下架了，通过高德地图接口获取数据然后转换天地图经纬度坐标

高德地图应用需要选择服务平台 Web端(JS API)

就两个html，随意用个http服务打开就行

<!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">
        <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=xxxxxxxxxxxx&plugin=AMap.DistrictSearch"></script>
        <script src="http://api.tianditu.gov.cn/api?v=4.0&tk=xxxxxxxx" type="text/javascript"></script>
        <script src="https://cdn.bootcss.com/FileSaver.js/1.3.8/FileSaver.js"></script>

        <style type="text/css">
            html,
            body,
            #container,
            #container2 {
                height: 100%;
            }
        </style>
    </head>
    <body>
        <input type="text" id="search_txt" placeholder="请输入省市区" />
        <input type="button" value="搜索" onclick="search_()" />
        <button type="button" onclick="export_()">获取中心点ZOOM导出JSON</button>
        <div id="container" style="width: 600px;float: left;"></div>
        <div id="container2" style="width: 600px;float: left;"></div>
        <script type="text/javascript">
            function export_() {
                center = map2.getCenter();
                zoom = map2.getZoom()
                
                let data = {
                  "center":center,
                  "zoom":zoom,
                  "polygons":polygons
              }
              var content = JSON.stringify(data);
              var blob = new Blob([content], {type: "text/plain;charset=utf-8"});
              saveAs(blob, search + ".json");
            }
            
            var center = {
                "lng": null,
                "lat": null
            };
            var polygons = [];
            var search = "", zoom = 10;
            function search_() {
                search = $("#search_txt").val();
                if (search == '') {
                    alert("请输入省市区");
                    return false;
                } else {
                    AMap.service('AMap.DistrictSearch', function() { //回调函数
                        var opts = {
                            //subdistrict: 1,   //返回下一级行政区
                            level: 'city', //查询的范围
                            //showbiz:false  ,//查询行政级别为 市
                            extensions: 'all',
                        };
                        districtSearch = new AMap.DistrictSearch(opts);
                        districtSearch.search(search    , function(status, result) {
                            var bounds = result.districtList[0].boundaries
                            
                            center = {
                                "lng": null,
                                "lat": null
                            }
                            polygons = [];
                            
                            if (bounds) {
                                let lngSum = 0,
                                    latSum = 0,
                                    count = 0;
                                for (var i = 0, l = bounds.length; i < l; i++) {
                                    //高德地图画面
                                    var polygon = new AMap.Polygon({
                                        map: map,
                                        strokeWeight: 1,
                                        path: bounds[i],
                                        fillOpacity: 0.7,
                                        fillColor: '#CCF3FF',
                                        strokeColor: '#CC66CC'
                                    })

                                    //天地图画面
                                    var points = [];
                                    $.each(bounds[i], function(j, jtem) {
                                        let t = transformGCJ2WGS(jtem['lat'], jtem['lng']);
                                        points.push(t);

                                        count++;
                                        latSum += t['lat'];
                                        lngSum += t['lng'];
                                    })
                                    map2.addOverLay(new T.Polygon(points, {
                                        color: "blue",
                                        weight: 1,
                                        opacity: 0.5,
                                        fillColor: "#CCF3FF",
                                        fillOpacity: 0.7
                                    }));
                                    
                                    polygons.push(points);
                                }
                                // 地图自适应
                                map.setFitView()
                                
                                center.lng = (lngSum / count).toFixed(8);
                                center.lat = (latSum / count).toFixed(8)
                                map2.centerAndZoom(center, 10);
                            }
                        })
                    })
                }
            }

            var map = new AMap.Map('container', {
                resizeEnable: true,
                center: [120.074952, 31.554421],
            });

            var map2 = new T.Map('container2');
            map2.centerAndZoom({
                "lng": 120.074952,
                "lat": 31.554421
            }, zoom);

            var PI = 3.14159265358979324;

            function transformGCJ2WGS(gcjLat, gcjLng) {
                let d = delta(gcjLat, gcjLng)
                return {
                    'lat': gcjLat - d.lat,
                    'lng': gcjLng - d.lng
                }
            }

            function delta(lat, lng) {
                let a = 6378245.0 //  a: 卫星椭球坐标投影到平面地图坐标系的投影因子。
                let ee = 0.00669342162296594323 //  ee: 椭球的偏心率。
                let dLat = transformLat(lng - 105.0, lat - 35.0)
                let dLng = transformLng(lng - 105.0, lat - 35.0)
                let radLat = lat / 180.0 * PI
                let magic = Math.sin(radLat)
                magic = 1 - ee * magic * magic
                let sqrtMagic = Math.sqrt(magic)
                dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * PI)
                dLng = (dLng * 180.0) / (a / sqrtMagic * Math.cos(radLat) * PI)
                return {
                    'lat': dLat,
                    'lng': dLng
                }
            }

            function transformLat(x, y) {
                let ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x))
                ret += (20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0 / 3.0
                ret += (20.0 * Math.sin(y * PI) + 40.0 * Math.sin(y / 3.0 * PI)) * 2.0 / 3.0
                ret += (160.0 * Math.sin(y / 12.0 * PI) + 320 * Math.sin(y * PI / 30.0)) * 2.0 / 3.0
                return ret
            }

            function transformLng(x, y) {
                let ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x))
                ret += (20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0 / 3.0
                ret += (20.0 * Math.sin(x * PI) + 40.0 * Math.sin(x / 3.0 * PI)) * 2.0 / 3.0
                ret += (150.0 * Math.sin(x / 12.0 * PI) + 300.0 * Math.sin(x / 30.0 * PI)) * 2.0 / 3.0
                return ret
            }
        </script>
    </body>
</html>

效果如下，点击按钮可以导出JSON，结构{"center":{"lat":xxxx,"lng":xxxx},"zoom":10,"polygons":[[{"lat":xxx,"lng":xxx}...],[{"lat":xxx,"lng":xxx}...]...]}

天地图加载行政区域效果

<div id="container" style="float: left;width: 1000px;"></div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://api.tianditu.gov.cn/api?v=4.0&tk=xxxxxx" type="text/javascript"></script>
<script type="text/javascript">
 var map
      $(function() {
         $.getJSON("xxx.json", function(result) {
           map = new T.Map('container');
           map.centerAndZoom(result.center, result.zoom);
           $.each(result.polygons, function(i, item) {
             //创建面对象
             var polygon = new T.Polygon(item,{
                 color: "blue", weight: 1, opacity: 0.5, fillColor: "#CCF3FF", fillOpacity: 0.7
             });
             //向地图上添加面
             map.addOverLay(polygon);
           })
         });
      })
</script>

效果，线条，背景颜色透明度什么的按需调整