http://develop.smaryun.com:81/API/JS/OL5InterfaceDemo/index.htm
    image.png
    天地图是国家地理信息公开的地理数据，属于第三方地图。使用OpenLayer的接口对接，调用对应的接口获取数据。

    1. 8a5c2b00e94b49659861e064c37f778d
    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 TianDiMap_vec = new ol.layer.Tile({
    16.             title:"天地图矢量图层",
    17.             source:new ol.source.XYZ({
    18.                 url:'http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=' +
    19.             '8a5c2b00e94b49659861e064c37f778d',
    20.                 wrapX:false
    21.             })
    22.         })
    23.         const TianDiMap_cva = new ol.layer.Tile({
    24.             title:"天地图矢量注记图层",
    25.             source:new ol.source.XYZ({
    26.                 url:'http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=' +
    27.             '8a5c2b00e94b49659861e064c37f778d',
    28.                 wrapX:false
    29.             })
    30.         })
    31.         const map = new ol.Map({
    32.             target:'map_container',
    33.             layers:[TianDiMap_vec,TianDiMap_cva],
    34.             view:new ol.View({
    35.                 projection:'EPSG:4326',
    36.                 center:[0,0],
    37.                 zoom:1
    38.             })
    39.         })
    40.     </script>
    41. </body>
    42. </html>