用 openlayers 反应原生 Webview

Question

我看到了这个信息：https://stackshare.io/stackups/leaflet-vs-mapbox-vs-openlayers

我正在同时开发一个使用 OpenLayers 做出反应的 Web 应用程序。而且我必须使用 react native 在移动设备上制作相同的应用程序，但我不知道如何使它工作。

这是我使用 React + Openlayers 编写 Web 应用程序的代码：

import React, { Component } from 'react';
import './App.css';

// openlayers
import View from 'ol/view';
import Projection from 'ol/proj/projection';
import Map from 'ol/map';
import Zoom from 'ol/control/zoom';
import Tile from 'ol/layer/tile';
import OSM from 'ol/source/osm';

class App extends Component {

   constructor(props) {
     super(props);

     this.view = new View({
        center: [-41925.302985762304, 4789880.268977703],
        zoom: 12,
        minZoom: 2,
        maxZoom: 28,
           projection: new Projection({
             code: 'EPSG:3857',
             units: 'm'
           })
     });
   }

   componentDidMount() {
     this.map =  new Map({
     view: this.view,
     controls: [ new Zoom() ],
        layers: [new Tile({ source: new OSM() })],
        target: 'map'
     });
   }

   render() {
     console.log('-> render App')
     return (
       <div id="map" class="map"></div>
     );
   }
}

export default App;

这是我的问题，我不知道如何让它在 react native 中工作。

如何在 WebView 中添加 this.map（javascript Map 对象）？

我在其他问题 React Native and WMS 中看到过这个示例，但我想使用 React，因为我需要修改、动态添加图层等。

import React, { Component } from 'react';
import { StyleSheet, View, WebView } from 'react-native';

// openlayers
import View from 'ol/view';
import Projection from 'ol/proj/projection';
import Map from 'ol/map';
import Zoom from 'ol/control/zoom';
import Tile from 'ol/layer/tile';
import OSM from 'ol/source/osm';

type Props = {};
export default class App extends Component<Props> {

constructor(props) {
   super(props);
   this.view = new View({
      center: [-41925.302985762304, 4789880.268977703],
      zoom: 12,
      minZoom: 2,
      maxZoom: 28,
      projection: new Projection({
         code: 'EPSG:3857',
         units: 'm'
      })
   });
}

componentDidMount() {
   this.map =  new Map({
     view: this.view,
     controls: [ new Zoom() ],
     layers: [new Tile({ name:'tile', source: new OSM() })],
     target: 'map'
   });
}

render() {
   var html = '<div id="map" class="map"></div>';
   return (
     <View style={styles.container}>
        <WebView 
           ref={webview => { this.webview = webview; }}
           source={{html}}
           onMessage={this.onMessage}/>
        />
     </View>
   );
  }
}

const styles = StyleSheet.create({
   container: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: '#F5FCFF',
   }
});

Answer 1

嗯，我一直在使用 ReactJS 和 Leaflet，我很满意。我可以轻松地将传单插件与 React 集成，做我自己的插件，添加样式等等。但是如果您需要添加某种地图旋转，传单不起作用，您必须这样做。

关于 ReactNative 问题：您可以看到 this link，它是一个“基于 Webview 的 React Native 传单组件”。

你可以用这个组件替换WebView组件：

<WebViewLeaflet
  ref={(component) => (this.webViewLeaflet = component)}
  onLoad={this.onLoad}
  eventReceiver={this} // the component that will receive map events
/>

并添加一个名为 onLoad 的函数来加载图层：

onLoad = (event) => {
  // log a message showing the map has been loaded
  console.log('onLoad received : ', event);

  //example of array of layers
  const mapLayers = [
    {
      name: 'streets',  // the name of the layer, this will be seen in the layer selection control
      checked: 'true',  // if the layer is selected in the layer selection control
      type: 'TileLayer',  // the type of layer as shown at https://react-leaflet.js.org/docs/en/components.html#raster-layers
      baseLayer: true,
      // url of tiles
      url: `https://api.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=${mapboxToken}`,
      // attribution string to be shown for this layer
      attribution:
        '&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors'
    }
  ]

  // set state
  this.setState(
    {
      ...this.state,
      mapState: { ...this.state.mapState, mapLoaded: true }
    },
    () => {
      // send an array of map layer information to the map
      this.webViewLeaflet.sendMessage({
        mapLayers
      });
    }
  );
}

如果您需要从 Open Street Maps 添加一些 Google 地图图块或地图数据，它将无法工作。如果是你的情况，你可以试试that link，（我没用过，只是个建议）。

Answer 2

这是一个有点过时的问题，但由于它仍然有活跃的投票，让我们仔细看看。我建议您使用react-native-maps，因为它得到了广泛的支持，并有很好的文档。 react-native-webview-leaflet 等其他 3rd 方库的灵活性稍差。