Leaflet 加载高德地图

cover

前言

在前面的文章中，我们学习了如何使用 Leaflet 创建一个基本的地图。在本文中，我们将学习如何在 Leaflet 中加载高德地图，并结合实际应用构建地图点击事件。

一、介绍

高德地图是一款由高德软件提供的数字地图服务，在国内使用较为广泛。高德地图提供了丰富的地图数据和 API 接口，支持 Web、移动端等多种平台。本文中，我们将高德地图的wms服务加入leaflet地图对象，并构建点击事件输出高德坐标和WGS-84坐标；

二、内容

1.在 Leaflet 中加载高德地图

地图初始化教程看上一篇文章

在 Leaflet 中，我们可以使用 L.tileLayer() 方法加载高德地图。以下是一个加载高德地图的例子：

// 使用高德的WMS服务
var layer = L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {subdomains: ['1', '2', '3', '4'],minZoom: 1, // 最小放缩级别maxZoom: 19 // 最大放缩级别
});
map.addLayer(layer);

如果想要加载影像图层，则修改wms服务url:

var layer = L.tileLayer('http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {subdomains: ['1', '2', '3', '4'],minZoom: 1,maxZoom: 19
})
map.addLayer(layer);

subdomains 是一个可选参数，用于指定瓦片服务器的子域名。在这个例子中，高德地图提供了四个子域名用于加载瓦片图层，分别是 webrd01.is.autonavi.com、webrd02.is.autonavi.com、webrd03.is.autonavi.com 和 webrd04.is.autonavi.com。
通过使用多个子域名，可以提高地图瓦片的加载速度，因为浏览器对于同一域名下的并行连接有限制。由于每个子域名都可以被视为不同的域名，因此使用多个子域名可以提高浏览器对瓦片的并行下载数量，从而提高地图加载速度

在这个例子中，我们使用了高德地图的 WMS 服务，通过 L.tileLayer() 方法创建了一个瓦片图层，并将其添加到地图容器中。

2.构建点击事件

我们这里构建一个地图点击事件，点击哪里则视图飞行至指定位置并放大至指定视图级别：

map.on("click", (evt) => {console.log(evt);map.flyTo(evt.latlng, 13); //参数1是中心点经纬度，参数2是缩放级别
});

3.坐标转换

当然我们点击事件得到的坐标的坐标系是高德的火星坐标系，而非通用的wgs84坐标系，因此我们需要进行坐标转换；
因为高德官方只提供了其他坐标系转高德坐标系的API，我们这里想要将高德坐标转换为WGS84坐标需要自定义转换函数，代码如下:

//定义一些常量
const PI = 3.1415926535897932384626;
const a = 6378245.0;  //长半轴
const ee = 0.00669342162296594323; //扁率/*** GCJ02 转换为 WGS84* @param lng* @param lat* @returns {*[]}*/
function gcj02towgs84 (lng, lat) {lat = +latlng = +lngif (out_of_china(lng, lat)) {return [lng, lat]} else {let dlat = transformlat(lng - 105.0, lat - 35.0)let dlng = transformlng(lng - 105.0, lat - 35.0)let radlat = lat / 180.0 * PIlet magic = Math.sin(radlat)magic = 1 - ee * magic * magiclet sqrtmagic = Math.sqrt(magic)dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI)dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI)let mglat = lat + dlatlet mglng = lng + dlngreturn [lng * 2 - mglng, lat * 2 - mglat]}
}/*** 判断是否在国内，不在国内则不做偏移* @param lng* @param lat* @returns {boolean}*/
function out_of_china (lng, lat) {lat = +latlng = +lng// 纬度3.86~53.55,经度73.66~135.05return !(lng > 73.66 && lng < 135.05 && lat > 3.86 && lat < 53.55)
}function transformlat (lng, lat) {lat = +latlng = +lnglet ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng))ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0return ret
}function transformlng (lng, lat) {lat = +latlng = +lnglet ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng))ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0return ret
}let coords = gcj02towgs84(evt.latlng.lng, evt.latlng.lat); // 将高德坐标转化为wgs84坐标

4.完整代码

以下是一个完整的在 Leaflet 中加载高德地图的示例代码：

<!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>Leaflet 加载高德地图</title><script src="https://lib.baomitu.com/leaflet/1.9.2/leaflet.js"></script><link rel="stylesheet" href="https://lib.baomitu.com/leaflet/1.9.2/leaflet.css"><style>* {margin: 0;padding: 0}#map {position: absolute;top: 0;bottom: 0;left: 0;right: 0;cursor: pointer;}</style>
</head>
<body><div id="map"></div><script>//定义一些常量const PI = 3.1415926535897932384626;const a = 6378245.0;  //长半轴const ee = 0.00669342162296594323; //扁率/*** GCJ02 转换为 WGS84* @param lng* @param lat* @returns {*[]}*/function gcj02towgs84 (lng, lat) {lat = +latlng = +lngif (out_of_china(lng, lat)) {return [lng, lat]} else {let dlat = transformlat(lng - 105.0, lat - 35.0)let dlng = transformlng(lng - 105.0, lat - 35.0)let radlat = lat / 180.0 * PIlet magic = Math.sin(radlat)magic = 1 - ee * magic * magiclet sqrtmagic = Math.sqrt(magic)dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI)dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI)let mglat = lat + dlatlet mglng = lng + dlngreturn [lng * 2 - mglng, lat * 2 - mglat]}}/*** 判断是否在国内，不在国内则不做偏移* @param lng* @param lat* @returns {boolean}*/function out_of_china (lng, lat) {lat = +latlng = +lng// 纬度3.86~53.55,经度73.66~135.05return !(lng > 73.66 && lng < 135.05 && lat > 3.86 && lat < 53.55)}function transformlat (lng, lat) {lat = +latlng = +lnglet ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng))ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0return ret}function transformlng (lng, lat) {lat = +latlng = +lnglet ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng))ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0return ret}var map = L.map("map").setView([31.5, 121.5], 10);//使用高德的WMS服务var layer = L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {subdomains: ['1', '2', '3', '4'],minZoom: 1,maxZoom: 19})map.addLayer(layer);map.on("click", (evt) => {console.log("高德坐标：",evt.latlng.lat,evt.latlng.lng);let coords = gcj02towgs84(evt.latlng.lng, evt.latlng.lat);console.log("wgs-84坐标:",coords[1],coords[0]);map.flyTo(evt.latlng, 13); //参数1是中心点经纬度，参数2是缩放级别});</script>
</body>
</html>

实现效果如下:
高德底图矢量
高德影像

三、总结

在本文中，我们学习了如何在 Leaflet 中加载高德地图，并构建了地图点击事件和坐标转换函数。通过实际案例，我们了解了如何在 leaflet 中使用高德地图的矢量和影像底图，并结合相关API进行项目开发。

文章参考

  • Leaflet 官方文档：https://leafletjs.com/reference.html

项目地址

  • Github地址
  • 拓展阅读

如果觉得我的文章对您有帮助，三连+关注便是对我创作的最大鼓励！或者一个star🌟也可以😂.

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

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

相关文章

数学建模【灰色关联分析】

数学建模【灰色关联分析】

一、灰色关联分析简介 一般的抽象系统,如社会系统、经济系统、农业系统、生态系统、教育系统等都包含有许多种因素&#xff0c;多种因素共同作用的结果决定了该系统的发展态势。人们常常希望知道在众多的因素中&#xff0c;哪些是主要因素&#xff0c;哪些是次要因素;哪些因素…
阅读更多...
Apache SeaTunnel 2.3.4 版本发布：功能升级，性能提升

Apache SeaTunnel 2.3.4 版本发布：功能升级，性能提升

​Apache SeaTunnel团队自豪地宣布2.3.4版本正式发布&#xff01;本次更新聚焦于增强核心功能&#xff0c;改善用户体验&#xff0c;并进一步优化文档质量。 此次版本发布带来了多项重要更新和功能增强&#xff0c;包括核心与API的修复、文档的全面优化、Catalog支持的引入&…
阅读更多...
【S32DS报错】-7-程序进入HardFault_Handler，无法正常运行

【S32DS报错】-7-程序进入HardFault_Handler，无法正常运行

【S32K3_MCAL从入门到精通】合集&#xff1a; S32K3_MCAL从入门到精通https://blog.csdn.net/qfmzhu/category_12519033.html 问题背景&#xff1a; 在S32DS IDE中使用PEmicro&#xff08;Multilink ACP&#xff0c;Multilink Universal&#xff0c;Multilink FX&#xff09…
阅读更多...
【Kotlin】函数

【Kotlin】函数

1 常规函数 1.1 无参函数 fun main() {myFun() }fun myFun() {println("myFun") // 打印: myFun } 1.2 有参函数 1&#xff09;常规调用 fun main() {myFun("myFun") // 打印: myFun }fun myFun(str: String) {println(str) } 2&#xff09;形参指定默…
阅读更多...
Doris实战——美联物业数仓

Doris实战——美联物业数仓

目录 一、背景 1.1 企业背景 1.2 面临的问题 二、早期架构 三、新数仓架构 3.1 技术选型 3.2 运行架构 3.2.1 数据模型 纵向分域 横向分层 数据同步策略 3.2.2 数据同步策略 增量策略 全量策略 四、应用实践 4.1 业务模型 4.2 具体应用 五、实践经验 5.1 数据…
阅读更多...
张宇30讲学习笔记

张宇30讲学习笔记

初等数学 x \sqrt{x} x ​是算数平方根&#xff0c;一定≥0&#xff1b; x 2 \sqrt{x^2} x2 ​|x| x2|x2||x|2 x3≠|x3||x|3 不等式 a>0&#xff0c;b>0&#xff0c;则ab≥2 a b \sqrt{ab} ab ​ 对数 ln a b \frac{a}{b} ba​lna-lnb 高等数学 单调性 线性代数
阅读更多...
【六袆 - MySQL】MySQL 5.5及更高版本中，InnoDB是新表的默认存储引擎；

【六袆 - MySQL】MySQL 5.5及更高版本中，InnoDB是新表的默认存储引擎；

InnoDB 这是一个MySQL组件&#xff0c;结合了高性能和事务处理能力&#xff0c;以确保可靠性、健壮性和并发访问。它体现了ACID设计哲学。它作为一个存储引擎存在&#xff0c;处理使用ENGINEINNODB子句创建的或修改的表。请参阅第14章“InnoDB存储引擎”以获取有关架构细节和管…
阅读更多...
Android14之解决编译报错:bazel: no such file or directory(一百八十九)

Android14之解决编译报错:bazel: no such file or directory(一百八十九)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…
阅读更多...
【暗月安全】2021年渗透测试全套培训视频

【暗月安全】2021年渗透测试全套培训视频

参与培训需要遵守国家法律法规&#xff0c;相关知识只做技术研究&#xff0c;请勿用于违法用途&#xff0c;造成任何后果自负与本人无关。 中华人民共和国网络安全法&#xff08;2017 年 6 月 1 日起施行&#xff09; 第二十二条 任何个人和组织不得从事入侵他人网络、干扰他…
阅读更多...
12 权重衰退【李沐动手学深度学习v2课程笔记】

12 权重衰退【李沐动手学深度学习v2课程笔记】

1.权重衰退 使用均方范数来进行权重衰退 柔性限制 柔性限制对最优解的影响 参数更新法则 总结 2.代码实现 %matplotlib inline import torch from torch import nn from d2l import torch as d2l 生成数据 n_train, n_test, num_inputs, batch_size 20, 100, 200, 5 true_w, t…
阅读更多...
42、网络编程/多点通信和域套接字通信模型20240304

42、网络编程/多点通信和域套接字通信模型20240304

一、多点通信之广播的收发端实现 1.广播发送端代码&#xff1a; #include<myhead.h>int main(int argc, const char *argv[]) {int sfdsocket(AF_INET,SOCK_DGRAM,0);//创建套接字if(sfd-1){perror("socket,error");return -1;}int broadcast1;//设置套接字广…
阅读更多...
Java解决杨辉三角

Java解决杨辉三角

Java解决杨辉三角 01 题目 给定一个非负整数 *numRows&#xff0c;*生成「杨辉三角」的前 numRows 行。 在「杨辉三角」中&#xff0c;每个数是它左上方和右上方的数的和。 示例 1: 输入: numRows 5 输出: [[1],[1,1],[1,2,1],[1,3,3,1],[1,4,6,4,1]]示例 2: 输入: numRo…
阅读更多...
Python字符串中%d，%.f的用法

Python字符串中%d，%.f的用法

在字符串中&#xff0c;我们经常需要改变其中的一些几个字符&#xff0c;比如 第一个d%就是epoch1&#xff0c;会随着epoch的变化而变化。同理&#xff0c;后面的也是。打印出的结果就是 其中&#xff0c;epoch迭代了3次&#xff0c;从0开始。会发现 d%&#xff0c;是整数&…
阅读更多...
【Python】外网远程登录访问jupyter notebook+pycharm使用ipython

【Python】外网远程登录访问jupyter notebook+pycharm使用ipython

第一步&#xff1a;创建python虚拟环境 conda create -n py3610 python3.6.10第二步&#xff1a;安装ipython pip install ipython pip install ipython notebook第三步&#xff1a;创建 IPython Notebook 服务器配置文件 # 进入python交互shell&#xff0c;设置密码 >&…
阅读更多...
iOS 17.0 UIGraphicsBeginImageContextWithOptions 崩溃处理

iOS 17.0 UIGraphicsBeginImageContextWithOptions 崩溃处理

在升级到iOS17后你会发现&#xff0c;之前版本运行的很好&#xff0c;这个版本突然会出现一个运行闪退。报错日志为*** Assertion failure in void _UIGraphicsBeginImageContextWithOptions(CGSize, BOOL, CGFloat, BOOL)(), UIGraphics.m:410 跟踪到具体的报错位置如下所示&a…
阅读更多...
idea中引入新JDK环境

idea中引入新JDK环境

在不同的项目中往往会需要不同的运行环境&#xff0c;那么如何下载一个新的环境并运用到idea中呢&#xff1f; 下面给出的就是oracle官网&#xff0c;以JDK17为例教大家如何下载 Java Archive Downloads - GraalVM for JDK 17https://www.oracle.com/java/technologies/javase…
阅读更多...
Docker容器（3）单容器管理

Docker容器（3）单容器管理

一、单容器 1.1概念简介 Docker三个重要概念: 仓库(Repository); 镜像(Image); 容器(Container). *Docker的三个重要概念是仓库(Repository)、镜像(Image)和容器(Container)**。具体如下&#xff1a; **镜像(Image)**&#xff1a;Docker镜像是创建容器的基础&#xff0c;它类似…
阅读更多...
游戏引擎用什么语言开发上层应用

游戏引擎用什么语言开发上层应用

现在主流的游戏引擎包括&#xff1a; 1、Unity3D&#xff0c;C#语言&#xff0c;优点在于支持几乎所有平台 丹麦创立的一家公司&#xff0c;现已被微软收购。在中国市场占有率最高&#xff0c;也是社群很强大&#xff0c;一般解决方案也能在网上找到&#xff0c;教程丰富。物理…
阅读更多...
IP-guard邮件管控再升级，记录屏幕画面，智能阻断泄密邮件

IP-guard邮件管控再升级，记录屏幕画面，智能阻断泄密邮件

邮件是工作沟通以及文件传输的重要工具，却也成为了信息泄露的常见渠道。员工通过邮件对外发送了什么内容，是否含有敏感信息都无从得知，机密通过邮件渠道外泄也难以制止。想要防止企业的重要信息通过邮件方式泄露，我们不仅需要通过技术措施对外发邮件的行为进行规范，也要对…
阅读更多...
【三维重建】VastGaussian:用于大场景重建的大3D Gaussian(CVPR 2024)

【三维重建】VastGaussian:用于大场景重建的大3D Gaussian(CVPR 2024)

题目&#xff1a;VastGaussian: Vast 3D Gaussians for Large Scene Reconstruction 来源&#xff1a;清华大学&#xff1b;华为诺亚&#xff1b;中国科学院 链接&#xff1a;https://vastgaussian.github.io/ 总结&#xff1a;VastGaussian&#xff1a;基于3D GS的分块优化重…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023