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 sina oauth2.