现在开始，笔者将陆续使用leaflet组件进行demo开发，本文是第一篇，主要以实例介绍常见的接口。
前置知识点
前面的文章，均是直接上demo，没有专门涉及leaflet的知识。按个人习惯，学习和地图有关的东西，最直接的方法是上手，看效果，然后结合效果再回头总结。
leaflet官方有详尽的文档，包括接口和参数说明，为不影响文章篇幅，本文只给出示例和效果，请按需自行到官网研究了解详细的参数说明。
引入组件
在html文件中通过以下方法引入leaflet：
在线版本：
<link rel="stylesheet" href="https://unpkg.***/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.***/leaflet@1.9.4/dist/leaflet.js"></script>
使用本地文件：
<link rel="stylesheet" href="mymap/leaflet/dist/leaflet.css" />
<script src="mymap/leaflet/dist/leaflet.js"></script>
页面设计
本实践使用的地图页面尽可能大，因此全屏显示。核心html代码如下：
<style>
body {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
</style>
<body>
<div id="map"></div>
</body>
注：body中定义的id为map，在leaflet中会使用到该id。
简单接口知识点
初始化地图实例
使用L.Map
var defaultLatlng = [22.817, 108.366]
var defaultZoom = 8
// 初始化地图
mymap = new L.Map('map', {zoomControl: false})
设置视图中心位置
mymap.setView(defaultLatlng, defaultZoom)
平滑过渡视图中心位置
mymap.flyTo(newLatlng, defaultZoom) // 默认缩放等级
mymap.flyTo(newLatlng, mymap.getZoom()) // 保持当前缩放等级
弹窗框
marker.bindPopup("<b>广西南宁</b>").openPopup();
接口及示例
本节只列出代码片段及效果图。具体接口定义参考文后的leaflet官方文档。
Marker 标记
函数：L.marker。
示例代码：
// 显示点 marker
var marker = L.marker([22.838212,108.316269]).addTo(mymap);
marker.bindPopup("<b>广西南宁</b>").openPopup();
var marker = L.marker([22.738190,108.379440]).addTo(mymap);
marker.bindPopup("<b>广西南宁</b>");
效果图：
Polyline 折线
函数：L.polyline
示例：
// 多条折线
var lines = [
[
[22.857195,108.482437],
[22.818593,108.479004],
[22.798338,108.405533]
],
[
[22.821124,108.207092],
[22.858460,108.259277],
[22.805934,108.279190]
]
];
L.polyline(lines, {color: 'blue'}).addTo(mymap)
效果图：
Circle 圆形
函数： L.circle
示例代码：
var circle = L.circle([22.880920,108.414116], {
color: 'red', // 边框颜色
weight: 1, // 边框宽度
fillColor: '#f03000', // // 填充颜色
fillOpacity: 0.2, // 填充透明度
radius: 3000 // 半径（米）
}).addTo(mymap);
circle.bindPopup("<font color='red'>我是个圆</font>")
效果图：
CircleMarker 圆形标记
函数： L.circleMarker
示例：
// 圆形标记（与circle类似）
L.circleMarker([22.836313, 108.309059], {
radius: 30, // 半径（像素）
fillColor: '#f03000', // 填充颜色
color: 'blue', // 边框颜色
weight: 2, // 边框宽度
opacity: 1, // 边框透明度
fillOpacity: 0.2 // 填充透明度
}).addTo(mymap);
效果图：
Rectangle 矩形
函数： L.rectangle
示例：
// 矩形
const rectangleBounds = [
[22.864787, 108.187866], // 西南角 (左下角)
[22.910333, 108.237991] // 东北角 (右上角)
];
// L.rectangle(边界坐标, 样式选项)
rectangle = L.rectangle(rectangleBounds, {
// 填充相关样式
fillColor: '#ff7800', // 填充颜色 - 橙色
fillOpacity: 0.3, // 填充透明度 - 30% 透明
// 边框相关样式
color: '#ff7800', // 边框颜色 - 与填充色一致
weight: 2, // 边框宽度 - 2像素
opacity: 0.8, // 边框透明度 - 80% 不透明
// 其他可选样式
dashArray: '5, 5', // 虚线样式 - 5像素实线, 5像素空白
// interactive: true, // 是否可交互 - 默认true
// className: 'custom-rectangle' // 自定义CSS类名
}).addTo(mymap); // 将矩形添加到地图实例
效果图：
Polygon 多边形
函数： L.polygon
示例：
var lines = [
[
[22.870481,108.064957],
[22.864155,108.084183],
[22.831883,108.109589],
[22.840426,108.128128],
[22.828086,108.130188],
[22.812897,108.114738],
[22.802136,108.112335],
[22.758770,108.169327],
[22.778872,108.202801],
[22.813213,108.190269],
[22.842958,108.160057],
[22.848020,108.118515],
[22.875226,108.103409],
[22.878389,108.071823],
],
[
[22.731857,108.477631],
[22.724732,108.471622],
[22.725999,108.465958],
[22.720457,108.461666],
[22.713490,108.468361],
[22.713490,108.484154],
[22.719190,108.489132],
[22.729007,108.489132],
[22.733282,108.483295],
]
];
var polygon = L.polygon(lines, {
color: '#ff00ff',
// fillColor: '',
}).addTo(mymap)
polygon.bindPopup("<font color='#ff00ff'>我是多边形</font>")
效果图：
使用多边形实现矩形和三角形
函数： L.polygon
示例：
// 另一种多边形应用
var lines2 = [
[
// 矩形
// 此处顺序为 左下->左上->右上->右下，实际不限顺序
[22.922350, 108.340988],
[23.019298, 108.340988],
[23.019298, 108.372574],
[22.922350, 108.372574],
],
// 三角形
[
[23.000748, 108.472824],
[22.950806, 108.417206],
[22.949541, 108.524323],
]
];
var polygon = L.polygon(lines2, {
color: 'blue',
// fillColor: '',
}).addTo(mymap)
效果图：
小结
本文涉及的leaflet接口相对比较简单，上文一一给出对应的示例。需要注意的是，leaflet使用的坐标顺序为纬度,经度。以笔者经验看，可能较好的顺序为经度,纬度。一来其顺序与常说的“经纬度”吻合，二来geoJson使用的坐标顺序也是如此。
代码
文中列出了主要的代码片段，另有相关的工程demo，已上传到github仓库。但可能不合适实际项目，请注意识别。
仓库地址：https://github.***/latelee/mapdemo 。
本文demo文件：3.leaflet接口示例.html。
参考资料
- leaflet 中文官网文https://leafletjs.***/
- leaflet 中文官网入门文档：https://leafletjs.***/examples/quick-start/
- leaflet中文文档：https://leafletjs.***/reference.html
