React Native Webview with openlayers

Question

第一：

对不起，我的英语。

第二：

我正在使用openlayers，但我不知道我是否选择了最佳选择。我想使用最好的选项，并使用react开发一个Web应用程序，并使用react native开发一个移动应用程序。因此，如果有人对openlayers和传单有更多的经验，我希望可以帮助我选择最佳选择。

我已经看到此信息：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;

这是我的问题，我不知道如何使它在本机反应中起作用。

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

我在其他问题React Native and WMS中看到了此示例，但是我想像在做回复一样工作，因为我需要进行修改，动态添加图层等。

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

我进行了一些研究，但没有发现对本机和开放层进行反应的常规实践。自从传单进入市场以来，openlayers还是某种不推荐使用的草绘地图软件。也许您可以尝试看看https://github.com/reggie3/react-native-webview-leaflet