arcgis api 4.x for js 集成 Echarts4 實現模擬遷徙圖效果（附源碼下載）

前言

關於本篇功能實現用到的 api 涉及類看不懂的，請參照 esri 官網的 arcgis api 4.x for js：esri 官網 api，裏面詳細的介紹 arcgis api 4.x 各個類的介紹，還有就是在線例子：esri 官網在線例子，這個也是學習 arcgis api 4.x 的好素材。

arcgis api 4.x for js 集成 echarts 實現遷徙圖效果的關鍵問題在於 echarts 座標系以及 arcgis 座標系不一致，所以要進行 echarts座標系與 arcgis 座標系的轉換，這裏採用的方法是註冊一個座標系統命名爲 arcgis（名稱可自由擬定）的座標系。在此基礎上，採用 dojo 的 define 定義了一個名爲 EchartsLayer 的模塊。

define(["dojo/_base/declare", "dojo/_base/lang", "esri/geometry/Point", "esri/geometry/SpatialReference"],
function (declare, lang, n, SpatialReference) {
return declare("EchartsLayer", null, {
name:"EchartsLayer",
view: null,
box: null,
chart: null,
chartOption: null,
visible:true,
constructor: function (view, option) {
 
echarts.registerCoordinateSystem('arcgis', this.getE3CoordinateSystem(view));
this.init(view,option);
},
init:function(view, option) {
this.setBaseMap(view);
this.createLayer();
//this.setChartOption(option);
 
},
……

最終實現效果圖：

2D 視圖效果

3D 視圖效果

建立 EchartsLayer 模塊的構造函數，須要註冊 arcgis 座標系函數

//須要先引用echarts.js
echarts.registerCoordinateSystem('arcgis', this.defineCoordinateSystem(view));

在 defineCoordinateSystem() 函數中，對 echarts 裏面的幾個函數進行了重寫，其中主要包含 dataToPoint、pointToData 等座標轉換內容。

• dataToPoint 函數重寫

CoordSystem.prototype.dataToPoint = function dataToPoint(data) {
var point = {
type:"point",
x:data[0],
y:data[1],
spatialReference:new SpatialReference(4326)
};
var px = map.toScreen(point);
var mapOffset = this._mapOffset;
return [px.x - mapOffset[0], px.y - mapOffset[1]];
}

更多的詳情見：GIS之家小專欄

文章尾部提供源代碼下載，對本專欄感興趣的話，能夠關注一波