我正在使用React Native开发一个需要使用Web Map Services的移动应用程序.我还没有找到任何允许使用WMS并同时反应原生的库或框架.在React(Web)中我找到了
one.
我的问题是:
你知道是否存在允许我使用WMS和React Native的任何库或框架,或者是否有可能在React native中集成React(web)库?
谢谢!
我决定使用的方法如下:
>使用react-native中的WebView.
>使用openlayers.
从您的react-native类声明render方法中的变量,该类包含openlayers的Map中的HTML代码:
render(){
????var html =`
????<!DOCTYPE html>
????< HTML>
??????< HEAD>
????????< 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>
??????< /头>
??????<身体GT;
????????< div id =“map”class =“map”>< / div>
????????<脚本>
??????????var map = new ol.Map({
????????????层数:[
??????????????新的ol.layer.Tile({
????????????????来源:新的ol.source.OSM()
??????????????})
????????????]
????????????目标:’地图’,
????????????view:new ol.View({
??????????????中心:[0,0],
??????????????zoom:2
????????????})
??????????});
????????< /脚本>
??????< /体>
????< / HTML>
????`
然后将此变量传递给WebView:
回来(
??????< View style = {styles.container}>
????????< web视图
??????????ref = {webview => {this.webview = webview; }}
??????????源= {{HTML}}
??????????的onMessage = {this.onMessage} />
??????< /视图>
????);
??}
}
如果要将反应原生端与WebView端进行通信,请查看react-native中的WebView示例.
您可以在openlayers示例页面中找到更多示例.