利用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