在Leaflet中使用divIcon进行自定义标绘实战

前言

之前在一些地理信息和旅游博主的信息介绍中，对于一些景点的信息时空分布。总是被他们的地图制作所深深吸引。与常规的地图文字标绘不同的是，在传统的地图标绘中，我们习惯于将文字信息直接标注到对应的位置点旁边。当然，这样其实也是没有什么问题的。只是觉得在哪些博主的制作中，他们喜欢在标注点附件不直接标记文字，而是类似于拉一条牵引线，然后在牵引线的末端再进行中文解释的展示。类似于下面的效果。

为了在地图中凸出一些重点需要表达的城市，它目标区域内的重要点位标注出来。比如上图中的汕尾、漳州、福州、台湾省的台中市、同富村、高雄市、日本的丰原等地名。围绕这之前的演习区域，将重点城市展示出来，不仅提升了整体的标注效果，更提升了整体的效果。

但是以上效果直接在Leaflet当中是没有直接的效果展示的，也没有可以直接借鉴的例子（本人在Leaflet的相关插件中寻找了一番，均没有收获）。因此本文以Leaflet为例，主要讲解如何在Leaflet实现上面的标绘场景。首先讲解Leaflet中divicon的相关属性和方法，然后讲解如何在Leaflet中基于divicon进行效果标绘。如果您也是这种标绘效果有兴趣，不妨来这里看看。

一、Divicon简介

在这里，我们首先来看，要实现上面的效果，包含两个方面。第一个是可以实现根据坐标点进行坐标标定的要求。其次，与常规的标绘方法不同，为了突出展示需要。我们在目标标绘点上进行了类似拉线和拖尾的实现，然后在连接线的尾部进行中文名称的标记填充。为了实现这个需求，我们来看一下如何在Leaflet当中进行实现呢？要想实现下面的功能，就需要用到divicon。因此这里需要对divicon的相关知识进行介绍。

1、什么是divicon

要在leaflet当中实现上述的功能，需要对展示的html进行个性化处理。因此，这里先读divicon的相关知识进行介绍。在Leaflet的官网中，可以找到其相关介绍，这里方便大家直接学习，将官网的知识进行摘录。

​

然后点击divicon，跳转到更详细的描述信息。DivIcon代表一个轻量级的标记图标，使用一个简单的<div> 元素而不是图片。继承自 Icon ，但忽略了 iconUrl 和 shadow 选项。默认情况下，它有一个 'leaflet-div-icon' CSS类，并被设计成一个带有阴影的白色小方块。

2、相关属性和方法介绍

为了了解DivIcon的具体使用方法，下面结合官网来介绍一下其相关的属性和方法。在后面的实战过程中会使用到。

​ 构造函数说明L.divIcon(<DivIcon options> options)用给定的选项创建一个 DivIcon 实例。

本类中的DivIcon属性如下：

其它选项是继承至Icon对象，在DivIcon中也是可以正常使用的。

​

​ 以上就是在Leaflet中关于DivIcon对象的简要介绍和相关的属性和方法的介绍。在上面的文档中可以很清晰的看到，在DivIcon中可以传入一个自定义的网页元素，以及可以自己控制展示的元素的样式。下面将结合具体的例子来进行介绍。

二、DivIcon标绘实战

本小节将从实战出发，重点介绍如何使用DivIcon来实现一个自定义的自由标绘。主要的效果在文章的开始已经进行了介绍，在此不再进行赘述。闲言少叙，下面直接进入正题。

1、定义标绘点

为了演示创建的相关代码，这里提供演示的标绘点。是一个json数组，json对象包括经纬度和文本标绘名称。关键代码如下所示：

// 待标绘的点
var dataJson = [
	{lat:24.251973,lon:123.873596,name:"日本丰原23"},
	{lat:24.497146,lon:117.91626,name:"福建省漳州市20"},
	{lat:24.116675,lon:120.695801,name:"中国台湾省台中市18"},
	{lat:22.634293,lon:120.300293,name:"中国台湾省高雄市25"},
	{lat:26.046913,lon:119.245605,name:"中国福建省福州市23"},
	{lat:23.58979,lon:120.880508,name:"中国台湾省同富村24.5"},
	{lat:22.745789,lon:115.378418,name:"中国广东省汕尾市23"}
];

接着我们使用Leaflet当中循环进行点创建，关键代码如下：

for(var i=0;i<dataJson.length;i++){
	L.marker([dataJson[i].lat, dataJson[i].lon], {
		icon: L.divIcon({
			iconSize: null,
			className: '',
			popupAnchor:[5,5],
			shadowAnchor:[5,5],
			html: "<div class='marsBlackPanel'  animation-spaceInDown><div class='marsBlackPanel-text' style=''>"+dataJson[i].name+"<span class='temperature'></span> ℃</div></div>"
		})
	}).addTo(map);
}

到这里其实我们已经实现了循环添加DivIcon对象，也使用html对象将一个html对象传入到页面中。于此同时，我们也设置了DivIcon对象的一些属性。请注意，在这里也可以同时传入一个div的className，传入一个外部的样式。接下来就是文章的重点，即如何进行样式的控制。

2、样式的控制

刚开始拿到需求的时候，原来想着动态划线，但是这样的成本有点高，而且很多动态的计算。换一个思路来实现，我们可以使用网页的样式来实现上述的效果。下面分享一个css样式，大家可以直接复制去使用。

.marsBlackPanel {
	min-width: 90px;
	min-height: 35px;
	position: absolute;
	left: 16px;
	bottom: 31px;
	cursor: default;
	border-radius: 4px;
	opacity: 0.96;
	border: 1px solid #14171c;
	box-shadow: 0px 2px 21px 0px rgba(33, 34, 39, 0.55);
	border-radius: 4px;
	box-sizing: border-box;
	background: linear-gradient(0deg, #1e202a 0%, #60c720 100%);
}
		
.marsBlackPanel::before {
	content: "";
	width: calc(100% + 22px);
	height: 39px;
	position: absolute;
	bottom: -39px;
	left: -22px;
	background: url(/2d/images/popupLbl.png) 0px 0px no-repeat;
	background-position: 0px 0px;
}
		
.marsBlackPanel-text {
	width: 100%;
	height: 100%;
	min-height: 33px;
	text-align: center;
	padding: 5px 5px 0 5px;
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	color: #ffffff;
	border: 1px solid #ffffff4f;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	white-space: nowrap;
}

需要注意的是，这里用到了一个图片。图片地址为：

http://mars2d.cn/img/marker/popupLbl.png

同时，在进行颜色控制时，使用了渐变色的效果控制，实现css如下：

background: linear-gradient(0deg, #1e202a 0%, #60c720 100%);

还有一个宽度的动态计算，可以支持根据传入的文字的宽度来动态计算。这样就能样式的自动计算来扩展了。不需要手动指定宽度，相关代码如下：

width: calc(100% + 22px);

经过以上的步骤，我们就可以在地图上展示出以下的页面效果：

以上就已经完整的实现基于DivIcon的自定义标绘的可视化功能。

三、总结

以上就是本文的主要内容，本文以Leaflet为例，主要讲解如何在Leaflet实现上面的标绘场景。首先讲解Leaflet中divicon的相关属性和方法，然后讲解如何在Leaflet中基于divicon进行效果标绘。行文仓促，定有许多不足之处，如有发现不足，还恳请各位专家博主在评论区留下真知灼见，不胜感激。博文编写的过程参考了Mars2d网站的相关实现，大家可以搜索相关网站示例学习使用。