【leaflet】1. 初见

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

🛫 导读

需求

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

开发环境

版本号 描述
文章日期 2023-11-09
操作系统 Win10 - 22H2 19045.3570
leaflet 1.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,我们这就来实战一下,先看看简单的效果:
【leaflet】1. 初见,leaflet,# Javascript随笔,javascript,leaflet,GIS

  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,每个版本的接口可能不一样,出错了就看下控制台。

以后会不断写一些示例功能,或者翻译官网有用的文章。文章来源地址https://www.toymoban.com/news/detail-771820.html

📖 参考资料

  • 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/

到了这里,关于【leaflet】1. 初见的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • JavaScript (八) -- JavaScript BOM

    目录 1.   JavaScript BOM的概述: 2.  Window 对象(浏览器窗口对象) 2.1  Window 对象的调用方式: 2.2  Window 对象常用方法: 2.3  Location对象常用方法: 2.4  history对象常用方法: 2.4.1  history对象常用方法  2.4.2  history对象属性(只有1个属性) 2.5  screen对象常用方法: 2.6 

    2024年02月03日
    浏览(46)
  • 1、JavaScript概述 - JavaScript指南

    JavaScript 概述        JavaScript是现今非常流行的编程语言之一,在编程语言排行榜上也是数一数二的存在,如果你现在去搜编程语言榜单,你会发现,JavaScript现在是在第一名的位置。在经过了这么些年的发展,JavaScript已经在软件行业里占据了一壁江山。同时,JavaScript现在

    2023年04月08日
    浏览(48)
  • 【JavaScript】数组 ② ( JavaScript 数组索引 | JavaScript 遍历数组 | 使用 for 循环遍历数组 )

    在 JavaScript 中 , 数组 的 \\\" 索引 \\\" 又称为 \\\" 下标 \\\" , 从 0 开始计数 , 是 可用于访问 数组元素 的 \\\" 序号 \\\" ; 通过 数组索引 可以 访问 / 获取 / 修改 对应的数组元素 , 语法如下 : 访问数组 元素 时 , 要注意数组的边界 , 如果尝试访问一个不存在的索引 , 会返回 undefined 值 , 并不会报

    2024年04月28日
    浏览(57)
  • JavaScript高级教程(javascript实战进阶)

        分类: 基本数据(值)类型 String:任意字符串 Number:任意的数字 boolean:true/false undefined:undefined null:null 对象(引用)类型 Object:任意对象 Function:一种特别的对象(可以执行) Array:一种特别的对象(数值下标,内部数据是有序的) 判断: typeof:可以判断undef

    2024年02月07日
    浏览(56)
  • 细说JavaScript函数(JavaScript函数详解)

    函数的作用就是封装一段JavaScript代码,让开发者可以通古简单的方式使用这段代码 一、函数的分类 在几乎所有的编程语言中,都有函数这一概念,并且没中语言本身都继承了丰富的函数,这类函数被称为系统函数或者内置函数,系统函数在语言设计时就已经定义好了,开发

    2024年02月01日
    浏览(46)
  • JavaScript【四】JavaScript中的函数

    哈喽小伙伴们,本文将收录在JavaScript【前端童子功】这个专栏里;这个专栏里边会收录一些JavaScript的基础知识和项目实战;希望大家可以多多支持,你们的支持就是我创作的动力;让我们一起来看看吧🤘 函数 :将完成某一特定功能的代码封装起来,并且可以重复调用的代

    2023年04月21日
    浏览(53)
  • JavaScript系列从入门到精通系列第二十篇:使用工厂方法创建JavaScript对象,JavaScript构造函数详解,JavaScript类概念的介绍

    文章目录 一:使用工厂方法创建对象 1:原始写法 2:工厂方式 3:结果验证  二:构造函数 1:什么是构造函数 2:构造函数和普通函数的区别 3:构造函数的执行流程 三:类 1:什么是类 2:如何检查一个对象是否是个类的实例 3:Object的地位 四:构造函数修改 1:重大问题

    2024年02月08日
    浏览(43)
  • 【JavaScript】JavaScript基础详解(文末送书)

    👉博__主👈:米码收割机 👉技__能👈:C++/Python语言 👉公众号👈:测试开发自动化【获取源码+商业合作】 👉荣__誉👈:阿里云博客专家博主、51CTO技术博主 👉专__注👈:专注主流机器人、人工智能等相关领域的开发、测试技术。 在 JavaScript 中,可以使用三种方式来声明

    2024年02月08日
    浏览(56)
  • 【JavaScript】3.3 JavaScript工具和库

    在你的 JavaScript 开发之旅中,会遇到许多工具和库。这些工具和库可以帮助你更有效地编写和管理代码,提高工作效率。在本章节中,我们将探讨一些常见的 JavaScript 工具和库,包括包管理器、构建工具、测试框架和一些流行的库。 包管理器用于管理项目的依赖。它可以帮助

    2024年02月05日
    浏览(40)
  • 【JavaScript】2.4 JavaScript和浏览器

    JavaScript最初是为了在浏览器中使用而创建的,它是Web开发的重要组成部分。在这一章节中,我们将学习如何使用JavaScript与浏览器进行交互。 DOM(Document Object Model)是一个编程接口,它允许JavaScript操作HTML文档的内容和结构。HTML文档被解析成一个DOM树,我们可以通过JavaScrip

    2024年02月04日
    浏览(46)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包