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

下载Leaflet

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

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

在这里插入图片描述

选择版本号

在这里插入图片描述

添加html文件

在这里插入图片描述

加入代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>test</title><!-- 引入 文件 --><link rel="stylesheet" href="leaflet.css" /><link rel="stylesheet" href="img.css" /><script src="leaflet.js"></script><!-- 增加地图高度 --><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"><div id="mapDiv"></div></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”;

在这里插入图片描述

打开浏览器就可以看到地图了

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/835166.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

记一次DNS故障导致用户无法充值的问题(下)

上一篇说到DNS故障导致无法充值&#xff0c;后来我们通过拨测发现业务域名的解析目标地址被解析到了【127.0.0.1】IP。 1、联系阿里云厂商&#xff0c;通过沟通&#xff0c;阿里云反馈我们的域名被XX省通管单位封禁了&#xff0c;导致解析到了不正确的地址。 2、为了解决用户问…

【hackmyvm】 Animetronic靶机

靶机测试 arp-scanporturl枚举exiftool套中套passwordsudo 提权 arp-scan arp-scan 检测局域网中活动的主机 192.168.9.203 靶机IP地址port 通过nmap扫描&#xff0c;获取目标主机的端口信息 ┌──(root㉿kali)-[/usr/share/seclists] └─# nmap -sT -sV -O 192.16…

大数据ETL工具kettle-spoon

大数据ETL工具kettle-spoon9.4&#xff0c;主要提供数据抽取、转换、加载功能。 下载地址&#xff1a;https://download.csdn.net/download/xsfqh/89292236

P1802 5 倍经验日

题目描述: 现在 absi2011 拿出了 &#x1d465;x 个迷你装药物&#xff08;嗑药打人可耻…&#xff09;&#xff0c;准备开始与那些人打了。 由于迷你装药物每个只能用一次&#xff0c;所以 absi2011 要谨慎的使用这些药。悲剧的是&#xff0c;用药量没达到最少打败该人所需的…

【数据库】SELECT 语句的完整指南

在 MySQL 数据库中&#xff0c;SELECT 语句是最常用的查询工具之一。它允许用户从一个或多个表中检索数据&#xff0c;并可以应用各种条件、排序、聚合和其他操作。本文将介绍 MySQL 中 SELECT 语句的各种用法&#xff0c;包括基本语法、条件筛选、聚合函数、排序、分组、多表连…

Java面试题:方法区在JVM中存储什么内容?它与堆内存有何不同?

在Java虚拟机&#xff08;JVM&#xff09;中&#xff0c;方法区&#xff08;Method Area&#xff09;是一个特殊的内存区域&#xff0c;用于存储类信息、常量、静态变量以及编译后的代码等。从Java 8开始&#xff0c;方法区的概念发生了一些变化&#xff0c;其中一些功能被转移…

谷歌搅局AI制药,进击的AlphaFold3模型 | 最新快讯

AI制药角逐战。 文&#xff5c;氨基观察 结构生物学是生物学的核心领域之一&#xff0c;其核心任务是揭示生物分子的三维结构&#xff0c;这对于理解其功能和行为至关重要。 传统的结构测定方法&#xff0c;如X射线晶体学和核磁共振&#xff08;NMR&#xff09;技术&#xff0…

如何在JavaScript/Vue中获取当前时间并格式化输出(精确到时分秒)

如何在JavaScript/Vue中获取当前时间并格式化输出&#xff08;精确到时分秒&#xff09; 不只是树&#xff0c;人也是一样&#xff0c;在不确定中生活的人&#xff0c;能比较经得起生活的考验&#xff0c;会锻炼出一颗独立自主的心。在不确定中&#xff0c;就能学会把很少的养分…

CTF例题和知识点

[ACTF2020 新生赛]Include 打开靶机发现一个超链接&#xff0c;点击之后出现一段话 “Can you find out the flag?” 查看源码注入&#xff0c;无果 仔细看url&#xff0c;发现有flag.php 根据题目提示&#xff0c;该题应该是文件包含漏洞&#xff0c;因此可以判断出此题是PH…

1847B - Hamon Odyssey

这里写目录标题 Odd Divisor※前置知识🐬完整代码:Odd Divisor 洛谷题目|CF原题|V站题目 ※前置知识 and 即 & —— 按位与。 按位与的特性: a , b ≥ a a n d b a , b ≥ a \ and \ b a,b≥a and b 因此可以得出题中的最小值: a 1 a n d a 2 a n d .…

C数据结构:栈和队列应用场景

计算器实例 main.c #include <stdlib.h> #include <stdio.h> #include "sqstack.h"void compute(sqstack* snum,datatype* data) {datatype n1,n2,n;st_pop(snum,&n2);st_pop(snum,&n1);switch(*data){case :n n1 n2;break;case -:n n1 - n2…

基于SpringBoot的全国风景区WebGIS按省展示实践

目录 前言 一、全国风景区信息介绍 1、全国范围内数据分布 2、全国风景区分布 3、PostGIS空间关联查询 二、后台查询的设计与实现 1、Model和Mapper层 2、业务层和控制层设计 三、WebGIS可视化 1、省份范围可视化 2、省级风景区可视化展示 3、成果展示 总结 前…

LocalDate 数据库不兼容问题,因为LocalDate 是 long 类型的

我今天遇到一报错&#xff1a; SqlSession [org.apache.ibatis.session.defaults.DefaultSqlSession316f9272] was not registered for synchronization because synchronization is not active JDBC Connection [HikariProxyConnection2127597288 wrapping com.mysql.cj.jdbc…

P9420 [蓝桥杯 2023 国 B] 子 2023 / 双子数

蓝桥杯2023国B A、B题 A题 分析 dp问题 根据子序列&#xff1a;2&#xff0c;20&#xff0c;202&#xff0c;2023分为4个状态&#xff1b; 当前数字为2时&#xff0c;处于dp[0]&#xff0c;或者和dp[1]结合成dp[2]&#xff1b; 当前数字为0时&#xff0c;和dp[0]结合成dp[…

keil5软件安装教程(MDKv5.39)

keil5软件安装分为三部分&#xff1a; 目录 1.安装mdk 2.激活mdk 3.安装STM32芯片包 1.安装mdk 安装包链接&#xff1a;链接&#xff1a;https://pan.baidu.com/s/1PZoGhzI5Y19ROv7xe9QJKA?pwdgt3s 提取码&#xff1a;gt3s 1、下载keil5的压缩包并解压&#xff0c;鼠…

buuctf-misc题目练习三

荷兰宽带数据泄露 BIN 文件&#xff0c;也称为二进制文件&#xff0c;是一种压缩文件格式&#xff0c;可以 包含图像和视频等信息 , 并被许多应用程序用于各种目的。 RouterPassView是一个找回路由器密码的工具。 大多数现代路由器允许备份到一个文件路由器的配置&#xff0c…

CDGA|电子行业数据治理六大痛点及突围之道

CDGA|电子行业数据治理六大痛点及突围之道 随着信息技术的迅猛发展&#xff0c;电子行业对数据的需求和依赖日益增强。然而&#xff0c;数据治理作为确保数据质量、安全性及有效利用的关键环节&#xff0c;在电子行业中却面临着一系列痛点。本文将深入探讨电子行业数据治理的六…

CTFHUB-技能树-Web题-RCE(远程代码执行)-文件包含

CTFHUB-技能树-Web题-RCE&#xff08;远程代码执行&#xff09; 文件包含 文章目录 CTFHUB-技能树-Web题-RCE&#xff08;远程代码执行&#xff09;文件包含解题方法1:![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/71f7355b3c124dfe8cdf1c95e6991553.png#pic_ce…

【Java基础】Maven继承

1. 前言 Maven 在设计时&#xff0c;借鉴了 Java 面向对象中的继承思想&#xff0c;提出了 POM 继承思想。 2. Maven继承 当一个项目包含多个模块时&#xff0c;可以在该项目中再创建一个父模块&#xff0c;并在其 POM 中声明依赖&#xff0c;其他模块的 POM 可通过继承父模…

超级好用的C++实用库之文件目录操作

&#x1f4a1; 需要该C实用库源码的大佬们&#xff0c;可扫码关注文章末尾的微信公众号二维码&#xff0c;或搜索微信公众号“希望睿智”。添加关注后&#xff0c;输入消息“超级好用的C实用库”&#xff0c;即可获得源码的下载链接。 概述 文件和目录操作是操作系统层面上的基…