目录标题

关于leaflet
开始使用
建立第一个Map
添加图形或标注点
点击展示popup弹窗
Tooltip提示
添加地图右下角标识
加载多个地图类型
地图上加载和显示单个图像
加载视频影像

关于leaflet

Leaflet是用于适用于移动端交互地图的主要的开源JavaScript库。JS库的大小为38k左右，但是拥有大部分开发者需要的全部地图功能。

Leaflet保持着简单、性能和实用性的设计思想。它可以在所有主要的桌面和移动端平台上高效的运转，可以扩展插件，它有一个漂亮的、易用的和文档清晰的API，还有一个简单、易读的源代码。
官网地址：https://leafletjs.com/reference.html
经纬度查询地址：http://jingweidu.757dy.com/
中文API文档：https://www.cnblogs.com/shitao/p/3566598.html

开始使用

第一种方法：
点击官网的DownLoad按钮，跳转到下载页面，点击对应包下载。

第二种方法：
在html中直接引入js、css

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>

第三种方法：
使用npm

npm install leaflet

建立第一个Map

详细配置参数见上面中文文档API链接

<!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>Document</title><link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" /><script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
</head>
<style>* {box-sizing: border-box;margin: 0px;padding: 0px;}#mapid {height: 100vh;}
</style><body><div id="mapid"></div>
</body>
<script>//[31.82658, 117.23344], 13对应纬度、经度、地图的缩放.var mymap = L.map('mapid').setView([31.82658, 117.23344], 13);L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom: 18//最大缩放}).addTo(mymap);
</script>
</html>

更多地图类型（http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png）可以查看https://openwhatevermap.xyz/#3/28.77/47.99

点击喜欢的地图会展示弹窗，复制粘贴即可。
加载高德矢量地图

  var mymap = L.map('mapid').setView([31.82658, 117.23344], 13);L.tileLayer('http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}', {maxZoom: 18}).addTo(mymap);

添加图形或标注点

配置参数见官网文档：https://leafletjs.com/reference.html#marker
标注点

  L.marker([31.82658, 117.23344]).addTo(mymap);

圆形
配置参数见官网文档：https://leafletjs.com/reference.html#path

  var circle = L.circle([31.82658, 117.23344], {color: 'red',fillColor: '#f03',fillOpacity: 0.5,radius: 500}).addTo(mymap);

多边形

  var polygon = L.polygon([[31.82127, 117.21837],[31.82317, 117.27629],[31.85082, 117.25333]]).addTo(mymap);

矩形范围

详细配置参考官网文档：https://leafletjs.com/reference.html#rectangle

// define rectangle geographical bounds
var bounds = [[54.559322, -5.767822], [56.1210604, -3.021240]];// create an orange rectangle
L.rectangle(bounds, {color: "#ff7800", weight: 1}).addTo(map);// zoom the map to the rectangle bounds
map.fitBounds(bounds);

圆形范围

详细配置参考官网文档：https://leafletjs.com/reference.html#circle

  L.circle([31.85082, 117.25333], { radius: 1000 }).addTo(mymap);

点击展示popup弹窗

详细配置参数见官网文档:https://leafletjs.com/reference.html#popup

function onMapClick(e){L.popup().setLatLng(e.latlng).setContent("You clicked the map at "+e.latlng.toString()).openOn(mymap)
}mymap.on('click',onMapClick)

标注点添加弹窗

  const marker = L.marker([31.82658, 117.23344]).addTo(mymap);marker.bindPopup("标注点").openPopup();

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

Tooltip提示

详细配置参数见官网文档:https://leafletjs.com/reference.html#tooltip

  const marker = L.marker([31.82658, 117.23344]).addTo(mymap);marker.bindTooltip("my tooltip text").openTooltip();

添加地图右下角标识

详细属性参考官网文档：https://leafletjs.com/reference.html#tilelayer
attribution属性添加地图右下角标识

  var mymap = L.map('mapid').setView([31.82658, 117.23344], 13);L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom: 18,foo: 'bar',attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(mymap);

加载多个地图类型

  var baseLayers = {'Sputnik': L.tileLayer('https://{s}.tile.thunderforest.com/spinal-map/{z}/{x}/{y}{r}.png', {maxZoom: 18   }),"CartoDB Positron": L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {maxZoom: 18}),"OSM": L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom: 18}).addTo(mymap),"OpenTopoMap": L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {maxZoom: 18}),}//切换图层工具var layerControl = L.control.layers(baseLayers, {}, {position: 'topleft',collapsed: true}).addTo(mymap);

地图上加载和显示单个图像

详细参数参考官网文档：https://leafletjs.com/reference.html#imageoverlay

  var imageUrl = 'https://maps.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',imageBounds = [[40.712216, -74.22655], [40.773941, -74.12544]];L.imageOverlay(imageUrl, imageBounds).addTo(mymap);

加载视频影像

详细参数参考官网文档：https://leafletjs.com/reference.html#videooverlay

  var videoUrl = 'https://www.mapbox.com/bites/00188/patricia_nasa.webm',videoBounds = [[32, -130], [13, -100]];L.videoOverlay(videoUrl, videoBounds).addTo(mymap);

leaflet入门使用教程相关推荐

leafLet入门教程兼leafLet API中文文档参考
leafLet官方文档链接(英文原版):https://leafletjs.com/reference-1.3.4.html#marker-bindpopup 文章目录 leafLet教程一.简单入 ...
扫掠两条引导线_NX10 入门图文教程——异形台架（扫掠或者沿引导线扫掠）
NX10 入门图文教程--异形台架(扫掠或者沿引导线扫掠) 块,长方体,由于这个体不是对称的,所以选择长方体完成,原点开始,设置参数长方体,选择棱边端点,这个地方用长方体目的是上方的这个块与下面的块 ...
MAYA 2022基础入门学习教程
流派:电子学习| MP4 |视频:h264,1280×720 |音频:AAC,48.0 KHz 语言:英语+中英文字幕(根据原英文字幕机译更准确)|大小解压后:3.41 GB |时长:4.5小时包含 ...
3dmax Vray建筑可视化入门学习教程
面向初学者的3Ds Max Vray最佳Archviz可视化课程从安装到最终图像的一切都将从头开始教授,不需要任何经验大小解压后:3.25G 时长4h 6m 1280X720 MP4 语言:英语+ ...
Blender 3.0基础入门学习教程 Introduction to Blender 3.0
成为Blender通才,通过这个基于项目的循序渐进课程学习所有主题的基础知识. 你会学到什么教程获取:Blender 3.0基础入门学习教程 Introduction to Blender 3.0- ...
Maya游戏角色绑定入门学习教程 Game Character Rigging for Beginners in Maya
准备好开始为游戏制作自己的角色动画了吗? 你会学到什么了解Maya的界面优化并准备好你的模型,为游戏做准备了解关节以及如何使用它们来构建健壮的角色骨骼,以便在任何游戏引擎中制作动画了解IK和F ...
三维地形制作软件 World Machine 基础入门学习教程
<World Machine课程>涵盖了你需要的一切,让你有一个坚实的基础来构建自己的高质量的电影或视频游戏地形. 你会学到什么为渲染或游戏开发创建高分辨率.高细节的地形. 基于Worl ...
Blender3.0动画制作入门学习教程 Learn Animation with Blender (2021)
要求下载并安装Blender.免费下载和免费用于任何目的. 描述加入我的动画课程. 在本课程中,我将从头开始讲述在Blender中创建动画场景的过程. 从第一步到最终渲染.在这个课程中,我们将使用 ...
UE5真实环境设计入门学习教程
大小解压后:4.69G 时长4h 30m 1280X720 MP4 语言:英语+中英文字幕(根据原英文字幕机译更准确) 虚幻引擎5–面向初学者的真实环境设计 Unreal Engine 5 – Rea ...

leaflet入门使用教程