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

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

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

相关文章

QGridLayout

QGridLayout

QGridLayout QGridLayout 是 Qt 框架中的一个布局管理器类&#xff0c;用于在窗口或其他容器中创建基于网格的布局。 QGridLayout 将窗口或容器划分为行和列的网格&#xff0c;并将小部件放置在相应的单元格中。可以通过调整行、列和单元格的大小来控制布局的样式和结构。 以…
阅读更多...
深入理解强化学习——多臂赌博机：梯度赌博机算法的数学证明

深入理解强化学习——多臂赌博机：梯度赌博机算法的数学证明

分类目录&#xff1a;《深入理解强化学习》总目录 通过将梯度赌博机算法理解为梯度上升的随机近似&#xff0c;我们可以深人了解这一算法的本质。在精确的梯度上升算法中&#xff0c;每一个动作的偏好函数 H t ( a ) H_t(a) Ht​(a)与增量对性能的影响成正比&#xff1a; H t …
阅读更多...
基于SSM和vue的在线购物系统

基于SSM和vue的在线购物系统

文章目录 项目介绍主要功能截图：部分代码展示设计总结项目获取方式🍅 作者主页：超级无敌暴龙战士塔塔开 🍅 简介：Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我，都给你】 🍅文末获取源码联系🍅 项目介绍 基于SSM和vue的在线购物系统,java项目。…
阅读更多...
FlinkSQL聚合函数（Aggregate Function）详解

FlinkSQL聚合函数（Aggregate Function）详解

使用场景&#xff1a; 聚合函数即 UDAF&#xff0c;常⽤于进多条数据&#xff0c;出⼀条数据的场景。 上图展示了⼀个 聚合函数的例⼦ 以及 聚合函数包含的重要⽅法。 案例场景&#xff1a; 关于饮料的表&#xff0c;有三个字段&#xff0c;分别是 id、name、price&#xff0…
阅读更多...
BI 数据可视化平台建设（1）—交叉表组件演变实战

BI 数据可视化平台建设（1）—交叉表组件演变实战

作者&#xff1a;vivo 互联网大数据团队 - Zhu Jianchen 本文是vivo互联网大数据团队《BI数据可视化平台建设》系列文章第1篇 - 交叉表组件。 交叉表在数据分析里应用广泛&#xff0c;通过本文&#xff0c;你将了解到&#xff1a; 交叉表的基本概念&#xff0c;以及BI可视化平…
阅读更多...
【狂神说Java】Nginx详解

【狂神说Java】Nginx详解

✅作者简介&#xff1a;CSDN内容合伙人、信息安全专业在校大学生&#x1f3c6; &#x1f525;系列专栏 &#xff1a;狂神说Java &#x1f4c3;新人博主 &#xff1a;欢迎点赞收藏关注&#xff0c;会回访&#xff01; &#x1f4ac;舞台再大&#xff0c;你不上台&#xff0c;永远…
阅读更多...
数据代理机制

数据代理机制

目录 前言 Object.defineProperty() 语法 第三个参数配置项 数据代理机制的实现 MVVM分层思想 前言 本文介绍Vue的数据代理机制&#xff0c;也就是通过vue实例对象来代理data对象中的属性的操作 Object.defineProperty() 在介绍vue的数据代理机制前&#xff0c;我们需要…
阅读更多...
JVM字符串常量池StringTable

JVM字符串常量池StringTable

目录 一、StringTable为什么要调整 二、String的基本特性 三、String的内存分配 四、字符串拼接操作 五、intern()方法 六、Stringtable的垃圾回收 七、G1中String去重操作 一、StringTable为什么要调整 jdk7之前&#xff0c;hotspot对于方法区的实现是永久代&#xff…
阅读更多...
【算法】算法题-20231113

【算法】算法题-20231113

这里写目录标题 一、判断是否为回文数二、编写一个函数来查找字符串数组中的最长公共前缀。如果不存在公共前缀&#xff0c;返回空字符串&#xff08;力口14&#xff09;。三、在排序数组中查找元素的第一个和最后一个位置&#xff08;力扣34题&#xff09;四、删除排序数组中的…
阅读更多...
【图像处理：OpenCV-Python基础操作】

【图像处理：OpenCV-Python基础操作】

【图像处理&#xff1a;OpenCV-Python基础操作】 1 读取图像2 显示图像3 保存图像4 图像二值化、灰度图、彩色图&#xff0c;像素替换5 通道处理&#xff08;通道拆分、合并&#xff09;6 调整尺寸大小7 提取感兴趣区域、掩膜8 乘法、逻辑运算9 HSV色彩空间&#xff0c;获取特定…
阅读更多...
burpsuite安装详细教程

burpsuite安装详细教程

要安装 Burp Suite&#xff0c;可以按照以下步骤操作&#xff1a; 首先从官方网站 https://portswigger.net/burp/communitydownload 下载 Burp Suite 安装文件&#xff0c;选择适合自己操作系统的版本。 下载后&#xff0c;找到下载的安装文件&#xff0c;然后右键点击以管理员…
阅读更多...
layui控件开发，实现下拉搜索从数据库获取数据

layui控件开发，实现下拉搜索从数据库获取数据

1 标签部分使用带搜索的下拉框 <div class"layui-inline"><label class"layui-form-label">单位</label><div class"layui-input-inline"><select name"org" lay-search id"org_dwbh" lay-filt…
阅读更多...
ENVI IDL：如何基于气象站点数据进行反距离权重插值？

ENVI IDL：如何基于气象站点数据进行反距离权重插值？

01 前言 仅仅练习&#xff0c;大可使用ArcGIS或者已经封装好的python模块进行插值&#xff0c;此处仅仅从底层理解如何从公式和代码理解反距离权重插值的过程&#xff0c;从而更深刻的理解IDL的使用和插值的理解。 02 函数说明 2.1 Read_CSV()函数 官方语法如下&#xff1a…
阅读更多...
概念解析 | 菲涅尔方程 Fresnel Equations :揭示光的奥秘面纱

概念解析 | 菲涅尔方程 Fresnel Equations :揭示光的奥秘面纱

注1:本文系“概念解析”系列之一,致力于简洁清晰地解释、辨析复杂而专业的概念。本次辨析的概念是:菲涅尔方程 菲涅尔方程:揭示光的奥秘面纱 背景介绍 当光从一种介质传播到另一种介质时,部分光会折射进入新介质,部分会反射回原介质。这一现象被称为光的折射和反射。 19世纪…
阅读更多...
Python---字典---dict

Python---字典---dict

1、为什么需要字典 如果想要存储一个人的信息&#xff0c;姓名&#xff1a;Tom&#xff0c;年龄&#xff1a;20周岁&#xff0c;性别&#xff1a;男&#xff0c;如何快速存储。 person [Tom, 20, 男] 在日常生活中&#xff0c;姓名、年龄以及性别同属于一个人的基本特征。 但…
阅读更多...
爬虫之数据解析

爬虫之数据解析

何为数据解析 概念&#xff1a;就是将爬取到数据中局部的指定的数据进行提取作用&#xff1a;实现聚焦爬虫数据解析通用原理&#xff1a; html是用来展示数据&#xff0c;html中展示的数据正是我们要爬取或者采集的数据数据解析的通用原理&#xff1a; 标签定位提取标签中存储…
阅读更多...
Please No More Sigma（构造矩阵）

Please No More Sigma（构造矩阵）

Please No More Sigma 给f(n)定义如下&#xff1a; f(n)1 n1,2; f(n)f(n-1)f(n-2) n>2; 给定n&#xff0c;求下式模1e97后的值 Input 第一行一个数字T&#xff0c;表示样例数 以下有T行&#xff0c;每行一个数&#xff0c;表示n。 保证T<100&#xff0c;n<100000…
阅读更多...
使用Filter实现登录验证

使用Filter实现登录验证

1、什么是Filter Filter可认为是Servlet的一种特殊用法&#xff0c;主要是对用户发起的请求进行预处理或后处理&#xff0c;意思就是在请求到达用户想请求的地址之前先进入Filter&#xff0c;或者在离开用户请求之后进入Filter。Filter类似于门卫&#xff0c;你在进入之前门卫…
阅读更多...
51单片机入门

51单片机入门

一、单片机以及开发板介绍 写在前面&#xff1a;本文为作者自学笔记&#xff0c;课程为哔哩哔哩江协科技51单片机入门教程&#xff0c;感兴趣可以看看&#xff0c;适合普中A2开发板或者HC6800-ESV2.0江协科技课程所用开发板。 工具安装请另行搜索&#xff0c;这里不做介绍&…
阅读更多...
数值分析算法（简介）

数值分析算法（简介）

数值分析是研究使用数值计算方法解决数学问题的领域。当在比赛中使用高级语言进行编程时&#xff0c;可以编写相应的库函数来实现数值分析中常用的算法&#xff0c;如方程组求解、矩阵运算和函数积分等算法。下面我将介绍一些常用的数值分析算法以及可能需要编写的库函数。 方…
阅读更多...
最新文章

Copyright @ 2022~2023