反应本机和 WMS [英] React Native and WMS
问题描述
我正在 React Native 中开发一个需要使用 Web 地图服务的移动应用程序.我还没有找到任何允许同时使用 WMS 和 React Native 的库或框架.在 React (Web) 中，我找到了 one.我的问题是:
I am developing a mobile application in React Native requiring the use of Web Map Services. I have not found any library or framework that allows use WMS and react native at same time. In React (Web) I found one. My question is:
你知道是否存在任何允许我使用 WMS 和 React Native 的库或框架，或者是否有可能在 React Native 中集成一个 React (web) 库?
Do you know if exists any library or framework that allows me to work with WMS and React Native, or if there is any possibility of integrating a library of React (web) in React native?
谢谢！
推荐答案
我决定使用的方法如下:
The approach I decided to use is the following:
使用 openlayers.
在你的 react-native 类的 render 方法中声明一个变量，它包含来自 openlayers 地图的 HTML 代码:<代码>使成为() {var html = `<!DOCTYPE html><头><title>简单地图</title><link rel="stylesheet" href="https://openlayers.org/en/v3.20.0/css/ol.css" type="text/css"><!-- 只有旧环境(如 Internet Explorer 和 Android 4.x)才需要以下行 --><script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script><script src="https://openlayers.org/en/v3.20.0/build/ol.js"></script><身体><div id="map" class="map"></div><脚本>var map = new ol.Map({层数:[新的 ol.layer.Tile({来源:新 ol.source.OSM()})],目标:'地图'，视图:新 ol.View({中心:[0, 0]，变焦:2})});</html>`
Declare a variable in render method from your react-native class which contains the HTML code from a Map of openlayers:
render() {
var html = `
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<link rel="stylesheet" href="https://openlayers.org/en/v3.20.0/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v3.20.0/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
</script>
</body>
</html>
`
然后将此变量传递给WebView:<代码>返回 (<视图样式={styles.container}><网页视图ref={webview =>{ this.webview = webview;}}来源={{html}}onMessage={this.onMessage}/></查看>);}}
Then pass this variable to the WebView:
return (
<View style={styles.container}>
<WebView
ref={webview => { this.webview = webview; }}
source={{html}}
onMessage={this.onMessage}/>
</View>
);
}
}
如果您想将 react-native 端与 WebView 端进行通信，请查看 react-native 中的 WebView 示例.
If you want to communicate the react-native side with WebView side, take a look to the WebView example from react-native.
您可以在 openlayers 示例页面中找到更多示例.
You can find more examples in the openlayers example page.
这篇关于反应本机和 WMS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
