绘制符号与图形

基本绘制

Leaflet 本身不支持点线面的绘制，需要引入插件 leaflet.draw.js，引入插件包括离线引用和在线引用两种方式。

离线引用需要先下载 leaflet.draw.js，再通过 <script> 标签引用：

1.进入 Github 下载 leaflet.draw.js，下载地址：

https://github.com/Leaflet/Leaflet.draw

2.<script> 标签引入：

<script src="leaflet.draw.js"></script>

在线引用可在 <script> 标签中通过 CDN 引入所需插件：

<script src="https://cdn.bootcdn.net/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js"></script>

引入插件后，通过以下代码实现点线面绘制功能：

// 创建一个绘制图层
var editableLayers = new L.FeatureGroup();
// 绘制控件参数配置
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);
// 监听绘制事件
map.on(L.Draw.Event.CREATED, function (e) {
    var type = e.layerType, layer = e.layer;
    editableLayers.addLayer(layer);
});

查看完整示例代码

捕捉绘制

捕捉绘制是指绘制时鼠标进入到一个已经绘制好的点的一定容差范围内，鼠标点会被吸附到那个已经绘制好的点的位置。

Leaflet 本身不支持点线面的捕捉绘制，需要引入插件，引入插件包括离线引用和在线引用两种方式。

离线引用需要先下载 leaflet.pm.js，再通过 <script> 标签引用：

1.进入Github下载 leaflet.pm.js，下载地址为：

http://www.bootcdn.cn/leaflet.pm/

2.<script> 标签引入:

<script src="http://cdn.bootcss.com/leaflet.pm/0.16.0/leaflet.pm.min.js"></script>

也可无需下载插件，在线引入：

<script src="http://cdn.bootcss.com/leaflet.pm/0.16.0/leaflet.pm.min.js"></script>

引入插件后，捕捉绘制功能的实现代码如下：

// 捕捉绘制控件参数设置
var options = {
    position: 'topleft', // 控件位置
    drawMarker: true, // marker绘制是否可选
    drawPolygon: true, // drawPolygon绘制是否可选
    drawPolyline: true, // drawPolyline绘制是否可选
    editPolygon: true, // editPolygon编辑是否可选
    deleteLayer: true 
};
// 添加捕捉绘制控件
map.pm.addControls(options);

查看完整示例代码