Leaflet学习文档-Map使用说明

前章知识点

（1）Leaflet学习文档-初识
（2）Leaflet学习文档-加载底图

---

前言

之前学习如何添加地图和加载对应的地图，按照前两章的方法可以基本实现对应的地图展示，本文需要学习是对于地图是如何进行渲染和如何标注一些注记，在本文之后会慢慢对于leaflet常用的能力慢慢解析，满足基础开发。

---

一、Map使用

主要阐述在Leaflet里面的map使用规则和一些简单说明

1. Map类

Map常用参数说明

const map = L.map('map', {
	// 坐标系,默认为EPSG:3857,在外简称3857，横轴墨卡托投影
	crs: L.CRS.EPSG3857,
    // 贡献链接控件是否开启
	attributionControl: true,
	// 放大缩小控制器是否开启
	zoomControl: true,
	// 地图中心点
	center: [39.90002, 116.46],
	// 缩放等级
	zoom: 10,
	// 最小缩放等级
	minZoom: 1,
	// 最大缩放等级
	maxZoom: 18,
	//最大范围设置
	maxBounds: [
	    [39, 115],
	    [41, 118]
	] 
})

2. Map类说明

map类使用需要基于一个容器（或者说盒子）来承接对应地图的，相当于建房子的需要划定一个范围来进行建设，在页面里面都是用div标签来作为这个容器的，所以在前面的代码里面都会看到需要再html里面设置一个div标签，地图内容所能展示的大小和div标签大小是一致，若出现设置地图而无法出现无法看到时，需要查看div设置是否有问题（如大小问题或者是否被其他div压在下面等）。

 // 容器设置 
 <div id="map" style="width: 800px; height: 600px;"></div>

那在map里面是如何使用div容器呢？从代码里面可以看出对应的操作，可以看下方代码中L,map('map')括号里面的’map’就是指向容器div的id值，这个是因为每个标签的id都是唯一的，所以可以通过id找到对应的div在页面的位置从而找到容器进行地图承载。

const map = L.map('map').setView([39.90002, 116.46], 10);

举例说明

 // 容器设置 
 <div id="LeafletMap" style="width: 800px; height: 600px;"></div>
// 脚本
// 确保L.map('容器div的id属性值')
const map = L.map('LeafletMap').setView([39.90002, 116.46], 10);

3. CRS说明

从1.1可知div是用来承载地图的容器，那么CRS的参数设置相当于建房子里面的打地基一样，这个房子格局是如何都是通过这个CRS设置来定义的，Leaflet 的 CRS（Coordinate Reference System，坐标参考系统） 定义了地图的投影方式和坐标系。Leaflet 默认使用的是基于 Web Mercator 投影的 EPSG:3857 坐标系，但也可以根据需要自定义或选择其他 CRS。

上图虽然丑了点，但是可以阐述CRS的不同设置大致会类似这样，不同投影就像图上展示一样会有对应的偏移之类，如绿色的点示意点在两个不同的投影里面所代表的值是不同的，所以在整个项目里面CRS是地基项目需要统一CRS。

Leaflet默认常规的CRS设置，红色框为常用坐标系

4. 地图控件说明

Leaflet地图控件主要包含放大缩小（zoomControl），贡献信息（attributionControl）等，这些信息是否需要可以根据项目实际需求来使用即可

5. Center和Zoom相关参数说明

参数里面的中心店center和地图层级zoom可以等价于setView(center, zoom),这个两个参数的设置主要在于初始化地图的时候地图中心所在位置和地图层级，minZoom和maxZoom控制地图层级可以放大和缩小的最大最小程度（一般maxZoom设置18即可），目的在于避免太高级别下地图服务不存在导致地图空白的情况。

6. maxBounds说明

该参数用于限制对应的显示，用户在移动地图的时，若超过该范围的话就会被强制留在这个范围内（这个可以配合地图层级），无法溢出这个范围,若溢出范围则会强制回到这个边界上。

至此map的参数信息说明基本完成，在实际应用中可以根据需求进行调整修改。

二、地图加载过程（可跳过）

我们在上面阐述过要创建一个地图需要一个容器进行承载，那么我们需要用这个容器承载啥呢，在Leaflet的容器里面我们可以承载各式各样的东西，最直观的东西就是地图底图服务。Leaflet本身就是将这一套逻辑封装好给到我们使用，下面我会讲述地图底图加载机制的基础概念让大家有一个基础概念。

1. 原理

在地图底图服务加载时，如果有小伙伴喜欢看控制台的话，就会发现在请求服务里面的底图服务的最终形式为一个个的图片信息。

我们需要将这些图片按照一定规则放到地图容器，最终形成我们所看到的底图展示效果，其基本原理可以按照下图所示意的，每个格子根据对应参数获取图片，然后里面都贴上所获取的图片就可以完整展示地图效果（具体如何计算获取到对应的图片这个暂时不深究，目前只需要了解基本操作，后续系列会补充说明）

这一套底图服务请求和图片贴在容器步骤Leaflet都帮我们做到了，我们目前只要知道如何使用即可。