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页面即可欣赏
示例效果
https://images.xiaozhuanlan.com/photo/2023/d34b547c2733b8408b801d70b01d9f36.png
https://images.xiaozhuanlan.com/photo/2023/fe130f56e84fa6bcb6424a3887618d31.png
https://images.xiaozhuanlan.com/photo/2023/5c3b610429469570d8f867d4957f44bf.png
[*]前端核心源码
import L from "leaflet";
import "@geoman-io/leaflet-geoman-free";
import "leaflet.vectorgrid"; //引用矢量瓦片插件
let TileLnglatTransform = require("tile-lnglat-transform"); //用于经纬度转换为瓦片坐标
let x1, y1, x2, y2;
// 根据地图平台使用转换类
let TileLnglatTransformGaode = TileLnglatTransform.TileLnglatTransformGaode;
let tileALL = []; // 保存所有层级瓦片坐标等信息
const httpRequest = "http://localhost:8888";
const api = `${httpRequest}/api/downloadMap`;
initMap();
function initMap() {
const map = L.map("map", {
attributionControl: false,
}).setView(, 14);
L.tileLayer(
"http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
{ subdomains: ["1", "2", "3", "4"], crossOrigin: true }
).addTo(map);
map.pm.addControls({
position: "topleft",
drawMarker: false,
drawCircleMarker: false,
drawPolyline: false,
drawRectangle: true,
drawPolygon: false,
drawCircle: false,
drawText: false,
editMode: false,
dragMode: false,
cutPolygon: false,
removalMode: true,
rotateMode: false,
});
map.pm.setLang("zh");
map.on("pm:create", (e) => {
// console.log(e);
// 左下角
const southWest = e.layer._bounds._southWest;
// 右上角
const northEast = e.layer._bounds._northEast;
(x1 = southWest.lng), (y1 = northEast.lat); // 起始点坐标（左上角）
(x2 = northEast.lng), (y2 = southWest.lat); // 终点坐标（右下角）
tileALL = [];
const minzoom = Number($("#minZoom").val());
const maxzoom = Number($("#maxZoom").val());
for (let i = minzoom; i <= maxzoom; i++) {
tileALL = {};
let p1 = TileLnglatTransformGaode.lnglatToTile(x1, y1, i);
let p2 = TileLnglatTransformGaode.lnglatToTile(x2, y2, i);
tileALL.t = i; // 层级
tileALL.x = ; // 瓦片横坐标范围（左至右）
// tileALL.y = ; // 瓦片纵坐标范围（下至上）
tileALL.y = ; // 瓦片纵坐标范围（下至上）
}
// console.log("tileALL:",tileALL);
});
$("#downloadMap_Btn").click(function () {
if (tileALL.length === 0) return;
const minzoom = Number($("#minZoom").val());
const maxzoom = Number($("#maxZoom").val());
$.ajax({
type: "POST",
url: api,
data: {
tileALL: tileALL,
minzoom: minzoom,
maxzoom: maxzoom,
},
success: function (res) {
console.log("res", res);
},
error: function (e) {
console.error("请求接口失败:", e);
},
});
});
}下载源码：GIS之家的学习交换圈
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]