放大到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

我还注意到center有一个ZoomableGroup属性，但它似乎也无法正常工作。它会缩放到一个位置，地图也不再可拖动。

这是控制台中的警告：

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

您可以在center中修改ComposableMap的值。

假设您希望中心位于（20，20），则必须输入： center:[20, 20]