使用 leaflet 框架快速预览本地xyz的切片底图

创建 html 文件，填入以下内容；

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41


<!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.9.3/dist/leaflet.css"
        integrity="sha384-o/2yZuJZWGJ4s/adjxVW71R+EO/LyCwdQfP5UWSgX/w87iiTXuvDZaejd3TsN7mf" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
        integrity="sha384-okbbMvvx/qfQkmiQKfd5VifbKZ/W8p1qIsWvE1ROPUfHWsDcC8/BnHohF7vPg2T6" 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', { attributionControl: false }).setView([39.9934, 116.39], 7);
        L.control.attribution({ prefix: false }).addTo(map);
        var tilesource_layer = L.tileLayer('file://D:/tiles/{z}/{x}/{y}.png',
            {
                minZoom: 0,
                maxZoom: 15,
                tms: false,
            }).addTo(map);
    </script>
</body>

</html>

修改 tilesource_layer 的文件夹路径为切片路径；
双击打开 html 文件预览；

使用 leaflet 框架快速预览本地xyz的切片底图

default

Preview: