1

是否可以以这样的方式显示两个本机地图框，一个是另一个内的内圈，并且所有移动/缩放事件都传播到两者？

对于我可以使用的 JS 版本：https ://www.mapbox.com/mapbox-gl-js/example/mapbox-gl-compare/

然后像这样设置剪辑路径：

   this.map1.nativeElement.getElementsByTagName('canvas')[0].style['clip-path'] = 'circle(' + pixelDistance + 'px at center)';

   this.map1.nativeElement.getElementsByTagName('canvas')[0].style['position'] = 'initial';

给出这样的东西： 在此处输入图像描述

现在，假设我打算像这样使用 React Native：

return (
  <View style={styles.container}>
    <MapView
      ref={map => { this._map = map }}
      style={styles.map}
      initialZoomLevel={this.state.zoom}
      initialCenterCoordinate={this.state.center}
      initialDirection={0}
      rotateEnabled={true}
      scrollEnabled={true}
      zoomEnabled={true}
      styleURL={Config.MAPBOX_MAP_1}
      zIndex={2}
    />
    <MapView
      ref={map => { this._map = map }}
      style={styles.map}
      initialZoomLevel={this.state.zoom}
      initialCenterCoordinate={this.state.center}
      initialDirection={0}
      rotateEnabled={true}
      scrollEnabled={true}
      zoomEnabled={true}
      styleURL={Config.MAPBOX_MAP_2}
      zIndex={1}
    />
</View>)

依靠https://github.com/mapbox/react-native-mapbox-gl

我将如何重现类似的行为？

4

0 回答 0