Home Assistant 系列高级篇 - 高德地图接入
这一次的教程呢就先聚焦一下『地图』吧。我们知道 HA 默认的地图面板使用的是 OpenStreet 地图,社区内大部分的组件也是基于 Google Map 开发优化的。这可苦了我们墙内的小伙伴,必须全部替换掉。
至于替换后所考虑使用的国内地图服务商,我这里还是推荐『高德』。众所周知,由于特别的保密政策及『地图法』,我国的地图坐标系都是加密后的数据,在这种情况下,大家常用的百度地图使用的是百度特有的 BA09 坐标系,在我们实际接入中会产生较大的地图偏移,所以弃用之。那剩下的就只有高德、腾讯这么 2 个选择了,摸摸良心也知道选高德是没错的。
在 HA 上显示地图,一种方法呢是通过 Panel 面板,另外一种是通过 Card 卡片,两种方法我一并介绍。
HomeAssistant-Map/#%E9%9D%A2%E6%9D%BF" class="headerlink" title="面板" style="background-color: transparent; overflow-wrap: break-word; color: rgb(85, 85, 85); text-decoration-line: none; outline: none; border-bottom: 1px solid rgb(153, 153, 153); cursor: pointer;">面板
使用面板将『高德地图』接入 HA,一种方法是直接替换掉原有地图面板的底层地图,另一种方法是接入自定义面板。前者需要在 HA 每次更新后替换源文件,后者则要忍受左侧栏有 2 个地图面板入口,可以说都不是那么完美。权衡再三我还是选择直接替换源文件,毕竟 HA 更新没有那么的频繁。
打开默认的『Map』页面,我们不难从右下角标注部分发现其使用的是『leaflet』框架,有关该框架的具体介绍我就不展开了。简单来说,它的运行原理就是提供一张底图图层,之后在上面增加标记图层。因此,我们只需要把底图替换为『高德地图』就 OK 了。
注意:该步操作涉及源文件修改,有一定风险,请谨慎操作,我不承担任何责任。
首先,打开『地图』页面的源文件,如果你是通过虚拟环境安装 HA 的,并且使用 ES6 版前端,那么源文件路径在:
/srv/homeassistant/homeassistant_venv/lib/python3.5/site-packages/hass_frontend/panels
如果保持使用 ES5 版前端,那么源文件路径在:
/srv/homeassistant/homeassistant_venv/lib/python3.5/site-packages/hass_frontend_es5/panels
先使用格式化工具进行格式化,找到图层相关的语句:
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
替换为高德地图 URL,之后保存文件;
接着,在终端内使用 gzip
指令压缩 html
文件,替换源 html
与 html.gz
文件;
再次,使用 md5
指令获取 html
文件的 md5 值,打开上上级文件夹内的 __init__.py
文件,替换 "map"
的值;
最后,大功告成,重启 HA 即可,你可以看到『Map』页面的地图已经变为了高德地图。
最后的最后,我知道你们很懒又迷茫,给你们提供了现成的文件,直接进行替换即可。
点此前往。
卡片
使用卡片将『高德地图』接入 HA,我们这里需要利用『Genric』这个组件,将地图转化为摄像头画面。
首先,申请高德开发者账户,新建应用,获取 API 接口秘钥『key』。
接着,仔细阅读该份静态地图 技术文档,了解各项值代表的意义和表示方法。
最后,打开 configuration.yaml
添加 Generic
组件:
#高德地图 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 中使用高德地图了。
版权声明
1.本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2.本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3.若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
4.若内容涉及侵权或违法信息,请联系本站管理员进行下架处理,邮箱ganice520@163.com(本站不支持其他投诉反馈渠道,谢谢合作)
发表评论