From 095aee48517d1f5028eedd3c0987259f203769bc Mon Sep 17 00:00:00 2001 From: xdan Date: Thu, 28 Sep 2023 13:20:58 +0300 Subject: [PATCH] Refactoring for clusterer --- example/common.css | 4 ++-- example/common.js | 1 + example/react.html | 2 +- example/vanilla.html | 2 +- src/MMapClusterer/constants.ts | 2 -- src/MMapClusterer/methods/clusterByGrid.ts | 5 ++--- 6 files changed, 7 insertions(+), 9 deletions(-) diff --git a/example/common.css b/example/common.css index f32efbd..f6a5824 100644 --- a/example/common.css +++ b/example/common.css @@ -46,7 +46,7 @@ body, border-radius: 50%; background-color: rgba(255, 255, 255, 0.7); - transform: translate(-50%, -50%); + transform: translate3d(-50%, -50%, 0); padding: 5px; box-sizing: border-box; } @@ -72,7 +72,7 @@ body, } .pin { - transform: translate(-50%, -100%); + transform: translate3d(-50%, -100%, 0); } .toolbar { diff --git a/example/common.js b/example/common.js index 14e5655..adee8bf 100644 --- a/example/common.js +++ b/example/common.js @@ -22,6 +22,7 @@ const BOUNDS = [ const LOCATION = {bounds: BOUNDS}; const DEFAULT_POINTS_COUNT = 4000; +const CLUSTER_SIZE = 128; const seed = (s) => () => { s = Math.sin(s) * 10000; diff --git a/example/react.html b/example/react.html index 59a794e..94674fd 100644 --- a/example/react.html +++ b/example/react.html @@ -28,7 +28,7 @@ const {MMapClusterer, clusterByGrid} = reactify.module(await mappable.import("@mappable-world/mappable-clusterer@0.0.1")); const {useState, useCallback, useMemo} = React; const initialPoints = getRandomPoints(DEFAULT_POINTS_COUNT, BOUNDS); - const gridSizedMethod = clusterByGrid({gridSize: 64}) + const gridSizedMethod = clusterByGrid({gridSize: CLUSTER_SIZE}) function App() { const [clusterer, setClusterer] = useState(true); diff --git a/example/vanilla.html b/example/vanilla.html index 970160a..02f0f1e 100644 --- a/example/vanilla.html +++ b/example/vanilla.html @@ -56,7 +56,7 @@ } const clusterer = new MMapClusterer({ - method: clusterByGrid({gridSize: 64}), + method: clusterByGrid({gridSize: CLUSTER_SIZE}), features: getRandomPoints(DEFAULT_POINTS_COUNT, BOUNDS), marker, cluster diff --git a/src/MMapClusterer/constants.ts b/src/MMapClusterer/constants.ts index 7c11e1c..d0014d4 100644 --- a/src/MMapClusterer/constants.ts +++ b/src/MMapClusterer/constants.ts @@ -1,3 +1 @@ export const THROTTLE_DEFAULT_TIMEOUT_MS = 300; -export const DEFAULT_SCREEN_OFFSET = 256; - diff --git a/src/MMapClusterer/methods/clusterByGrid.ts b/src/MMapClusterer/methods/clusterByGrid.ts index 0d9fe03..761d143 100644 --- a/src/MMapClusterer/methods/clusterByGrid.ts +++ b/src/MMapClusterer/methods/clusterByGrid.ts @@ -2,7 +2,6 @@ import type {LngLat, WorldCoordinates, PixelCoordinates, Projection} from '@mapp import type {IClusterMethod, ClustererObject, ClustersCollection, RenderProps, Feature} from '../interface'; import {convertPixelSizeToWorldSize, divn} from "../helpers/utils"; -import {DEFAULT_SCREEN_OFFSET} from "../constants"; class ClusterByGridMethod implements IClusterMethod { private _gridSize: number; @@ -24,14 +23,14 @@ class ClusterByGridMethod implements IClusterMethod { ): Map { const halfViewportSize = divn(convertPixelSizeToWorldSize(size, targetZoom), 2); - const offset = convertPixelSizeToWorldSize({x: DEFAULT_SCREEN_OFFSET, y: 0}, targetZoom).x + const clusterSize = this._getClusterSizeWorld(targetZoom); + const offset = clusterSize * 2; const top = center.y + halfViewportSize.y - offset; const bottom = center.y - halfViewportSize.y + offset; const left = center.x - halfViewportSize.x - offset; const right = center.x + halfViewportSize.x + offset; - const clusterSize = this._getClusterSizeWorld(targetZoom); const minBucketX = Math.floor(left / clusterSize); const maxBucketX = Math.ceil(right / clusterSize);