@2plgiap/react-leaflet-markercluster 中文文档教程

Question

React leaflet markercluster

反应包装器Leaflet.markercluster 的 对于 react-leaflet

文档示例： https://yuzhva.github.io/react-leaflet-markercluster/
CodeSandbox 入门

Description

如果您遇到以下问题地图缩放期间标记重叠，或者它们是 重叠是因为它们彼此靠近 - 您可能需要将它们分组。
这就是你可以用 react-leaflet-markercluster 做的。

只需在 组件中抓住你的标记，就在 之后：

import MarkerClusterGroup from 'react-leaflet-markercluster';

<MarkerClusterGroup>
  <Marker position={[49.8397, 24.0297]} />
  <Marker position={[52.2297, 21.0122]} />
  <Marker position={[51.5074, -0.0901]} />
</MarkerClusterGroup>;

注意：在开始之前，请参阅这些有用的指南:

• Leaflet Quick Start Guide.
• react-leaflet Installation.

Table of Contents

• Getting started
• API
• How to run DEV env
• Contributors ✨
• Contributing
• License

Getting started

1. 安装包：

yarn add react-leaflet-markercluster@next # yarn
npm install react-leaflet-markercluster # npm

注意 @next 是 react-leaflet v3 所必需的支持。 如果您仍在使用 react-leaflet v3，请将依赖项添加为 react-leaflet-markercluster@^2.xx

react-leaflet-markercluster 需要 leaflet.markercluster as peerDependency

（Leaflet 和 react-leaflet 也应该是安装）

yarn add leaflet.markercluster leaflet react-leaflet # yarn
npm install leaflet.markercluster leaflet react-leaflet # npm

2. 导入ma​​rkercluster 和leaflet 样式：

@import '~leaflet/dist/leaflet.css'; // sass
@import '~react-leaflet-markercluster/dist/styles.min.css'; // sass

require('~leaflet/dist/leaflet.css'); // inside .js file
require('react-leaflet-markercluster/dist/styles.min.css'); // inside .js file

或者直接将CSS 样式包含到HTML 文件的头部：

<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />

<link
  rel="stylesheet"
  href="https://unpkg.com/react-leaflet-markercluster/dist/styles.min.css"
/>

3. 写一些简单的 react-leaflet 地图：

import { MapContainer, TileLayer, Marker } from 'react-leaflet';

<MapContainer
  className="markercluster-map"
  center={[51.0, 19.0]}
  zoom={4}
  maxZoom={18}
>
  <TileLayer
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  />

  <Marker position={[49.8397, 24.0297]} />
  <Marker position={[52.2297, 21.0122]} />
  <Marker position={[51.5074, -0.0901]} />
</MapContainer>;

注意： 记得添加地图样式 .markercluster-map { height: 90vh; }。

4. 只需在 组件中抓住你的标记，就在 之后：

import MarkerClusterGroup from 'react-leaflet-markercluster';

<MarkerClusterGroup>
  <Marker position={[49.8397, 24.0297]} />
  <Marker position={[52.2297, 21.0122]} />
  <Marker position={[51.5074, -0.0901]} />
</MarkerClusterGroup>;

文档中的更多示例
CodeSandbox 入门

API

只需从 所有 Leaflet.markercluster 选项 到 MarkerClusterGroup 作为 prop。

例如：

<MarkerClusterGroup showCoverageOnHover={false} />

或：

const createClusterCustomIcon = function (cluster) {
  return L.divIcon({
    html: `<span>${cluster.getChildCount()}</span>`,
    className: 'marker-cluster-custom',
    iconSize: L.point(40, 40, true),
  });
}

<MarkerClusterGroup iconCreateFunction={createClusterCustomIcon} />

PS：v1 的示例可在 CHANGELOG.md 中找到

Event listeners

您可以使用简单的 on 属性前缀。

How to run DEV env

1. 克隆 repo：

git clone https://github.com/YUzhva/react-leaflet-markercluster.git

2. 安装所有依赖项：

yarn install --no-lockfile # yarn
npm install # npm

3. 启动服务器：

yarn dev # yarn
npm run dev # npm

4. 启动后服务器，storybook 应该会自动打开以下地址：

http://localhost:8080/

Contributors ✨

感谢这些优秀的人： 由 contributors-img 渲染的头像。

特别感谢：

• @webcarrot for react-leaflet v2 support
• @CodeCutterUK for react-leaflet v3 support

Contributing

所有源都放在 ./src 文件夹中：

1. 分叉 repo。

2. 编辑react-leaflet-markercluster.js插件或style.scss样式文件。

3.提交您的更改并打开合并请求。

:beer: 感谢您的贡献 :beer:

UMD

UMD 构建可在 unpkg 上获得：

<!-- unpkg, production code (minified) -->
<script src="https://unpkg.com/react-leaflet-markercluster/dist/index.js"></script>
<!-- unpkg, development code -->
<script src="https://unpkg.com/react-leaflet-markercluster/src/react-leaflet-markercluster.js"></script>

<!-- unpkg, production styles (minified) -->
<link
  rel="stylesheet"
  type="text/css"
  href="https://unpkg.com/react-leaflet-markercluster/dist/styles.min.css"
/>
<!-- unpkg, development styles -->
<link
  rel="stylesheet"
  type="text/css"
  href="https://unpkg.com/react-leaflet-markercluster/src/styles.scss"
/>

License

MIT 许可证，请参阅 许可证 文件。