大家好，欢迎来到IT知识分享网。
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/_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("成都市")免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/129445.html
