1 | var __extends = (this && this.__extends) || (function () {
|
2 | var extendStatics = function (d, b) {
|
3 | extendStatics = Object.setPrototypeOf ||
|
4 | ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
5 | function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
6 | return extendStatics(d, b);
|
7 | }
|
8 | return function (d, b) {
|
9 | extendStatics(d, b);
|
10 | function __() { this.constructor = d; }
|
11 | d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
12 | };
|
13 | })();
|
14 | import * as React from 'react';
|
15 | import { LngLatBounds } from 'mapbox-gl';
|
16 | import Supercluster from 'supercluster';
|
17 | import bbox from '@turf/bbox';
|
18 | import { polygon, featureCollection } from '@turf/helpers';
|
19 | import { withMap } from './context';
|
20 | var Cluster = (function (_super) {
|
21 | __extends(Cluster, _super);
|
22 | function Cluster() {
|
23 | var _this = _super !== null && _super.apply(this, arguments) || this;
|
24 | _this.state = {
|
25 | superC: new Supercluster({
|
26 | radius: _this.props.radius,
|
27 | maxZoom: _this.props.maxZoom,
|
28 | minZoom: _this.props.minZoom,
|
29 | extent: _this.props.extent,
|
30 | nodeSize: _this.props.nodeSize,
|
31 | log: _this.props.log
|
32 | }),
|
33 | clusterPoints: []
|
34 | };
|
35 | _this.featureClusterMap = new WeakMap();
|
36 | _this.childrenChange = function (newChildren) {
|
37 | var superC = _this.state.superC;
|
38 | _this.featureClusterMap = new WeakMap();
|
39 | var features = _this.childrenToFeatures(newChildren);
|
40 | superC.load(features);
|
41 | };
|
42 | _this.mapChange = function (forceSetState) {
|
43 | if (forceSetState === void 0) { forceSetState = false; }
|
44 | var map = _this.props.map;
|
45 | var _a = _this.state, superC = _a.superC, clusterPoints = _a.clusterPoints;
|
46 | var zoom = map.getZoom();
|
47 | var canvas = map.getCanvas();
|
48 | var w = canvas.width;
|
49 | var h = canvas.height;
|
50 | var upLeft = map.unproject([0, 0]).toArray();
|
51 | var upRight = map.unproject([w, 0]).toArray();
|
52 | var downRight = map.unproject([w, h]).toArray();
|
53 | var downLeft = map.unproject([0, h]).toArray();
|
54 | var newPoints = superC.getClusters(bbox(polygon([[upLeft, upRight, downRight, downLeft, upLeft]])), Math.round(zoom));
|
55 | if (newPoints.length !== clusterPoints.length || forceSetState) {
|
56 | _this.setState({ clusterPoints: newPoints });
|
57 | }
|
58 | };
|
59 | _this.childrenToFeatures = function (children) {
|
60 | return children.map(function (child) {
|
61 | var feature = _this.feature(child && child.props.coordinates);
|
62 | _this.featureClusterMap.set(feature, child);
|
63 | return feature;
|
64 | });
|
65 | };
|
66 | _this.getLeaves = function (feature, limit, offset) {
|
67 | var superC = _this.state.superC;
|
68 | return superC
|
69 | .getLeaves(feature.properties && feature.properties.cluster_id, limit || Infinity, offset)
|
70 | .map(function (leave) { return _this.featureClusterMap.get(leave); });
|
71 | };
|
72 | _this.zoomToClusterBounds = function (event) {
|
73 | var markers = Array.prototype.slice.call(event.currentTarget.children);
|
74 | var marker = _this.findMarkerElement(event.currentTarget, event.target);
|
75 | var index = markers.indexOf(marker);
|
76 | var cluster = _this.state.clusterPoints[index];
|
77 | if (!cluster.properties || !cluster.properties.cluster_id) {
|
78 | return;
|
79 | }
|
80 | var children = _this.state.superC.getLeaves(cluster.properties && cluster.properties.cluster_id, Infinity);
|
81 | var childrenBbox = bbox(featureCollection(children));
|
82 | _this.props.map.fitBounds(LngLatBounds.convert(childrenBbox), {
|
83 | padding: _this.props.zoomOnClickPadding
|
84 | });
|
85 | };
|
86 | return _this;
|
87 | }
|
88 | Cluster.prototype.componentDidMount = function () {
|
89 | var _a = this.props, children = _a.children, map = _a.map;
|
90 | if (children) {
|
91 | this.childrenChange(children);
|
92 | }
|
93 | map.on('move', this.mapChange);
|
94 | map.on('zoom', this.mapChange);
|
95 | this.mapChange();
|
96 | };
|
97 | Cluster.prototype.componentWillUnmount = function () {
|
98 | var map = this.props.map;
|
99 | map.off('move', this.mapChange);
|
100 | map.off('zoom', this.mapChange);
|
101 | };
|
102 | Cluster.prototype.componentDidUpdate = function (prevProps) {
|
103 | var children = prevProps.children;
|
104 | if (children !== this.props.children && this.props.children) {
|
105 | this.childrenChange(this.props.children);
|
106 | this.mapChange(true);
|
107 | }
|
108 | };
|
109 | Cluster.prototype.feature = function (coordinates) {
|
110 | return {
|
111 | type: 'Feature',
|
112 | geometry: {
|
113 | type: 'Point',
|
114 | coordinates: coordinates
|
115 | },
|
116 | properties: {}
|
117 | };
|
118 | };
|
119 | Cluster.prototype.findMarkerElement = function (target, element) {
|
120 | if (element.parentElement === target) {
|
121 | return element;
|
122 | }
|
123 | return this.findMarkerElement(target, element.parentElement);
|
124 | };
|
125 | Cluster.prototype.render = function () {
|
126 | var _this = this;
|
127 | var _a = this.props, ClusterMarkerFactory = _a.ClusterMarkerFactory, style = _a.style, className = _a.className, tabIndex = _a.tabIndex;
|
128 | var clusterPoints = this.state.clusterPoints;
|
129 | return (React.createElement("div", { style: style, className: className, tabIndex: tabIndex, onClick: this.props.zoomOnClick ? this.zoomToClusterBounds : undefined }, clusterPoints.map(function (feature) {
|
130 | if (feature.properties && feature.properties.cluster) {
|
131 | return ClusterMarkerFactory(feature.geometry.coordinates, feature.properties.point_count, _this.getLeaves.bind(_this, feature));
|
132 | }
|
133 | return _this.featureClusterMap.get(feature);
|
134 | })));
|
135 | };
|
136 | Cluster.defaultProps = {
|
137 | radius: 60,
|
138 | minZoom: 0,
|
139 | maxZoom: 16,
|
140 | extent: 512,
|
141 | nodeSize: 64,
|
142 | log: false,
|
143 | zoomOnClick: false,
|
144 | zoomOnClickPadding: 20
|
145 | };
|
146 | return Cluster;
|
147 | }(React.Component));
|
148 | export { Cluster };
|
149 | export default withMap(Cluster);
|
150 |
|
\ | No newline at end of file |