FVS點擊標題轉移地圖中心點和鉆取

適用場景：安裝了「FineVis資料視覺化」插件的使用者，可參考本文了解 FVS 範本的相關功能。

1.1 版本

1.2 應用場景

使用鑽取地圖時，需要使用滑鼠手動操作進行地圖鑽取和中心點轉移。

現提供一個方法，元件中輸入經緯度後點選按鈕轉移中心點，選擇區域名後點選按鈕鑽取到該區域。效果如下圖所示：

1.3 實現思路

呼叫 圖表相關API 實現，API如下：

• panTo(loc)  //轉移位置

• drillDown(areas[i])  //下鑽到區域 

• getLayerIndex()  // 獲取當前鑽取層級，獲取的層級從0開始
  

• drillUp(index)  // 向上鑽取

注：上述API均不支援擴展圖表。

2.1 建立範本

點選設計器左上角「檔案>建立視覺化看板」，建立一張空白看板，可自訂範本名稱和尺寸。如下圖所示：

2.2 準備資料

點選左下角「＋」按鈕，點選「內建資料集」。如下圖所示：

1）建立內建資料集 Embedded1，如下圖所示：

2）建立內建資料集 Embedded2，如下圖所示：

2.3 設計地圖

2.3.1 新增圖表

點選組件區「圖表」按鈕，選擇「地圖類>鑽取區域地圖」。如下圖所示：

2.3.2 設定地圖邊框和資料

1）選中鑽取地圖，點選右側屬性面板「內容>型別」，地圖邊框選擇「中國」，其餘設定可自行選擇。如下圖所示：

2）點選「資料>資料」，選擇「各層級分別指定」，第 1 層綁定 Embedded1 的區域資料，第 2 層綁定 Embedded2 的市級資料。如下圖所示：

2.4 設定點選事件

2.4.1 新增標題

點選組件區「文字」按鈕，選擇「標題」，共新增五個標題組件。如下圖所示：

分別將其內容設定為經度、緯度、下鑽取區域、中心點行動、根據區域向下鑽。如下圖所示：

2.4.2 新增元件

1）點選組件區「元件」按鈕，新增兩個正文框和一個下拉框。如下圖所示：

2）最終頁面布置如下圖所示：

2.4.3 給標題新增點選事件

選中標題中心點行動，點選右側屬性面板「交互>新增點選事件」，新增一個 JavaScript 型別的點選事件，輸入 JavaScript 代碼如下：

var chart=duchamp.getWidgetByName("鑽取區域地圖1_頁面1");
var jingdu=duchamp.getWidgetByName("正文框1_頁面1").getValue(); 
var weidu=duchamp.getWidgetByName("正文框2_頁面1").getValue(); 
var loc=[weidu*1,jingdu*1];
chart.panTo(loc);

具體步驟如下圖所示：

其餘標題的代碼如下：

• 根據區域向下鑽：根據指定區域向下鑽取

var chart =duchamp.getWidgetByName("鑽取區域地圖1_頁面1");//獲取圖表
var quyu = duchamp.getWidgetByName("下拉框1_頁面1").getValue(); //獲取下拉框元件值
if (chart.getLayerIndex() > 0)
	chart.drillUp(chart.getLayerIndex() - 1); //若已經下鑽，點選其他區域需傳回上一層級後再次下鑽
var areas = [];
chart.getSeries().forEach(ser => areas.push(...ser.points));
var len = areas.length;
for (var i = 0; i < len; i  ) {
if (areas[i].name == quyu) {
		chart.drillDown(areas[i]);
break;
	}
 }
显示代码

2.5 效果預覽

2.5.1 PC 端

點選範本右上角「儲存」按鈕，再點選「預覽」，預覽後的效果如 1.2節所示。

2.5.2 行動端

預覽方式請參考 FVS行動端預覽 ，效果如下圖所示：

點選下載範本：FVS點擊標題轉移地圖中心點和鉆取.fvs