了不起的Leaflet

做为GIS专业的渣渣，毕业之后就很少接触到地图了。虽然辗转于中地和超图之间，但却很少系统的用到地图，之前有用过ol3，但总觉得过于庞大复杂。最近工作中有用到Leaflet，其简洁的语法令人发指，发现还是很适合我等渣渣的。
由于Leaflet的本身并不全面，但强大的生态以及插件足以震撼openlayers，此篇博客主要介绍Leaflet的插件用法，包括热力图，聚合图，量测控件。

Leaflet是适用于移动设备的交互式地图的领先开源JavaScript库。它只需要大约38 KB的JS，它具有大多数开发人员所需的所有映射功能。Leaflet的设计考虑了简单性，性能和可用性。它的工作原理有效地跨所有主流桌面和移动平台，可以有很多的扩展插件，有一个美丽的，易于使用和良好记录的API 和一个简单的，可读的源代码。

1、热力图

这里用到的是heatmap.js的这个插件，github的地址是 heatmap，demo代码地址是 demo
1、首先需要引入JS文件

<script src="/build/heatmap.js"></script>
<script src="/plugins/leaflet-heatmap/leaflet-heatmap.js"></script>

2、添加热力图到地图

var dataArr = [];
for (let index = 0; index < data.length; index++) {
    const element = data[index];
    var obj = { lat: element.smy, lng: element.smx, count: 1 };
    dataArr.push(obj);
}
var testData = {
    data: dataArr
};
var cfg = {
    radius: 0.002,
    maxOpacity: 1,
    scaleRadius: true,
    useLocalExtrema: true,
    latField: "lat",
    lngField: "lng",
    valueField: "count"
};
this.heatMapLayer = L.featureGroup().addTo(this.map);
var heatmap = new HeatmapOverlay(cfg);
heatmap.setData(testData);
this.heatMapLayer.addLayer(heatmap);

3、移除图层

this.heatMapLayer.remove();

2、聚合图

这里用到的是markercluster.js的这个插件，github的地址是 markercluster，demo代码地址是，demo展示了加载1000个点的效果 demo
1、将src目录放到自己的库下，引入JS文件

<link rel="stylesheet" href="../dist/MarkerCluster.css" />
<link rel="stylesheet" href="../dist/MarkerCluster.Default.css" />
<script src="../dist/leaflet.markercluster-src.js"></script>

2、添加聚合图到地图

var juheLayer = L.markerClusterGroup({disableClusteringAtZoom: 15, chunkedLoading: true });
for (var i = 0; i < addressPoints.length; i++) {
    var a = addressPoints[i];
    var title = a[2];  //标题
    var marker = L.marker(L.latLng(a[0], a[1]), { title: title });
    marker.bindPopup(title); //点击时显示气泡
    juheLayer.addLayer(marker);
}
map.addLayer(juheLayer);

3、移除聚合图

map.removeLayer(juheLayer);

3、量测标记控件

这里用到的是Leaflet.draw的这个插件，github的地址是 Leaflet.draw，demo代码地址是，demo，api的github地址是 api
1、将src目录放到自己的库下，引入JS文件

<link rel="stylesheet" href="./lib/draw/leaflet.draw.css">
<script src="./lib/draw/Leaflet.draw.js"></script>
<script src="./lib/draw/Leaflet.Draw.Event.js"></script>
<script src="./lib/draw/Toolbar.js"></script>
<script src="./lib/draw/Tooltip.js"></script>
<script src="./lib/draw/ext/GeometryUtil.js"></script>
<script src="./lib/draw/ext/LatLngUtil.js"></script>
<script src="./lib/draw/ext/LineUtil.Intersect.js"></script>
<script src="./lib/draw/ext/Polygon.Intersect.js"></script>
<script src="./lib/draw/ext/Polyline.Intersect.js"></script>
<script src="./lib/draw/ext/TouchEvents.js"></script>
<script src="./lib/draw/draw/DrawToolbar.js"></script>
<script src="./lib/draw/draw/handler/Draw.Feature.js"></script>
<script src="./lib/draw/draw/handler/Draw.SimpleShape.js"></script>
<script src="./lib/draw/draw/handler/Draw.Polyline.js"></script>
<script src="./lib/draw/draw/handler/Draw.Marker.js"></script>
<script src="./lib/draw/draw/handler/Draw.Circle.js"></script>
<script src="./lib/draw/draw/handler/Draw.CircleMarker.js"></script>
<script src="./lib/draw/draw/handler/Draw.Polygon.js"></script>
<script src="./lib/draw/draw/handler/Draw.Rectangle.js"></script>
<script src="./lib/draw/edit/EditToolbar.js"></script>
<script src="./lib/draw/edit/handler/EditToolbar.Edit.js"></script>
<script src="./lib/draw/edit/handler/EditToolbar.Delete.js"></script>
<script src="./lib/draw/Control.Draw.js"></script>
<script src="./lib/draw/edit/handler/Edit.Poly.js"></script>
<script src="./lib/draw/edit/handler/Edit.SimpleShape.js"></script>
<script src="./lib/draw/edit/handler/Edit.Rectangle.js"></script>
<script src="./lib/draw/edit/handler/Edit.Marker.js"></script>
<script src="./lib/draw/edit/handler/Edit.CircleMarker.js"></script>
<script src="./lib/draw/edit/handler/Edit.Circle.js"></script>

2、完整的控件引入

var editableLayers = new L.FeatureGroup();
map.addLayer(editableLayers);
var options = {
    position: 'topleft',
    draw: {
        polyline: {},
        polygon: {},
        circle: {},
        rectangle: {},
        marker: {},
        remove: {}
    },
    edit: {
        featureGroup: editableLayers,
        remove: true
    }
};
var drawControl = new L.Control.Draw(options);
map.addControl(drawControl);
handleMapEvent(drawControl._container, map);
map.on(L.Draw.Event.CREATED, function (e) {
    var type = e.layerType,
        layer = e.layer;
    if (type === 'marker') {
        layer.bindPopup('A popup!');
    }
    editableLayers.addLayer(layer);
});

function handleMapEvent(div, map) {
    if (!div || !map) {
        return;
    }
    div.addEventListener('mouseover', function () {
        map.scrollWheelZoom.disable();
        map.doubleClickZoom.disable();
    });
    div.addEventListener('mouseout', function () {
        map.scrollWheelZoom.enable();
        map.doubleClickZoom.enable();
    });
}

其实，leaflet的功能不仅仅有这些，丰富的插件 更是多的让人抓狂，它简介的语法很适合新手学习，非常适合轻量级的应用开发。