縮放到 react-simple-maps 中的特定點

Question

問題

我不明白如何正確縮放到點擊位置，投影上的.center(center)沒有任何作用。

代碼

import React, { Fragment, useState } from 'react'
import { ComposableMap, ZoomableGroup, Geographies, Geography } from 'react-simple-maps'
import { geoConicEqualArea } from 'd3-geo'
import map from '../public/Russia.json'

const VectorMap = ({ onClick, width = 990, height = 505, onBlur }) => {
  const [zoom, setZoom] = useState(1)
  const [center, setCenter] = useState([100, 100])

  // Zoom event handlers
  const onWheel = e => (e.deltaY > 0 ? setZoom(prev => prev - 0.3) : setZoom(prev => prev + 0.3))

  return (
    <Fragment>
      <ComposableMap
        projection={() =>
          geoConicEqualArea()
            .scale(690)
           // projection doesn't change anyway
            .center(center)
            .parallels([40, 80])
            .rotate([265])
            .translate([130, 5])
        }
        {...{ width, height }}
        style={{
          width: '85vw',
          height: '100vh'
        }}
      >
        <ZoomableGroup {...{ zoom }}>
          <Geographies geography={map}>
            {(geographies, projection) =>
              geographies.map((geography, i) => (
                <Geography
                  key={i}
                  {...{ geography, onWheel, projection, onBlur }}
                  onClick={(obj, e) => {
                    onClick(obj)
                    setCenter(e.clientX, e.clientY)
                    // setZoom(1.5)
                  }}
                  style={{
                    default: {
                      fill: '#ECEFF1',
                      stroke: '#607D8B',
                      strokeWidth: 0.75,
                      outline: 'none'
                    },
                    hover: {
                      fill: '#607D8B',
                      stroke: '#607D8B',
                      strokeWidth: 0.75,
                      outline: 'none'
                    },
                    pressed: {
                      fill: '#FF5722',
                      stroke: '#607D8B',
                      strokeWidth: 0.75,
                      outline: 'none'
                    }
                  }}
                />
              ))
            }
          </Geographies>
        </ZoomableGroup>
      </ComposableMap>
      <button className="ZoomBtn" onClick={() => setZoom(prev => prev + 0.1)}>
        +
      </button>
      <button className="ZoomBtn" onClick={() => setZoom(prev => prev - 0.1)}>
        -
      </button>
    </Fragment>
  )
}

export default VectorMap

我還注意到ZoomableGroup有一個center屬性，但它似乎也無法正常工作。 它縮放到一個地方，地圖不再可拖動。

以下是控制台中的警告：

Warning: componentWillReceiveProps has been renamed, and is not recommended for use.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps.
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: Geographies, ZoomableGroup dll_d6a88dbe3071bd165157.js:12608:15
Source map error: Error: Invalid URL: webpack://[name]_[chunkhash]/webpack/bootstrap
Resource URL: http://localhost/_next/static/development/dll/dll_d6a88dbe3071bd165157.js?ts=1577625154482
Source Map URL: dll_d6a88dbe3071bd165157.js.map

Unexpected value 
           translate(
             NaN
             NaN
           )
           scale(1)
           translate(-495 -250)
          parsing transform attribute.

附加信息

• 反應版本：16.12
• react-simple-maps版本：0.12.1

幫助將不勝感激。

Answer 1

您可以在ComposableMap修改center的值。

假設如果你想讓 center 在 (20, 20)，你必須寫： center:[20, 20]