百度做网站的电话,赛尔网络公司好不好,云南网站建设专业品牌,wordpress文章专题插件▒ 目录 ▒ #x1f6eb; 导读需求开发环境 1️⃣ 概念概念解释特点 2️⃣ 学习路线图3️⃣ html示例#x1f6ec; 文章小结#x1f4d6; 参考资料 #x1f6eb; 导读
需求 要做游戏地图了#xff0c;看到大量产品都使用的leaflet#xff0c;所以开始学习这个。 开发环境… ▒ 目录 ▒ 导读需求开发环境 1️⃣ 概念概念解释特点 2️⃣ 学习路线图3️⃣ html示例 文章小结 参考资料 导读
需求 要做游戏地图了看到大量产品都使用的leaflet所以开始学习这个。 开发环境
版本号描述文章日期2023-11-09操作系统Win10 - 22H219045.3570leaflet1.9.4
1️⃣ 概念 leaflet 是一个开源的 JavaScript 库用于创建交互式的地图应用程序。 它提供了一系列的工具和类用于实现地图的基本功能如添加瓦片图层、绘制标记和路径等。 概念解释 下面是leaflet 中的一些概念解释 地图Mapleaflet 中的地图是指一个 2D 空间的表示可以包含多个图层。 每一个图层代表一种类型的地理信息如地形、街道、行政区划等。 地图可以显示在网页上用户可以通过缩放、平移和旋转等操作来查看地图内容。图层Layerleaflet 中的图层是指一个地理信息的显示层。 每一个图层都有一个对应的Layer类该类负责处理图层的添加、删除、缩放等操作。 leaflet 支持多种类型的图层如 矢量图层VectorLayer栅格图层GridLayer热力图支持在地图上显示热力图效果用于表示某个地区的人气、访问量等数据。聚类图支持在地图上显示聚类图效果用于表示某个地区的人口密度、分布情况等数据。地形图层TerrainLayer等。 标记Markerleaflet 中的标记是指在地图上显示的一个标记点。 每一个标记都是一个Marker类的实例该类负责处理标记的添加、删除、缩放等操作。 标记可以表示一个特定的地理位置通常用于显示地图上的兴趣点等信息。路径Polylineleaflet 中的路径是指在地图上绘制的一条连续的线条。 每一个路径都是一个Polyline类的实例该类负责处理路径的添加、删除、缩放等操作。 路径通常用于表示地图上的道路、河流、边界等信息。事件Eventleaflet 中的事件是指在地图上发生的一些交互操作。 例如当用户点击地图、缩放地图、移动地图等操作时都会触发相应的事件。 leaflet 提供了丰富的事件处理机制开发人员可以通过监听这些事件来响应用户的交互操作。 特点 总体来说leaflet 是一款非常优秀的 WebGIS 库适用于需要在移动端或 Web 平台上展示地理信息的应用。 易用性leaflet 使用简单不需要任何特殊的依赖支持轻量级的 API容易上手。移动端兼容性leaflet 在移动端设备上也能很好地兼容并且支持响应式设计自适应不同的屏幕大小。强大的功能leaflet 支持多图层、标记、路径、热点等多种地理信息的展示同时还支持多边形、圆形等几何图形的绘制。支持多种地图数据源leaflet 支持加载多种常见的地图数据源如 OpenStreetMap、Google Maps、ESRI basemaps 等可以根据需求自由选择。可扩展性leaflet 提供了丰富的插件生态允许开发者自定义功能例如添加仪表盘、进度条等。可交互性拖拽、放大缩小、跳到指定位置、键盘控制、事件、标记拖动。视觉特效缩放动效、 2️⃣ 学习路线图 从官方网站开始该网站为图书馆提供了全面的指南和参考文档。熟悉 Web 开发的基础知识包括 HTML、CSS 和 JavaScript因为它们对于使用 Leaflet 创建交互式地图至关重要。通过从官方网站下载库或使用 npm 或 yarn 等包管理器来安装 Leaflet。探索 Leaflet API 并学习如何使用其各种功能例如创建地图、添加标记和弹出窗口、显示图块和图层以及处理用户交互。通过构建简单的项目来练习例如您家乡的地图或您最喜欢的地方的地图随着您对 Leaflet 的熟悉程度越来越高逐渐增加项目的复杂性。通过参与在线论坛加入传单社区获取更多资讯。 3️⃣ html示例 面对这么强大的leaflet我们这就来实战一下先看看简单的效果 加载 leaflet 库在你的 HTML 文件中使用 script 和 link 标签加载 leaflet 库。 script srchttps://unpkg.com/leaflet1.9.4/dist/leaflet.js/script
link relstylesheet hrefhttps://unpkg.com/leaflet1.9.4/dist/leaflet.css /创建地图容器在你的 HTML 文件中创建一个地图容器并设置其 id 为map。 div idmap/div创建 leaflet 地图实例使用 leaflet 库创建一个地图实例并将其绑定到地图容器。 var map new L.Map(map, {center: new L.LatLng(39.86,116.45),zoom: 4});加载底图使用 leaflet 的tileLayer类加载底图。你可以使用 leaflet 提供的在线底图服务如 mapboxOpenStreetMap 等或者加载本地的瓦片地图。 L.tileLayer(http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png, {attribution: 夜猫逐梦 CartoDB Positron,maxZoom: 18}).addTo(map);添加路线使用 leaflet 的Polyline类在地图上添加路线。你需要提供路线的起点和终点坐标以及路线的样式。 var polyline L.polyline([[51.505, -0.12], [51.515, -0.125]], {color: red,weight: 3
}).addTo(map);增加标记及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 langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0script srchttps://unpkg.com/leaflet1.9.4/dist/leaflet.js/scriptlink relstylesheet hrefhttps://unpkg.com/leaflet1.9.4/dist/leaflet.css /titleDocument/titlestylehtml, body, #map { height: 100%; }/style
/head
bodydiv idmap/divscriptvar 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/examplesapi文档https://leafletjs.com/reference.htmlLeaflet源码解析–TileLayer某不错的网站 https://www.giserdqy.com/secdev/leaflet/19903/
