leaflet-draw
此篇文章是我leaflet基本用法的延伸地图信息 leaflet +vue3 一个文档让你掌握leaflet基础用法_vue3+leaflet-CSDN博客
所以没有过多介绍leaflet。
废话不多说,直接上代码,此处的我把该事件单独放在了一个js文件,map是初始化地图,以下代码包含了英文转中文(好像可以直接引入leaflet.draw-cn.js文件也可转换,但有可能不行,所以科学上网哟各位!!!)
有啥问题,优化改进欢迎留言
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import 'leaflet-draw'
import 'leaflet-draw/dist/leaflet.draw.css'
export function useTools(map) {
//添加绘制图层
let drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
添加绘制控件
let drawControl = new L.Control.Draw({
draw: {
polyline: true, //绘制线
polygon: true, //绘制多边形
rectangle: true, //绘制矩形
circle: true,//绘制圆
marker: true, //绘制标注
circlemarker: true, //绘制圆形标注
},
edit: {
featureGroup: drawnItems, //绘制图层
edit: true, //图形编辑控件
remove: true, //图形删除控件
}
});
//添加绘制控件
map.addControl(drawControl);
// 线段提示
L.drawLocal.draw = {
toolbar: {
actions: {
// title: '取消绘图',
text: '取消绘图'
},
finish: {
// title: '完成绘图',
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.'
},
},
simpleshape: {
tooltip: {
end: '释放鼠标完成绘图',//'Release mouse to finish drawing.'
}
},
rectangle: {
tooltip: {
start: '单击并拖动以绘制矩形',//'Click and drag to draw rectangle.'
}
},
polyline: {
tooltip: {
start: '单击开始绘制线',//'Click to start drawing line.',
cont: '单击以继续绘制线',//'Click to continue drawing line.',
end: '单击“最后一点”以结束线',//'Click last point to finish line.'
}
},
polygon: {
tooltip: {
start: '单击开始绘制形状',//'Click to start drawing shape.',
cont: '单击继续绘制形状',//'Click to continue drawing shape.',
end: '单击第一个点关闭此形状',//'Click first point to close this shape.'
}
},
marker: {
tooltip: {
start: '单击“地图”以放置标记',//'Click and drag to draw circle.'
},
},
circlemarker: {
tooltip: {
start: '单击“地图”以放置圆标记',//'Click map to place circle marker.'
}
},
},
}
L.drawLocal.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.'
}
}
}
}
//绘制事件
map.on(L.Draw.Event.CREATED, function (e) {
console.log('ejs', e);
let type = e.layerType;
//获取绘制图层
let drawlayer = e.layer;
console.log('type', type, 'drawlayer', drawlayer);
if (type === 'marker') {
L.icon({
iconUrl: require("@/assets/leaflet/person1.png"),
iconSize: [50, 50],
})
drawlayer.bindPopup('A popup!');
}
drawnItems.addLayer(drawlayer);
});
}