本文主要探讨了如何利用leaflet-draw插件在地图上绘制图形，以及通过leaflet-measure测量距离和面积，并将经纬度绘制到地图上。首先，我们使用leaflet-draw插件，该插件提供了一种简单而直观的方式来绘制各种形状（如点、线、多边形等）到地图上。然后，我们利用leaflet-measure插件，该插件可以测量地图上任意两点之间的距离，以及任意多边形的面积。最后，我们将经纬度数据绘制到地图上，以便于进行地理位置分析和可视化。这种方法为地理信息的收集、分析和可视化提供了一种有效的工具。
绘制图形
npm i leaflet-draw
简单使用
import '@luomus/leaflet-draw/dist/leaflet.draw';
import '@luomus/leaflet-draw/dist/leaflet.draw.css';const drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
const drawControl = new L.Control.Draw({});
map.addControl(drawControl);
配置项说明
在L.Control.Draw当中可以添加一下配置项
| 配置项 | 说明 |
|---|---|
| position | 所处位置，取值： |
| draw | 绘制时配置 |
| edit | 编辑时配置 |
其中在draw当中可以对点线面矩形圆灯进行对应的配置，部分配置如下：
其中对于这些配置在源码当中 L.Draw.Polyline 定义了对应的这些对象，所有的配置在option当中，下面只是稍微列举了一部分，源码位置在：node_modules/@luomus/leaflet-draw/dist/leaflet.draw-src.js
const drawControl = new L.Control.Draw({// 位置position: 'topright',// 绘制时候的配置draw: {polyline: {shapeOptions: {stroke: true,color: '#3388ff',weight: 4,opacity: 0.5,fill: false,clickable: true}},polygon: {allowIntersection: false,drawError: {color: '#f40',message: '请点击别的位置的点'},shapeOptions: {stroke: true,color: '#3388ff',weight: 4,opacity: 0.5,fill: false,fillColor: null,fillOpacity: 0.2,clickable: true}},circle: {},rectangle: {shapeOptions: {clickable: false}},marker: {// icon: new MyCustomMarker()}},// 编辑edit: {featureGroup: drawnItems}
});
同样的在插件当中还提供了一个修改绘制配置的方法setDrawingOptions，传递的是一个对象，和draw当中配置的对象是一样的。
drawControl.setDrawingOptions({rectangle: {shapeOptions: {color: '#0000FF'}}
});
中英文转换
在上面初始化了一个绘制对象之后，会发现展示的内容都是英文的，这对我们国内使用不是很方便，所以将其改为中文。这里直接把所有的都给替换掉了，将这段插入代码内即可。是因为在插件源码当中也是定义了一个L.drawLocal = {} 然后他里面都是英文，我们在外面重新定义的会直接取进行一个覆盖。
L.drawLocal = {draw: {toolbar: {// #TODO: this should be reorganized where actions are nested in actions// ex: actions.undo or actions.cancelactions: {title: '取消绘图',//'Cancel drawing',text: '取消'//'Cancel'},finish: {title: '完成绘图',//'Finish drawing',text: '完成'},undo: {title: '删除最后绘制的点',//'Delete last point drawn',text: '撤销'//'Delete last point'},buttons: {polyline: '绘制一个多段线',//'Draw a polyline',polygon: '绘制一个多边形',//'Draw a polygon',rectangle: '绘制一个矩形',//'Draw a rectangle',circle: '绘制一个圆',//'Draw a circle',marker: '绘制一个标记',//'Draw a marker',circlemarker: '绘制一个圆形标记'//'Draw a circlemarker'}},handlers: {circle: {tooltip: {start: '单击并拖动以绘制圆'//'Click and drag to draw circle.'},radius: 'Radius'},circlemarker: {tooltip: {start: '单击“地图”以放置圆标记'//'Click map to place circle marker.'}},marker: {tooltip: {start: '单击“地图”以放置标记'//'Click map to place marker.'}},polygon: {tooltip: {start: '单击开始绘制形状',//'Click to start drawing shape.',cont: '单击继续绘制形状',//'Click to continue drawing shape.',end: '单击第一个点关闭此形状'//'Click first point to close this shape.'}},polyline: {error: '<strong>错误:</strong>形状边缘不能交叉！',//'<strong>Error:</strong> shape edges cannot cross!',tooltip: {start: '单击开始绘制线',//'Click to start drawing line.',cont: '单击以继续绘制线',//'Click to continue drawing line.',end: '单击“最后一点”以结束线'//'Click last point to finish line.'}},rectangle: {tooltip: {start: '单击并拖动以绘制矩形'//'Click and drag to draw rectangle.'}},simpleshape: {tooltip: {end: '释放鼠标完成绘图'//'Release mouse to finish drawing.'}}}},edit: {toolbar: {actions: {save: {title: '保存更改',//'Save changes',text: '保存'//'Save'},cancel: {title: '取消编辑，放弃所有更改',//'Cancel editing, discards all changes',text: '取消'//'Cancel'},clearAll: {title: '清除所有图层',//'Clear all layers',text: '清除所有'//'Clear All'}},buttons: {edit: '编辑图层',//'Edit layers',editDisabled: '无可编辑的图层',//'No layers to edit',remove: '删除图层',//'Delete layers',removeDisabled: '无可删除的图层'//'No layers to delete'}},handlers: {edit: {tooltip: {text: '拖动控制柄或标记以编辑要素',//'Drag handles or markers to edit features.',subtext: '单击“取消”撤消更改'//'Click cancel to undo changes.'}},remove: {tooltip: {text: '单击要删除的要素'//'Click on a feature to remove.'}}}}
};
事件
leaflet-draw插件的事件都是注册到map对象上的，到这里，可以了解一下Evented 事件
// map.fire 也就是 触发指定类型的事件。您可以选择提供一个数据对象——侦听器函数的第一个参数将包含其属性，事件可以选择性地传播到事件父级。
this._map.fire(L.Draw.Event.CREATED, {layer: layer, layerType: this.type});
也就是相当于自定义事件了，在他插件源码中相当于定义了一个map的L.Draw.Event.CREATED事件，然后在引入插件之后就可以通过map去使用这个事件了。
- 由于前面通过fire将事件传播过来，并且传递过来了一个对象，这里通过一个event去接收
- 同时也就是为什么会有event.layerType和event.layer这两个值，对于绘制不同面可以去取不同的值，拿到值之后还可以将这个layer图层给添加到前面定义好的一个drawnItems，之后的修改也是修改这里面的layer。
map.on(L.Draw.Event.CREATED, function (event) {console.log(' =====', event);// 作为永久存储 取这几个值给后端存着，后面再拿出来进行渲染console.log('类型 =====', event.layerType);console.log('坐标 =====', event.layer._latlngs || event.layer._latlng);console.log('配置 =====', event.layer.options); // 圆的半径在配置当中const layer = event.layer;drawnItems.addLayer(layer);
});
事件说明
| 事件名 | 说明 | 反参 |
|---|---|---|
| L.Draw.Event.CREATED | 创建完成 | layer、layerType |
| L.Draw.Event.EDITED | 编辑完成 | layers |
| L.Draw.Event.DELETED | 删除 | layers |
| L.Draw.Event.DRAWSTART | 开始绘制 | layerType |
| L.Draw.Event.DRAWSTOP | 停止绘制 | layerType |
| L.Draw.Event.DRAWVERTEX | 绘制顶点 | layers |
| L.Draw.Event.EDITSTART | 开始编辑 | handler |
| L.Draw.Event.EDITMOVE | 编辑移动 | layer |
| L.Draw.Event.EDITRESIZE | 编辑缩放 | layer |
| L.Draw.Event.EDITVERTEX | 编辑顶点 | layers、poly |
| L.Draw.Event.EDITSTOP | 完成编辑 | handler |
| L.Draw.Event.DELETESTART | 开始删除 | handler |
| L.Draw.Event.DELETESTOP | 完成删除 | handler |
| L.Draw.Event.TOOLBAROPENED | 点击了图标，触发绘制 | |
| L.Draw.Event.TOOLBARCLOSED | 取消绘制触发 | |
| L.Draw.Event.MARKERCONTEXT | 右键单击标记 | marker，layer，poly |
测量
用来测量某两个或多个点之间的距离以及所围成的面积。
// 先执行npm按照插件
npm i leaflet-measureimport 'leaflet-measure/dist/leaflet-measure';
import 'leaflet-measure/dist/leaflet-measure.css';const measureControl = new L.Control.Measure({position: 'topright',primaryLengthUnit: 'feet',secondaryLengthUnit: 'miles',activeColor: '#F40',completedColor: '#F40',popupOptions: {className: 'leaflet-measure-resultpopup', autoPanPadding: [10, 10]}
});
measureControl.addTo(map);
插件的配置说明
| 属性 | 说明 |
|---|---|
| position | 插件按钮所处位置，左上、右下等等 |
| primaryLengthUnit | 主要单位 |
| secondaryLengthUnit | 次要单位 |
| activeColor | 主动执行测量时渲染的地图要素的基色 |
| completedColor | 测量完成之后渲染的颜色 |
| popupOptions | 弹出框配置，可以额外设置class类名进行自定义样式 |
经纬度标识
可以使用插件，插件可以在github，插件：leaflet.latlng-graticule 上进行下载获取，之后将插件引入，然后通过L.latlngGraticule进行实例化插件
// 引入刚才下载的插件js
import './plugin/leaflet.latlng-graticule';L.latlngGraticule({weight: '2.0',color: '#f40',fontColor: '#fff',opacity: 1,showLabel: true,dashArray: [5, 5],sides: ['北', '南', '东', '西'],zoomInterval: [{start: 2, end: 3, interval: 30},{start: 4, end: 4, interval: 10},{start: 5, end: 7, interval: 5},{start: 8, end: 18, interval: 1}]
}).addTo(map);
插件的配置
| 属性 | 说明 |
|---|---|
| weight | number 表示 |
| color | 颜色值 表示经纬度线的颜色 |
| fontColor | 颜色值 表示经纬度文字的颜色 |
| opacity | number 表示透明度 |
| showLabel | boolean 是否显示经纬度文字 |
| dashArray | Array[number] 表示经纬度线的分隔程度 |
| sides | Array[string] 表示四个方向展示的内容 |
| zoomInterval | 展示层级 地图在第start到第end层级时，每interval度画一条经纬线 |
插件源码解析
首先可以参考一下Leaflet【三】图层组 & geoJson & 热力图 这篇文章，里面有对leaflet-heat插件的源码分析，这里同时简单看一下这个绘制经纬度的源码。
初始化对象，他是从layer基类当中继承而来。这里面有两个属性，一个是includes这个下面说一下，另外一个是options，也就是对这个插件的配置对象。
includes是Class基类当中的一个属性，是一个特殊的类属性，它将所有指定的对象合并到类中（这样的对象被称为mixins。）理解成vue2当中的混入就好了。那么这里就是通过继承L.Evented基类或L.Mixin.Events，该类获得了事件处理功能
L.LatLngGraticule = L.Layer.extend({includes: (L.Evented.prototype || L.Mixin.Events),options:{} // 配置，这里省略了
});
initialize初始化，这里面没什么，就是将传递过来的options配置重新设置一下，以及将配置组装给到对应的样式。
initialize: function (options) {L.setOptions(this, options);// 。。。。样式组装，省略
}
onAdd方法，添加图层到map上会执行，这个方法基本上都大同小异，先初始化canvas，将canvas加到html当中，然后把需要监听的事件都监听上，最后绘制。这个内容有点多，简单概括一下。
- 首先拿到canvas的宽高以及地图的当前层级，然后根据zoomInterval当中的start和end和地图层级比较拿到对应的interval
- 已当前地图层级时6为例，这个时候拿到的interval是5，那么绘制的时候会从canvas左上开始绘制，取对应的经纬度，然后往右往下进行绘制，每过了5度就绘制下一条破折线
- 并且绘制的时候将对应的文本一起绘制上去，这样也就完成了绘制
- 之后的地图移动事件会重新执行_reset方法，那么也就会重新__redraw。
onAdd: function (map) {this._map = map;if (!this._canvas) {this._initCanvas();}map._panes.overlayPane.appendChild(this._canvas);map.on('viewreset', this._reset, this);map.on('move', this._reset, this);map.on('moveend', this._reset, this);if (map.options.zoomAnimation && L.Browser.any3d) {map.on('zoomanim', this._animateZoom, this);}this._reset();
},
直接看他绘制的方法，这里的initcanvas初始化一个canvas对象，然后_reset会将canvas大小设置一下，然后执行__draw绘制方法。
__draw: function (label) {function _parse_px_to_int(txt) {if (txt.length > 2) {if (txt.charAt(txt.length - 2) == 'p') {txt = txt.substr(0, txt.length - 2);}}try {return parseInt(txt, 10);} catch (e) {}return 0;};var self = this,canvas = this._canvas,map = this._map,curvedLon = this.options.lngLineCurved,curvedLat = this.options.latLineCurved;if (L.Browser.canvas && map) {var latInterval = this._currLatInterval,lngInterval = this._currLngInterval;// 获取canvas对象，设置对应的宽高样式等var ctx = canvas.getContext('2d');ctx.clearRect(0, 0, canvas.width, canvas.height);ctx.lineWidth = this.options.weight;ctx.strokeStyle = this.options.color;ctx.fillStyle = this.options.fontColor;ctx.setLineDash(this.options.dashArray);if (this.options.font) {ctx.font = this.options.font;}var txtWidth = ctx.measureText('0').width;var txtHeight = 12;try {var _font_size = ctx.font.trim().split(' ')[0];txtHeight = _parse_px_to_int(_font_size);} catch (e) {}var ww = canvas.width,hh = canvas.height;var lt = map.containerPointToLatLng(L.point(0, 0));var rt = map.containerPointToLatLng(L.point(ww, 0));var rb = map.containerPointToLatLng(L.point(ww, hh));var _lat_b = rb.lat,_lat_t = lt.lat;var _lon_l = lt.lng,_lon_r = rt.lng;var _point_per_lat = (_lat_t - _lat_b) / (hh * 0.2);_point_per_lat = _point_per_lat < 1 ? 1 : _point_per_lat;_lat_b = _lat_b < -90 ? -90 : parseInt(_lat_b - _point_per_lat, 10);_lat_t = _lat_t > 90 ? 90 : parseInt(_lat_t - _point_per_lat, 10);var _point_per_lon = (_lon_r - _lon_l) / (ww * 0.2);_point_per_lon = _point_per_lon < 1 ? 1 : _point_per_lon;if (_lon_l > 0 && _lon_r < 0) {_lon_r += 360;}_lon_r = parseInt(_lon_r + _point_per_lon, 10);_lon_l = parseInt(_lon_l - _point_per_lon, 10);var ll, latstr, lngstr, _lon_delta = 0.5;function __draw_lat_line(self, lat_tick) {ll = self._latLngToCanvasPoint(L.latLng(lat_tick, _lon_l));latstr = self.__format_lat(lat_tick);txtWidth = ctx.measureText(latstr).width;var spacer = self.options.showLabel && label ? txtWidth + 10 : 0;if (curvedLat) {if (typeof (curvedLat) == 'number') {_lon_delta = curvedLat;}var __lon_left = _lon_l, __lon_right = _lon_r;if (ll.x > 0) {var __lon_left = map.containerPointToLatLng(L.point(0, ll.y));__lon_left = __lon_left.lng - _point_per_lon;ll.x = 0;}var rr = self._latLngToCanvasPoint(L.latLng(lat_tick, __lon_right));if (rr.x < ww) {__lon_right = map.containerPointToLatLng(L.point(ww, rr.y));__lon_right = __lon_right.lng + _point_per_lon;if (__lon_left > 0 && __lon_right < 0) {__lon_right += 360;}}ctx.beginPath();ctx.moveTo(ll.x + spacer, ll.y);var _prev_p = null;for (var j = __lon_left; j <= __lon_right; j += _lon_delta) {rr = self._latLngToCanvasPoint(L.latLng(lat_tick, j));ctx.lineTo(rr.x - spacer, rr.y);if (self.options.showLabel && label && _prev_p != null) {if (_prev_p.x < 0 && rr.x >= 0) {var _s = (rr.x - 0) / (rr.x - _prev_p.x);var _y = rr.y - ((rr.y - _prev_p.y) * _s);ctx.fillText(latstr, 0, _y + (txtHeight / 2));} else if (_prev_p.x <= (ww - txtWidth) && rr.x > (ww - txtWidth)) {var _s = (rr.x - ww) / (rr.x - _prev_p.x);var _y = rr.y - ((rr.y - _prev_p.y) * _s);ctx.fillText(latstr, ww - txtWidth, _y + (txtHeight / 2) - 2);}}_prev_p = {x: rr.x, y: rr.y, lon: j, lat: i};}ctx.stroke();} else {var __lon_right = _lon_r;var rr = self._latLngToCanvasPoint(L.latLng(lat_tick, __lon_right));if (curvedLon) {__lon_right = map.containerPointToLatLng(L.point(0, rr.y));__lon_right = __lon_right.lng;rr = self._latLngToCanvasPoint(L.latLng(lat_tick, __lon_right));var __lon_left = map.containerPointToLatLng(L.point(ww, rr.y));__lon_left = __lon_left.lng;ll = self._latLngToCanvasPoint(L.latLng(lat_tick, __lon_left));}ctx.beginPath();ctx.moveTo(1 + spacer, ll.y);ctx.lineTo(rr.x - 1 - spacer, rr.y);ctx.stroke();if (self.options.showLabel && label) {var _yy = ll.y + (txtHeight / 2) - 2;ctx.fillText(latstr, 0, _yy);ctx.fillText(latstr, ww - txtWidth, _yy);}}};if (latInterval > 0) {for (var i = latInterval; i <= _lat_t; i += latInterval) {if (i >= _lat_b) {__draw_lat_line(this, i);}}for (var i = 0; i >= _lat_b; i -= latInterval) {if (i <= _lat_t) {__draw_lat_line(this, i);}}}function __draw_lon_line(self, lon_tick) {lngstr = self.__format_lng(lon_tick);txtWidth = ctx.measureText(lngstr).width;var bb = self._latLngToCanvasPoint(L.latLng(_lat_b, lon_tick));var spacer = self.options.showLabel && label ? txtHeight + 5 : 0;if (curvedLon) {if (typeof (curvedLon) == 'number') {_lat_delta = curvedLon;}ctx.beginPath();ctx.moveTo(bb.x, 5 + spacer);var _prev_p = null;for (var j = _lat_b; j < _lat_t; j += _lat_delta) {var tt = self._latLngToCanvasPoint(L.latLng(j, lon_tick));ctx.lineTo(tt.x, tt.y - spacer);if (self.options.showLabel && label && _prev_p != null) {if (_prev_p.y > 8 && tt.y <= 8) {ctx.fillText(lngstr, tt.x - (txtWidth / 2), txtHeight + 5);} else if (_prev_p.y >= hh && tt.y < hh) {ctx.fillText(lngstr, tt.x - (txtWidth / 2), hh - 2);}}_prev_p = {x: tt.x, y: tt.y, lon: lon_tick, lat: j};}ctx.stroke();} else {var __lat_top = _lat_t;var tt = self._latLngToCanvasPoint(L.latLng(__lat_top, lon_tick));if (curvedLat) {__lat_top = map.containerPointToLatLng(L.point(tt.x, 0));__lat_top = __lat_top.lat;if (__lat_top > 90) {__lat_top = 90;}tt = self._latLngToCanvasPoint(L.latLng(__lat_top, lon_tick));var __lat_bottom = map.containerPointToLatLng(L.point(bb.x, hh));__lat_bottom = __lat_bottom.lat;if (__lat_bottom < -90) {__lat_bottom = -90;}bb = self._latLngToCanvasPoint(L.latLng(__lat_bottom, lon_tick));}ctx.beginPath();ctx.moveTo(tt.x, 5 + spacer);ctx.lineTo(bb.x, hh - 1 - spacer);ctx.stroke();if (self.options.showLabel && label) {ctx.fillText(lngstr, tt.x - (txtWidth / 2), txtHeight + 5);ctx.fillText(lngstr, bb.x - (txtWidth / 2), hh - 3);}}};if (lngInterval > 0) {for (var i = lngInterval; i <= _lon_r; i += lngInterval) {if (i >= _lon_l) {__draw_lon_line(this, i);}}for (var i = 0; i >= _lon_l; i -= lngInterval) {if (i <= _lon_r) {__draw_lon_line(this, i);}}}}
},
