Leaflet教程
Leaflet加载百度地图瓦片，但本方法仅支持北半球部份，虽然不支持显示全世界地图，但显示中国及相关区域是正常的。
引用Leaflet的JS和CSS
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" />
<script type="text/javascript" src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"></script>
引用proj4和proj4leaflet
<script src="https://cdn.bootcss.com/proj4js/2.4.3/proj4.js"></script>
<script src="https://cdn.bootcss.com/proj4leaflet/1.0.1/proj4leaflet.min.js"></script>
百度坐标系代码
实例
L.CRS.Baidu = new L.Proj.CRS('EPSG:900913', '+proj=merc +a=6378206 +b=6356584.314245179 +lat_ts=0.0 +lon_0=0.0 +x_0=0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs', {
resolutions: function () {
var res = [];
for (var i = 0; i < 19; i++) {
res[i] = Math.pow(2, (18 - i))
}
return res;
}(),
origin: [0, 0],
bounds: L.bounds([20037508.342789244, 0], [-20037508.342789244, 20037508.342789244])
});
地图完整例子
加载瓦片图层时的tms属性必须设置为true，所使用的百度瓦片可以去此处下载。百度地图瓦片下载
注意：本例子为百度坐标系，所以设置中心坐标或添加标记等使用的坐标，都必须为百度坐标，否则会有偏移。
如果需要使用WGS84等坐标，请参照 Leaflet百度地图纠偏
实例
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Leaflet百度离线地图</title>
<link rel="stylesheet" href="leaflet/leaflet.css" />
<script type="text/javascript" src="leaflet/leaflet.js"></script>
<script type="text/javascript" src="proj4js/2.4.3/proj4.js"></script>
<script type="text/javascript" src="proj4leaflet/1.0.1/proj4leaflet.min.js"></script>
<style type="text/css">
html, body, #map_container{
width: 100%;
height: 100%;
overflow: hidden;
margin:0;
}
</style>
</head>
<body>
<div id="map_container"></div>
</body>
<script>
L.CRS.Baidu = new L.Proj.CRS('EPSG:900913', '+proj=merc +a=6378206 +b=6356584.314245179 +lat_ts=0.0 +lon_0=0.0 +x_0=0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs', {
resolutions: function () {
var res = [];
for (var i = 0; i < 19; i++) {
res[i] = Math.pow(2, (18 - i))
}
return res;
}(),
origin: [0, 0],
bounds: L.bounds([20037508.342789244, 0], [-20037508.342789244, 20037508.342789244])
});
var map = L.map('map_container', {
crs: L.CRS.Baidu,
center: [121.56990125354358,29.807391894624445].reverse(),
zoom: 17
});
L.tileLayer('tiles/{z}/{x}/{y}.png', {
attribution: 'Leaflet百度离线地图',
tms: true
}).addTo(map);
</script>
</html>
全部教程