leaflet 加载天地图（卫星图路网图）

流氓也是种气质 _Cookie

已于 2024-05-31 10:51:34 修改

阅读量621

点赞数 1

分类专栏： leaflet 文章标签： leaflet

于 2023-12-06 17:13:48 首次发布

本文链接：https://blog.csdn.net/qq_37550440/article/details/134836536

版权

leaflet 专栏收录该内容

20 篇文章 3 订阅

订阅专栏

效果图：

<!DOCTYPE html>
<html lang="en">

<head>
  <title></title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.bootcdn.net/ajax/libs/leaflet/1.6.0/leaflet.css" rel="stylesheet">
  <script src="https://cdn.bootcdn.net/ajax/libs/leaflet/1.6.0/leaflet.js"></script>
  <style>
    #map {
      position: absolute;
      width: 100vw;
      height: 100vh;
    }
  </style>
</head>

<body>
  <div id='map'>
  </div>
  <script>
    var basemapLayer0 = 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=8899fd3e86aa994f71465b1c56a98727',
      {
        maxZoom: 18,
        minZoom: 1,
        tileSize: 256,
        zoomOffset: 1
      });
    var basemapLayer1 = 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=8899fd3e86aa994f71465b1c56a98727',
      {
        maxZoom: 18,
        minZoom: 1,
        tileSize: 256,
        zoomOffset: 1
      });
    var basemapLayer2 = L.tileLayer('http://t1.tianditu.com/img_c/wmts?layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=8899fd3e86aa994f71465b1c56a98727',
      {
        maxZoom: 18,
        minZoom: 1,
        tileSize: 256,
        zoomOffset: 1
      });
    var basemapLayer3 = L.tileLayer('http://t1.tianditu.com/cia_c/wmts?layer=cia&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=174705aebfe31b79b3587279e211cb9a',
      {
        maxZoom: 18,
        minZoom: 1,
        tileSize: 256,
        zoomOffset: 1
      });
    var basemap0 = L.layerGroup([basemapLayer0, basemapLayer1]);
    var basemap1 = L.layerGroup([basemapLayer2, basemapLayer3]);
    let map = L.map('map', {
      preferCanvas: true,
      crs: L.CRS.EPSG4326,
      layers: [basemap1],
      zoomControl: false,
      attributionControl: false,
      doubleClickZoom: false,
      editable: true//绘制控件
    }).setView([29.592024, 106.231126], 13);
  </script>
</body>

</html>