随着客户的需要越来越“百变”，最近在做大屏设计的葡萄陷入了窘境。近期客户提出的需要是想在 BI 工具中减少“路线地图”展现性能并进行数据分析。不仅如此，这个“路线地图”还要兼具实用的性能与好看的动效，典型的“既要又要”系列。然而这对于咱们的设计师葡萄来说，难度就有些大了。动态图片展现不艰难，可要让这地图动起来，的确有一些难度。所以咱们就将该问题拆成两局部，来解决这个问题。首先，咱们须要一个路线地图工具。“路线地图”工具制思路作与展现首先，咱们须要整合手中的地图素材和地图动效。让咱们先来剖析一下“路线地图”的次要利用场景：（1）区域内路线地图，比方：厂区巡检路线图，车辆行驶路线图等对于轨迹图的利用场景。（2）区域内点位信息：比方：厂区内安全门点位标记，摄像头地位等标点信息。
提到图片解决，咱们首先应该想到应用 SVG。将图片转换为 SVG 图后，从图坐标中获取相应的点，依据对应的地位来显示路线等信息。正所谓“没有代码解决不了的生存难题，如果有那就写两段代码。”（最初制成的工具，曾经放在文末，各位自取）之后，咱们从性能来拆解，实现该地图须要的插件有：画图、取点、设置路线等性能。在早自定义地图背景中，地图背景须要采纳 SVG 格局的图片，不便获取坐标，保障任何分辨率之下的一致性。如果每一次都须要找图片而后手动转换成 SVG 格局，那样会非常复杂，咱们将这一步流程作为该地图工具的性能之一。画图中咱们能够将指标图片转换为 SVG，并且设置区域。如果在前期应用到须要联动区域的时候，尽量应用画图解决，应用形式与 Wyn 中的自定义地图比拟相似。
获取显示数据的“坐标点”咱们在定义“路线地图”时，往往须要在地图中标注一些要害数据，比方设施的地位、该地位的人流量、停车数等，为了保障自定义地图的要害数据可能与显示在地图的准确地位上，咱们贴心地为大家提供了地图坐标点获取工具，能够用于业务数据存储。坐标拾取这个性能次要就是获取在自定义地图中的坐标，提供前期显示地位性能，有设置、预览等性能。
自定义路线这个性能是路线地图最外围且最亮眼的中央，即咱们要定义巡检的路线、方向，很多时候，该性能用于园区巡检，或者是大的区域地图巡检等等。很多状况下咱们须要依据本人的业务要指定具体的巡检路线，于是 BI 工具提供了巡检路线绘制地图。把以后路线给链接起来，实现路线绘制。能够预览所设置的路线。
最终工具成品展现：
具体工具曾经放在文末各位同学自取应用~ 当初工具有了，怎么在 BI 中减少“路线地图”进行数据分析呢？在 BI 中应用路线地图进行数据分析工具筹备结束，接下来就是如何在 BI 中用路线地图进行数据分析。1、下载并且装置 BI 剖析工具 2、数据筹备找一张我的项目中须要的立体图片，因为在该插件中须要的文件格式为 SVG，所以对第一步咱们先将图片转换为 SVG 格局的，就须要用到下面的工具了。操作步骤:①将图片转换为 SVG 内容
②获取标点, 将标点信息记录如数据表中
③获取路线
④整顿数据表
3、插件操作:（1）抉择插件
（2）技术设置地图地址：这里能够放 SVG 代码内容，也能够放一个 URL 地址。自定义路线：这里能够设置固定路线，依据内容填写即可。其余内容能够自行操作后看成果。（3）绑定数据依据需要绑定定影的路线，坐标信息
设置好之后能够看到静止轨迹和标点信息后果。
（4）路线属性设置
在这里，咱们能够给路线中挪动图标设置显示的图标，设置大小、色彩等。更是能够依据不同的数值分类实现个性化设置内容。目前插件中所对应的分类条件是依照分类值来做判断的。能够看到依据不同设置显示出不同的成果。
（5）坐标点设置：
性能与路线设置中相似，大家能够去试试。（6）标签设置，疏导线设置
通过此性能，能够让咱们整个页面显示的内容更加丰盛。
到这里咱们就实现了在 BI 中实现应用地图路线进行数据分析。工具体验工具站点：http://svg.sxtrips.com/ 材料包：https://gcdn.grapecity.com.cn… 体验更多行业在线 demo：https://www.grapecity.com.cn/…