【HMWeb】HTML使用Leaflet实现本地离线地图Gis应用

鸿喵小仙女 2024-08-03 13:03:01 阅读 95

下载Leaflet

官网下载：https://leafletjs.com/reference.html

CSDN：https://download.csdn.net/download/hmxm6/89291989

在这里插入图片描述

选择版本号

在这里插入图片描述

添加html文件

在这里插入图片描述

加入代码

<html lang="en">code>

<head>

<meta charset="UTF-8">code>

<meta http-equiv="X-UA-Compatible" content="IE=edge">code>

<meta name="viewport" content="width=device-width, initial-scale=1.0">code>

<title>test</title>

<link rel="stylesheet" href="leaflet.css" />code>

<link rel="stylesheet" href="img.css" />code>

<script src="leaflet.js"></script>code>

<style>

html,body,#view{

width: 100%;

height: 100%;

overflow-y: hidden;

overflow-x: hidden;

display: flex;

}

#mapDiv {

width: 100%;

height: 100%;

position: fixed;

left: 0;

top: 0;

}

</style>

</head>

<body>

<div id="View">code>

<div id="mapDiv"></div>code>

</div>

</body>

<script>

let map = L.map("mapDiv", {

minZoom: 10,

maxZoom: 17,

center: [36.635712, 120.768945],

zoom: 13,

zoomDelta: 0.5,

fullscreenControl: false,

zoomControl: false,

attributionControl: false

});

var MarkArray = new Array(); // 地图点数组

var MarkArrayTimeOut;

var ClickBZMessage = null;

let url = "http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}";

this.baseLayer=L.tileLayer(url,{

attribution: '',

minZoom: 10,

maxZoom: 17,

subdomains: "1234"

});

this.map.addLayer(this.baseLayer);

L.control.zoom();

</script>

</html>

其中map里面

minZoom: 最小缩放

maxZoom: 最大缩放

center: 地图初始点

`下载离线地图`

 下载软件
 
https://download.csdn.net/download/hmxm6/89292287
 
打开软件，设置下载地图类型和位置
 
 
选择层级，选择地图存放路径，点击下载
 
 
然后把地图地址替换成下载的地址
 
url = “…/map/{z}/{x}/{y}/tile.png”;
 
 
打开浏览器就可以看到地图了

 
 
   上一篇： （免费领取源码）计算机毕业设计项目：基于web的失物招领系统 70116（开题答辩+程序定制+全套文案 ）上万套实战教程手把手教学JAVA、PHP，node.js，C++、python、大屏可视化 
  下一篇： 前端和大前端开发者有什么区别？ 
  本文标签 
  【HMWeb】HTML使用Leaflet实现本地离线地图Gis应用    
 
  
  声明
  本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
 如有涉及侵权，请联系本站进行删除
 转载本站原创文章，请注明来源及作者。