天地图——常用方法分享
（1）获取行政区划信息——points返回为空，只能使用其他方式获取行政区划边界坐标（参考（3）绘制边界线）（2）JavaScript API 4.0 类参考（常用）（3）JavaScript API 4.0代码示例（常用）（5）地图平移——改变中心点坐标，移动到其他位置。（9）逆地理编码——根据经纬度获取地址。（4）在地图上绘制点位（点聚合）（4）web API 代码示例。（8）去掉天地图自带的
·
1、天地图官网
2、常用参考文档
（1）地图API
（2）JavaScript API 4.0 类参考（常用）
（3）JavaScript API 4.0代码示例（常用）
（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("成都市")
前往低代码交流专区
更多推荐
9
0- 0
已为社区贡献1条内容
所有评论(0)