今天，教大家如何用AXURE做可視化視圖——中國地圖和世界地圖。enjoy~

在線演示地址：

中國地圖：http://knt5gi.axshare.cn/#g=1&p=可視化視圖

世界地圖：http://4tinqs.axshare.cn/#g=1&p=可視化案例（面積前十的國家_梵蒂岡）

一、效果介紹

（1）世界各國的地圖，連最小的國家梵蒂岡也能找到,里面各國為形狀，可以改變顏色、設置交互等。

可視化視圖，用一個中繼器填入數據即可。以面積世界前十的國家+梵蒂岡為例：

（2）中國地圖，里面各省、直轄市、自治區、特區為形狀，可以改變顏色、設置交互等。

可視化視圖，用一個中繼器填入數據即可。以中國gdp排名為例。

二、制作方法

1. 材料準備

如果制作中國地圖，需要準備中國各省市的svg圖片，制作世界地圖的話，需要準備世界各國的svg圖片，圖片可以在網上下載。

2. 邏輯思路

將準備好的svg圖片導入axure后，將它轉為形狀，這樣就可改變顏色和設置交互，但是形狀與形狀之間會擋住，這時就需要用熱區圈出形狀的真實區域。

交互思路是，鼠標移入熱區時，選中形狀，移出是，取消選中形狀。形狀選中時，顯示標簽(標簽顯示該形狀名稱)，形狀取消選中時，隱藏標簽。

可視化邏輯，做一個中繼器，里面有形狀名和數據，當選中形狀是，對該形狀的名稱進行篩選，得到對應的數據，并顯示出來。

3. 具體交互

（1）各國家形狀的交互

（2）熱區的交互

該原型非常實用，但制作也不是很復雜復雜，但是耗時較久。

制作完成后，以后使用方便，僅需簡單填寫中繼器的內容，即可擁有完美的效果，所以強烈推薦給各位使用。

本文由 @梓賢Vigo 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議