Android中使用WebChromeClient显示Openlayers加载本地GeoJson文件显示地图(跨域问题解决)

刺骨的言语ヽ痛彻心扉 2023-10-01 18:03 21阅读 0赞

## 场景 ##

Openlayers中加载GeoJson文件显示地图：

[Openlayers中加载GeoJson文件显示地图\_BADAO\_LIUMANG\_QIZHI的博客-CSDN博客][Openlayers_GeoJson_BADAO_LIUMANG_QIZHI_-CSDN]

上面加载显示GeoJson数据显示是使用的在线json的url

[https://openlayers.org/data/vector/ecoregions.json][https_openlayers.org_data_vector_ecoregions.json]

如果要在Android中加载显示时，只需要将文件全部复制到assets目录下。

具体可以参考如下

Android中使用WebView加载本地html并支持运行JS代码和支持缩放：

[Android中使用WebView加载本地html并支持运行JS代码和支持缩放\_BADAO\_LIUMANG\_QIZHI的博客-CSDN博客][Android_WebView_html_JS_BADAO_LIUMANG_QIZHI_-CSDN]

但是上面加载的地图是离线瓦片地图，这里加载的是在线json的url，所以需要在

AndroidManifest.xml中赋予网络权限

<uses-permission android:name="android.permission.INTERNET"/>

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16][]

这里加载json数据使用的是网络url

var layer =  new ol.layer.Vector({
                    source: new ol.source.Vector({
                        url: 'https://openlayers.org/data/vector/ecoregions.json',     // 地图来源           
                        format: new ol.format.GeoJSON()    // 解析矢量地图的格式化类
                    })
            });

如果要加载本地json文件怎么加载

注：

博客：  
[BADAO\_LIUMANG\_QIZHI的博客\_霸道流氓气质\_CSDN博客-C\#,SpringBoot,架构之路领域博主][BADAO_LIUMANG_QIZHI_CSDN_-C_SpringBoot]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

## 实现 ##

1、如果将json文件直接存储到本地，并将Url修改为本地路径

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

完整代码

<!doctype html>
    <html lang="en">
    
    <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>OpenLayers 离线加载GeoJson数据</title>
        <link rel="stylesheet" href="lib/ol65/ol.css" type="text/css">
        <style>
            html,
            body,
            #map {
                padding: 0;
                margin: 0; inubv65432trre`
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
        </style>
    </head>
    
    <body>
        <div id="map"></div>
        <script type="text/javascript" src="lib/ol65/ol.js"></script>
        <script type="text/javascript">
     
            //Layers 图层管理类，用来管理图层信息。主要包括Tile，Image，Vector，VectorTile等图层。
            var layer =  new ol.layer.Vector({
                    source: new ol.source.Vector({
                        url: './data/ecoregions.json',     // 地图来源
                        format: new ol.format.GeoJSON()    // 解析矢量地图的格式化类
                    })
                });
    
            //View 视图管理器，主要用来管理地图视图，分辨率或旋转，中心、投影、分辨率、缩放级别等。
            var view = new ol.View({
                //中心点
                center: [0, 0],
                //缩放等级
                zoom: 4,
                //投影坐标系
                projection: "EPSG:4326",
                //边界
                extent: [0, 0, 4096, 4096],
                maxZoom: 7,
                minZoom: 4,
            });
    
            //Map Openlayers的核心组件，包含图层、交互事件、UI控制元素等。
            var map = new ol.Map({
                layers: [layer],
                target: 'map',
                view: view
            });
    
    
    
        </script>
    </body>
    
    </html>

如果直接运行会发现不显示地图，此时查看调试信息。![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

会提示跨域问题。

2、修改activity中webview的settins

//解决跨域问题
            WebSettings settings = webView.getSettings();
            settings.setAllowFileAccessFromFileURLs(true); //Maybe you don't need this rule
            settings.setAllowUniversalAccessFromFileURLs(true);

完整Activity代码

package com.badao.androidstudydemo;
    
    import androidx.appcompat.app.AppCompatActivity;
    
    import android.os.Bundle;
    import android.webkit.JavascriptInterface;
    import android.webkit.WebChromeClient;
    import android.webkit.WebSettings;
    import android.webkit.WebView;
    import android.widget.Toast;
    
    public class WebViewActivity extends AppCompatActivity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_web_view);
            //获取webview
            WebView webView = findViewById(R.id.webview);
            //设置为ChromeClinet 才能执行js代码
            WebChromeClient webChromeClient = new WebChromeClient();
            webView.setWebChromeClient(webChromeClient);
            webView.setWebChromeClient(webChromeClient);
            //设置开启js支持
            webView.getSettings().setJavaScriptEnabled(true);
            //增加JS接口
            //webView.addJavascriptInterface(this,"badao");
            // 是否支持缩放
            webView.getSettings().setSupportZoom(true);
    
            //解决跨域问题
            WebSettings settings = webView.getSettings();
            settings.setAllowFileAccessFromFileURLs(true); //Maybe you don't need this rule
            settings.setAllowUniversalAccessFromFileURLs(true);
    
            //加载本地html
            //加载在线json显示地图
            //webView.loadUrl("file:///android_asset/onLineGeoJsonMap.html");
            //加载离线json
            webView.loadUrl("file:///android_asset/offLineGeoJsonMap.html");
        }
        //JS调用Android方法
        @JavascriptInterface
        public void jsCallAndroid()
        {
            Toast.makeText(this,"JS调用Android方法成功",Toast.LENGTH_LONG).show();
        }
    }

3、此时再运行查看效果

![c13c48269fef40259047639831be4026.gif][]

[Openlayers_GeoJson_BADAO_LIUMANG_QIZHI_-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122883878
[https_openlayers.org_data_vector_ecoregions.json]: https://openlayers.org/data/vector/ecoregions.json
[Android_WebView_html_JS_BADAO_LIUMANG_QIZHI_-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118637633
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/c01a8143b13a41e195c7b3212106f529.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_20,color_FFFFFF,t_70,g_se,x_16
[BADAO_LIUMANG_QIZHI_CSDN_-C_SpringBoot]: https://blog.csdn.net/badao_liumang_qizhi
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/2434ae96d1524e1ebdad72712b0d3c05.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/33c38feec8e14785bf3ab79e676b2b01.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_20,color_FFFFFF,t_70,g_se,x_16
[c13c48269fef40259047639831be4026.gif]: https://img-blog.csdnimg.cn/c13c48269fef40259047639831be4026.gif