leaflet-自定义绘制可拖动改变的矩形区域_leaflet交互式绘制矩形并拿到矩形的坐标-CSDN博客

本文链接：https://blog.csdn.net/s_9527_s/article/details/125620187

本文介绍了如何在Vue.js项目中利用Leaflet库实现地图上可绘制并拖动调整的矩形区域。通过监听鼠标点击事件，动态清除并绘制矩形，同时设置标记点使其拖动时矩形能跟随调整。文章还提供了相关的HTML、JS代码示例，并展示了最终效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

思路：

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>

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

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 =