简述

leaflet支持类似

https://ip:port/{z}/{x}/{y}.png

的地图源，这种源本质上就是一个能按路径返回http文件的http文件服务器，可以直接使用静态文件服务器（如nginx）进行部署。

获取地图瓦片

要获取地图瓦片，最简单的方式是借助开源的MapDownload下载器

MapDownload

下载后得到的是地图瓦片文件，遵循{z}/{x}/{y}.png的命名格式，接下来是直接使用http服务器（这里选择nginx）对外暴露为地图源

然后把下载的整个地图瓦片打包传输到服务器上的一个目录

这里使用的是docker的方式部署nginx

目录结构：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.
|-- certs
|   |-- cacert.pem  # 这里cacert.pem的内容替换成ssl证书公钥
|   `-- privkey.pem # 这里privkey.pem的内容替换成ssl证书私钥
|-- docker-compose.yml
|-- nginx.conf
`-- web_map
    |-- index.html
    `-- map1  # 下载的地图瓦片放这里
        |-- 1
        |-- 2
        |-- 3
        |-- 4
        ...

docker-compose.yml

1
2
3
4
5
6
7
8
9
10
11
services:
  nginx:
    image: nginx:stable
    ports:
      - 80:80
      - 443:443
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf
      - ./web_map:/usr/share/nginx/html
      - ./certs:/etc/nginx/certs
    restart: always

nginx.conf

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
events {}
http{
    server {
        listen 443 ssl;
        listen 80;
        ssl_certificate /etc/nginx/certs/cacert.pem;
        ssl_certificate_key /etc/nginx/certs/privkey.pem;

        location / {
            autoindex on;
            autoindex_exact_size off;
            autoindex_localtime on;
            root /usr/share/nginx/html;
        }
    }
}

index.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
42
<!DOCTYPE html>
<html lang="en">
<head>
        <base target="_top">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Quick Start - Leaflet</title>

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>

        <style>
                html, body {
                        height: 100%;
                        margin: 0;
                }
                .leaflet-container {
                        height: 400px;
                        width: 600px;
                        max-width: 100%;
                        max-height: 100%;
                }
        </style>

</head>
<body>

<div id="map" style="width: 1920px; height: 1080px;"></div>
<script>

        const map = L.map('map').setView([21, 108], 3);

        const tiles = L.tileLayer('/map1/{z}/{x}/{y}.png', {
                maxZoom: 19,
                attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">localhost-map</a>'
        }).addTo(map);

</script>

</body>
</html>

docker compose up -d

如果没有报错的话，地图瓦片就部署成功了，访问https://ip:port/index.html就能查看部署的地图，

地图源格式为https://ip:port/{z}/{x}/{y}.png