騰訊位置服務教你實現簡單遷徙圖

前言

數據可視化API（Web），是基於騰訊位置服務JavaScript API GL實現的專業地理空間數據可視化渲染引擎。 通過這套API，可以實現軌跡數據、座標點數據、熱力、遷徙、航線等空間數據的可視化展現。

使用步驟

1、註冊成爲騰訊位置服務開發者，並進入控制檯 -> key管理界面創建key；

2、數據可視化API（以下簡稱可視化API），所提供的可視化效果是以圖層的方式疊加在JavaScript API GL之上，圖層中所顯示的數據由實例化的對象統一管理。

3、加載可視化API

可視化API是以 Javascript API GL 的附加庫的形式加載的，請確保： 引入時須傳入&libraries=visualization參數（查看： Javascript API GL加載參數說明 ）

<script src="https://map.qq.com/api/gljs?v=1.exp&key=YOUR_KEY&libraries=visualization"></script>

應用場景

弧線圖用以展示兩點之間的關聯，可以用在遷徙圖等表示流向的場景中。

代碼

大家可通過參考手冊 先了解下參數詳情。

創建弧線圖

// 創建地圖
var map = new TMap.Map('container', {
    center: new TMap.LatLng(40.040934, 116.272677)
});
 
// 創建弧線圖
var arc = new TMap.visualization.Arc({
    pickStyle: function(arcLine) { // 樣式映射函數
        var red = {
            color: '#DD0000', 
            animateColor:'#FF0000'
        };
        var blue = {
            color: '#0000DD',
            animateColor: '#0000FF'
        };
        return arcLine.id == 'red' ? red : blue;
    },
}).addTo(map); // 通過addTo()添加到指定地圖實例
 
// 設置數據，若需要更新數據則再次調用setData方法即可
arc.setData([
    {
        id: 'red',
        from: { lat: 40.040934, lng: 116.272677 }, // 弧線起點
        to: { lat: 38.040934, lng: 116.272677 }  // 弧線終點
    },
    {
        id: 'red',
        from: { lat: 40.040934, lng: 116.272677 },
        to: { lat: 38.040934, lng: 116.272677 }
    }
]);

獲取點擊的弧線

如果您希望獲取鼠標點擊的弧線圖形的具體信息，可以監聽弧線圖的click事件。

arc.on('click', function(evt) {
    if (evt.detail.arc) {
        console.log('點擊了：', evt.detail.arc); // 用戶所點擊的圖形所對應的數據
    } else {
        console.log('未點擊到圖形');
    }
});

效果圖

在線示例

作者：騰訊位置服務

鏈接：https://segmentfault.com/a/1190000039123367

來源：segmentfault

著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。