leaflet之测试项目
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
<style type="text/css">
body,
html {
border: none;
padding: 0;
width: 100%;
height: 100%;
margin: 0;
font-size: 14px;
font-family: "微软雅黑";
}
#mapid {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="mapid"></div>
<script type="text/javascript">
var mymap = L.map('mapid').setView([39.9788, 10.30226], 3);
//添加电子地图影像
var vector_map = L.tileLayer("http://t1.tianditu.com/vec_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=93724b915d1898d946ca7dc7b765dda5", {
maxZoom: 17,
tileSize: 256,
zoomOffset: 1,
minZoom: 1
}).addTo(mymap);
//添加注记
var vector_note = L.tileLayer("http://t1.tianditu.com/cva_c/wmts?layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=93724b915d1898d946ca7dc7b765dda5", {
maxZoom: 17,
tileSize: 256,
zoomOffset: 1,
zIndex: 5,
minZoom: 1
}).addTo(mymap);
</script>
</body>
</html>
钻研不易，转载请注明出处。。。。。。