1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8.     <script src="../lib/include-openlayers-local.js"></script>
    9. </head>
    10. <body>
    11.     <div id="map_container">
    13.     </div>
    14.     <script>
    15.         const key = '8a5c2b00e94b49659861e064c37f778d'
    16.         /* 天地图矢量图层 */
    17.         const TianDiMap_vec = new ol.layer.Tile({
    18.             title:"天地图矢量图层",
    19.             source:new ol.source.XYZ({
    20.                 url:'http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=' +
    21.             key,
    22.                 wrapX:false
    23.             })
    24.         })
    25.         /* 天地图注记图层 */
    26.         const TianDiMap_cva = new ol.layer.Tile({
    27.             title:"天地图矢量注记图层",
    28.             source:new ol.source.XYZ({
    29.                 url:'http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=' +
    30.             key,
    31.                 wrapX:false
    32.             })
    33.         })
    34.         /* 天地图影像图层 */
    35.         const TianDiMap_img = new ol.layer.Tile({
    36.             title:"天地图影像图层",
    37.             source:new ol.source.XYZ({
    38.                 url:'http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=' +
    39.             key,
    40.                 wrapX:false
    41.             })
    42.         })
    43.         /* 天地图影像注记图层 */
    44.         const TianDiMap_cia = new ol.layer.Tile({
    45.             title:"天地图影像图层",
    46.             source:new ol.source.XYZ({
    47.                 url:'http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=' +
    48.             key,
    49.                 wrapX:false
    50.             })
    51.         })
    52.         const map = new ol.Map({
    53.             target:'map_container',
    54.             layers:[TianDiMap_vec,TianDiMap_cva,TianDiMap_img,TianDiMap_cia],
    55.             view:new ol.View({
    56.                 projection:'EPSG:4326',
    57.                 center:[0,0],
    58.                 zoom:1
    59.             })
    60.         })
    61.     </script>
    62. </body>
    63. </html>