Axure 教程：中国地图和世界地图

今天，教大家如何用AXURE做可视化视图——中国地图和世界地图。enjoy~

中国地图原型预览及下载地址：

https://axhub.im/pro/29a8f172520b70e2

世界地图原型预览及下载地址：

https://axhub.im/pro/b8dffc64f4e57f25

一、效果介绍

（1）世界各国的地图，连最小的国家梵蒂冈也能找到,里面各国为形状，可以改变颜色、设置交互等。

可视化视图，用一个中继器填入数据即可。以面积世界前十的国家+梵蒂冈为例：

（2）中国地图，里面各省、直辖市、自治区、特区为形状，可以改变颜色、设置交互等。

可视化视图，用一个中继器填入数据即可。以中国gdp排名为例。

二、制作方法

1. 材料准备

如果制作中国地图，需要准备中国各省市的svg图片，制作世界地图的话，需要准备世界各国的svg图片，图片可以在网上下载。

2. 逻辑思路

将准备好的svg图片导入axure后，将它转为形状，这样就可改变颜色和设置交互，但是形状与形状之间会挡住，这时就需要用热区圈出形状的真实区域。

交互思路是，鼠标移入热区时，选中形状，移出是，取消选中形状。形状选中时，显示标签(标签显示该形状名称)，形状取消选中时，隐藏标签。

可视化逻辑，做一个中继器，里面有形状名和数据，当选中形状是，对该形状的名称进行筛选，得到对应的数据，并显示出来。

3. 具体交互

（1）各国家形状的交互

（2）热区的交互

该原型非常实用，但制作也不是很复杂复杂，但是耗时较久。

制作完成后，以后使用方便，仅需简单填写中继器的内容，即可拥有完美的效果，所以强烈推荐给各位使用。

Axure 教程：中国地图和世界地图相关推荐

地图图表、柱状图、条形图、折线图、中国地图、世界地图、省市地图、仪表盘、雷达图、饼图、散点图、气泡图、瀑布图、堆叠图、热力图、桑基图、关系图、漏斗图、Axure原型、rp原型、产品原型
地图图表.柱状图.条形图.折线图.中国地图.世界地图.省市地图.仪表盘.雷达图.饼图.散点图.瀑布图.气泡图.堆叠图.热力图.桑基图.关系图.漏斗图.Axure原型.rp原型.产品原型.大屏设计必备组 ...
Echarts中国地图与世界地图实战
文章目录前言一.先上代码 1.中国地图 2.世界地图二.图示 1.中国地图 2.世界地图二.Echarts简介 1.介绍 2.实战流程 1.引入echarts.js 2.定义一个图表容器DIV ...
【资源分享】Echarts中国地图、世界地图JSON数据（包括省市、经纬度、世界地图国家名称中英对照）
之前做数据可视化需求时需要用到中国地图和世界地图的数据,但苦于网上的资源参差不齐(谷歌和百度都一样),"历尽磨难"终于收集到了合适的资源,特地分享出来(毕竟CSDN很多免费资源居然 ...
中国地图，世界地图js，json汉化及英文版免费下载地址
中国地图,世界地图js,json下载地址 1.由于Echarts现在已经关闭了很多地图资源的js,json文件,所以官网中已经找不到这类相关的资源,为了给大家方便,特此上传该地址: //由于版权原因所 ...
基于VUE+TS中引用ECharts的中国地图和世界地图密度表
(第一次写掘金,嗯也不知道写啥好.想了想,先来一份简单可口的老菜谱.虽然以前在其他平台也上过,换个地方说不准口味刚好呢哈哈哈哈-) 首先先附上官网 http://echarts.baidu.com/o ...
Python+Flask实现全国、全球疫情大数据可视化（二）：网页页面布局+echarts可视化中国地图、世界地图、柱状图和折线图
文章目录相关文章一.实现效果二.页面布局html+css main.html main.css 三.echarts图表制作 1.全国累计趋势折线图ec_l1.js 2.全国趋势变化折线图ec_l ...
【echarts实现】中国地图世界地图
打开一个用 vue 创建的新项目安装 npm install --save echarts@4.x echars实现中国和世界地图需要引入地图资源需引入地图的话下载的echarts版本就要低于5. ...
echarts——实现中国地图+世界地图的切换——技能提升
之前写过一篇文章,是关于中国地图的展示. vue+echarts.js 实现中国地图--根据数值表示省份的深浅--技能提升:http://t.csdn.cn/rfQGl 最后实现的效果如下图所示: 今 ...
vue3.0使用echarts完成中国地图以及各省份地图
在做数据页面的时候,很多时候需要地图来标注数据,但是怎样使用地图呢? 1,先安装echarts包 yarn add echarts 2,在main.js中引入 import echarts from ...

Axure 教程：中国地图和世界地图

Axure 教程：中国地图和世界地图相关推荐

最新文章

热门文章