Leaflet.markercluster 项目教程

2026-01-16 10:31:32作者：贡沫苏Truman

1. 项目的目录结构及介绍

Leaflet.markercluster 项目的目录结构如下：

Leaflet.markercluster/
├── dist/
│   ├── MarkerCluster.css
│   ├── MarkerCluster.Default.css
│   ├── leaflet.markercluster-src.js
│   └── leaflet.markercluster.js
├── examples/
│   ├── realworld.388.html
│   ├── custom.html
│   └── ...
├── src/
│   ├── MarkerCluster.js
│   ├── MarkerClusterGroup.js
│   └── ...
├── test/
│   ├── leaflet-markercluster-test.js
│   └── ...
├── .gitignore
├── .jshintrc
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── bower.json
├── jakefile.js
├── package.json
└── webpack.config.js

目录介绍

dist/：包含构建后的文件，包括 CSS 和 JavaScript 文件。
examples/：包含示例文件，如 realworld.388.html 和 custom.html。
src/：包含源代码文件，如 MarkerCluster.js 和 MarkerClusterGroup.js。
test/：包含测试文件，如 leaflet-markercluster-test.js。
.gitignore：Git 忽略文件。
.jshintrc：JSHint 配置文件。
CONTRIBUTING.md：贡献指南。
LICENSE：许可证文件。
README.md：项目说明文件。
bower.json：Bower 配置文件。
jakefile.js：Jake 构建脚本。
package.json：npm 配置文件。
webpack.config.js：Webpack 配置文件。

2. 项目的启动文件介绍

项目的启动文件主要是 dist/ 目录下的文件，这些文件是构建后的输出文件，可以直接在项目中使用。

主要启动文件

MarkerCluster.css：标记聚类的样式文件。
MarkerCluster.Default.css：默认标记聚类的样式文件。
leaflet.markercluster.js：标记聚类的 JavaScript 文件（已压缩）。
leaflet.markercluster-src.js：标记聚类的 JavaScript 文件（未压缩）。

使用方法

在 HTML 文件的 <head> 部分引入这些文件：

<head>
    <link rel="stylesheet" href="path/to/MarkerCluster.css">
    <link rel="stylesheet" href="path/to/MarkerCluster.Default.css">
    <script src="path/to/leaflet.markercluster.js"></script>
</head>