Leaflet 加载高德地图_leaflet加载高德地图-程序员宅基地

技术标签： GIS webgis html5 前端高德地图 Leaflet 从入门到精通 leaflet javascript

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 = +lat
  lng = +lng
  if (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 * PI
    let magic = Math.sin(radlat)
    magic = 1 - ee * magic * magic
    let 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 + dlat
    let mglng = lng + dlng
    return [lng * 2 - mglng, lat * 2 - mglat]
  }
}

/**
 * 判断是否在国内，不在国内则不做偏移
 * @param lng
 * @param lat
 * @returns {boolean}
 */
function out_of_china (lng, lat) {
    
  lat = +lat
  lng = +lng
  // 纬度3.86~53.55,经度73.66~135.05
  return !(lng > 73.66 && lng < 135.05 && lat > 3.86 && lat < 53.55)
}

function transformlat (lng, lat) {
    
  lat = +lat
  lng = +lng
  let 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.0
  ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0
  ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0
  return ret
}

function transformlng (lng, lat) {
    
  lat = +lat
  lng = +lng
  let 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.0
  ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0
  ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0
  return 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 = +lat
          lng = +lng
          if (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 * PI
            let magic = Math.sin(radlat)
            magic = 1 - ee * magic * magic
            let 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 + dlat
            let mglng = lng + dlng
            return [lng * 2 - mglng, lat * 2 - mglat]
          }
        }

        /**
         * 判断是否在国内，不在国内则不做偏移
         * @param lng
         * @param lat
         * @returns {boolean}
         */
        function out_of_china (lng, lat) {
      
          lat = +lat
          lng = +lng
          // 纬度3.86~53.55,经度73.66~135.05
          return !(lng > 73.66 && lng < 135.05 && lat > 3.86 && lat < 53.55)
        }

        function transformlat (lng, lat) {
      
          lat = +lat
          lng = +lng
          let 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.0
          ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0
          ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0
          return ret
        }

        function transformlng (lng, lat) {
      
          lat = +lat
          lng = +lng
          let 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.0
          ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0
          ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0
          return 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

项目地址

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

本文链接：https://blog.csdn.net/qq_45590504/article/details/136437182

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

Android音量调节（一）音量键的处理流程_安卓机顶盒修改音量调节大小-程序员宅基地

文章浏览阅读1.1w次，点赞21次，收藏67次。文章目录1.Android音量键调节音量流程2.Android流定义3.按键的处理流程3.1 adjustSuggestedStreamVolume3.2 adjustStreamVolume1.Android音量键调节音量流程整个流程分析是基于Android 8.0来进行讲解的2.Android流定义在Android系统中，音量都是分开控制的，比如媒体音量，铃声音量，闹钟音量，蓝牙音量，..._安卓机顶盒修改音量调节大小

PSO求解二维路径规划的步骤如下_java实现pso路径规划-程序员宅基地

文章浏览阅读494次。STEP1：创建二维环境STEP2：初始化参数STEP3：初始化粒子群中各个粒子的位置和速度STEP4：主循环，迭代MaxIt次，每次循环更新nPop个粒子的速度和位置，以更新某一个粒子的速度和位置为例STEP4.1：更新当前粒子的..._java实现pso路径规划

java计算机毕业设计师生教学评价系统源代码+数据库+系统+lw文档_教师评价系统代码源-程序员宅基地

文章浏览阅读377次。springboot基于SpringBoot的婚庆策划系统的设计与实现。springboot基于SpingBoot的剧本杀管理系统。springboot基于SpringBoot智能家电商城。JSP鸡厂养殖管理系统的设计与实现sqlserver。JSP客户关系管理系统的设计与实现sqlserver。JSP网上视频点播系统的设计与实现mysql。基于Java技术的社区物业管理的设计与实现。springboot点餐系统的设计与实现。ssm基于OO的生鲜果蔬电商的设计与实现。_教师评价系统代码源

10分钟看懂Docker和K8S-程序员宅基地

文章浏览阅读41次。就在Docker容器技术被炒得热火朝天之时，大家发现，如果想要将Docker应用于具体的业务实现，是存在困难的——编排、管理和调度等各个方面，都不容易。但是，如果你仔细洞察这些变化，会发现，所谓的核心网，其实本质上并没有发生改变，无非就是很多的服务器而已。变化的，是这些“服务器”的形态和接口：形态，从机柜单板，变成机柜刀片，从机柜刀片，变成X86通用刀片服务器；接口，从中继线缆，变成网线，从网线，变成光纤。还能够在不停机的情况下，随意变大，随意变小，随意变强，随意变弱，在性能和功耗之间动态平衡。

HTML5期末大作业：美食网站设计——食品网(6页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计大学生毕设网页设计源码HTML_设计美食网站-程序员宅基地

文章浏览阅读1.8k次。HTML5期末大作业：美食网站设计——食品网(6页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计大学生毕设网页设计源码HTML1.临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？2.没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~3.原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，_设计美食网站

对计算机pep介绍正确的是,2018级计算机科学技术导论-程序员宅基地

文章浏览阅读331次。跳至...新闻发布区最新通知课程APP(安卓端)资源导航教学大纲教学日历中文参考教材课程内容分布主讲教师简介参考书目与学习网站Tell me about your expectations for the course.学习目标计算机科学导论KeywordsChapter 1 The Big Picture PPT1.Grouping your group then make a discussi..._photograph compression for web usage or email