反应传单标记组

反应包装 Leaflet.marker 分组 页:1 反应-叶片

文件的例子: https://yuzhva.github.io/ react-leaflet-marker 集束地/
开始代码箱

说明

如果在地图缩放时遇到标记重叠的问题,或者它们重叠 相互重叠,因为彼此关系密切 - 你可能需要将它们分组.
这是你可以做的 反应-叶-标记集群。 。 。 .

拿着你的标记进去 <MarkerClusterGroup /> 组件,紧接着 <TileLayer />数字 :

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>;

注:在开始前,请参见这些有用的指南:

• 传单快速启动指南。 。 。 .
• 反应-叶片安装。 。 。 .

目录

• 开始
• API 密码
• 如何运行 DEV env
• 贡献者
• 捐款
• 许可证

开始

1. 联合国. 安装软件包 :

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

注: 页:1 @next 用于 反应- 叶子 v3 支助。 如果您仍在使用反应叶 v3, 添加依赖性为 react-leaflet-markercluster@^2.x.x

这个 react-leaflet-markercluster 需求 leaflet.markercluster 作为 peerDependency

(传单和反应叶也应予以安装)

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

2. 联合国. 导入 标记集群 财务报告和审定财务报表 传单 样式 :

@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

或者包括直接到 HTML 文件头的 CSS 样式 :

<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.四. 拿着你的标记进去 <MarkerClusterGroup /> 组件,紧接着 <TileLayer />数字 :

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>;

文档中的更多实例
开始代码箱

API 密码

随便你选什么 所有 Leaflet.marker 集群选项 改为 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} />

P.S: v1 的实例见 变动情况

活动听众

您可以添加任何听众, 由 Leaflet 支持, 简单 on 属性前缀.

如何运行 DEV env

1. 联合国. 克隆还原器 :

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.四. 在启动服务器后,故事本应该自动打开以下地址:

http://localhost:8080/

贡献者

感谢这些优秀的人: 阿凡达人 贡献者-img。 。 。 .

特别感谢:

• @webcarrot (英语) 页:1 反应- 叶片 v2 支持
• @CodeCutterUK (英语) 页:1 反应- 叶片 v3 支持

捐款

所有来源都放在 ./src 文件夹 :

1. 联合国. 叉取还相.

2. 联合国. 编辑 react-leaflet-markercluster.js 插头或 style.scss 样式文件.

3个. 提交更改并打开拉动请求 .

:比尔: 谢谢你的贡献 :比尔:

UMD 图像

可在 (单位:公斤)数字 :

<!-- 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"
/>

许可证

麻省理工学院执照,见 自由主义 文档.