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 的好素材。

參考資料
https://blog.csdn.net/weixin_39676449/article/details/82155812
https://blog.csdn.net/yy284872497/article/details/85228643
https://github.com/xcsf/ArcGIS-API-for-JS-with-Echarts

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之家小專欄

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