场景
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 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、此时再运行查看效果
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/136075.html
