Leaflet：封装 leaflet 绘制点和区域

封装 leaflet 绘制点和区域

效果图：

绘制点：

绘制区域：

鼠标单击和移动时的效果

鼠标双击结束绘制

思路：

1. 初始化地图，如果父组件有传值，根据传值类型，判断是画点，还是画区域，然后进行显示。
2. 如果画点，先判断地图上是否有 marker, 有则先移除，然后再重新创建点并添加到地图上。
3. 如果绘制区域，先判断地图上是否有区域，有则先移除，并重置相关数据；接着禁止双击缩放地图，初始化相关数据，给地图添加鼠标单击、双击和移动的监听事件。
4. 鼠标单击地图开始绘制，鼠标移动，虚线连接区域的起点与最后一个点以及鼠标即将落下的下一个点。
5. 鼠标双击地图结束区域绘制，取消鼠标单击、双击和移动事件，允许双击缩放地图。

<template>
  <div class="container">
    <div id="draw-map"></div>
    <a-icon
      type="environment"
      @click="blindClick"
      class="draw"
      :style="drawType == 'draw_point' ? 'display: block;' : 'display: none;'"
    />
    <a-icon
      type="highlight"
      @click="blindClick"
      class="draw"
      :style="drawType == 'draw_polygon' ? 'display: block;' : 'display: none;'"
    />
    <!-- <a-icon type="edit" @click="blindClick" class="draw" /> -->
    <a-icon type="delete" @click="cancleDraw" class="cancle" />
  </div>
</template>

<script>
import 'leaflet/dist/leaflet.css'
// 引入Leaflet对象 挂载到Vue上，便于全局使用，也可以单独页面中单独引用
import L from 'leaflet'
import 'leaflet.pm'
import 'leaflet.pm/dist/leaflet.pm.css'
import ComIcon from '@/assets/icon/fac.png'

// 图标
var comIcon = L.icon({
     
  iconUrl: ComIcon, // （必需）图标图像的 URL（绝对或相对于您的脚本路径）
  iconSize: [24, 24],
  iconAnchor: [10, 9], // 图标“尖端”的坐标（相对于其左上角）
})

var mymap
var _this
var marker
var polygon

var points, geometry, lines, tempLines, node

export default {
     
  name: 'DrawPoint',
  props: {
     
    latlng: {
     
      type: Array,
    },
    drawType: {
     
      type: String,
    },
    polygon_latlngs: {
     
      type: String,
    },
  },
  data() {
     
    return {
     
      // 纬度
      lat