利用Leaflet.js创建交互式地图：绘制固定尺寸的长方形

news2025/4/4 17:29:29

在现代Web开发中，交互式地图已成为展示地理位置数据的重要工具。Leaflet.js是一个轻量级、功能丰富的开源JavaScript库，用于构建移动友好的交互式地图。在本文中，我们将探讨如何利用Leaflet.js在地图上绘制一个固定尺寸的长方形，扩展我们之前实现的单个多边形绘制功能。

背景

我们已经实现了一个功能，允许用户在地图上绘制任意形状的多边形。现在，我们希望在此基础上增加一个新功能：用户可以通过点击一个按钮，自动在地图上绘制一个固定尺寸的长方形。

实现步骤

1. HTML界面设计

首先，我们需要在HTML中添加一个按钮，用于触发绘制长方形的操作。我们使用Vue.js框架来处理按钮点击事件。

<div class="polygonStyle" style="right: 500px" v-if="polygonsData.length == 0">
  <el-button @click="drawFixedSizeRectangle">默认矩形</el-button>
</div>

2. 绘制长方形的JavaScript函数

在Vue组件的方法中，我们定义了drawFixedSizeRectangle函数，该函数负责计算并绘制固定尺寸的长方形。

data() {
  return {
    defaultWidth:150,     // 默认宽
    defaultHeight:50,    // 默认高
  }
},
methods: {
  // 绘制固定尺寸的长方形
  drawFixedSizeRectangle() {
    const center = this.map.getCenter(); // 地图中心点
    const zoom = this.map.getZoom(); // 当前的缩放级别
    // 计算150米和50米在当前缩放级别和中心纬度下的经纬度差值
    const latDistancePerMeter = 1 / 111111; // 纬度每米大约变化0.000009度
    const lngDistancePerMeter = 1 / (111111 * Math.cos(center.lat * Math.PI / 180)); // 经度每米变化的度数
    const heightInDegrees = this.defaultHeight * latDistancePerMeter;
    const widthInDegrees = this.defaultWidth * lngDistancePerMeter;
    // 定义矩形的南西和北东角点
    const southWest = L.latLng(center.lat - heightInDegrees, center.lng - widthInDegrees);
    const northEast = L.latLng(center.lat + heightInDegrees, center.lng + widthInDegrees);
    // 获取四个角的坐标点
    const coordinates = [
      southWest,
      L.latLng(southWest.lat, northEast.lng), // 东南
      northEast, // 东北
      L.latLng(northEast.lat, southWest.lng) // 西北
    ];
    console.log("矩形四个角的坐标点:", coordinates);
    this.polygonsData.push(coordinates);
  },
}

3. 将坐标点添加到地图

在drawFixedSizeRectangle函数中，我们计算出长方形的四个角点坐标，并将这些坐标存储在polygonsData数组中。接下来通过监听polygonsData的变化进行绘制多边形到地图上。

watch: {
  polygonsData: {
    handler(newValue, oldValue) {
      // 当polygonsData变化时执行
      console.log(newValue, oldValue, "当polygonsData变化时执行");
      this.initMap(); // 初始化
      this.autoSize(); // 自动调整大小
      if (this.polygonsData.length > 0) {
        // 绘制多边形图形
        this.initializeLayers();
      }
      // 控制Leaflet工具栏是否可以绘制/编辑和删除按钮
      this.updateDrawControl();
    },
    deep: true, // 如果需要深度观察对象内部变化
  },
},
methods: {
  // 加载已经有数据的多边形
  renderPolygons() {
    console.log(this.polygonsData, "加载已经有数据的多边形");
    this.polygonsData.forEach((polygonCoords, index) => {
      const polygon = L.polygon(polygonCoords, this.polygonStyle).addTo(
        this.drawnItems
      );
      // 确保使用一致的样式
      polygon.setStyle(this.polygonStyle);
      // 添加点击事件监听器
      polygon.on("dblclick", () => {
        this.handlePolygonClick(polygon);
      });
    });
  },
  // 更新地图上的多边形
  initializeLayers() {
    this.drawnItems.clearLayers();
    // 延迟渲染以确保样式一致
    setTimeout(() => {
      this.renderPolygons();
    }, 100);
  },
}