场景

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文件显示地图(跨域问题解决)相关推荐

android progressdialog 背景色,怎么在android中利用ProgressDialog实现一个加载效果
怎么在android中利用ProgressDialog实现一个加载效果发布时间:2020-12-07 17:00:07 来源:亿速云阅读:77 作者:Leah 怎么在android中利用Progr ...
android 浏览器打开本地html文件,如何在Android浏览器中加载本地HTML文件
我试图在设备浏览器中加载本地html文件.我尝试过使用WebView,但它不适用于所有设备.如何在Android浏览器中加载本地HTML文件 //WebView method that didnt w ...
加载本地json文件,并利用批处理调用Chrome显示html
加载本地json文件 1.加载本地json文件为了调试保存在本地的json数据,需要进行读入.一般使用jQuery来进行,但需要对浏览器进行一点设置. Chrome浏览器中有一个启动选项--allo ...
Android插件化开发之动态加载本地皮肤包进行换肤
Android插件化开发之动态加载本地皮肤包进行换肤前言: 本文主要讲解如何用开源换肤框架 android-skin-loader-lib来实现加载本地皮肤包文件进行换肤,具体可自行参考框架原理进行 ...
android webView不能加载本地html文件问题
android中可以加载本地html文件,通过JavaScript进行交互,其中html文件放到assets文件夹下,在调用的时候如下: webView.loadUrl("file:///a ...
Jquery中使用JsonP加载本地json文件解决跨域问题
场景 jquery中直接请求本地json文件时会提示跨域问题. Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获 ...
ros中web端通过按钮加载本地静态 pgm 地图显示在canvas画布中
ros中web端通过按钮加载本地静态 pgm 地图显示在canvas画布中 var input = this.$("fielinput");if (typeof (FileRea ...
flutter html 加载_Flutter开发：项目加载本地html文件的步骤
Flutter开发会遇到各种各样的技术,而且flutter开发带来了新的"技术革命",解放了iOS单一开发和Android单一开发所带来的巨大成本问题,一套flutter代码可以适 ...
uiwebview 读取本地html,UIWebView加载本地HTML文件
一.准备HTML文件及其资源文件使用UIWebView加载本地的HTML文件 index.html,在index.html中引用了本地的图片.CSS文件.JS文件以及外部的图片. index.htm ...

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

场景

实现

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

最新文章

热门文章