利用Leaflet.js创建交互式地图：单条路线绘制

引言

        在现代Web应用中，地图已成为不可或缺的一部分，无论是用于导航、位置服务还是数据可视化。Vue.js，作为一个轻量级且高效的JavaScript框架，提供了构建用户界面的灵活性和强大功能。而Leaflet，一个开源的JavaScript库，以其轻量级和易用性著称，成为实现地图功能的首选。本文将分享如何使用Leaflet.js来创建一个交互式地图，并绘制单条路线。

组件设计

我们的地图组件将设计为高度可配置，以满足不同场景的需求。组件将接收以下属性（props）：

• color：路线的颜色。
• weight：路线的尺寸宽度。
• latitudeLongitude：标记的默认经纬度坐标（多个用";"分号隔开）。

• shape：标记路线形状 (1：实线，2：虚线)

• enableMapClick：一个布尔值，决定是否启用地图的点击事件以添加标记。

组件的数据（data）将包含：

• map：Leaflet地图实例。
• marker：Leaflet标记实例。

实现步骤与代码示例

以下是实现交互式地图组件的关键步骤和代码示例，展示了如何初始化地图、处理地图点击事件以及添加标记。

1. 地图初始化

在Vue组件的mounted生命周期钩子中，初始化地图并配置其行为：

initMap() {
     // 实例
     this.map = L.map("mapRef", {
        center: [21.582007, 111.824558], // 地图中心
        zoom: 15, // 缩放比列
        zoomControl: false, // 是否显示 + - 按钮
        doubleClickZoom: false, // 是否双击放大
        // scrollWheelZoom: false, // 是否可以通过滑轮缩放
        attributionControl: false, // 是否显示右下角leaflet标识
    });
    // 加载出地图
    this.name = L.tileLayer(
        "http://webrd01.is.autonavi.com/...（省略地址）",
        {   
            maxZoom: 18,
            attribution: '© OpenStreetMap contributors',
        },
    ).addTo(this.map);

      if (!this.drawnItems) {
        this.drawnItems = new L.FeatureGroup().addTo(this.map);
      }
      this.$nextTick(res=>{
      if (this.latitudeLongitude) {
        this.renderRegion();
        this.isDraw = false;
        
      }
      })

    },

2. 初始渲染路线

// 渲染路线
renderRegion() {
    console.log(this.polygonStyle,this.drawnItems, "this.polygonStyle数据");
    // 解析经纬度字符串
    const latLongs = this.polygonStyle.latitudeLongitude
    .split(";")
    .map((coord) => {
        const [lat, lng] = coord.split(",").map(Number);
        return L.latLng(lat, lng);
    });
    console.log(latLongs,'latLongs');
    
    // 根据路线类型创建图层
    let layer = null;
    if(this.polygonStyle.shape == 2){
        // 虚线
        layer = L.polyline(latLongs, {
            color: this.polygonStyle.color,
            weight: this.polygonStyle.weight,
            dashArray: '10,10',
        });
    }else{
        // 实线
        layer = L.polyline(latLongs, {
            color: this.polygonStyle.color,
            weight: this.polygonStyle.weight,
        });
    }
    // 将图层添加到地图上
    this.drawnItems.addLayer(layer);
},

3. 开启路线绘制

处理地图点击事件，创建标记，并为其设置样式

// 开启绘制路线图层
startDrawRoute() {
  if (this.polygonStyle.weight && this.polygonStyle.color && this.polygonStyle.shape) {
    console.log('开始绘制');
    if (!this.drawnItems) {
      var drawnItems = new L.FeatureGroup();
      this.drawnItems = drawnItems;
      this.map.addLayer(this.drawnItems);
    }
    // 清除之前的绘制
    this.drawnItems.clearLayers();
    const polylineOptions = {};
    // 设置实线和虚线.....
    // 路线绘制开启
    this.polyline = new L.Draw.Polyline(
        this.map,
        polylineOptions
    ).enable();
      // 启用绘制路线模式
    this.map.on(L.Draw.Event.CREATED, (event) => {
        console.log(event, "绘制事件");
        var type = event.layerType;
        var layer = event.layer;
        .....
    });
  } else {
    this.$message({
      message: "请输入路线宽度和颜色",
      type: "warning",
    });
  }
},

4. 清除路线图层

// 清除绘制的路线
clearDrawnItems() {
    console.log('清除绘制的路线');
    // 清空图层组中的所有图层
    if (this.drawnItems) {
        this.drawnItems.clearLayers();
    }
    this.drawnItems = null; // 重置drawnItems
    this.isDraw = true;
},

5. 动态更改路线样式 

watch: {
  "polygonStyle.weight"(newVal, oldVal) {
    if (this.drawnItems) {
      this.drawnItems.eachLayer((layer) => {
        if (layer.setStyle) {
          layer.setStyle({ weight: newVal });
        }
      });
      this.$emit("draw-finished", this.polygonStyle); // 触发事件，传递绘制路线数据
    }
  },
  "polygonStyle.color"(newVal, oldVal) {
    if (this.drawnItems) {
      this.drawnItems.eachLayer((layer) => {
        if (layer.setStyle) {
          layer.setStyle({ color: newVal });
        }
      });
      this.$emit("draw-finished", this.polygonStyle); // 触发事件，传递绘制路线数据
    }
  },
},

结语

本文详细介绍了如何结合Vue.js和Leaflet创建一个交互式地图组件，实现了路线的动态绘制功能。这种组件不仅易于集成和定制，而且可以广泛应用于需要地图功能的各种Web应用中，为用户提供丰富的交互体验。完整的代码和项目资源可在个人中心-资源库获取，以供进一步学习和参考。