<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="leaflet.css" />
<script src="jquery1.9.0.min.js"></script>
<script src="leaflet.js"></script>
<style type="text/css">
#map {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
$(function() {
// 地形图:http://t4.tianditu.gov.cn/DataServer?T=ter_w&x={x}&y={y}&l={z}&tk=key
// 街道图:http://t4.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=key
// 影像图:http://t4.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=key
// 影像标注:http://t4.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=key
// 地形标注:http://t4.tianditu.gov.cn/DataServer?T=cta_w&x={x}&y={y}&l={z}&tk=key
// 矢量标注:http://t4.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=key
//key值需天地图官网申请
var map = L.map('map', {
center: [28.365, 118.365],
zoom: 9
});
// 影像
L.tileLayer("http://t4.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=you token", {
subdomains: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
}).addTo(map);
// 影像标注
L.tileLayer("http://t4.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=you token", {
subdomains: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
}).addTo(map);
// 街道
// L.tileLayer("http://t4.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=you token", {
// subdomains: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
// }).addTo(map);
});
</script>
</body>
</html>