1

2 つのネイティブ マップボックスを、一方が他方の内側の円になり、すべての移動/ズーム イベントが両方に伝播するような方法で表示することは可能ですか?

私が使用できる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