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>
钻研不易，转载请注明出处。。。。。。