leaflet之測試專案
阿新 • • 發佈：2021-10-29
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/[email protected]/dist/leaflet.css" /> <scriptsrc="https://unpkg.com/[email protected]/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); //新增電子地圖影像 varvector_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>
鑽研不易，轉載請註明出處。。。。。。