本文共 809 字，大约阅读时间需要 2 分钟。

听老人家说：多看美女会长寿

体慧网整iasiai

作为码农，这前几天在做一个有趣的技术点，具体来说就是结合地图和热力图的交互开发。这个项目需要解决三个主要问题：一是要实现距离相近点进行热力上图；二是地图需要支持点击后查看点击点的周边数量；三是需要实现热力图的动态更新。

在做这项目的过程中，首先得确定地图的 rendering 技术，这里选择了使用 openlayers 这个开源地图库，因为它不仅性能不错，而且支持很多地理功能。选好了 rendering 的框架，接下来就要处理热力图的 Layer

不过项目过程中遇到一个小坑，就是怎么实现点击地图后弹出周边点的信息，这个点需要结合地图的 click 事件处理，动态查询周边点的数量，并在 UI上做交叉提示。为了提升用户体验，还需要对点击点的周边数量进行实时计算，不能辛苦计算一次再缓存，必须是实时的。

最有趣的还是热力图的动态更新部分，为了实现这一点，得设计一个热力图的 data source，用 H5 的 canvas 来实现实时的图表显示。这样，在数据更新时，只需要重新绘制 canvas ，即可实现热力图的动态更新效果。

在项目做到一定程度后，开始用前端框架 vue 来搭建ui，使用 element UI 让界面更美观一些。完成了地图的 basic functionality 之后，还深入做了点击后的数据提示，这一功能只要在地图的相关位置加一个 click handler，然后根据当前的 markers 来计算周边点数。

在实现的过程中，主要用到了前端的 JavaScript，后端用了 Django 为了接收点信息和处理数据请求。整个项目最终的效果是一个地图上有 hot layer 的显示，用户点击任意位置就可以看到对应的周边点数，并且热力图是可以实时更新的。

总的来说，这个项目涉及到地图、热力图，还有动态交互，代码量还是比较多的，需要

转载地址：http://jsgyk.baihongyu.com/