Question

首先：

抱歉我的英文。

第二

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

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

第三：

我同时开发一个使用openlayers做出反应的Web应用程序。而且我必须使用本机反应在移动设备上制作相同的应用程序，但我不知道如何使其有效。

以下是使用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

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

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

您可以用以下组件替换 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
      });
    }
  );
}

如果您需要添加一些Google地图图块或Open Street Maps中的地图数据，则将无法使用。如果是这种情况，您可以尝试that link，（我没用过，这只是个建议）。

Answer 2

这是一个过时的问题，但是由于它仍在进行投票，因此让我们仔细看看。我建议您使用react-native-maps，因为它得到了不错的文档的广泛支持。其他第三方库（例如react-native-webview-leaflet）的灵活性稍差一些。

Answer 3

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

使用openlayers

3 个答案: