如何在AndroidJS中使用OpenLayers？解决ES模块兼容问题

方案一：将OpenLayers及业务代码转为非ES模块格式 #

1. 用Vite打包为UMD/IIFE格式 #

修改项目根目录的vite.config.js，配置打包输出为兼容传统浏览器的格式：

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    lib: {
      entry: './src/main.js', // 替换为你的实际入口文件路径
      name: 'MapApp',
      formats: ['umd', 'iife'], // 输出UMD和IIFE两种兼容格式
      fileName: (format) => `map-app.${format}.js`
    }
  }
});

执行npm run build完成打包后，在dist目录会生成对应的非模块文件，将其引入HTML时使用普通<script>标签即可，无需添加type="module"：

<script src="./dist/map-app.iife.js"></script>

2. 直接使用OpenLayers的UMD预构建版本 #

放弃ES模块导入方式，在HTML中直接引入OpenLayers的UMD版脚本：

<script src="https://cdn.jsdelivr.net/npm/ol@latest/dist/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@latest/dist/ol.css">

之后业务代码直接通过全局ol对象调用API，替代原来的import语句：

// 示例：替代import { Map, View } from 'ol'
const { Map, View } = ol;
const { TileLayer, OSM } = ol.layer;
const { fromLonLat } = ol.proj;

方案二：配置AndroidJS使其支持ES模块 #

1. 开启WebView的ES模块支持 #

修改AndroidJS项目中的MainActivity.java（通常位于android/app/src/main/java/com/[你的包名]/目录下），在WebView初始化代码中添加以下配置：

import android.webkit.WebSettings;
import android.webkit.WebView;

// 在初始化WebView的逻辑中添加
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setDomStorageEnabled(true);
webSettings.setAllowFileAccess(true);
// Android 7.0+需允许跨域访问本地文件（注意安全风险）
if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.N) {
    webSettings.setAllowUniversalAccessFromFileURLs(true);
}

2. 声明脚本为模块类型 #

在HTML文件中引入main.js时，必须添加type="module"属性：

<script type="module" src="./main.js"></script>

3. 修正模块导入路径 #

AndroidJS打包后本地文件路径可能存在差异，确保main.js中的import路径为正确的相对路径：

// 确认路径指向实际文件位置
import { DriveMap, distance, bearing, rad2deg } from './assets/mod_maps.js';

额外注意事项 #

• 先在本地用file://协议打开HTML文件测试，确认模块能正常加载后再进行AndroidJS打包
• 若使用Vite打包，需确保所有依赖都被正确打包进产物，避免运行时出现模块缺失问题

内容的提问来源于stack exchange，提问作者Bart Friederichs