如何使用Leaflet加载QGIS切图工具生成的瓦片

最新推荐文章于 2025-04-14 10:52:33 发布

GIS阵地

最新推荐文章于 2025-04-14 10:52:33 发布

阅读量1k

点赞数

分类专栏： QGIS 文章标签：前端 javascript html

本文链接：https://blog.youkuaiyun.com/a374682949/article/details/128126973

版权

QGIS 专栏收录该内容

6 篇文章

订阅专栏

1.首先需要看一下QGIS切图工具的使用方法点这里
2.新建一个html文件写入如下内容


<!DOCTYPE html>
<html>
<head>
  <title>Leaflet Preview</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>
  <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
   integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
   crossorigin=""></script>
  <style type="text/css">
    body {
       margin: 0;
       padding: 0;
    }
    html, body, #map{
       width: 100%;
       height: 100%;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
      var map = L.map('map', {crs:L.CRS.EPSG4326}).setView([35.04094227549997, 100.78977599500001], 3.0);
      L.tileLayer('file:///D%3A/project/XinXiang/分层/all/{z}/{y}/{x}.png', {
        minZoom: 0,
        maxZoom: 17,
        tms: true,
        attribution: 'Generated by TilesXYZ'
      }).addTo(map);
  </script>
</body>
</html>