javascript - 使用 openlayers 响应 native Webview

Question

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

我正在同时使用 OpenLayers 开发一个带有 React 的 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;

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

如何在 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 集成，制作自己的插件，添加样式等等。但如果您需要添加某种 map 旋转，传单将不起作用，您就必须这样做。

关于ReactNative问题:可以查看this link ，它是一个“React Native 的基于 Webview 的 Leaflet 组件”。

您可以用此组件替换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 map 图 block 或来自 Open Street Maps 的 map 数据，它将无法工作。如果您是这种情况，您可以尝试 that link ，(我没用过，只是一个建议)。