foreword
In this section, we use a lightweight javascript library leafletto htmlload Tiandi map in China, and achieve the effect similar to Gaode map and Baidu map.
The renderings are as follows:
Without further ado, let's get into the topic! !
1. Register developer permissions
We need to register an account on the Tiantu map platform, and then apply to become a developer. I am applying for an individual developer here, and I will not demonstrate the application process.
Tianditu platform: https://www.tianditu.gov.cn/
Enter the developer interface:
Enter the console, click to create a new application:
Fill in the corresponding information, click submit, and the creation is complete:
After the creation is complete, we will have one Key名称, which is equivalent to our secret key, so keep it safe.
2. Load the sky map
1. Download leaflet
Leaflet download address: https://leafletjs.com/download.html
Enter the leaflet official website and download the latest stable version code, as shown in the figure:
After the download is complete, we only need to keep the three main files, and images、leaflet.css、leaflet.jsimport these three files into our project, as shown in the figure:
2. Load Tiandi map
1. First import css and js files into html:
<link rel="stylesheet" href="leaflet.css">
<script src="leaflet.js"></script>
2. Like echarts, leaflet loads the map and requires a box with a high frame height, so we need to define a div tag with high bandwidth to load the map. We need to give the div an id to uniquely identify the box (note: no Use class, otherwise leaflet will not recognize it):
<style>
#map {
position: absolute;
width: 100%;
height: 100vh;
left: 0;
top: 0;
}
</style>
<body>
<div id="map"></div>
</body>
3. Write js code to load Tiandi map:
<script>
//设置底图
const map = L.map("map",{
center: [23.82319, 109.02358], //中心点[纬度，经度]
zoom: 6, //默认缩放等级
crs: L.CRS.EPSG4326 //采用wgs84坐标系
});
//开发key
const key = "xxxxxx";
//xyz方式加载底图
const tdt_url_bottom = "https://t0.tianditu.gov.cn/DataServer?T=img_c&x={x}&y={y}&l={z}&tk=";
//xyz方式加载底图的标注
const tdt_url_label = "https://t0.tianditu.gov.cn/DataServer?T=cia_c&x={x}&y={y}&l={z}&tk=";
//设置底图图层（url请求地址，偏移量，贴片尺寸大小，最小缩放等级，最大缩放层级）
const layer_bottom = L.tileLayer(tdt_url_bottom + key, {
zoomOffset: 1,
tileSize: 256,
minZoom: 7,
maxZoom: 17
});
//设置底图标注
const layer_label = L.tileLayer(tdt_url_label + key, {
zoomOffset: 1,
tileSize: 256,
minZoom: 7,
maxZoom: 17
});
//将图层丢到地图上
layer_bottom.addTo(map);
layer_label.addTo(map)
</script>
4. The effect is as shown in the figure:
3. Remove the zoom icon in the upper left corner and the logo in the lower right corner
When creating a map, set two properties in option:
const map = L.map("map",{
center: [23.82319, 109.02358], //[纬度，经度]
zoom: 6, //默认缩放层级和layer的最小缩放层级一致
crs: L.CRS.EPSG4326, //坐标系的代码
zoomControl: false, //去掉左上角缩放图标
attributionControl: false //去掉右下角的logo
});
Summarize
The complete code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>leaflet加载天地图</title>
<link rel="stylesheet" href="leaflet.css">
<script src="leaflet.js"></script>
</head>
<style>
#map {
position: absolute;
width: 100%;
height: 100vh;
left: 0;
top: 0;
}
</style>
<body>
<div id="map"></div>
</body>
<script>
//设置底图
const map = L.map("map",{
center: [23.82319, 109.02358], //[纬度，经度]
zoom: 6, //默认缩放等级
crs: L.CRS.EPSG4326 //wgs84坐标系的代码
});
//开发key
const key = "xxxx";
//xyz方式加载底图
const tdt_url_bottom = "https://t0.tianditu.gov.cn/DataServer?T=img_c&x={x}&y={y}&l={z}&tk=";
//xyz方式加载底图标注
const tdt_url_label = "https://t0.tianditu.gov.cn/DataServer?T=cia_c&x={x}&y={y}&l={z}&tk=";
//设置底图图层（url请求地址，偏移量，贴片尺寸大小，最大缩放层级）
const layer_bottom = L.tileLayer(tdt_url_bottom + key, {
zoomOffset: 1,
tileSize: 256,
minZoom: 7,
maxZoom: 17
});
//设置底图标注
const layer_label = L.tileLayer(tdt_url_label + key, {
zoomOffset: 1,
tileSize: 256,
minZoom: 7,
maxZoom: 17
});
//将图层丢到地图上
layer_bottom.addTo(map);
layer_label.addTo(map)
</script>
</html>