利用Leaflet.js和turf.js创建交互式地图：航道路线绘制

引言

        在现代Web应用中，地图的交互性是提供丰富用户体验的关键。Leaflet.js是一个轻量级的开源JavaScript库，它提供了简单易用的API来构建交云的地图。与此同时，turf.js作为一个强大的地理空间分析库，能够处理复杂的地理数据操作。本文将介绍如何将这两个库结合起来，创建一个交互式的地图组件，专门用于绘制和编辑航道。

准备工作

首先，确保你已经安装了turf.js库。在你的项目中，可以通过npm来安装

npm install @turf/turf

在你的入口文件（例如main.js或app.js）中，引入turf.js

import * as turf from '@turf/turf'

组件设计

        我们的目标是设计一个用户友好的组件，使用户能够在地图上绘制航道，并且能够实时地调整航道的样式，包括颜色和宽度。组件将包括以下核心功能：

• 地图初始化
• 初始渲染航道
• 开启航道绘制
• 清除航道图层
• 动态更改航道样式

实现步骤与代码示例

1. 地图初始化

地图初始化是构建任何地图应用的第一步。我们需要设置地图的中心点、缩放级别，并添加底图。

// 初始化加载
initMap() {
    // 实例
    this.map = L.map("mapRef", {
        center: [21.582007, 111.824558], // 地图中心
        zoom: 15, // 缩放比列
        zoomControl: false, // 是否显示 + - 按钮
        doubleClickZoom: false, // 是否双击放大
        // scrollWheelZoom: false, // 是否可以通过滑轮缩放
        attributionControl: false, // 是否显示右下角leaflet标识
        minZoom: 3, // 最小缩放级别，可以根据需要调整
    });
    // 加载出地图
    const tiandiKey = "YOUR_API_KEY";  // 替换为实际API密钥
    const map