Android中使用WebChromeClient显示Openlayers加载本地GeoJson文件显示地图(跨域问题解决)
场景
Openlayers中加载GeoJson文件显示地图：
Openlayers中加载GeoJson文件显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客
上面加载显示GeoJson数据显示是使用的在线json的url
https://openlayers.org/data/vector/ecoregions.json
如果要在Android中加载显示时，只需要将文件全部复制到assets目录下。
具体可以参考如下
Android中使用WebView加载本地html并支持运行JS代码和支持缩放：
Android中使用WebView加载本地html并支持运行JS代码和支持缩放_BADAO_LIUMANG_QIZHI的博客-CSDN博客
但是上面加载的地图是离线瓦片地图，这里加载的是在线json的url，所以需要在
AndroidManifest.xml中赋予网络权限
<uses-permission android:name="android.permission.INTERNET"/>这里加载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,架构之路领域博主
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。
实现
1、如果将json文件直接存储到本地，并将Url修改为本地路径
完整代码
<!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>如果直接运行会发现不显示地图，此时查看调试信息。
会提示跨域问题。
2、修改activity中webview的settins
//解决跨域问题WebSettings settings = webView.getSettings();settings.setAllowFileAccessFromFileURLs(true); //Maybe you don't need this rulesettings.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 {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_web_view);//获取webviewWebView 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 rulesettings.setAllowUniversalAccessFromFileURLs(true);//加载本地html//加载在线json显示地图//webView.loadUrl("file:///android_asset/onLineGeoJsonMap.html");//加载离线jsonwebView.loadUrl("file:///android_asset/offLineGeoJsonMap.html");}//JS调用Android方法@JavascriptInterfacepublic void jsCallAndroid(){Toast.makeText(this,"JS调用Android方法成功",Toast.LENGTH_LONG).show();} }3、此时再运行查看效果
总结
以上是生活随笔为你收集整理的Android中使用WebChromeClient显示Openlayers加载本地GeoJson文件显示地图(跨域问题解决)的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： Fabricjs使用Group实现组合对
- 下一篇： Android中WebView加载sdc