3

我正在尝试创建一个使用交互式全球地图的应用程序。地图应该能够缩放到特定国家并根据需要进行旋转等。地形和道路特征是不必要的。我在这里使用 d3 和 geoJson 为浏览器做了一个合适的实现。这对我来说是完美的实现。我试过 react-native-maps 但它确实提供了我需要的可定制性。我也使用 d3 和 geoJson 像这样反应原生

import React, { useState } from 'react';
import { View, Dimensions } from 'react-native';
import world from "./world"
import Svg, { G, Path } from "react-native-svg";
import { geoOrthographic, geoPath } from "d3";

export default function App() {

  const [ rotation, setRotation ] = useState([0,0,0]) 
  const [ previousTouch, setPreviousTouch ] = useState([0,0]) 

  var projection = geoOrthographic().fitSize([Dimensions.get("screen").width,Dimensions.get("screen").width], world).rotate(rotation)
  var path  = geoPath().projection(projection)
  const onDrag = (event) => {

    setRotation([-((Dimensions.get('screen').width/2) - event.nativeEvent.pageX)*.1+rotation[0], ((Dimensions.get('screen').width/2) - event.nativeEvent.pageY)*.1+rotation[1], rotation[2]])
    setRotation([(event.nativeEvent.pageX-previousTouch[0])*.1+rotation[0], -(event.nativeEvent.pageY-previousTouch[1])*.1+rotation[1], rotation[2]])
    setPreviousTouch([event.nativeEvent.pageX,event.nativeEvent.pageY])

  }

  return (
    <View style={styles.container}>
     <Svg height="100%" width='100%' onTouchEnd={onDrag} onTouchStart={(event) => {
       setPreviousTouch([event.nativeEvent.pageX,event.nativeEvent.pageY])
     }}>
        <G>
          {world.features.map((feature, index) => {
            return (<Path d={path(feature)} key={index} stroke="black" fill="grey"></Path>)
          })}
        </G>
    </Svg>
    </View>
  );
}

但是它在旋转过程中的表现并不像我想要的那么好。有什么可能的解决方案吗？

4

0 回答 0