【亲测免费】 Esri Leaflet 教程

2026-01-16 09:34:32作者：申梦珏Efrain

Esri Leaflet 是一个轻量级的库，用于在 Leaflet 应用中集成 Esri 的地图服务。以下是关于这个项目的目录结构、启动文件和配置文件的基本介绍。

1. 项目目录结构

Esri Leaflet 的源代码主要分布在以下几个关键目录：

.
├── dist           # 包含编译后的 ES 模块和 UMD 模块
├── src             # 存放源代码，包括核心功能和服务
│   ├── layers      # 地图层相关的实现
│   ├── services    # Esri 服务接口
│   └── util        # 工具类和辅助函数
├── test            # 单元测试和集成测试
└── samples         # 示例代码和演示

2. 项目启动文件

由于 Esri Leaflet 是一个库，它没有传统的启动文件（如 index.js 或 app.js）。不过，你可以从 dist 目录中的构建文件开始使用，例如 esri-leaflet.js 或 esri-leaflet.min.js。这些文件是通过构建脚本打包的，可以直接在 HTML 页面中引入，以添加对 Esri 服务的支持到你的 Leaflet 应用。

<!DOCTYPE html>
<html>
<head>
  <title>Esri Leaflet Example</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
  <script src="https://unpkg.com/@esri/esri-leaflet@latest/dist/esri-leaflet.js"></script>
</head>
<body>
  <div id="map" style="height: 600px;"></div>
  <script>
    var map = L.map('map').setView([40.7128, -74.0060], 13);
    L.esri.basemapLayer("Streets").addTo(map);
  </script>
</body>
</html>

3. 项目的配置文件

Esri Leaflet 使用 package.json 文件来管理依赖和项目配置。此文件定义了项目的元数据，比如名称、版本、作者以及开发和发布时使用的 npm 脚本。此外，还有关于依赖和开发依赖的信息，例如：

{
  "name": "esri-leaflet",
  "version": "3.0.4",
  "description": "A lightweight set of tools for working with ArcGIS services in Leaflet.",
  ...
  "dependencies": {
    "@types/geojson": "^7.0.4",
    "lodash": "^4.17.21"
  },
  "devDependencies": {
    ...
  },
  "scripts": {
    "build": "rollup --config build/rollup.config.js",
    "test": "mocha test/*.js",
    ...
  }
}