一、下载所需要的地图素材
- 下载素材地址
下载地图素材请来这里
https://axhub.im/maps/
-
选择你要下载的地区(这里以内蒙古自治区-鄂尔多斯为例)
图一.png - 点击“复制到Axure”
-
打开Axure粘贴素材并右键选择"变换图片-转换SVG图片为形状"
图二.png
二、处理素材
-
刚复制到Axure中的素材是没有地区的, 需要我们手动给每个区域添加地区名称,如下图展示:
图三.png -
给区域添加鼠标悬停的交互样式(根据个人需求自行调整)
图四.png
三、添加区域统计效果
- 准备素材(涉及到一个"矩形", 一个"中继器")
-
矩形设置(根据个人需求自行调整)
矩形样式设置 - 中继器设置
-
中继器内部(根据个人需求自行调整)
内部俩个矩形一个用来存放key,一个用来存放value,后期可根据自己实际需求自定义展示内容和形态。
样式设置为无填充无边框。
中继器内部图片 - 中继器数据集
- area 用来存放地区,后边用于地区名称筛选数据(该列要与地区形状的地区名称相同)。
- key 用来存放展示的统计指标,根据实际需求填写, 如果每个地区展示的指标不一样也可以,根据使用情况灵活调整。
-
value 用来存放展示的统计指标的具体值。
中继器数据集
- 将2的矩形置于3的中继器的下一层达到如上图展示效果,最后将其添加组合,起个名 "区域统计"
- 给地区形状添加交互事件
-
鼠标移动时将"区域统计"跟随鼠标右下方,并且筛选中继器中的统计数据(当前鼠标所在的元件的文字等于中继器总area的值)
添加筛选 -
移入展示,移出隐藏,载入隐藏如下图
image.png
四、展示效果
至此地图区域统计完成了, 一起来看看小锅巴。
效果展示
五、结语
小编搞了多年的Java,最近想画一下高保真的原型设计图,想通过这个平台分享一下自己研究制作的东西, 做的可能比较粗糙,不喜勿喷,如果你有更好的方法或其他原型玩法可以一起讨论。
