leaflet框选范围下载地图离线瓦片:以高德地图为例(附源码下载) ...

demo源码运行环境以及配置

• 运行环境：依赖Node安装环境，demo本地Node版本:14.19.1。
  
• 运行工具：vscode或者其他工具。
  
• 配置方式：下载demo源码，vscode打开，然后次序执行以下命令：
  （1）下载demo环境依赖包命令：npm i
  （2）启动Node后端接口命令：node nodeServer.js
  （3）打包demo命令： npm run build
  （4）直接打开index.html页面即可欣赏
  

示例效果

• 前端核心源码
  

1. import L from "leaflet";
2. import "@geoman-io/leaflet-geoman-free";
3. import "leaflet.vectorgrid"; //引用矢量瓦片插件
4. let TileLnglatTransform = require("tile-lnglat-transform"); //  用于经纬度转换为瓦片坐标
5. let x1, y1, x2, y2;
6. // 根据地图平台使用转换类
7. let TileLnglatTransformGaode = TileLnglatTransform.TileLnglatTransformGaode;
8. let tileALL = []; // 保存所有层级瓦片坐标等信息
9. const httpRequest = "http://localhost:8888";
10. const api = `${httpRequest}/api/downloadMap`;
11. initMap();
12. function initMap() {
13.   const map = L.map("map", {
14.     attributionControl: false,
15.   }).setView([23.56, 113.23], 14);
16.   L.tileLayer(
17.      "http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
18.      { subdomains: ["1", "2", "3", "4"], crossOrigin: true }
19.   ).addTo(map);
20.   map.pm.addControls({
21.     position: "topleft",
22.     drawMarker: false,
23.     drawCircleMarker: false,
24.     drawPolyline: false,
25.     drawRectangle: true,
26.     drawPolygon: false,
27.     drawCircle: false,
28.     drawText: false,
29.     editMode: false,
30.     dragMode: false,
31.     cutPolygon: false,
32.     removalMode: true,
33.     rotateMode: false,
34.   });
35.   map.pm.setLang("zh");
36.   map.on("pm:create", (e) => {
37.     // console.log(e);
38.     // 左下角
39.     const southWest = e.layer._bounds._southWest;
40.     // 右上角
41.     const northEast = e.layer._bounds._northEast;
42.     (x1 = southWest.lng), (y1 = northEast.lat); // 起始点坐标（左上角）
43.     (x2 = northEast.lng), (y2 = southWest.lat); // 终点坐标（右下角）
44.     tileALL = [];
45.     const minzoom = Number($("#minZoom").val());
46.     const maxzoom = Number($("#maxZoom").val());
47.     for (let i = minzoom; i <= maxzoom; i++) {
48.       tileALL[i] = {};
49.       let p1 = TileLnglatTransformGaode.lnglatToTile(x1, y1, i);
50.       let p2 = TileLnglatTransformGaode.lnglatToTile(x2, y2, i);
51.       tileALL[i].t = i; // 层级
52.       tileALL[i].x = [p1.tileX, p2.tileX]; // 瓦片横坐标范围（左至右）
53.       // tileALL[i].y = [p2.tileY, p1.tileY]; // 瓦片纵坐标范围（下至上）
54.       tileALL[i].y = [p1.tileY, p2.tileY]; // 瓦片纵坐标范围（下至上）
55.     }
56.     // console.log("tileALL:",tileALL);
57.   });
58.   $("#downloadMap_Btn").click(function () {
59.     if (tileALL.length === 0) return;
60.     const minzoom = Number($("#minZoom").val());
61.     const maxzoom = Number($("#maxZoom").val());
62.     $.ajax({
63.       type: "POST",
64.       url: api,
65.       data: {
66.         tileALL: tileALL,
67.         minzoom: minzoom,
68.         maxzoom: maxzoom,
69.       },
70.       success: function (res) {
71.         console.log("res", res);
72.       },
73.       error: function (e) {
74.         console.error("请求接口失败:", e);
75.       },
76.     });
77.   });
78. }

复制代码

下载源码：GIS之家的学习交换圈


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。