【板栗糖GIS】GIS开发—如何调用天地图作为数据底图

最新推荐文章于 2024-06-07 16:47:13 发布

Giser板栗糖

最新推荐文章于 2024-06-07 16:47:13 发布

阅读量542

点赞数 1

分类专栏： GIS开发【板栗糖】GIS 文章标签： html 前端 css 经验分享测绘

本文链接：https://blog.csdn.net/weixin_46192906/article/details/125696379

版权

【板栗糖】GIS 同时被 2 个专栏收录

131 篇文章 24 订阅

订阅专栏

GIS开发

5 篇文章 0 订阅

订阅专栏

【板栗糖GIS】GIS开发—如何调用天地图作为数据底图

1. 代码

2. 展示情况

1. 代码


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title data-i18n="resources.title_tiandituLayer_mecartor"></title>
<script type="text/javascript" src="./js/include-web.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
 <!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin=""></script>
</head>
<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
<div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>


<script type="text/javascript" src="./dist/leaflet/include-leaflet.js"></script>
<script type="text/javascript">
      var map = L.map('map', {
        center: [39.915, 116.404],
        zoom: 16,
        crs: L.CRS.TianDiTu_Mercator
      });
      L.supermap
        .tiandituTileLayer({
          layerType: 'img',
          key: '1d109683f4d84198e37a38c442d68311'
        })
        .addTo(map);

      // L.supermap
      //   .tiandituTileLayer({
      //     layerType: 'img',
      //     isLabel: true,
      //     key: '1d109683f4d84198e37a38c442d68311'
      //   })
      //   .addTo(map);
      var  layerWorld, marker, markers;
      init();
      L.marker([39.915, 116.404]).addTo(map);

    </script>
</body>
</html>