fix MassPoints

Signed-off-by: CoderJ <550106786@qq.com>

Author: Coder-JJ

CHANGELOG.md

@@ -1,3 +1,31 @@
+## v1.4.2
+
+- feature: [MassPoints](https://github.com/Coder-JJ/rc-leaflet/blob/master/docs/MassPoints.md) new props.
+
+  - throttleThreshold
+
+    - type: `number`
+
+    - required: `false`
+
+    - default `20480`
+
+    - when `points.length` > `throttleThreshold`, `MassPoints` will use throttled draw function
+
+  - throttleDuration default
+
+    - type: `number`
+
+    - required: `false`
+
+    - default `60`
+
+    - used in throttled draw function, draw points per `throttleDuration` ms
+
+- fix: [MassPoints](https://github.com/Coder-JJ/rc-leaflet/blob/master/docs/MassPoints.md) layer drift when zoom is small.
+
+- fix: [MassPoints](https://github.com/Coder-JJ/rc-leaflet/blob/master/docs/MassPoints.md) is static duration zoom animation.
+
 ## v1.4.1
 
 - feature: totally rewrite [MassPoints](https://github.com/Coder-JJ/rc-leaflet/blob/master/docs/MassPoints.md), now it supports multi icons, mouse events, and `DivOverlay` render props.

docs/MassPoints.md

@@ -1,4 +1,4 @@
-## MassPoints `v2.2.0+`
+## MassPoints `v1.1.0+`
 
 ### Examples
 
@@ -29,7 +29,7 @@
   return (
     <RCMap crs center>
       <TileLayer />
-      <MassPoints points iconUrl iconSize iconAnchor popupAnchor tooltipAnchor>
+      <MassPoints points iconUrl iconSize iconAnchor popupAnchor tooltipAnchor throttleThreshold throttleDuration>
         <Popup>
           { target => <div /> }
         </Popup>
@@ -57,6 +57,26 @@
 
 ### Props
 
+- throttleThreshold `v1.4.2+`
+
+  - type: `number`
+
+  - required: `false`
+
+  - default: `20480`
+
+  - 当点位数量大于设定的阈值时, 将使用节流的渲染函数
+
+- throttleDuration `v1.4.2+`
+
+  - type: `number`
+
+  - required: `false`
+
+  - default: `60`
+
+  - 节流渲染函数的渲染时间间隔
+
 - points
 
   - type: `MassPoint[]`

src/components/MassPoints/MassLayer.ts

@@ -1,5 +1,6 @@
 import L from 'leaflet'
 import { distinct } from '../../util/Array'
+import throttle from '../../util/throttle'
 import { defaultOptions as defaultIconOptions } from '../Icon/creator'
 
 export type Icon = Partial<{
@@ -29,10 +30,14 @@ export interface EventTarget {
 
 export interface MassLayerOptions extends L.InteractiveLayerOptions, Icon {
   points: MassPoint[]
+  throttleThreshold?: number
+  throttleDuration?: number
 }
 
-const defaultOptions: MassLayerOptions = {
-  points: []
+export const defaultOptions: MassLayerOptions = {
+  points: [],
+  throttleThreshold: 20480,
+  throttleDuration: 60
 }
 
 export default class MassLayer extends L.Layer {
@@ -52,12 +57,21 @@ export default class MassLayer extends L.Layer {
 
   private click: EventTarget
 
+  private throttledReset: () => void
+
   public constructor (options?: MassLayerOptions) {
     super(options)
     L.Util.setOptions(this, L.Util.extend(defaultOptions, options))
     this.canvas = L.DomUtil.create('canvas', 'leaflet-zoom-animated') as HTMLCanvasElement
     this.ctx = this.canvas.getContext('2d')
     this.prepareIcons()
+    this.setThrottledReset(this.options)
+  }
+
+  private setThrottledReset (options: MassLayerOptions): void {
+    const threshold = options.throttleThreshold || defaultOptions.throttleThreshold
+    const duration = options.throttleDuration || defaultOptions.throttleDuration
+    this.throttledReset = options.points.length <= threshold ? this.reset : throttle(this.reset, duration)
   }
 
   public onAdd (map: L.Map): this {
@@ -67,6 +81,7 @@ export default class MassLayer extends L.Layer {
 
     map.on('click', this.onClick, this)
     map.on('mousemove', this.onMouseMove, this)
+    map.on('move', this.throttledReset, this)
     map.on('moveend', this.reset, this)
     map.on('zoomanim', this.zoomAnim, this)
     this.on('popupclose', this.onPopupClose)
@@ -78,6 +93,7 @@ export default class MassLayer extends L.Layer {
   public onRemove (map: L.Map): this {
     map.off('click', this.onClick, this)
     map.off('mousemove', this.onMouseMove, this)
+    map.off('move', this.throttledReset, this)
     map.off('moveend', this.reset, this)
     map.off('zoomanim', this.zoomAnim, this)
     this.off()
@@ -97,17 +113,17 @@ export default class MassLayer extends L.Layer {
   public setOptions (options: MassLayerOptions): void {
     this.closePopup()
     L.Util.setOptions(this, options)
+    this._map.off('move', this.throttledReset, this)
+    this.setThrottledReset(options)
+    this._map.on('move', this.throttledReset, this)
     this.prepareIcons()
     this.draw()
   }
 
   public getOptions = (): MassLayerOptions => this.options
 
   public setPoints (points: MassPoint[]): void {
-    this.closePopup()
-    this.options.points = points
-    this.prepareIcons()
-    this.draw()
+    this.setOptions({ points })
   }
 
   public getPoints = (): MassPoint[] => this.options.points
@@ -298,8 +314,13 @@ export default class MassLayer extends L.Layer {
 
   private zoomAnim = (e: L.LeafletEvent & { center: L.LatLng, zoom: number }): void => {
     const scale = this._map.getZoomScale(e.zoom, this._map.getZoom())
-    const offset = (this._map as any)._latLngBoundsToNewLayerBounds(this._map.getBounds(), e.zoom, e.center).min
-    L.DomUtil.setTransform(this.canvas, offset, scale)
+    const position = L.DomUtil.getPosition(this.canvas)
+    const viewHalf = this._map.getSize().multiplyBy(0.5)
+    const currentCenterPoint = this._map.project(this._map.getCenter(), e.zoom)
+    const destCenterPoint = this._map.project(e.center, e.zoom)
+    const centerOffset = destCenterPoint.subtract(currentCenterPoint)
+    const topLeftOffset = viewHalf.multiplyBy(-scale).add(position).add(viewHalf).subtract(centerOffset)
+    L.DomUtil.setTransform(this.canvas, topLeftOffset, scale)
   }
 
   private onPopupClose = (): void => { this.click = undefined }

src/components/MassPoints/index.ts

@@ -6,7 +6,7 @@ import { ContextType } from '../RCMap/Context'
 import Layer from '../Layer'
 import Popup from '../Popup'
 import Tooltip from '../Tooltip'
-import MassLayer, { EventTarget, MassLayerOptions } from './MassLayer'
+import MassLayer, { EventTarget, MassLayerOptions, defaultOptions } from './MassLayer'
 
 type Props = Readonly<MassLayerOptions>
 
@@ -35,6 +35,11 @@ export default class MassPoints extends Layer<MassLayer, Props, State> {
     ...Icon
   }
 
+  public static defaultProps = {
+    throttleThreshold: defaultOptions.throttleThreshold,
+    throttleDuration: defaultOptions.throttleDuration
+  }
+
   protected constructor (props: Props, context: ContextType) {
     super(props, context)
     this.state = { clickPoint: undefined, hoverPoint: undefined }
@@ -44,8 +49,8 @@ export default class MassPoints extends Layer<MassLayer, Props, State> {
   }
 
   public componentDidUpdate (prevProps: Props): void {
-    const { points: prevPoints, iconUrl: prevIconUrl, iconSize: prevIconSize, iconAnchor: prevIconAnchor, popupAnchor: prevPopupAnchor, tooltipAnchor: prevTooltipAnchor } = prevProps
-    const { points, iconUrl, iconSize, iconAnchor, popupAnchor, tooltipAnchor } = this.props
+    const { points: prevPoints, iconUrl: prevIconUrl, iconSize: prevIconSize, iconAnchor: prevIconAnchor, popupAnchor: prevPopupAnchor, tooltipAnchor: prevTooltipAnchor, throttleThreshold: prevThrottleThreshold, throttleDuration: prevThrottleDuration } = prevProps
+    const { points, iconUrl, iconSize, iconAnchor, popupAnchor, tooltipAnchor, throttleThreshold, throttleDuration } = this.props
 
     if (points !== prevPoints) {
       this.setState({ clickPoint: undefined, hoverPoint: undefined })
@@ -56,15 +61,15 @@ export default class MassPoints extends Layer<MassLayer, Props, State> {
     if (tooltipAnchor !== prevTooltipAnchor) {
       this.instance.setTooltipAnchor(tooltipAnchor)
     }
-    if (points !== prevPoints || iconUrl !== prevIconUrl || iconSize !== prevIconSize || iconAnchor !== prevIconAnchor) {
-      this.instance.setOptions({ points, iconUrl, iconSize, iconAnchor })
+    if (points !== prevPoints || iconUrl !== prevIconUrl || iconSize !== prevIconSize || iconAnchor !== prevIconAnchor || throttleThreshold !== prevThrottleThreshold || throttleDuration !== prevThrottleDuration) {
+      this.instance.setOptions({ points, iconUrl, iconSize, iconAnchor, throttleThreshold, throttleDuration })
     }
     super.componentDidUpdate(prevProps)
   }
 
   protected createInstance (props: Props): MassLayer {
-    const { points, iconUrl, iconSize, iconAnchor, popupAnchor, tooltipAnchor } = props
-    return new MassLayer({ points, iconUrl, iconSize, iconAnchor, popupAnchor, tooltipAnchor })
+    const { points, iconUrl, iconSize, iconAnchor, popupAnchor, tooltipAnchor, throttleThreshold, throttleDuration } = props
+    return new MassLayer({ points, iconUrl, iconSize, iconAnchor, popupAnchor, tooltipAnchor, throttleThreshold, throttleDuration })
   }
 
   private onPopupClose = (): void => this.setState({ clickPoint: undefined })

src/util/throttle.ts

@@ -0,0 +1,15 @@
+export type Func<T = any> = (...args: any) => T
+
+const throttle = (func: Func, wait: number): Func => {
+  let prevCallTime: number | undefined
+  return (...args: Parameters<Func>): ReturnType<Func> | void => {
+    const now = new Date().getTime()
+    if (prevCallTime && now - prevCallTime < wait) {
+      return
+    }
+    prevCallTime = now
+    return func(...args)
+  }
+}
+
+export default throttle