HarmonyOS鸿蒙Next中webview里想要通过leaflet展示存在平板内部目录下的地图图片文件

HarmonyOS鸿蒙Next中webview里想要通过leaflet展示存在平板内部目录下的地图图片文件 我目前在做一个离线地图的应用，之前在安卓环境使用’/storage/emulated/0/PadData/Tiles/{z}/{x}/{y}.png’可以渲染出地图，

请问在鸿蒙里该怎么渲染，目前我把生成离线地图的html放在rawfile目录下，这个html需要加载位于平板内部存储目录下的瓦片图资源。所以想请问该怎么渲染出瓦片图。

3 回复

开发者您好，跟您确认一下，您目前是否是通过web加载了一个通过leaflet（链接来源于leaflet）开发的地图网页，希望渲染一个离线地图以及加载本地瓦片？

是否方便提供一个可复现Demo方便我们这边定位具体问题。

更多关于HarmonyOS鸿蒙Next中webview里想要通过leaflet展示存在平板内部目录下的地图图片文件的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，WebView加载本地地图图片文件需使用file://协议访问应用沙箱路径。首先将图片文件放置在应用资源目录（如resources/rawfile）或通过文件管理API存入应用沙箱（如context.filesDir）。在WebView中，通过Leaflet的L.tileLayer加载时，URL格式应为file:///data/storage/el2/base/haps/your_hap_package/files/your_image.png。需确保WebView已启用本地文件访问权限（setAllowFileAccess(true)）。注意鸿蒙Next的安全策略限制，需在module.json5中配置相关权限。

在HarmonyOS Next中，由于应用沙箱机制和文件系统访问权限的变化，直接通过绝对路径访问平板内部存储目录（如 /storage/emulated/0/...）在WebView中通常不可行。你需要通过鸿蒙的文件API将瓦片图资源读取并注入到WebView中，或者通过特定的URI方案让WebView能够访问这些资源。

以下是两种可行的方案：

方案一：使用 file:// 协议访问应用沙箱内的文件

如果你的瓦片图资源可以放置在应用的沙箱目录内（例如 cacheDir 或 filesDir），你可以将这些资源复制到沙箱目录下，然后通过 file:// 协议在WebView中加载。

步骤：

  1. 复制资源到沙箱目录：在应用启动时，将离线地图瓦片图从原始位置复制到应用沙箱目录（如 context.cacheDir 或 context.filesDir）。
  2. 构建本地文件路径：在沙箱目录下保持相同的目录结构（如 Tiles/{z}/{x}/{y}.png）。
  3. 在WebView中加载：使用 file:// 协议指向沙箱目录的路径，例如 file:///data/storage/el2/base/cache/Tiles/{z}/{x}/{y}.png（具体路径需根据实际沙箱目录调整）。

注意： 沙箱目录的路径可以通过 getContext().getCacheDir() 或 getContext().getFilesDir() 获取，但WebView中的路径需要转换为正确的URI格式。

方案二：通过 ResourceManager 加载 rawfile 中的HTML并注入数据

如果你的HTML文件放在 rawfile 目录下，你可以将瓦片图资源也放置在 rawfile 中，然后通过 ResourceManager 读取并注入到WebView中。

步骤：

  1. 放置资源：将离线地图瓦片图放置在 rawfile 目录下，保持目录结构（如 Tiles/{z}/{x}/{y}.png）。
  2. 读取HTML文件：使用 ResourceManager 读取 rawfile 中的HTML文件内容。
  3. 注入资源路径：将HTML内容中的资源路径替换为通过 ResourceManager 加载的URI（例如使用 resource://rawfile/ 协议）。
  4. 加载到WebView：将处理后的HTML内容加载到WebView中。

示例代码片段（ArkTS）：

import webview from '@ohos.web.webview';
import resourceManager from '@ohos.resourceManager';

// 读取rawfile中的HTML文件
let context = getContext(this);
let resourceMgr = context.resourceManager;
let htmlContent = await resourceMgr.getRawFileContent('offline_map.html');
let htmlString = String.fromCharCode.apply(null, htmlContent);

// 替换资源路径（假设HTML中原本使用相对路径）
htmlString = htmlString.replace(/src="Tiles\//g, 'src="resource://rawfile/Tiles/');

// 加载到WebView
webview.loadData(htmlString, 'text/html', 'UTF-8');

方案三：使用 file:// 协议访问共享目录（需权限）

如果你的瓦片图资源必须保留在平板内部存储的共享目录（如 /storage/emulated/0/...），你需要申请文件访问权限，并通过 file:// 协议访问。

步骤：

  1. 申请权限：在 module.json5 中配置文件访问权限（ohos.permission.READ_MEDIA 或 ohos.permission.FILE_ACCESS），并在运行时申请用户授权。
  2. 构建文件URI：使用 file:// 协议指向共享目录的路径，例如 file:///storage/emulated/0/PadData/Tiles/{z}/{x}/{y}.png。
  3. 加载到WebView：确保WebView可以访问该URI（可能需要启用WebView的文件访问设置）。

注意： 由于HarmonyOS的安全限制，直接访问共享目录可能受限，建议优先使用方案一或方案二。

总结

  • 推荐方案一或方案二，将资源放置在应用沙箱或 rawfile 目录中，避免权限问题。
  • 如果必须访问共享目录，使用方案三并确保权限正确配置。
  • 在WebView中加载本地资源时，注意路径协议的正确性（如 file:// 或 resource://rawfile/）。

根据你的实际需求选择合适的方案，并测试资源加载是否正常。

回到顶部