利用Leaflet.js创建交互式地图：多种形状单个区域绘制
引言
在地图应用开发中，用户经常需要对特定区域进行标识和规划。本文将深入探讨如何利用Vue.js的响应式特性与Leaflet.js的地图功能，打造一个支持多边形、矩形、圆形等多种形状绘制的交互式地图编辑器。
功能亮点
- 自由绘制多边形：用户可以自由地在地图上绘制多边形区域。
- 规则形状快速绘制：支持矩形和圆形的快速绘制，适用于规则区域标识。
- 灵活的区域编辑：提供区域删除和重新绘制功能，满足用户编辑需求。
- 个性化样式定制：用户可以自定义每个区域的名称和颜色，使地图更加个性化。
- 响应式文本标注：文本标注会根据地图缩放级别智能显示，提升用户体验。
实现步骤与代码示例
这里提供的代码块仅展示了部分关键功能，以帮助读者理解整个实现过程，完整的代码和项目资源可以在个人中心-资源库获取
1. 模板代码
模板代码是构建地图绘制功能界面的基础，结合Vue的数据绑定和事件处理能力，可以创建一个交互性强、用户友好的地图编辑工具
<template>
<div class="mapContainer">
<div id="mapRef" ref="mapRef" style="height: 400px;"></div>
<!-- 工具栏 -->
<div class="control" v-if="!enableMapClick">
<div class="color">
<div class="title">区域名称/颜色：</div>
<el-input v-model="polygonStyle.regionName" placeHolder="区域名称" style="width:150px"></el-input>
<el-color-picker v-model="polygonStyle.color"></el-color-picker>
</div>
<div class="shape" v-if="isDraw">
<div class="shapeItem" v-for="(item,index) in shapeList" :key="index" :class="{'active':polygonStyle.shape == index + 1}" @click="polygonStyle.shape = index + 1">
<img :src="polygonStyle.shape == index + 1 ? item.imgActive : item.img" alt="">
<div class="title">{{ item.name }}</div>
</div>
</div>
<div class="startOrdelete" @click="startDrawItems" v-if="isDraw">
<img src="@/assets/images/electronicChart/start.png" alt="">
</div>
<div class="startOrdelete" @click="clearDrawnItems" v-else>
<img src="@/assets/images/electronicChart/delete.png" alt="">
</div>
</div>
</div>
</template>2. 地图初始化
在Vue组件的mounted生命周期钩子中初始化地图，并设置地图的初始视图和交互行为
// 初始化加载
initMap() {
// 实例
this.map = L.map("mapRef", {
center: [21.582007, 111.824558], // 地图中心
zoom: 15, // 缩放比列
zoomControl: false, // 是否显示 + - 按钮
doubleClickZoom: false, // 是否双击放大
// scrollWheelZoom: false, // 是否可以通过滑轮缩放
attributionControl: false, // 是否显示右下角leaflet标识
});
// 加载出地图
this.name = L.tileLayer(
"http://webrd01.is.autonavi.com/....（省略地址）",
{
maxZoom: 18,
attribution: '© OpenStreetMap contributors',
},
).addTo(this.map);
if (!this.drawnItems) {
this.drawnItems = new L.FeatureGroup().addTo(this.map);
}
if(this.latitudeLongitude){
this.renderRegion()
this.isDraw = false
}
},3.多边形/矩形/圆形绘制实现
处理绘制事件，为新创建的图层设置样式，并添加到地图上。
3.1 多边形绘制
3.2 矩形绘制
3.3 圆形绘制
// 开启绘制区域图层
startDrawItems(){
if(this.polygonStyle.regionName && this.polygonStyle.color && this.polygonStyle.shape){
if (!this.drawnItems) {
var drawnItems = new L.FeatureGroup();
this.drawnItems = drawnItems;
this.map.addLayer(this.drawnItems);
}
this.drawControl = new L.Control.Draw({
draw: { circlemarker: false },
edit: {
featureGroup: this.drawnItems,
},
});
this.drawnItems.clearLayers();
if(this.polygonStyle.shape == 1){
// 多边形绘制开启
this.polygon = new L.Draw.Polygon(
this.map,
this.drawControl.options.polygon
).enable();
}else if(this.polygonStyle.shape == 2){
// 矩形绘制开启
this.Rectangle = new L.Draw.Rectangle(
this.map,
this.drawControl.options.rectangle
).enable();
}else if(this.polygonStyle.shape == 3){
// 圆形绘制开启
this.circle = new L.Draw.Circle(
this.map,
this.drawControl.options.circle
).enable();
}
this.map.on(L.Draw.Event.CREATED, (event) => {
console.log(event, "绘制事件");
var type = event.layerType;
var layer = event.layer;
// 设置填充颜色
layer.setStyle({ color: this.polygonStyle.color,fillColor: this.polygonStyle.color });
// 添加文字标注
this.createTextDivIcon(layer);
// 添加到地图上
this.drawnItems.addLayer(layer);
console.log(layer._latlngs, "点位数据");
if (type === "polygon") {
// 多边形
this.polygonStyle.latitudeLongitude = this.convertPolygonsData(layer._latlngs)
} else if (type === "rectangle") {
// 矩形
this.polygonStyle.latitudeLongitude = this.convertPolygonsData(layer._latlngs)
} else if (type === "circle") {
// 圆形
this.polygonStyle.radius = layer._mRadius;
this.polygonStyle.latitudeLongitude = layer._latlng.lat + ',' + layer._latlng.lng;
}
this.isDraw = false
this.$emit('draw-clicked', this.polygonStyle); // 触发事件，传递绘制区域数据
})
}else{
this.$message({
message: "请选择区域名称、颜色、形状",
type: "warning",
});
}
},
// 创建一个文字标记，将文字图标放置在多边形的中心点
createTextDivIcon(layer){
let center;
if (layer instanceof L.Polygon || layer instanceof L.Rectangle) {
center = layer.getBounds().getCenter();
} else if (layer instanceof L.Circle) {
center = layer.getLatLng();
}
const textIcon = L.divIcon({
html: `<div class="berth-no-label">${this.polygonStyle.regionName}</div>`,
className: 'my-div-icon',
iconSize: [40, 14],
iconAnchor: [14, 9.5],
});
const marker = L.marker(center, { icon: textIcon });
marker.on('click', e => {
console.log('标记点击');
});
this.drawnItems.addLayer(marker); // 将标记添加到绘制的图层组
},4.区域编辑与删除
提供方法以清除地图上的绘制区域，允许用户进行重新绘制或编辑。
// 清除绘制区域图层
clearDrawnItems() {
// 清空图层组中的所有图层
if (this.drawnItems) {
this.drawnItems.clearLayers();
}
this.drawnItems = null; // 重置drawnItems
this.isDraw = true
},
// 开启绘制区域图层
startDrawItems(){
......
},5.样式自定义修改
允许用户通过界面元素设置区域的名称和颜色，这些设置将实时反映在地图上。
6. 响应式文本标注
根据地图的缩放级别动态调整文本标注的显示，优化视觉效果。
// 当缩放结束时触发（实现多边形上的文字随地图缩放而变化大小）
handleZoomChange(e) {
const zoomLevel = e.target._zoom;
const minZoomToShowText = 15; // 定义最小缩放级别以显示文本
// 获取所有文本标记
this.map.eachLayer((layer) => {
if (layer instanceof L.Marker) {
const icon = layer.options.icon;
if (icon.options.className === "my-div-icon") {
// 根据缩放级别调整文字大小或隐藏
if (zoomLevel < minZoomToShowText) {
// 缩小到一定程度，隐藏文本
layer.setOpacity(0);
} else {
// 其他情况，显示文本并可能调整大小
layer.setOpacity(1);
// 这里可以添加更多逻辑来调整文字大小
}
}
}
});
}, 结语
本文详细介绍了如何使用Vue.js和Leaflet.js开发一个功能全面的地图编辑器，支持多种形状的绘制和编辑。通过实践这些步骤，开发者可以为用户提供一个强大且灵活的地图绘制工具，满足各种地理信息规划和展示的需求。希望本文能为有志于地图应用开发的你提供帮助和启发。