从0到1全流程落地web游戏大地图项目，成为WebGlS专家
前言：
  在当今数字化时代，地图已成为我们日常生活中不可或缺的一部分。无论是寻找餐馆、规划旅行路线，还是研究地理信息，地图都为我们提供了便利。而在这个领域，Leaflet无疑是一款出色的JavaScript地图库。它轻量级、易于使用，同时提供了丰富的功能，使得开发者能够轻松地创建交互式地图。

一、Leafletjs是什么？
Lefalet 是一个为建设移动设备友好的互动地图，而开发的现代的、开源的 JavaScript 库。它是由 Vladimir Agafonkin 带领一个专业贡献者团队开发，虽然代码仅有 31 KB，但它具有开发人员开发在线地图的大部分功能。

Lefalet 设计坚持简便、高性能和可用性好的思想，在所有主要桌面和移动平台能高效运作，在现代浏览器上会利用HTML5和CSS3的优势，同时也支持旧的浏览器访问。支持插件扩展，有一个友好、易于使用的API文档和一个简单的、可读的源代码。

二、Leaflet安装步骤
  要使用Leaflet，首先需要将其引入到项目中。以下是Leaflet的安装步骤：
        1. 下载Leaflet
   访问Leaflet官方网站（https://leafletjs.com/），下载最新版本的Leaflet。下载完成后，将压缩包解压，得到Leaflet的源码。
        2. 引入Leaflet
   在HTML文件中，通过`<link>`和`<script>`标签引入Leaflet的CSS和JavaScript文件。例如：
   <!-- 引入Leaflet CSS文件 -->
   <link rel="stylesheet" href="path/to/leaflet.css" />
   <!-- 引入Leaflet JavaScript文件 -->
   <script src="path/to/leaflet.js"></script>
其中，`path/to/`是Leaflet文件所在的路径。请根据实际情况修改。
        3. 创建地图容器
   在HTML文件中，创建一个用于显示地图的容器。例如：
   <div id="map" style="width: 100%; height: 500px;"></div>
   这里，我们创建了一个id为`map`的`<div>`元素，并通过CSS设置其宽度和高度。
        4. 初始化地图
   在JavaScript中，编写代码初始化地图。例如：

   // 获取地图容器
   var map = L.map('map').setView([51.505, -0.09], 13);
   // 添加地图图层
   L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
       attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
   }).addTo(map);

三、基于leafletjs作为底层框架--搭建二维地图
1、加入依赖包
"leaflet": "^1.7.1",
react-leaflet v.2.x中需引起的依赖
"react-leaflet": "2.6.1",//固定版本
react-leaflet v.3.x中需引起的依赖
"react-leaflet": "^3.0.2",

2、在地图路由页面中依赖
import { Map } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';

3、创建地图容器
const mapCenter: any = [30.25027961206251, 120.16514401757941];
react-leaflet v.2.x中的map实例
<Map style={{ width: '100%', height: '100%' }}   center={mapCenter} zoom={12} > </Map>
react-leaflet v.3.x中的map实例
<MapContainer style={{ width: '100%', height: '100%' }} center={mapCenter} zoom={12} > </MapContainer>

4、引入地图矢量瓦片
<TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />

四、mapbox-gl.js 与 leaflet.js的主要区别
mapbox-gl使用浏览器的WebGL技术，因此它需要足够现代的浏览器并使用更多的客户端计算能力。
优点是它可以原生处理矢量图块并以您喜欢的任何方式渲染（旋转，倾斜，自定义样式等）

Leaflet使用普通格式DOM操作，旨在支持IE8之类的旧浏览器。对于这种旧的浏览器来说，它非常有效，并且由于这种轻量级的计算空间，它还对移动设备友好。
优点是，它使您可以包含基本地图而没有太多开销。
Leaflet可能涵盖了大多数基本用法，可能还包含一些插件。缺点是它主要支持栅格图块，因此必须在服务器端进行渲染（mapbox提供此类服务）。