更换Home Assistant的地图为高德地图，并接入Traccar服务

发表于2026年10月19日由admin

看了https://bbs.hassbian.com/thread-29564-1-3.html这个帖子，这是一个非常巧妙的“偷梁换柱”方案，用于在 Home Assistant 的地图卡片中将 CartoCDN 替换为天地图，并支持高缩放级别的降级模拟。它通过 MutationObserver 实现了对 Shadow DOM 的完整支持，适用于前端无法直接修改地图配置的场景。

a.jpeg

在它的方案原理基础上，我改写为高德瓦片地图的代码，在HA的配置目录config下新建www目录，将hass_gaode.js复制到www目录下。
修改configuration.yaml文件

Code: [全选] [Expand/Collapse]
  1. # Loads default set of integrations. Do not remove.
  2. default_config:
  3.  
  4. # Load frontend themes from the themes folder
  5. frontend:
  6.   themes: !include_dir_merge_named themes
  7. # *** 添加下面2行代码 ***
  8.   extra_module_url:
  9.    – /local/hass_gaode.js
GeSHi © Codebox Plus Extension

hass_gaode.js 文件内容：

Code: [全选] [Expand/Collapse]
  1. // ==========  config  ==========
  2. const GAODE_KEY = ’21b3a11e940d284eecb6b66bdd090fcc’;          // ←←← 换成自己的
  3. const MAX_Z     = 18;                       // 高德最大支持 18 级
  4. const TILE_SIZE = 256;                      // 标准 256px 瓦片
  5. // =================================
  6.  
  7. /* 降级算法：把高 z 映射到 maxZoom，并返回缩放/偏移量 */
  8. function downgradeTile(x, y, z, maxZoom) {
  9.   if (z <= maxZoom) {
  10.     return { srcX: x, srcY: y, srcZ: z, scale: 1, dx: 0, dy: 0 };
  11.   }
  12.   const scale = 2 ** (z – maxZoom);
  13.   const srcX  = Math.floor(x / scale);
  14.   const srcY  = Math.floor(y / scale);
  15.   const offsetX = (x % scale) * TILE_SIZE / scale;
  16.   const offsetY = (y % scale) * TILE_SIZE / scale;
  17.   return {
  18.     srcX, srcY, srcZ: maxZoom,
  19.     scale,
  20.     dx: –offsetX * scale,
  21.     dy: –offsetY * scale
  22.   };
  23. }
  24.  
  25. /* 高德使用 4 个域名做负载均衡 */
  26. let subDomain = 0;
  27. function nextSub() { subDomain = (subDomain + 1) % 4; return wprd0${subDomain + 1}; }
  28.  
  29. /* 生成高德瓦片地址
  30.    layer: vec 矢量底图  |  cva 矢量注记  |  img 影像底图  |  cia 影像注记
  31. */
  32. function buildGaodeUrl(x, y, z, layer) {
  33.   return https://${nextSub()}.is.autonavi.com/appmaptile?style=7&tiletype=${layer}&x=${x}&y=${y}&z=${z}&lang=zh_cn&size=1&scale=1&key=${GAODE_KEY};
  34. }
  35.  
  36. /* 记录已降级过的 key，防止重复绘制 */
  37. const doneSet = new Set();
  38.  
  39. /* 创建注记层 <img> */
  40. function createCvaImg(cvaSrc, templateImg) {
  41.   const img       = new Image();
  42.   img.src         = cvaSrc;
  43.   img.className   = ‘leaflet-tile’;
  44.   img.style.cssText = templateImg.style.cssText;   // 复制位置/变换
  45.   img.style.mixBlendMode = ‘unset’;
  46.   img.onload = () => img.classList.add(‘leaflet-tile-loaded’);
  47.   return img;
  48. }
  49.  
  50. /* 核心替换函数 */
  51. function transformCartoImg(img, extraImgs) {
  52.   const src = img.src;
  53.   if (!src.includes(‘basemaps.cartocdn.com’)) return;
  54.  
  55.   const m = src.match(/\/(\d+)\/(\d+)\/(\d+)(?:@2x)?\.png/);
  56.   if (!m) return;
  57.   let [, z, x, y] = m.map(Number);
  58.  
  59.   /* 1. 需要降级的情况 */
  60.   if (z > MAX_Z) {
  61.     const { srcX, srcY, srcZ, scale, dx, dy } = downgradeTile(x, y, z, MAX_Z);
  62.     const key = ${srcX},${srcY},${srcZ},${z};
  63.     if (doneSet.has(key)) {          // 已处理过，直接隐藏
  64.       img.src = ‘data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=’;
  65.       img.style.display = ‘none’;
  66.       return;
  67.     }
  68.     doneSet.add(key);
  69.     img.downgradeKey = key;
  70.     x = srcX; y = srcY; z = srcZ;
  71.  
  72.     /* 叠加缩放+偏移到原有 transform 上 */
  73.     let t = img.style.transform || ”;
  74.     if (t.includes(‘translate3d(‘)) {
  75.       const [, tx, ty] = t.match(/translate3d\(([^,]+),\s*([^,]+)/) || [];
  76.       if (tx !== undefined) {
  77.         const nx = parseFloat(tx) + dx;
  78.         const ny = parseFloat(ty) + dy;
  79.         t = t.replace(/translate3d\([^)]+\)/, translate3d(${nx}px, ${ny}px, 0px));
  80.       }
  81.     }
  82.     if (!t.includes(‘scale(‘)) t += scale(${scale});
  83.     img.style.transform = t;
  84.     img.style.transformOrigin = ‘top left’;
  85.     img.style.width  = TILE_SIZE + ‘px’;
  86.     img.style.height = TILE_SIZE + ‘px’;
  87.   }
  88.  
  89.   /* 2. 组装高德地址 */
  90.   const vecSrc = buildGaodeUrl(x, y, z, ‘vec’);
  91.   const cvaSrc = buildGaodeUrl(x, y, z, ‘cva’);
  92.  
  93.   /* 3. 注入 DOM */
  94.   if (extraImgs) {                       // 来自 appendChild 拦截
  95.     const cvaImg = createCvaImg(cvaSrc, img);
  96.     cvaImg.style.transformOrigin = ‘top left’;
  97.     extraImgs.push(cvaImg);
  98.     img.src = vecSrc;
  99.   } else {                               // 直接修改
  100.     img.style.backgroundImage = url("${vecSrc}");
  101.     img.style.backgroundSize  = ${TILE_SIZE}px ${TILE_SIZE}px;
  102.     img.src = cvaSrc;
  103.   }
  104.   console.debug(‘[高德替换]’, src, ‘→’, vecSrc, ‘+注记’);
  105. }
  106.  
  107. /* ==========  DOM 监听部分（与原脚本一致，仅函数名替换） ========== */
  108. function initDomObserver() {
  109.   const _appendChild = Element.prototype.appendChild;
  110.  
  111.   function onAdd(node) {
  112.     if (node.nodeType !== 1) return;
  113.     if (node.classList.contains(‘leaflet-layer’)) {
  114.       node.appendChild = function (child) {
  115.         if (child.classList?.contains(‘leaflet-tile-container’)) {
  116.           child.querySelectorAll(‘img’).forEach(transformCartoImg);
  117.           child.appendChild = function (frag) {
  118.             const addArr = [];
  119.             […frag.children].forEach(n => n.tagName === ‘IMG’ && transformCartoImg(n, addArr));
  120.             addArr.forEach(i => frag.appendChild(i));
  121.             […frag.children].forEach(n => n.style.display === ‘none’ && n.remove());
  122.             return _appendChild.call(this, frag);
  123.           };
  124.         }
  125.         return _appendChild.call(this, child);
  126.       };
  127.       const tc = node.querySelector(‘.leaflet-tile-container’);
  128.       if (tc) tc.appendChild = function (f) { […f.children].forEach(n => n.tagName === ‘IMG’ && transformCartoImg(n)); return _appendChild.call(this, f); };
  129.     } else if (node.classList?.contains(‘leaflet-control-attribution’)) {
  130.       node.remove();                       // 隐藏原版权
  131.     }
  132.     if (node.shadowRoot) initShadow(node.shadowRoot);
  133.   }
  134.   function onRemove(node) {
  135.     if (node.nodeType !== 1) return;
  136.     if (node.tagName === ‘IMG’) {
  137.       if (node.downgradeKey) doneSet.delete(node.downgradeKey);
  138.       node.cvaImgRef?.remove();
  139.     }
  140.   }
  141.   const ob = new MutationObserver(list => list.forEach(m => {
  142.     m.addedNodes.forEach(onAdd);
  143.     m.removedNodes.forEach(onRemove);
  144.   }));
  145.   function initShadow(root) {
  146.     ob.observe(root, { childList: true, subtree: true });
  147.     root.querySelectorAll?.(‘.leaflet-layer’).forEach(onAdd);
  148.   }
  149.   ob.observe(document, { childList: true, subtree: true });
  150.   const orig = Element.prototype.attachShadow;
  151.   Element.prototype.attachShadow = function (opt) {
  152.     const sh = orig.call(this, opt);
  153.     initShadow(sh);
  154.     return sh;
  155.   };
  156.   initShadow(document.body);
  157. }
  158.  
  159. initDomObserver();
GeSHi © Codebox Plus Extension

原文作者: BG6RSH | 查看原帖

此条目发表在技术交流分类目录。将固定链接加入收藏夹。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。