HarmonyOS 鸿蒙Next中添加瓦片图时占位符不起作用

HarmonyOS 鸿蒙Next中添加瓦片图时占位符不起作用

let params: mapCommon.TileOverlayParams = {
  // 设置地图瓦片图层的地址,必须是以http或者https开头的URL且包含占位符{x}、{y}和{z}
  // tileUrl: "https://xxx/xxx?x={x}&y={y}&z={z}",
  tileUrl: "https://t3.tianditu.gov.cn/DataServer?T=img_w&tk=427e3514f6655d8fd2d49ed0945b169a&x={x}&y={y}&l={z}",
};
try {
  this.tileOverlay = this.mapController?.addTileOverlay(params);
} catch (e) {
  console.error(`tileOverlay code:${e.code}, message:${e.message}`);
}

cke_151.png

为什么请求的url会被替换成这样？

如果换一种方式把占位符写在前面就会把tk等其他参数清空

cke_9937.png


更多关于HarmonyOS 鸿蒙Next中添加瓦片图时占位符不起作用的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

开发者您好，请确认下使用的mapkit版本号是多少的？可以在cmd里输入 hdc shell bm dump -n com.huawei.hms.mapservice | findstr versionName指令来查看版本号

更多关于HarmonyOS 鸿蒙Next中添加瓦片图时占位符不起作用的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


“versionName”: “6.15.2.123”，是编辑器的模拟器有问题，我换成真机就没有发现问题了。

开发者您好，该问题已在最新版本修复，您可以升级到api21版本的模拟器再测试一下，

模拟器不支持地图Map Kit中的3D地图以及地图截图功能

相关文档：Map Kit模拟器支持情况

在HarmonyOS Next中添加瓦片图时，占位符不起作用通常是由于资源引用路径错误或占位符语法不正确导致的。请检查瓦片图资源是否已正确放置在resources/base/media目录下，并在ResourceManager中使用$r('app.media.tile_image')格式引用。确保占位符属性如placeholder或fallback在组件中正确设置，且资源类型与组件要求匹配。若使用<image>组件，需确认src属性中的占位符路径有效。

在HarmonyOS Next的Map组件中，addTileOverlay方法对瓦片URL的占位符有严格的格式要求。根据你提供的代码和截图，问题在于URL中的占位符格式不正确。

核心原因： TileOverlayParams的tileUrl属性要求占位符必须是 {x}、{y}、{z} 的精确形式。你的URL "https://t3.tianditu.gov.cn/DataServer?T=img_w&tk=...&x={x}&y={y}&l={z}" 中使用了 l={z}，这与系统预期的 z={z} 不匹配。

系统处理逻辑：

  1. 当调用addTileOverlay时，系统会解析tileUrl字符串。
  2. 它只识别并替换 {x}、{y}、{z} 这三个特定的占位符。
  3. 对于任何其他字符（包括你的 l={z} 中的 l），系统会将其视为普通文本。在尝试构造实际请求URL时，如果格式不符合内部解析规则，可能导致URL被错误拼接或参数丢失，从而出现你截图中 ...&l=7 后参数被截断的情况。

解决方案： 将URL中的 l={z} 修改为 z={z}，使其与系统要求的占位符关键字完全一致：

let params: mapCommon.TileOverlayParams = {
  tileUrl: "https://t3.tianditu.gov.cn/DataServer?T=img_w&tk=你的密钥&x={x}&y={y}&z={z}",
};

修改后：

  • 系统能正确识别 {x}, {y}, {z}。
  • 在请求瓦片时，会自动将它们替换为对应的坐标和层级值，生成如 ...&x=100&y=50&z=7 的正确URL。
  • 其他参数（如 T, tk）会得到保留。

确保你的瓦片图服务支持 z 作为缩放层级参数。如果服务端强制要求使用 l 参数，你可能需要联系服务提供方调整接口，或寻找其他兼容的瓦片源。

回到顶部