一、天地图是一个地理信息公共服务平台，提供丰富的地图数据和服务，包括矢量图层、卫星图像等。用户可以通过天地图官网或各种开发接口获取地图数据，并将其应用于不同的开发环境中，如网页开发、GIS软件等。
- 之前使用高德地图，但是突然通知我们要商业授权，收 5 万/年，没有办法换成天地图，虽然没有高德完善，但是能用，主要是免费的。如果用天地图先要注册账号。
官方地址：https://www.tianditu.gov.cn
下面是流程
- 准备页面
根据HTML 标准，每一份HTML 文档都应该声明正确的文档类型，我们建议您使用最新的符合HTML5 规范的文档声明：
<!DOCTYPE html>
- 引入天地图JavaScript API文件(如果是 vue 框架，放在 index.html中)
<script src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥" type="text/javascript"></script>
创建地图容器元素
地图需要一个HTML元素作为容器，这样才能展现到页面上。这里我们创建了一个div元素。将div元素的宽和高分别设置为100%，使其充满整个屏幕，或者您也可以计算浏览器窗口的大小并进行设置。创建地图实例
//初始化地图对象
var map=new T.Map('mapDiv');
- 确定经纬度坐标
var lnglat = new T.LngLat(116.40969,39.89945)
这里我们使用T命名空间下的T.Lnglat类来创建一个坐标点。T.Lnglat类描述了一个地理坐标点，其中116.40969表示经度，39.89945表示纬度。
- 地图初始化
map.centerAndZoom(lnglat,12);
在创建地图实例后，我们需要对其进行初始化，map.centerAndZoom方法要求设置中心点坐标和地图级别。 地图必须经过初始化才可以执行其他操作。
二、因为天地图的组件库不是很丰富，所以使用了 leaflet 地图组件库
Leaflet API 文档介绍了用于在网页中创建和操作地图的 Leaflet 库。文档涵盖了 UI 图层、基本类型、控件、地图状态选项、事件、方法等多个方面的内容。包括 Marker 标记、Popup 弹出窗口、Tooltip 工具提示等 UI 图层，LatLng 经纬度等基本类型，以及缩放、版权等控件。还详细说明了地图的各种状态选项和丰富的事件类型，以及众多用于操作地图的方法，如添加/移除图层和控件、修改地图状态、地理定位、获取地图状态和进行坐标转换等。
具体内容可以自己去看，官方地址：https://leafletjs.cn/reference.html
三、但是在使用leaflet 组件库的时候发现，marker标记不能设置自定义图片的方向又引入了leaflet-rotatedmarker组件库，主要是添加自定义图片的方向。
官方地址：https://github.com/bbecquet/Leaflet.RotatedMarker#readme
L.marker([48.8631169, 2.3708919], {
rotationAngle: 45
}).addTo(map);
四、在使用leaflet组件的时候，发现坐标在地图中有偏移，然后引入了Leaflet.ChineseTmsProviders组件
官方地址：http://htoooth.github.io/Leaflet.ChineseTmsProviders/
初始化的代码
let leafletMap = L.map("mapcs", {
zoomControl: false, // 禁用默认的缩放控件
attributionControl: false,
}).setView([32.094265, 118.747467], 16);
const tileOptions = {
minZoom: 1,
maxZoom: 19,
zoom: 18,
key: "天地图的key",
};
L.tileLayer
.chinaProvider("TianDiTu.Satellite.Map", tileOptions)
.addTo(leafletMap);
// 创建比例尺控件并设置位置
let scaleControl = L.control.scale({
position: "bottomright", // 设置在右下角
imperial: false,
});
// 将比例尺控件添加到地图
scaleControl.addTo(leafletMap);
// 创建自定义的缩放控件并设置位置
let zoomControl = L.control.zoom({
position: "bottomright", // 设置在右下角
});
// 将自定义的缩放控件添加到地图
leafletMap.addControl(zoomControl);
/*
方法： 锚点
imgIcon ：图片地址
longLat：经纬度
size： 图片大小
angle：角度
*/
function markerfunc(imgIcon, longLat, size, angle = 0) {
//创建图片对象
var myIcon = L.icon({
iconUrl: imgIcon,
iconSize: size,
iconAnchor: [size[0] / 2, size[1]],
});
let marker = L.marker(longLat, {
icon: myIcon,
rotationAngle: angle,
draggable: false,
}).addTo(leafletMap);
return marker;
}
