【leaflet】1. 初见

▒ 目录 ▒

    • 🛫 导读
      • 需求
      • 开发环境
    • 1️⃣ 概念
      • 概念解释
      • 特点
    • 2️⃣ 学习路线图
    • 3️⃣ html示例
    • 🛬 文章小结
    • 📖 参考资料

🛫 导读

需求

要做游戏地图了,看到大量产品都使用的leaflet,所以开始学习这个。

开发环境

版本号描述
文章日期2023-11-09
操作系统Win10 - 22H219045.3570
leaflet1.9.4

1️⃣ 概念

leaflet 是一个开源的 JavaScript 库,用于创建交互式的地图应用程序。
它提供了一系列的工具和类,用于实现地图的基本功能,如添加瓦片图层、绘制标记和路径等。

概念解释

下面是leaflet 中的一些概念解释:

  1. 地图(Map):leaflet 中的地图是指一个 2D 空间的表示,可以包含多个图层
    每一个图层代表一种类型的地理信息,如地形、街道、行政区划等。
    地图可以显示在网页上,用户可以通过缩放、平移和旋转等操作来查看地图内容。
  2. 图层(Layer):leaflet 中的图层是指一个地理信息的显示层
    每一个图层都有一个对应的Layer类,该类负责处理图层的添加、删除、缩放等操作。
    leaflet 支持多种类型的图层,如
    • 矢量图层(VectorLayer)
    • 栅格图层(GridLayer)
    • 热力图:支持在地图上显示热力图效果,用于表示某个地区的人气、访问量等数据。
    • 聚类图:支持在地图上显示聚类图效果,用于表示某个地区的人口密度、分布情况等数据。
    • 地形图层(TerrainLayer)等。
  3. 标记(Marker):leaflet 中的标记是指在地图上显示的一个标记点。
    每一个标记都是一个Marker类的实例,该类负责处理标记的添加、删除、缩放等操作。
    标记可以表示一个特定的地理位置,通常用于显示地图上的兴趣点等信息
  4. 路径(Polyline):leaflet 中的路径是指在地图上绘制的一条连续的线条
    每一个路径都是一个Polyline类的实例,该类负责处理路径的添加、删除、缩放等操作。
    路径通常用于表示地图上的道路、河流、边界等信息。
  5. 事件(Event):leaflet 中的事件是指在地图上发生的一些交互操作
    例如,当用户点击地图、缩放地图、移动地图等操作时,都会触发相应的事件。
    leaflet 提供了丰富的事件处理机制,开发人员可以通过监听这些事件来响应用户的交互操作。

特点

总体来说,leaflet 是一款非常优秀的 WebGIS 库,适用于需要在移动端或 Web 平台上展示地理信息的应用。

  1. 易用性:leaflet 使用简单,不需要任何特殊的依赖,支持轻量级的 API,容易上手。
  2. 移动端兼容性:leaflet 在移动端设备上也能很好地兼容,并且支持响应式设计,自适应不同的屏幕大小。
  3. 强大的功能:leaflet 支持多图层、标记、路径、热点等多种地理信息的展示,同时还支持多边形、圆形等几何图形的绘制。
  4. 支持多种地图数据源:leaflet 支持加载多种常见的地图数据源,如 OpenStreetMap、Google Maps、ESRI basemaps 等,可以根据需求自由选择。
  5. 可扩展性:leaflet 提供了丰富的插件生态,允许开发者自定义功能,例如添加仪表盘、进度条等。
  6. 可交互性:拖拽、放大缩小、跳到指定位置、键盘控制、事件、标记拖动。
  7. 视觉特效:缩放动效、

2️⃣ 学习路线图

  1. 官方网站开始,该网站为图书馆提供了全面的指南和参考文档。
  2. 熟悉 Web 开发的基础知识,包括 HTML、CSS 和 JavaScript,因为它们对于使用 Leaflet 创建交互式地图至关重要。
  3. 通过从官方网站下载库或使用 npm 或 yarn 等包管理器来安装 Leaflet。
  4. 探索 Leaflet API 并学习如何使用其各种功能,例如创建地图、添加标记和弹出窗口、显示图块和图层以及处理用户交互。
  5. 通过构建简单的项目来练习,例如您家乡的地图或您最喜欢的地方的地图,随着您对 Leaflet 的熟悉程度越来越高,逐渐增加项目的复杂性。
  6. 通过参与在线论坛加入传单社区,获取更多资讯。

3️⃣ html示例

面对这么强大的leaflet,我们这就来实战一下,先看看简单的效果:
在这里插入图片描述

  1. 加载 leaflet 库:在你的 HTML 文件中,使用 script 和 link 标签加载 leaflet 库。

    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    
  2. 创建地图容器:在你的 HTML 文件中创建一个地图容器,并设置其 id 为"map"。

    <div id="map"></div>
    
  3. 创建 leaflet 地图实例:使用 leaflet 库创建一个地图实例,并将其绑定到地图容器。

         var map = new L.Map('map', {
           center: new L.LatLng(39.86,116.45),
           zoom: 4
         });
    
  4. 加载底图:使用 leaflet 的tileLayer类加载底图。你可以使用 leaflet 提供的在线底图服务,如 mapbox,OpenStreetMap 等,或者加载本地的瓦片地图。

     L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
        attribution: '夜猫逐梦 @CartoDB Positron>',
        maxZoom: 18
     }).addTo(map);
    
  5. 添加路线:使用 leaflet 的Polyline类在地图上添加路线。你需要提供路线的起点和终点坐标,以及路线的样式。

    var polyline = L.polyline([[51.505, -0.12], [51.515, -0.125]], {
       color: 'red',
       weight: 3
    }).addTo(map);
    
  6. 增加标记及popup。

    var bj = L.marker([39.92,116.46]).bindPopup('这里是北京');
    var sh = L.marker([31.213,121.445]).bindPopup('这里是上海');
    var gz = L.marker([23.16,113.23]).bindPopup('这里是广州');
    var cities = L.layerGroup([bj, sh, gz]).addTo(map);
    

完整代码如下:

<!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">
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
  <title>Document</title>
  <style>
      html, body, #map { height: 100%; }
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
    var map = new L.Map('map', {
            center: new L.LatLng(39.86,116.45),
            zoom: 4
        });
    L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
      attribution: '夜猫逐梦 @CartoDB Positron',
      maxZoom: 18
    }).addTo(map);
    var polyline = L.polyline([[39.92,116.46], [31.213,121.445]], {
        color: 'red',
        weight: 3
    }).addTo(map);

    var bj = L.marker([39.92,116.46]).bindPopup('这里是北京');
    var sh = L.marker([31.213,121.445]).bindPopup('这里是上海');
    var gz = L.marker([23.16,113.23]).bindPopup('这里是广州');
    var cities = L.layerGroup([bj, sh, gz]).addTo(map);
  </script>
</body>
</html>

🛬 文章小结

总体来说,leaflet 是一款非常优秀的 WebGIS 库,适用于需要在移动端或 Web 平台上展示地理信息的应用。
本节对其做简单的介绍和使用演示。

其中使用leaflet需要注意以下几点:

  • 必须引入leaflet.css,否则贴片会出现乱序的情况。
  • 网上很多地图地址都无法访问,这里使用http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png,虽然慢了点,但是能用。
  • leaflet版本使用的是1.9.4,每个版本的接口可能不一样,出错了就看下控制台。

以后会不断写一些示例功能,或者翻译官网有用的文章。

📖 参考资料

  • leaflet官网:https://leafletjs.com/index.html
  • 官网例子: https://leafletjs.com/examples
  • api文档:https://leafletjs.com/reference.html
  • Leaflet源码解析–TileLayer(某不错的网站): https://www.giserdqy.com/secdev/leaflet/19903/

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

微服务中配置文件(YAML文件)和项目依赖(POM文件)的区别与联系

实际上涉及到了微服务架构中的两个重要概念&#xff1a;服务间通信和项目依赖管理。在微服务架构中&#xff0c;一个项目可以通过两种方式与另一个项目建立依赖关系&#xff1a;通过配置文件&#xff08;如YAML文件&#xff09;和通过项目依赖&#xff08;如POM文件&#xff09…

【每日一题】逃离火灾

文章目录 Tag题目来源题目解读解题思路方法一&#xff1a;二分枚举空间复杂度&#xff1a; O ( m n ) O(mn) O(mn)。 写在最后 Tag 【二分答案】【BFS】【数组】【2023-11-09】 题目来源 2258. 逃离火灾 题目解读 现在有一个人在一个二维网格的左上角&#xff0c;坐标 (0, 0…

SpringCache(Redis)

一、springcache是什么 springcache是spring的缓存框架&#xff0c;利用了AOP&#xff0c;实现了基于注解的缓存功能&#xff0c;并且进行了合理的抽象&#xff0c;业务代码不用关心底层是使用了什么缓存框架&#xff0c;只需要简单地加一个注解&#xff0c;就能实现缓存功能了…

pytorch中常用的损失函数

1 损失函数的作用 损失函数是模型训练的基础&#xff0c;并且在大多数机器学习项目中&#xff0c;如果没有损失函数&#xff0c;就无法驱动模型做出正确的预测。 通俗地说&#xff0c;损失函数是一种数学函数或表达式&#xff0c;用于衡量模型在某些数据集上的表现。损失函数在…

计算机网络期末复习-Part2

1、网络应用程序体系结构 &#xff08;1&#xff09;客户端/服务器&#xff08;C/S&#xff09;体系结构&#xff1a; 客户端/服务器&#xff08;C/S&#xff09;应用程序&#xff1a; Web浏览器与Web服务器&#xff1a;当您使用Web浏览器&#xff08;客户端&#xff09;访问…

Scala爬虫如何实时采集天气数据?

这是一个基本的Scala爬虫程序&#xff0c;使用了Scala的http library来发送HTTP请求和获取网页内容。在爬取天气预报信息时&#xff0c;我们首先需要创建一个代理对象proxy&#xff0c;并将其用于发送HTTP请求。然后&#xff0c;我们使用http库的GET方法获取网页内容&#xff0…

linux修改rocketmq的日志文件位置

文章目录 &#x1f50a;修改rocketmq的日志文件位置&#x1f4d5;原来的文件&#x1f4cc;修改后文件&#x1f4c7;rocketmq中的Rocketmq_client.log文件在配置文件中改不了 需要在代码logback文件中进行修改&#x1f58a;️最后总结 &#x1f50a;修改rocketmq的日志文件位置 …

【Linux】 awk命令使用

AWK 是一种处理文本文件的语言&#xff0c;是一个强大的文本分析工具。 之所以叫 AWK 是因为其取了三位创始人 Alfred Aho&#xff0c;Peter Weinberger, 和 Brian Kernighan 的 Family Name 的首字符。 语法 awk [选项] [文件] awk [选项] [程序] [文件] awk命令 -Linux手…

cookie 里面都包含什么属性?

结论先行&#xff1a; Cookie 中除了名称和值外&#xff0c;还有几个比较常见的&#xff0c;例如&#xff1a; Domain 域&#xff1a;指定了 cookie 可以发送到哪些域&#xff0c;只有发送到指定域或其子域的请求才会携带该cookie&#xff1b; Path 路径&#xff1a;指定哪些…

Spring Boot 3系列之-启动类详解

Spring Boot是一个功能强大、灵活且易于使用的框架&#xff0c;它极大地简化了Spring应用程序的开发和部署流程&#xff0c;使得开发人员能够更专注于业务逻辑的实现。在我们的Spring Boot 3系列之一&#xff08;初始化项目&#xff09;文章中&#xff0c;我们使用了Spring官方…

gitlab-ce-12.3.5 挖矿病毒及解决方案

前言 最近发现在使用gitlab提交代码的时候总是失败&#xff0c;一访问gitlab还时常报503&#xff0c;于是使用 top 命令查看了内存占用情况&#xff0c;发现了一个git进程内存使用了2.3g&#xff0c;cpu还一直占用300-400%&#xff0c; 以前不知道gitlab还有病毒&#xff0c;只…

[论文阅读]PV-RCNN++

PV-RCNN PV-RCNN: Point-Voxel Feature Set Abstraction With Local Vector Representation for 3D Object Detection 论文网址&#xff1a;PV-RCNN 论文代码&#xff1a;PV-RCNN 简读论文 这篇论文提出了两个用于3D物体检测的新框架PV-RCNN和PV-RCNN,主要的贡献如下: 提出P…

ubuntu 安装redis详细教程

下载redis安装包 链接如下&#xff1a; http://redis.io/download 本例版本为&#xff1a;redis-7.2.3.tar.gz 下载安装包到目录/opt下&#xff0c;路径可修改&#xff0c;本例为/opt wget https://github.com/redis/redis/archive/7.2.3.tar.gz 解压安装包&#xff0c;并…

解决 SSLError: HTTPSConnectionPool(host=‘huggingface.co‘, port=443)

看我的回答&#xff1a; https://github.com/huggingface/transformers/issues/17611#issuecomment-1794486960 能问这个问题的都是网络不太好的&#xff0c;你懂的&#xff0c;所以答案全是解决网络的。 得益于这个回答&#xff1a;#17611 (comment) 看了一下代码&#xf…

基于ssm的校园快递物流管理系统(java+jsp+ssm+javabean+mysql+tomcat)

博主24h在线&#xff0c;想要源码文档部署视频直接私聊&#xff0c;9.9拿走&#xff01; 基于javawebmysql的ssm校园快递物流管理系统(javajspssmjavabeanmysqltomcat) 运行环境&#xff1a; Java≥8、MySQL≥5.7、Tomcat≥8 开发工具&#xff1a; eclipse/idea/myeclipse/s…

万物社用户运营工具:无代码开发下的电商平台和CRM集成

简介&#xff1a;万物社与集简云的引领式连接 万物社&#xff0c;隶属于厦门头号云信息科技有限公司&#xff0c;是一家专注于互联网和相关服务的企业。在日常的业务运营中&#xff0c;万物社通过与集简云的无代码集成&#xff0c;实现了业务流程的自动化和智能化&#xff0c;…

Linux系统下数据同步服务RSYNC

一、RSYNC概述 1、什么是rsync rsync的好姐妹 sync 同步&#xff1a;刷新文件系统缓存&#xff0c;强制将修改过的数据块写入磁盘&#xff0c;并且更新超级块。 async 异步&#xff1a;将数据先放到缓冲区&#xff0c;再周期性&#xff08;一般是30s&#xff09;的去同步到磁…

【Git】安装和常用命令的使用与讲解及项目搭建和团队开发的出现的问题并且给予解决

目录 Git的简介 介绍 Git的特点及概念 Git与SVN的区别 图解 ​编辑 命令使用 安装 使用前准备 搭建项目环境 ​编辑 团队开发 Git的简介 介绍 Git 是一种分布式版本控制系统&#xff0c;是由 Linux 之父 Linus Torvalds 于2005年创建的。Git 的设计目标是为了更好地管…

图文并茂解读联合索引底层存储结构及索引查找过程

文章目录 前言版本数据准备SQL数据创建结果有无联合索引执行情况无联合索引存在联合索引 底层存储结构查询过程最左匹配原则查询过程解析 联合索引优势支持复杂查询索引覆盖查询提高排序和分组性能减少索引数量 使用建议联合索引的列顺序十分重要建议能使用联合索引尽量使用联合…

Mybatis-Plus同时使用逻辑删除和唯一索引的问题及解决办法

1 问题背景 在开发中&#xff0c;我们经常会有逻辑删除和唯一索引同时使用的情况。但当使用mybatis plus时&#xff0c;如果同时使用逻辑删除和唯一索引&#xff0c;会报数据重复Duplicate entry的问题。 举例来说&#xff0c;有表user&#xff0c;建立唯一索引&#xff08;u…