利用Leaflet.js集成强大的船舶管理页面：集成标记/路线/区域绘制和动态显隐功能

引言

        在船舶管理领域，地理信息系统（GIS）技术的应用日益广泛。通过GIS技术，管理人员可以实时监控船舶的位置、航线以及与其他重要地理位置的关系。Leaflet.js作为一个轻量级但功能强大的前端地图框架，使得在Web页面上集成交互式地图变得简单。本文将分享如何使用Leaflet.js创建一个船舶管理页面，集成地图标记、路线绘制、区域定义以及动态显隐功能。

实现步骤及代码示例

1. 地图元素基础

        在地理信息系统（GIS）和地图集成技术中，绘制标记、区域和路线通常统称为“地图元素”（Map Elements）或“地图图层”（Map Layers）。这些元素和图层是构建交互式地图的基础，它们允许用户在地图上添加、编辑和显示不同的地理数据。

• 地图标记（Map Markers）：代表地图上的特定位置，通常用于表示船舶、地标或其他重要位置。
• 地图区域（Map Areas）：在地图上定义的特定区域，可以是圆形、矩形或其他形状，用于表示特定区域或区域边界。
• 地图路线（Map Routes）：表示从一个点到另一个点的路径，通常用于展示船舶的航行路线或交通路线。

2. 新增地图元素

提供新增功能，允许用户新增标记、区域和路线，供后续进行地图元素的交互。

        2.1 标记示例