加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

reactjs – React Native和WMS

发布时间:2020-12-15 20:11:03 所属栏目:百科 来源:网络整理
导读:我正在使用React Native开发一个需要使用Web Map Services的移动应用程序.我还没有找到任何允许使用WMS并同时反应原生的库或框架.在React(Web)中我找到了 one. 我的问题是: 你知道是否存在允许我使用WMS和React Native的任何库或框架,或者是否有可能在React
我正在使用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示例页面中找到更多示例.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读