Mars2D开发者中心

外观

核心依赖库 Leaflet 介绍

625字约2分钟

2025-3-25

本页目标

弄清 Mars2D 与 Leaflet 的关系，以及如何在 Mars2D 中直接使用 Leaflet 的 API 和插件——这是 Mars2D“兼容 Leaflet 生态”的核心能力。

Mars2D 基于 Leaflet 扩展封装：Leaflet 提供轻量、跨端的地图内核，Mars2D 在其上补齐了图层体系、矢量对象、控件、坐标系、分析等能力。

1. Mars2D 与 Leaflet 的关系

Mars2D 很多类直接继承 Leaflet，例如 mars2d.Map extends L.Map。两个 SDK 互相独立、解耦，可以理解为 Mars2D = Leaflet 的增强封装。

Leaflet 类Mars2D 类说明
L.Mapmars2d.Map地图主对象
L.TileLayermars2d.layer.TileLayerXYZ 瓦片图层
L.TileLayer.WMSmars2d.layer.WmsLayerWMS 服务图层
L.ImageOverlaymars2d.layer.ImageLayer单张图片图层
L.FeatureGroupmars2d.layer.GraphicLayer矢量数据图层
L.LayerGroupmars2d.layer.GroupLayer图层组
L.Markermars2d.graphic.Marker图标点
L.CircleMarkermars2d.graphic.Point像素圆点
L.Polylinemars2d.graphic.Polyline线
L.Polygonmars2d.graphic.Polygon面
L.Circlemars2d.graphic.Circle圆
L.Rectanglemars2d.graphic.Rectangle矩形

因为存在继承关系，Leaflet 本身的 API 在 Mars2D 对象上同样可用。如果你熟悉 Leaflet，可以直接调用其方法。

2. 在 Mars2D 中直接使用 Leaflet

开发时如需 Leaflet 的内部接口，直接用 L.* 即可；在 Vue 等模块化环境中，通过 mars2d.L.* 获取：

// 浏览器全局
const bounds = L.latLngBounds([[31.8, 117.2], [31.9, 117.3]])

// 模块化环境（Vue / React 等）
const L2 = mars2d.L
const point = L2.latLng(31.85, 117.24)

3. 接入 Leaflet 插件（重点）

Mars2D 完整兼容 Leaflet 生态，大多数 Leaflet 插件可以直接使用。典型流程：

  1. 先引入 Leaflet 和 Mars2D 主库。
  2. 再引入插件（很多插件依赖全局 L，需保证此时 L 已存在）。
  3. 按插件文档创建图层/控件，再用 map.addLayer / map.addControl 添加。

注意

  • 插件必须依赖同一份 Leaflet，避免打包时出现两份 leaflet（见NPM 集成常见问题）。
  • 部分插件只支持特定 Leaflet 版本，接入前先看插件说明。

4. Leaflet 学习资源

相关