20221224-HomeAssistant树莓派-高德地图篇

Home assistant 就目前来说,本地化的工作还不到位

这一次的教程呢 就先聚焦一下地图 吧,我们知道 ha 默认的地图面板 使用的是 openstreet 地图,社区内大部分的组件也是基于google map 开发优化的,必须全部替换掉

至于替换后所考虑的国内地图服务商,我这里还是推荐高德,众所周知,由于特别的保密政策及地图法,我国的地图坐标系都是加密后的数据,在这种情况下,大家常用的百度地图使用的是百度特有的BD09 坐标系,在我们实际接入中会产生较大的地图偏移,所以弃用之

在HA上显示地图,一种方法呢是通过panel 面板,另一种是通过card 卡片,两种方法我一并介绍

面板

使用面板将 高德地图 接入HA 一种方法是直接替换掉原有地图面板的底层地图,另一种方法是接入自定义面板,前者需要在ha 每次更新后替换源文件,后者则需要忍受左侧栏有2个地图面板入口,可以说都不是那么完美,
权衡再三我还是选择直接替换源文件,毕竟 ha 更新没有那么频繁

打开默认的map 界面,我们不难从右下角标注部分发现其使用的是Leaflet 框架,有关该框架的具体介绍我就不展开了,简单来说,它的运行原理就是提供一张底图图层,之后在上面增加标记图层,因此,我们只需要把底图替换为 高德地图 就ok 了

首先 打开地图页面的源文件,如果你是通过虚拟环境安装ha 的,那么源文件路径在

/srv/homeassistant/homeassistant_venv/lib/python3.4/site-packages/homeassistant/components/frontend/www_static/panels

先使用格式化工具进行格式化,找到图层相关的语句

1
2
3
4
5
6
7
8
9
10
attached: function() {
var t = this._map = window.L.map(this.$.map);
t.setView([51.505, -.09], 13),
window.L.tileLayer("https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png").addTo(t),
this.drawEntities(this.hass),
this.async(function() {
t.invalidateSize(),
this.fitMap()
}.bind(this), 1)
},

将 window.L.tileLayer 中图层路径部分 https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png 替换为高德地图 http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z},之后保存文件;

接着,在终端内使用gzip 指令压缩 html 文件,替换源 html 与html.gz 文件

再次使用md5指令获取html 文件的md5值,打开上上级文件夹内的 version.py 文件,替换 “panels/ha-panel-map.html”的值;

最后,大功告成,重启ha 即可,你可以看到 map 页面的地图已经变为了高德地图

卡片

使用卡片 将高德地图 接入 ha ,我们需要利用 genric 这个组件,将地图转化为摄像头画面

首先,申请高德开发者账户,新建应用,获取 API 接口秘钥『key』。

接着,仔细阅读该份静态地图 技术文档,了解各项值代表的意义和表示方法。

最后,打开 configuration.yaml 添加 Generic 组件:

1
2
3
4
5
6
#高德地图
camera:
name: Home
platform: generic
still_image_url: http://restapi.amap.com/v3/staticmap?location=地图中心经度,地图中心纬度&zoom=14&scale=2&size=305*185&traffic=1&&labels=家,0,0,35,0xFFFFFF,0x5288d8:标记经度,标记纬度&key=秘钥
limit_refetch_to_url_change: false

重启 ha 后,你想要显示的地图区域就会以卡片的形式展现在前端中了

到这里,相信大家可以自如地在 HA 中使用高德地图了,配合 device_tracker 组件,能更好地掌握接入设备的地理位置信息。

打赏
  • 版权声明: 本博客所有文章除特别声明外,著作权归作者所有。转载请注明出处!

扫一扫,分享到微信

微信分享二维码
  • Copyrights © 2015-2024 TeX_baitu
  • 访问人数: | 浏览次数:

请我喝杯咖啡吧~