天地图——常用方法分享

DytLisa

已于 2024-06-03 10:19:09 修改

阅读量4.5k

点赞数 9

文章标签：前端开源 javascript

于 2024-03-18 13:45:23 首次发布

本文链接：https://blog.csdn.net/Dyt1_1/article/details/136806680

版权

本文详细介绍了如何使用天地图API进行地图开发，包括获取应用Key、创建地图实例、行政区划信息处理、标记当前位置、绘制边界线、点聚合、地图平移、三维地图、加载单图层、版权控制以及地理编码和逆地理编码操作。

摘要由CSDN通过智能技术生成

1、天地图官网

天地图API

2、常用参考文档

（1）地图API

天地图API (tianditu.gov.cn)

（2）JavaScript API 4.0 类参考（常用）

天地图API (tianditu.gov.cn)

（3）JavaScript API 4.0代码示例（常用）

天地图API (tianditu.gov.cn)

（4）web API 代码示例

代码示例-Web API (tianditu.gov.cn)

（5）vue使用天地图

https://soullyoko.github.io/vue-tianditu

3、快速入门

在使用之前，先去申请应用Key：天地图开发管理平台 (tianditu.gov.cn)

代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>天地图</title>
    <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=你的密匙">
</head>

<body onLoad="onLoad()">
    <div id="mapDiv" style="position:absolute;width:100%; height:100%"></div>
    <script>
        var map;
        var zoom = 6;
        function onLoad() {
            //创建地图实例
            map = new T.Map('mapDiv',{
            //初始化地图
            minZoom: 1,//也可以通过方法设置，具体可查看JavaScript API 4.0 类参考
            maxZoom: 18
            });
            map.centerAndZoom(new T.LngLat(104, 30), zoom);//初始化地图对象，设置中心点和地图级别
            // map.setMinZoom(1);
            // map.setMaxZoom(10);
        }
    </script>
</body>
</html>

4、常用方法介绍

（1）获取行政区划信息——points返回为空，只能使用其他方式获取行政区划边界坐标（参考（3）绘制边界线）

let district = new T.AdministrativeDivision(); //创建一个获取行政区划的实例
        let config = {
            needSubInfo: true, //是否需要下一级信息
            needAll: false, //是否需要所有子节点。
            needPolygon: true,//是否需要行政区划范围。
            needPre: true,//是否需要上一级所有信息。
            searchType: 1,//查询类型。0表示根据code查询，1表示根据名称查询。
            searchWord: '四川省'//查询行政区划的名称。
        };
        district.search(config, function (result) {
            // console.log(result)
            if (result.getStatus() == 100) {
                let data = result.getData();
                // console.log(data)
                // 查找成都的经纬度
                let cd = data[0].child.find(item => item.name == '成都市')
                let lnt = cd.lnt;//经度
                let lat = cd.lat;//维度
            } else {
               console.log(result.msg)
            }
        })

（2）创建地图并标记当前位置

 var map = new T.Map('myDiv', {
            minZoom: 1,
            maxZoom: 18
        });
        map.centerAndZoom(new T.LngLat(longitude, latitude), 6);

        // 标记当前位置
        var customIcon = new T.Icon({
            iconUrl: 'imgs/now.png',  // 替换为自定义图标的 URL
            iconSize: new T.Point(40, 40),  // 替换为图标的实际大小
            iconAnchor: new T.Point(20, 40)  // 替换为图标的锚点位置
        });
        var marker = new T.Marker(new T.LngLat(longitude, latitude), { icon: customIcon });
        map.addOverLay(marker);

（3）绘制边界线

获取行政区划信息：DataV.GeoAtlas地理小工具系列 (aliyun.com)

 // 获取行政区划边界信息
 axios.get('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json').then(res => {
            var countries = res.data.features
            // console.log(countries)
            var sc = countries.find(item => item.properties.name == '四川省')
            // console.log(sc)
            var bounds = sc.geometry.coordinates[0][0]
            // console.log(bounds)
            drawLine(bounds)
        })
function drawLine(lines) {// 绘制边界线
        let style = {
            color: '#81a5b9',
            weight: 3,
            opacity: 1,
            lineStyle: 'solid', // 实线;dashed虚线
            fillColor: 'transprent',
            fillOpacity: 0 // 透明度
        }
        let points = []
        lines.forEach(line => { // lines是边界经纬度组成的数组
            var point = new T.LngLat(line[0], line[1])
            points.push(point)
        })
        // console.log(points)
        var poly = new T.Polygon(points, style)
        map.addOverLay(poly)
    },

（4）在地图上绘制点位（点聚合）

function showPoints(markers) {
        var that = this
        if (this.markerClusterer) {
            // 删除之前的标记点
            this.markerClusterer.clearMarkers()
        }
        // 聚合maskers
        var markersData = [];
        for (var i = 0; i < markers.length; i++) {
            if (!markers[i].longitude || !markers[i].latitude) continue;
            var icon = new T.Icon({
                iconUrl: markers[i].img,
                iconSize: new T.Point(markers[i].width, markers[i].height),
                iconAnchor: new T.Point(20, 40)  // 替换为图标的锚点位置
            });
            var marker = new T.Marker(new T.LngLat(markers[i].longitude, markers[i].latitude), { icon: icon });
           

            // 给每个标记点添加信息窗口
            var opts = {
                autoPan: true,
                closeOnClick: true,
                offset: new T.Point(0, -40)
            }
            var infoWindow = new T.InfoWindow('<div id="detail">你好</div>', opts);

            /**
             * 利用闭包的方式在每次循环迭代中捕获并传递独立的 infoWindow 对象给相应的标记点，
             * 确保每个标记点点击时都能正确显示对应的信息窗口内容
             */
            (function (marker, infoWindow) {
                marker.addEventListener("click", function () {
                    that.focusTarget = false
                    that.lngLat = marker.getLngLat()
                    map.openInfoWindow(infoWindow, marker.getLngLat());

                    var myLink = document.getElementById("detail");
                    myLink.addEventListener("click", function (event) {
                        event.preventDefault(); // 阻止默认链接跳转行为
                        //其他代码
                    });
                });
            })(marker, infoWindow)

            // map.addOverLay(marker);//逐个绘制标注
            markersData.push(marker);//不想聚合，就把关于聚合的代码删掉就行
        }
        // console.log(markersData)

        //生成一个marker数组，然后调用markerClusterer类
        var config = {
            markers: markersData
        };
        this.markerClusterer = new T.MarkerClusterer(map, config);

        this.markerClusterer.setMaxZoom(18)//确保当缩放到最大级别时，聚合点能完全展示

        this.markerClusterer.setStyles([
        {
        url: 'imgs/cluster0.png', // 聚合的图标
        size: [40, 40], //聚合的图标大小        
        offset: new T.Point(0, 0), //显示图片的偏移量        
        textColor: '#fff', //显示数字的颜色        
        textSize: 10,//显示文字的大小       
        range: [0, 10000]
        }
        ])


    }

（5）地图平移——改变中心点坐标，移动到其他位置

var lngLat=new T.LngLat(104.3, 30.5)
var center=new T.LngLat(104, 30)
function check(lngLat,center) {
        if (lngLat && !this.focusTarget) {
            this.focusTarget = true
            map.panTo(lngLat);
        } else {
            this.focusTarget = false
            map.panTo(center);
        }
    }

（6）三维地图

三维服务 - 天地图帮助文档 (tianditu.gov.cn)

（7）加载单个图层

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>天地图－地图API－范例－地图加载单图层</title>
    <script type="text/javascript"
        src="http://api.tianditu.gov.cn/api?v=4.0&tk=c5ca847283daf01692fcfdad54e7654e"></script>
   <style type="text/css">body,html{width:100%;height:100%;margin:0;font-family:"Microsoft YaHei"}#mapDiv{width:100%;height:100%}input,b,p{margin-left:5px;font-size:14px}</style>
    <script>
        var map;
        var zoom = 8;
        var lay;
        var onlyMapLay;
        function onLoad() {
            var imageURL = "http://t0.tianditu.gov.cn/img_w/wmts?" +
                "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
                "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=c5ca847283daf01692fcfdad54e7654e";
            // 创建自定义图层对象
            lay = new T.TileLayer(imageURL, { minZoom: 1, maxZoom: 18 });
            var config = { layers: [lay] };
            //初始化地图对象
            map = new T.Map("mapDiv", config);
            //设置显示地图的中心点和级别
            map.centerAndZoom(new T.LngLat(104, 30), zoom);
            //允许鼠标滚轮缩放地图
            map.enableScrollWheelZoom();
        }

    </script>
</head>
<body onLoad="onLoad()">
    <div id="mapDiv"></div>
</body>
</html>

（8）去掉天地图自带的版权控件

.tdt-control-copyright.tdt-control>div:not(.tdt-control-copyright) { display: none; }

（9）逆地理编码——根据经纬度获取地址

function getLocation() {//根据坐标获取地名
            var geocode = new T.Geocoder();
            var lngLat = new T.LngLat(104.3, 30.5)

            geocode.getLocation(lngLat, function (res) {
                console.log(res)
                if (res.getStatus() == 0) {
                    let address = res.getAddress()
                    alert(address)
                } else {
                    alert('获取点位地址失败')
                }
            });
        }

（10）地理编码——根据地址获取经纬度

 function getPoint(location) {//根据地名返回经纬度
         var geocode = new T.Geocoder();
         geocode.getPoint(location, function (result) {
             // console.log(result)
             if (result.getStatus() == 0) {
                 let point = result.getLocationPoint()
                 // console.log(point)
                 alert(point.lat + ',' + point.lng)
             } else {
                 alert(result.getMsg());
             }

            });
       }

getPoint("成都市")