Leaflet 加载高德地图

这篇具有很好参考价值的文章主要介绍了Leaflet 加载高德地图。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

leaflet 高德底图加载,Leaflet 从入门到精通,html5,前端,leaflet,webgis,GIS,高德地图,javascript

前言

在前面的文章中,我们学习了如何使用 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 从入门到精通,html5,前端,leaflet,webgis,GIS,高德地图,javascript
leaflet 高德底图加载,Leaflet 从入门到精通,html5,前端,leaflet,webgis,GIS,高德地图,javascript

三、总结

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

文章参考

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

项目地址

  • Github地址
  • 拓展阅读

如果觉得我的文章对您有帮助,三连+关注便是对我创作的最大鼓励!或者一个star🌟也可以😂.文章来源地址https://www.toymoban.com/news/detail-843358.html

到了这里,关于Leaflet 加载高德地图的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

原文地址:https://blog.csdn.net/qq_45590504/article/details/136437182

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • leaflet-uniapp 缩放地图的同时 显示当前缩放层级

    记录实现过程: 需求为移动端用户在使用地图时,缩放地图的同时,可以获知地图此时缩放的级别。 效果图如下:此时缩放地图级别为13 map.on(\\\'\\\') 有对应的诸多行为 查看官网即可,这里根据需要为--zoomstart zoom zoomend 代码如下:  

    2024年02月14日
    浏览(8)
  • LeafLet加载自定义Legend的设计与实现

            众所周知,在GIS的世界里,图例和地图永远是一对一起出现的对象。在地图上表示地理环境各要素,比如山脉、河流、城市、铁路等所用的符号叫做图例。这些符号所表示的意义,常注明在地图的边角上。图例是表达地图内容的基本形式和方法,是现代地图的语言

    2023年04月27日
    浏览(5)
  • 一.Leaflet入门

      为什么第一个 GIS 前端开发框架选择 Leaflet。   Leaflet 是一款轻量级,用于移动友好交互式地图的JavaScript库。轻量级的意思就是代码总大小比较小。Leaflet利用HTML5和CSS3在现代浏览器上的优势,同时也可以在旧浏览器上访问。它可以通过大量插件进行扩展,具有漂亮的、

    2024年01月25日
    浏览(5)
  • Leaflet开发入门

    电子地图已经渗透到O2O、生活服务、出行等领域,传统的GIS也孕育着互联网基因。在国内互联网电子地图领域,百度地图和高德地图较为出色,天地图作为国家地理信息公共服务平台,推出了面向互联网的公众版在线地图服务与API。国内在开放源代码这一方面做得远远不够,

    2024年02月11日
    浏览(20)
  • leaflet使用L.geoJSON加载文件,参数pointToLayer的使用方法(130)

    第130个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+leaflet中加载geojson文件,这里介绍pointToLayer的使用方法。 点的处理方式不同于折线和多边形。默认情况下,简单标记使用为GeoJSON点绘制。在创建GeoJSON涂层时,我们可以通过pointToLayer在GeoJSON选项对象中传递函数来改

    2023年04月09日
    浏览(6)
  • leaflet基本使用

    目录 创建地图(map) 添加图层(tileLayer) 创建标记(marker) 图标(icon/divIcon) 弹框(bindPopup) options选项 方法 工具提示(bindTooltip) options选项 窗格(pane) 常用方法 options选项   maxZoom:地图最大的缩放等级   minZoom:地图最小的缩放等级   zoom:地图默认的缩放等级   center:地图默认的中心

    2024年02月04日
    浏览(17)
  • leaflet 示例教程100+ 目录

    目前已发表134篇文章 vue+leaflet系列教程旨在为开发者提供简单快捷的 代码示例 , 复制即可用 。在每一个示例中,解释相应的API知识点,做到 简易实现,轻松学会 。 基础设置 类别 标题 搭建 从0 到1 搭建开发环境 Layer 清除所有图层的通用方法 Layer 删除所有的marker图层,保

    2024年02月08日
    浏览(18)
  • 【leaflet】1. 初见

    需求 要做游戏地图了,看到大量产品都使用的leaflet,所以开始学习这个。 开发环境 版本号 描述 文章日期 2023-11-09 操作系统 Win10 - 22H2 19045.3570 leaflet 1.9.4 leaflet 是一个 开源 的 JavaScript 库,用于创建 交互式 的地图应用程序。 它提供了一系列的工具和类,用于实现地图的基本

    2024年02月03日
    浏览(11)
  • 前端加载高德离线地图的解决方案

    核心是需要下载地图瓦片放在本地,脱离在线地图服务,实现离线加载地图。 使用BIGMap工具下载地图离线瓦片到本地 下载地址: http://www.bigemap.com/reader/download/detail201802015.html BIGEMAP GIS Office-全能版 需要注册试用版(免费) 试用版可以下载到16级别的瓦片,单次下载不能超过

    2023年04月08日
    浏览(7)
  • leaflet显示大箭头的线(124)

    第124个 点击查看专栏目录 本示例的目的是介绍如何在vue+leaflet中显示大箭头的线。 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果. 示例效果

    2024年02月03日
    浏览(9)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包