vue+leaflet动态画圆 并且显示geojson数据点，给点绑定点击事件完整代码

效果如下图所示：

上图所示完整代码

需要安装leaflet框架和引入

npm install leaflet --save
npm install leaflet.wmts --save

main.js引入

//Leaflet全局配置
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import 'leaflet.wmts'
Vue.use(L)

html部分完整代码

<template>
  <div class="showslicecacheMapCtn4">
    <div class="txt1">提示：在地图绘制圆，鼠标左键点下为圆心，移动鼠标，鼠标抬起的时候圆自动生成</div>
    <div class="showslicecacheMapCtn">
      <div id="viewDiv7" class="viewDiv">
      </div>
      <div class="latlon" v-if="currentLongitude">经度:{
  { currentLongitude.toFixed(2) }},纬度:{
  {
          currentLatitude.toFixed(2)
        }}
      </div>
    </div>
    <div class="timediv2 runCtn">
      <div class="btn2">
        <el-button type="primary" @click="drawCircle">绘制圆</el-button>
        <el-button type="primary" @click="removeCircle">删除圆</el-button>
        <el-button type="primary" @click="deleteGeoJsonDotFn">删除geojson点</el-button>
        <el-button type="primary" @click="runBtn" :loading="isRes">运行</el-button>
      </div>
    </div>
    <div class="runCtn">
      <div class="btnctn">
        <div class="paddingLeft20">
          <el-button type="primary" @click="closeAllBtn">全部折叠</el-button>
        </div>
        <div class="paddingLeft20">
          <el-button type="primary" @click="expandBtn">全部展开</el-button>
        </div>
        <div class="clearCtn">
          <el-button type="primary" @click="clearBtn">清空</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

js部分完整代码

<script>