使用openlayers实现Native Webview

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和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问题：你可以看到这个链接，它是一个“Webview based Leaflet Component for 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
      });
    }
  );
}

如果您需要添加一些 Google 地图图块或来自 Open Street Maps 的地图数据，它将无法工作。如果这是你的情况，你可以尝试该链接，（我从未使用过它，只是一个建议）。