leaflet-自定义绘制可拖动改变的矩形区域

项目要求：地图中可以绘制矩形，选中指定矩形后要可以通过拖动点来改变原有矩形区域，拖动时，区域要跟随改变

思路：

        1矩形的绘制，第一次鼠标点击获取第一个点的坐标，通过移动获取移动时的点作为第二个点，绘制时，需要通过移动时的经纬度坐标清除旧的矩形的同时绘制新的矩形，当鼠标第二次点击后，结束绘制，保存当前矩形的数据。

        2矩形的拖动，选择后，生成两个标记点，标记点改为可拖动状态，拖动时，将当前矩形根据另一个没动的点和当前拖动的位置绘制新的矩形，（同上需要做清除旧的矩形）

效果图：

 

 

标记点的图片可以修改为自己需要的样子 

代码：

html

<template>
	<div class="hello">
		<el-button @click="create()">创建矩形</el-button>
		<el-button @click="sub()">确定</el-button>
		<div class="mapdiv">
			<div id="map"></div>
			<div>
				<ul>
					<li v-for="item in list" @click="change(item)">修改{
  {item.name}}</li>
				</ul>
			</div>
		</div>
		
	</div>
</template>

确定按钮的作用是修改完成后确定保存数据，

js

export default {
		name: 'leafletone',
		data: function() {
			return {
				map: '',
				shipWreckIcon:'',
				list:[],//存放矩形点数据
				rectgroup: '',//矩形图层
				cirgroup:'',//点图层
				markerlist:[],//点名称
				testgroup:'',//移动时绘制矩形图形的图层
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				this.map = L.map('map', {
					center: [39.904989, 116.405285],
					zoom: 3,
				}) 
				let name = L.tileLayer('