前言
資料可視化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://www.uj5u.com/qianduan/254419.html
標籤：其他
上一篇：【1】前端開發介紹