前言
之前在一些地理信息和旅游博主的信息介绍中，对于一些景点的信息时空分布。总是被他们的地图制作所深深吸引。与常规的地图文字标绘不同的是，在传统的地图标绘中，我们习惯于将文字信息直接标注到对应的位置点旁边。当然，这样其实也是没有什么问题的。只是觉得在哪些博主的制作中，他们喜欢在标注点附件不直接标记文字，而是类似于拉一条牵引线，然后在牵引线的末端再进行中文解释的展示。类似于下面的效果。
为了在地图中凸出一些重点需要表达的城市，它目标区域内的重要点位标注出来。比如上图中的汕尾、漳州、福州、台湾省的台中市、同富村、高雄市、日本的丰原等地名。围绕这之前的演习区域，将重点城市展示出来，不仅提升了整体的标注效果，更提升了整体的效果。
但是以上效果直接在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属性如下：
| 选项 | 类型 | 默认值 | 说明 |
|---|---|---|---|
html | String|HTMLElement | '' | 自定义 HTML 代码，放在 div 元素内，默认为空。或者，一个 HTMLElement 的实例。 |
bgPos | Point | [0, 0] | 可选的背景的相对位置，单位是像素 |
其它选项是继承至Icon对象，在DivIcon中也是可以正常使用的。
| 选项 | 类型 | 默认值 | 说明 |
|---|---|---|---|
iconUrl | String | null | (必填) 图标图像的URL（绝对路径或目前脚本所在的相对路径）。 |
iconRetinaUrl | String | null | 图标图像的视网膜尺寸版本的URL（绝对路径或目前脚本所在的相对路径）， 用于视网膜屏幕设备。 |
iconSize | Point | null | 图标图像的尺寸，单位是像素。 |
iconAnchor | Point | null | 图标 "tip" 的坐标（相对于其左上角）。图标将被对齐，使该点位于标记的地理位置。如果指定了尺寸，默认为居中，也可以在CSS中设置负的边距。 |
popupAnchor | Point | [0, 0] | 弹出窗口（popup）的坐标，相对于图标锚点而言，将从该点打开。 |
tooltipAnchor | Point | [0, 0] | 工具提示（tooltip）的坐标，相对于图标锚点而言，将从该点打开。 |
shadowUrl | String | null | 图标阴影图像的URL。如果不指定，将不会创建阴影图像。 |
shadowRetinaUrl | String | null | |
shadowSize | Point | null | 阴影图像的大小，单位是像素。 |
shadowAnchor | Point | null | 阴影 "tip" 的坐标（相对于其左上角）（如果没有指定，则与iconAnchor相同）。 |
className | String | '' | 用户给图标和阴影图像指定自定义类名，默认为空 |
crossOrigin | Boolean|String | false | 是否将 crossOrigin 属性添加到瓦片中。 如果提供了字符串，则所有瓦片的 crossOrigin 属性都将设置为提供的字符串。 如果您想访问平铺像素数据，则需要这样做。 有关有效的字符串值，请参阅 CORS 设置。 |
以上就是在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网站的相关实现，大家可以搜索相关网站示例学习使用。
