随着客户的需求越来越“多变”，从事大屏设计的葡萄最近遇到了麻烦。最近一个客户的要求是在BI工具中增加“路线图”展示功能，并进行数据分析。不仅如此，这款“路线图”还兼具实用功能和漂亮的动态效果，典型的“必备又必备”系列。但这对我们的设计师葡萄来说有点困难。展示静态图片不难，但要让这张图动起来确实难。所以我们把问题分成两部分来解决这个问题。首先，我们需要一个路线图工具。“路线图”工具制作思路与展示首先，我们需要将地图素材和地图动画整合到手。我们先来分析一下“路线图”的主要应用场景：（1）区域内的路线图，例如：工厂检查路线图、车辆行驶路线图等与轨迹图相关的应用场景。(2)区域内的点位信息：例如：厂区安全门点位标识、摄像头位置等标点信息。说到图像处理，我们首先应该想到使用SVG。将图片转换为SVG图片后，根据图片的坐标获取对应点，根据对应位置显示路线等信息。俗话说“没有代码解决不了的生活问题，有就写两段代码”。（最终的工具已经放在文末了，大家可以自己拿。）之后我们会从功能上对其进行拆解，实现贴图的需求。插件包括画图、取点、设置路线等功能。早期的自定义地图背景，地图背景需要使用SVG格式的图片，方便获取坐标，保证任意分辨率下的一致性。如果每次都需要找图片，然后手动转成SVG格式，会很复杂。我们把这个一步到位的过程作为地图工具的功能之一。在绘图中，我们可以将目标图片转换为SVG，并设置区域。如果后期使用中需要链接区域，尽量使用绘图来解决。使用方法类似于Wyn中的自定义地图。获取显示数据的“坐标点”我们在定义一张“路线图”时，往往需要在地图上标注一些关键数据，比如设备的位置、该位置的人流量、停车场等，为保证自定义地图的关键数据能够在地图上显示精确位置，我们贴心地为您提供了地图坐标点获取工具，可用于业务数据存储。坐标拾取的功能主要是获取自定义地图中的坐标，提供稍后显示位置的功能，具有设置和预览等功能。自定义路线功能是路线图中最核心也是最吸引眼球的部分，也就是我们需要定义巡检的路线和方向。很多时候，这个功能用于园区巡查，或者大面积地图巡查等。很多时候，我们需要根据自己的业务来指定具体的巡检路线，所以BI工具提供了巡检路线的地图。链接当前路径，实现路径绘制。可以预览设置的路线。最终工具成品展示：具体工具在文末，大家可以自行使用~工具有了，如何在BI中添加“路线图”进行数据分析呢？在BI中使用路由图进行数据分析的工具已经准备好了，接下来就是如何在BI中使用路由图进行数据分析了。1.下载并安装BI分析工具2.数据准备在项目中找一张需要的平面图片，因为这个插件需要的文件格式是SVG，所以第一步，我们先把图片转成SVG格式，只需要使用上面的工具。操作步骤：①将图片转成SVG内容②获取标点符号并记录标点信息如数据表③获取路径④整理数据表三、插件操作：（1）选择插件（2)技术设置图地址：这里可以放SVG代码内容，也可以放URL地址。自定义路线：这里可以设置固定路线，根据内容填写即可。其他内容可以自己操作看看效果。(3)绑定数据根据要求绑定注视路线。设置坐标信息后，可以看到运动轨迹和标点信息结果。(4)路由属性设置在这里，我们可以为路由中的移动图标设置显示的图标、大小、颜色等。也可以根据不同的数字分类来个性化内容。目前插件中对应的分类条件都是根据分类值来判断的。可以看到根据不同的设置显示出不同的效果。(5)坐标点设置：功能与路线设置中的类似，可以试试。(6)标签设置、引导线设置通过这个功能，可以丰富我们整个页面展示的内容。至此我们就实现了在BI中使用地图路线进行数据分析。工具体验工具站点：http://svg.sxtrips.com/资料包：https://gcdn.grapecity.com.cn...体验更多行业在线演示：https://www.grapecity.com.cn/...
