├── Echarts3Layer.js
├── Echarts3Layer3x.js
├── Echarts3Layer4x.js
├── LICENSE
├── README.md
├── echarts-gl.js
├── echarts.js
├── echarts.min.js
├── index.html
└── src
    └── echartsLayer.js


/Echarts3Layer.js:
--------------------------------------------------------------------------------
1 | define(["dojo/_base/declare","dojo/_base/lang","esri/geometry/Point","esri/geometry/ScreenPoint"],function(e,t,n,i){return e("Echarts3Layer",null,{name:"Echarts3Layer",_map:null,_ec:null,_geoCoord:[],_option:null,_mapOffset:[0,0],constructor:function(e,t){this._map=e;var n=this._echartsContainer=document.createElement("div");n.style.position="absolute",n.style.height=e.height+"px",n.style.width=e.width+"px",n.style.top=0,n.style.left=0,e.__container.appendChild(n),this._init(e,t)},_init:function(e,t){console.log('<a href="https://github.com/wandergis/arcgis-echarts3">develop by wandergis</a>');var o=this;o._map=e,o._ec=t,o.getEchartsContainer=function(){return o._echartsContainer},o.getMap=function(){return o._map},o.geoCoord2Pixel=function(e){var t=new n(e[0],e[1]),i=o._map.toScreen(t);return[i.x,i.y]},o.pixel2GeoCoord=function(e){var t=o._map.toMap(new i(e[0],e[1]));return[t.lng,t.lat]},o.initECharts=function(){return o._ec=t.init.apply(o,arguments),o._ec.Geo.prototype.dataToPoint=function(e){var t=new n(e[0],e[1]),i=o._map.toScreen(t);return[i.x,i.y]},o._bindEvent(),o._ec},o.getECharts=function(){return o._ec},o.setOption=function(e,t){o._option=e,o._ec.setOption(e,t)},o._bindEvent=function(){o._map.on("zoom-end",function(e){o._ec.resize(),o._echartsContainer.style.visibility="visible"}),o._map.on("zoom-start",function(e){o._echartsContainer.style.visibility="hidden"}),o._map.on("pan",function(e){o._echartsContainer.style.visibility="hidden"}),o._map.on("pan-end",function(e){o._ec.resize(),o._echartsContainer.style.visibility="visible"}),o._map.on("resize",function(){var e=o._echartsContainer.parentNode.parentNode.parentNode;o._mapOffset=[-parseInt(e.style.left)||0,-parseInt(e.style.top)||0],o._echartsContainer.style.left=o._mapOffset[0]+"px",o._echartsContainer.style.top=o._mapOffset[1]+"px",setTimeout(function(){o._map.resize(),o._map.reposition(),o._ec.resize()},200),o._echartsContainer.style.visibility="visible"}),o._ec.getZr().on("dragstart",function(e){}),o._ec.getZr().on("dragend",function(e){}),o._ec.getZr().on("mousewheel",function(e){o._lastMousePos=o._map.toMap(new i(e.event.x,e.event.y));var t=e.wheelDelta,n=o._map,a=n.getZoom();t=t>0?Math.ceil(t):Math.floor(t),t=Math.max(Math.min(t,4),-4),t=Math.max(n.getMinZoom(),Math.min(n.getMaxZoom(),a+t))-a,o._delta=0,o._startTime=null,t&&n.setZoom(a+t)})}}})});


--------------------------------------------------------------------------------
/Echarts3Layer3x.js:
--------------------------------------------------------------------------------
 1 | define(["dojo/_base/declare", "dojo/_base/lang", "esri/geometry/Point", "esri/geometry/ScreenPoint"], function (declare, t, Point, ScreenPoint) {
 2 |     return declare("Echarts3Layer3x", null, {
 3 |         name: "Echarts3Layer3x",
 4 |         _map: null,
 5 |         _ec: null,
 6 |         _geoCoord: [],
 7 |         _option: null,
 8 |         _mapOffset: [0, 0],
 9 |         constructor: function (map, echartsObj) {
10 |             this._map = map;
11 |             var element = this._echartsContainer = document.createElement("div");
12 |             element.style.position = "absolute",
13 |             element.style.height = map.height + "px",
14 |             element.style.width = map.width + "px",
15 |             element.style.top = 0,
16 |             element.style.left = 0,
17 |             map.__container.appendChild(element),
18 |             this._init(map, echartsObj)
19 |         },
20 |         _init: function (map, echartsObj) {
21 |             console.log('<a href="https://github.com/wandergis/arcgis-echarts3">develop by wandergis</a>');
22 |             var _self = this;
23 |             _self._map = map,
24 |             _self._ec = echartsObj,
25 |             _self.getEchartsContainer = function () {
26 |                 return _self._echartsContainer
27 |             },
28 |             _self.getMap = function () {
29 |                 return _self._map
30 |             },
31 |             _self.initECharts = function () {
32 |                 _self._ec = echartsObj.init.apply(_self, arguments);
33 |                 _self._ec.Geo.prototype.dataToPoint = function (e) {
34 |                     var pointTemp = new Point(e[0], e[1]),
35 |                     pointScreenObj = _self._map.toScreen(pointTemp);
36 |                     return [pointScreenObj.x, pointScreenObj.y]
37 |                 };
38 |                 _self._bindEvent();
39 |                 return _self._ec
40 |             },
41 |                 //_self.initECharts = function () {
42 |                 //    return _self._ec = echartsObj.init.apply(_self, arguments),
43 |                 //        _self._ec.Geo.prototype.dataToPoint = function (e) {
44 |                 //            var pointTemp = new Point(e[0], e[1]),
45 |                 //                pointScreenObj = _self._map.toScreen(pointTemp);
46 |                 //            return [pointScreenObj.x, pointScreenObj.y]
47 |                 //        },
48 |                 //        _self._bindEvent(),
49 |                 //        _self._ec
50 |                 //},
51 |             _self.getECharts = function () {
52 |                 return _self._ec
53 |             },
54 |             _self.setOption = function (e, t) {
55 |                 _self._option = e,
56 |                 _self._ec.setOption(e, t)
57 |             },
58 |             _self._bindEvent = function () {
59 |                 _self._map.on("zoom-end", function (e) {
60 |                     _self._ec.resize(),
61 |                     _self._echartsContainer.style.visibility = "visible"
62 |                 }),
63 |                 _self._map.on("zoom-start", function (e) {
64 |                     _self._echartsContainer.style.visibility = "hidden"
65 |                 }),
66 |                 _self._map.on("pan", function (e) {
67 |                     _self._echartsContainer.style.visibility = "hidden"
68 |                 }),
69 |                 _self._map.on("pan-end", function (e) {
70 |                     _self._ec.resize(), _self._echartsContainer.style.visibility = "visible"
71 |                 }),
72 |                 _self._map.on("resize", function () {
73 |                     var e = _self._echartsContainer.parentNode.parentNode.parentNode;
74 |                     _self._mapOffset = [-parseInt(e.style.left) || 0, -parseInt(e.style.top) || 0],
75 |                     _self._echartsContainer.style.left = _self._mapOffset[0] + "px",
76 |                     _self._echartsContainer.style.top = _self._mapOffset[1] + "px",
77 |                     setTimeout(function () {
78 |                         _self._map.resize(), _self._map.reposition(), _self._ec.resize()
79 |                     }, 200),
80 |                     _self._echartsContainer.style.visibility = "visible"
81 |                 }),
82 |                 _self._ec.getZr().on("dragstart", function (e) {
83 |                 }),
84 |                 _self._ec.getZr().on("dragend", function (e) {
85 |                 }),
86 |                 _self._ec.getZr().on("mousewheel", function (e) {
87 |                     _self._lastMousePos = _self._map.toMap(new ScreenPoint(e.event.x, e.event.y));
88 |                     var t = e.wheelDelta,
89 |                     mapTemp = _self._map,
90 |                     a = mapTemp.getZoom();
91 |                     t = t > 0 ? Math.ceil(t) : Math.floor(t), t = Math.max(Math.min(t, 4), -4), t = Math.max(mapTemp.getMinZoom(), Math.min(mapTemp.getMaxZoom(), a + t)) - a, _self._delta = 0, _self._startTime = null, t && mapTemp.setZoom(a + t)
92 |                 })
93 |             }
94 |         }
95 |     })
96 | });


--------------------------------------------------------------------------------
/Echarts3Layer4x.js:
--------------------------------------------------------------------------------
  1 | define(["dojo/_base/declare", "dojo/_base/lang",
  2 |     "esri/geometry/support/webMercatorUtils",
  3 |     "esri/geometry/SpatialReference",
  4 |     "esri/geometry/Point",
  5 |     "esri/geometry/ScreenPoint"], function (declare, t, webMercatorUtils, SpatialReference,Point, ScreenPoint) {
  6 |     return declare("Echarts3Layer4x", null, {
  7 |         name: "Echarts3Layer4x",
  8 |         _view: null,
  9 |         _map: null,
 10 |         _ec: null,
 11 |         _geoCoord: [],
 12 |         _option: null,
 13 |         _mapOffset: [0, 0],
 14 |         constructor: function (view, echartsObj) {
 15 |             this._map = view.map;
 16 |             this._view = view;
 17 |             var element = this._echartsContainer = document.createElement("div");
 18 |             element.style.position = "absolute";
 19 |             element.style.height = view.height + "px";
 20 |             element.style.width = view.width + "px";
 21 |             element.style.top = 0;
 22 |             element.style.left = 0;
 23 |             element.style.pointerEvents = 'none';
 24 | 
 25 |             view.container.appendChild(element);
 26 |             this._init(view, echartsObj);
 27 |         },
 28 |         _init: function (view, echartsObj) {
 29 |             console.log('<a href="https://github.com/wandergis/arcgis-echarts3">develop by wandergis</a>');
 30 |             var _self = this;
 31 |             _self._map = view.map,
 32 |             _self._view = view,
 33 |             _self._ec = echartsObj,
 34 |             _self.getEchartsContainer = function () {
 35 |                 return _self._echartsContainer
 36 |             },
 37 |             _self.getMap = function () {
 38 |                 return _self._map
 39 |             },
 40 |             _self.initECharts = function () {
 41 |                 _self._ec = echartsObj.init.apply(_self, arguments);
 42 |                 _self._ec.Geo.prototype.dataToPoint = function (e) {
 43 |                     var pointTemp = new Point(e[0], e[1]);
 44 |                     // var pointMercator = webMercatorUtils.lngLatToXY(pointTemp.longitude, pointTemp.latitude, true);//4.5还可以
 45 |                     var pointMercator = webMercatorUtils.lngLatToXY(pointTemp.longitude, pointTemp.latitude);//4.7版本
 46 |                     var pointFinal = new Point(pointMercator[0],pointMercator[1],new SpatialReference(102100));
 47 |                     var pointScreenObj = _self._view.toScreen(pointFinal);
 48 |                     return [pointScreenObj.x, pointScreenObj.y]
 49 |                 };
 50 |                 _self._bindEvent();
 51 |                 return _self._ec
 52 |             },
 53 |                 //_self.initECharts = function () {
 54 |                 //    return _self._ec = echartsObj.init.apply(_self, arguments),
 55 |                 //        _self._ec.Geo.prototype.dataToPoint = function (e) {
 56 |                 //            var pointTemp = new Point(e[0], e[1]),
 57 |                 //                pointScreenObj = _self._map.toScreen(pointTemp);
 58 |                 //            return [pointScreenObj.x, pointScreenObj.y]
 59 |                 //        },
 60 |                 //        _self._bindEvent(),
 61 |                 //        _self._ec
 62 |                 //},
 63 |             _self.getECharts = function () {
 64 |                 return _self._ec
 65 |             },
 66 |             _self.setOption = function (e, t) {
 67 |                 _self._option = e,
 68 |                 _self._ec.setOption(e, t)
 69 |             },
 70 |             _self._bindEvent = function () {
 71 |                 //浏览器窗口大小变化
 72 |                 _self._view.on("resize", function () {
 73 |                     var e = _self._echartsContainer.parentNode.parentNode.parentNode;
 74 |                     _self._mapOffset = [-parseInt(e.style.left) || 0, -parseInt(e.style.top) || 0],
 75 |                     _self._echartsContainer.style.left = _self._mapOffset[0] + "px",
 76 |                     _self._echartsContainer.style.top = _self._mapOffset[1] + "px",
 77 |                     setTimeout(function () {
 78 |                        _self._ec.resize()
 79 |                     }, 200),
 80 |                     _self._echartsContainer.style.visibility = "visible"
 81 |                 }),
 82 |                 //鼠标抬起
 83 |                 _self._view.on("pointer-up", function (e) {
 84 |                     _self._ec.resize()
 85 |                 });
 86 |                 //监听zoom事件
 87 |                 _self._view.watch("zoom", function (value) {
 88 |                     if (isInteger(value)) {
 89 |                         _self._ec.resize()
 90 |                     }
 91 |                     //console.log("zoom级别:" + value);
 92 |                 });
 93 |             }
 94 |         }
 95 |     })
 96 | });
 97 | /**
 98 |  * @func 字符串是否是整数
 99 |  * @param str 要判断的字符串
100 |  * @return true或者false
101 |  * */
102 | function isInteger( str ){
103 |     var regu = /^[-]{0,1}[0-9]{1,}$/;
104 |     return regu.test(str);
105 | }


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 xcsf
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## ArcGIS-API-for-JS-with-Echarts
 2 | 
 3 | #### ArcGIS API for Javascript 4.X扩展Echarts4.2.0
 4 | 
 5 | 放着一个ArcGIS API for Javascript结合使用Echarts的demo。
 6 | 
 7 | 主要是一个自定义的Echarts图层对象，echartsLayer.js文件
 8 | 
 9 | [参考博客](https://blog.csdn.net/yy284872497/article/details/85228643)
10 | 
11 | 大概思路是通过注册坐标系实现。
12 | 
13 | 这个仓库的demo也使用是通过这个方法实现的Echarts图层。
14 | 
15 | 
16 | 
17 | 思路是通过屏幕坐标转换实现。
18 | 
19 | 存放代码备用
20 | 
21 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |     <meta charset="utf-8">
  5 |     <title>模拟人口迁徙</title>
  6 |     
  7 |     <style>
  8 |         html, body, #map {
  9 |             padding:0;
 10 |             margin:0;
 11 |             height:100%;
 12 |             width:100%;
 13 |         }
 14 | 		.mytitle{
 15 | 			z-index:1000;
 16 | 			color:#fff;
 17 | 			font-size:16px;
 18 | 			text-align:center;
 19 | 			position:absolute;
 20 | 			top:10px;
 21 | 			left:40%;
 22 | 			width:20%;
 23 | 		}
 24 |     </style>
 25 |     <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/themes/light/main.css">
 26 |     <script src="echarts.min.js"></script>
 27 | 	<script src="echarts-gl.js"></script>
 28 | 	<script>
 29 | 	var dojoConfig = {
 30 |         parseOnLoad: true,
 31 |         packages: [{
 32 |             name: "src",
 33 |             location: location.pathname.replace(/\/[^/]+$/, "")+"/src"
 34 |         }]
 35 |     };
 36 | 	</script>
 37 | 	<script src="https://js.arcgis.com/4.11/"></script>
 38 |     <script>
 39 |         var map;
 40 | 
 41 |         require([
 42 |             "esri/Map",
 43 | 			"esri/Basemap",
 44 | 			"esri/layers/TileLayer",
 45 | 			"src/echartsLayer",
 46 |             "esri/views/SceneView",
 47 |             "dojo/domReady!"
 48 |         ], function (
 49 |             Map,Basemap,TileLayer,echartsLayer,SceneView
 50 |         ) {
 51 |             var layer = new TileLayer({
 52 | 				url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer"
 53 | 			});
 54 | 			var customBasemap = new Basemap({
 55 | 				baseLayers: [layer],
 56 | 				title: "Custom Basemap",
 57 | 				id: "myBasemap"
 58 | 			});
 59 | 			var map = new Map({
 60 | 				basemap: customBasemap
 61 | 			});
 62 | 			var view = new SceneView({
 63 | 				center: [110.62, 36.32], // long, lat
 64 | 				container: 'map',
 65 | 				map: map,
 66 | 				zoom: 4
 67 | 			});
 68 | 
 69 | 			
 70 |             var geoCoordMap = {
 71 |                 '海门': [121.15, 31.89],
 72 |                 '鄂尔多斯': [109.781327, 39.608266],
 73 |                 '招远': [120.38, 37.35],
 74 |                 '舟山': [122.207216, 29.985295],
 75 |                 '齐齐哈尔': [123.97, 47.33],
 76 |                 '盐城': [120.13, 33.38],
 77 |                 '赤峰': [118.87, 42.28],
 78 |                 '青岛': [120.33, 36.07],
 79 |                 '乳山': [121.52, 36.89],
 80 |                 '金昌': [102.188043, 38.520089],
 81 |                 '泉州': [118.58, 24.93],
 82 |                 '莱西': [120.53, 36.86],
 83 |                 '日照': [119.46, 35.42],
 84 |                 '胶南': [119.97, 35.88],
 85 |                 '南通': [121.05, 32.08],
 86 |                 '拉萨': [91.11, 29.97],
 87 |                 '云浮': [112.02, 22.93],
 88 |                 '梅州': [116.1, 24.55],
 89 |                 '文登': [122.05, 37.2],
 90 |                 '上海': [121.48, 31.22],
 91 |                 '攀枝花': [101.718637, 26.582347],
 92 |                 '威海': [122.1, 37.5],
 93 |                 '承德': [117.93, 40.97],
 94 |                 '厦门': [118.1, 24.46],
 95 |                 '汕尾': [115.375279, 22.786211],
 96 |                 '潮州': [116.63, 23.68],
 97 |                 '丹东': [124.37, 40.13],
 98 |                 '太仓': [121.1, 31.45],
 99 |                 '曲靖': [103.79, 25.51],
100 |                 '烟台': [121.39, 37.52],
101 |                 '福州': [119.3, 26.08],
102 |                 '瓦房店': [121.979603, 39.627114],
103 |                 '即墨': [120.45, 36.38],
104 |                 '抚顺': [123.97, 41.97],
105 |                 '玉溪': [102.52, 24.35],
106 |                 '张家口': [114.87, 40.82],
107 |                 '阳泉': [113.57, 37.85],
108 |                 '莱州': [119.942327, 37.177017],
109 |                 '湖州': [120.1, 30.86],
110 |                 '汕头': [116.69, 23.39],
111 |                 '昆山': [120.95, 31.39],
112 |                 '宁波': [121.56, 29.86],
113 |                 '湛江': [110.359377, 21.270708],
114 |                 '揭阳': [116.35, 23.55],
115 |                 '荣成': [122.41, 37.16],
116 |                 '连云港': [119.16, 34.59],
117 |                 '葫芦岛': [120.836932, 40.711052],
118 |                 '常熟': [120.74, 31.64],
119 |                 '东莞': [113.75, 23.04],
120 |                 '河源': [114.68, 23.73],
121 |                 '淮安': [119.15, 33.5],
122 |                 '泰州': [119.9, 32.49],
123 |                 '南宁': [108.33, 22.84],
124 |                 '营口': [122.18, 40.65],
125 |                 '惠州': [114.4, 23.09],
126 |                 '江阴': [120.26, 31.91],
127 |                 '蓬莱': [120.75, 37.8],
128 |                 '韶关': [113.62, 24.84],
129 |                 '嘉峪关': [98.289152, 39.77313],
130 |                 '广州': [113.23, 23.16],
131 |                 '延安': [109.47, 36.6],
132 |                 '太原': [112.53, 37.87],
133 |                 '清远': [113.01, 23.7],
134 |                 '中山': [113.38, 22.52],
135 |                 '昆明': [102.73, 25.04],
136 |                 '寿光': [118.73, 36.86],
137 |                 '盘锦': [122.070714, 41.119997],
138 |                 '长治': [113.08, 36.18],
139 |                 '深圳': [114.07, 22.62],
140 |                 '珠海': [113.52, 22.3],
141 |                 '宿迁': [118.3, 33.96],
142 |                 '咸阳': [108.72, 34.36],
143 |                 '铜川': [109.11, 35.09],
144 |                 '平度': [119.97, 36.77],
145 |                 '佛山': [113.11, 23.05],
146 |                 '海口': [110.35, 20.02],
147 |                 '江门': [113.06, 22.61],
148 |                 '章丘': [117.53, 36.72],
149 |                 '肇庆': [112.44, 23.05],
150 |                 '大连': [121.62, 38.92],
151 |                 '临汾': [111.5, 36.08],
152 |                 '吴江': [120.63, 31.16],
153 |                 '石嘴山': [106.39, 39.04],
154 |                 '沈阳': [123.38, 41.8],
155 |                 '苏州': [120.62, 31.32],
156 |                 '茂名': [110.88, 21.68],
157 |                 '嘉兴': [120.76, 30.77],
158 |                 '长春': [125.35, 43.88],
159 |                 '胶州': [120.03336, 36.264622],
160 |                 '银川': [106.27, 38.47],
161 |                 '张家港': [120.555821, 31.875428],
162 |                 '三门峡': [111.19, 34.76],
163 |                 '锦州': [121.15, 41.13],
164 |                 '南昌': [115.89, 28.68],
165 |                 '柳州': [109.4, 24.33],
166 |                 '三亚': [109.511909, 18.252847],
167 |                 '自贡': [104.778442, 29.33903],
168 |                 '吉林': [126.57, 43.87],
169 |                 '阳江': [111.95, 21.85],
170 |                 '泸州': [105.39, 28.91],
171 |                 '西宁': [101.74, 36.56],
172 |                 '宜宾': [104.56, 29.77],
173 |                 '呼和浩特': [111.65, 40.82],
174 |                 '成都': [104.06, 30.67],
175 |                 '大同': [113.3, 40.12],
176 |                 '镇江': [119.44, 32.2],
177 |                 '桂林': [110.28, 25.29],
178 |                 '张家界': [110.479191, 29.117096],
179 |                 '宜兴': [119.82, 31.36],
180 |                 '北海': [109.12, 21.49],
181 |                 '西安': [108.95, 34.27],
182 |                 '金坛': [119.56, 31.74],
183 |                 '东营': [118.49, 37.46],
184 |                 '牡丹江': [129.58, 44.6],
185 |                 '遵义': [106.9, 27.7],
186 |                 '绍兴': [120.58, 30.01],
187 |                 '扬州': [119.42, 32.39],
188 |                 '常州': [119.95, 31.79],
189 |                 '潍坊': [119.1, 36.62],
190 |                 '重庆': [106.54, 29.59],
191 |                 '台州': [121.420757, 28.656386],
192 |                 '南京': [118.78, 32.04],
193 |                 '滨州': [118.03, 37.36],
194 |                 '贵阳': [106.71, 26.57],
195 |                 '无锡': [120.29, 31.59],
196 |                 '本溪': [123.73, 41.3],
197 |                 '克拉玛依': [84.77, 45.59],
198 |                 '渭南': [109.5, 34.52],
199 |                 '马鞍山': [118.48, 31.56],
200 |                 '宝鸡': [107.15, 34.38],
201 |                 '焦作': [113.21, 35.24],
202 |                 '句容': [119.16, 31.95],
203 |                 '北京': [116.46, 39.92],
204 |                 '徐州': [117.2, 34.26],
205 |                 '衡水': [115.72, 37.72],
206 |                 '包头': [110, 40.58],
207 |                 '绵阳': [104.73, 31.48],
208 |                 '乌鲁木齐': [87.68, 43.77],
209 |                 '枣庄': [117.57, 34.86],
210 |                 '杭州': [120.19, 30.26],
211 |                 '淄博': [118.05, 36.78],
212 |                 '鞍山': [122.85, 41.12],
213 |                 '溧阳': [119.48, 31.43],
214 |                 '库尔勒': [86.06, 41.68],
215 |                 '安阳': [114.35, 36.1],
216 |                 '开封': [114.35, 34.79],
217 |                 '济南': [117, 36.65],
218 |                 '德阳': [104.37, 31.13],
219 |                 '温州': [120.65, 28.01],
220 |                 '九江': [115.97, 29.71],
221 |                 '邯郸': [114.47, 36.6],
222 |                 '临安': [119.72, 30.23],
223 |                 '兰州': [103.73, 36.03],
224 |                 '沧州': [116.83, 38.33],
225 |                 '临沂': [118.35, 35.05],
226 |                 '南充': [106.110698, 30.837793],
227 |                 '天津': [117.2, 39.13],
228 |                 '富阳': [119.95, 30.07],
229 |                 '泰安': [117.13, 36.18],
230 |                 '诸暨': [120.23, 29.71],
231 |                 '郑州': [113.65, 34.76],
232 |                 '哈尔滨': [126.63, 45.75],
233 |                 '聊城': [115.97, 36.45],
234 |                 '芜湖': [118.38, 31.33],
235 |                 '唐山': [118.02, 39.63],
236 |                 '平顶山': [113.29, 33.75],
237 |                 '邢台': [114.48, 37.05],
238 |                 '德州': [116.29, 37.45],
239 |                 '济宁': [116.59, 35.38],
240 |                 '荆州': [112.239741, 30.335165],
241 |                 '宜昌': [111.3, 30.7],
242 |                 '义乌': [120.06, 29.32],
243 |                 '丽水': [119.92, 28.45],
244 |                 '洛阳': [112.44, 34.7],
245 |                 '秦皇岛': [119.57, 39.95],
246 |                 '株洲': [113.16, 27.83],
247 |                 '石家庄': [114.48, 38.03],
248 |                 '莱芜': [117.67, 36.19],
249 |                 '常德': [111.69, 29.05],
250 |                 '保定': [115.48, 38.85],
251 |                 '湘潭': [112.91, 27.87],
252 |                 '金华': [119.64, 29.12],
253 |                 '岳阳': [113.09, 29.37],
254 |                 '长沙': [113, 28.21],
255 |                 '衢州': [118.88, 28.97],
256 |                 '廊坊': [116.7, 39.53],
257 |                 '菏泽': [115.480656, 35.23375],
258 |                 '合肥': [117.27, 31.86],
259 |                 '武汉': [114.31, 30.52],
260 |                 '大庆': [125.03, 46.58]
261 |             };
262 | 
263 |             var BJData = [
264 | 				[{name:'北京'}, {name:'上海',value:95}],
265 | 				[{name:'北京'}, {name:'广州',value:90}],
266 | 				[{name:'北京'}, {name:'大连',value:80}],
267 | 				[{name:'北京'}, {name:'南宁',value:70}],
268 | 				[{name:'北京'}, {name:'南昌',value:60}],
269 | 				[{name:'北京'}, {name:'拉萨',value:50}],
270 | 				[{name:'北京'}, {name:'长春',value:40}],
271 | 				[{name:'北京'}, {name:'包头',value:30}],
272 | 				[{name:'北京'}, {name:'重庆',value:20}],
273 | 				[{name:'北京'}, {name:'常州',value:10}]
274 | 			];
275 | 
276 | 			var SHData = [
277 | 				[{name:'上海'},{name:'包头',value:95}],
278 | 				[{name:'上海'},{name:'昆明',value:90}],
279 | 				[{name:'上海'},{name:'广州',value:80}],
280 | 				[{name:'上海'},{name:'郑州',value:70}],
281 | 				[{name:'上海'},{name:'长春',value:60}],
282 | 				[{name:'上海'},{name:'重庆',value:50}],
283 | 				[{name:'上海'},{name:'长沙',value:40}],
284 | 				[{name:'上海'},{name:'北京',value:30}],
285 | 				[{name:'上海'},{name:'丹东',value:20}],
286 | 				[{name:'上海'},{name:'大连',value:10}]
287 | 			];
288 | 
289 | 			var GZData = [
290 | 				[{name:'广州'},{name:'福州',value:95}],
291 | 				[{name:'广州'},{name:'太原',value:90}],
292 | 				[{name:'广州'},{name:'长春',value:80}],
293 | 				[{name:'广州'},{name:'重庆',value:70}],
294 | 				[{name:'广州'},{name:'西安',value:60}],
295 | 				[{name:'广州'},{name:'成都',value:50}],
296 | 				[{name:'广州'},{name:'常州',value:40}],
297 | 				[{name:'广州'},{name:'北京',value:30}],
298 | 				[{name:'广州'},{name:'北海',value:20}],
299 | 				[{name:'广州'},{name:'海口',value:10}]
300 | 			];
301 | 
302 | 			var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
303 | 
304 | 			var convertData = function (data) {
305 | 				var res = [];
306 | 				for (var i = 0; i < data.length; i++) {
307 | 					var dataItem = data[i];
308 | 					var fromCoord = geoCoordMap[dataItem[0].name];
309 | 					var toCoord = geoCoordMap[dataItem[1].name];
310 | 					if (fromCoord && toCoord) {
311 | 						res.push({
312 | 							fromName: dataItem[0].name,
313 | 							toName: dataItem[1].name,
314 | 							coords: [fromCoord, toCoord],
315 | 							value: dataItem[1].value
316 | 						});
317 | 					}
318 |                 }
319 | 				return res;
320 | 			};
321 | 			var color = ['red', 'green', 'blue'];
322 | 			var series = [];
323 |             [['北京', BJData]
324 |             // , ['上海', SHData], ['广州', GZData]
325 |         ].forEach(function (item, i) {
326 | 				series.push({
327 | 					name: item[0] + ' Top10',
328 | 					type: 'lines',
329 | 					coordinateSystem: 'arcgis',
330 | 					zlevel: 1,
331 | 					effect: {
332 | 						show: true,
333 | 						period: 6,
334 | 						trailLength: 0.7,
335 | 						color: '#fff',
336 | 						symbolSize: 3
337 | 					},
338 | 					lineStyle: {
339 | 						normal: {
340 | 							color: color[i],
341 | 							width: 0,
342 | 							curveness: 0.2
343 | 						}
344 | 					},
345 | 					data: convertData(item[1])
346 | 				},
347 | 				{
348 | 					name: item[0] + ' Top10',
349 | 					type: 'lines',
350 | 					coordinateSystem: 'arcgis',
351 | 					zlevel: 2,
352 | 					symbol: ['none', 'arrow'],
353 | 					symbolSize: 10,
354 | 					effect: {
355 | 						show: true,
356 | 						period: 6,
357 | 						trailLength: 0,
358 | 						symbol: planePath,
359 | 						symbolSize: 15
360 | 					},
361 | 					lineStyle: {
362 | 						normal: {
363 | 							color: color[i],
364 | 							width: 1,
365 | 							opacity: 0.6,
366 | 							curveness: 0.2
367 | 						}
368 | 					},
369 | 					data: convertData(item[1])
370 | 				},
371 | 				// {
372 | 				// 	name: item[0] + ' Top10',
373 | 				// 	type: 'effectScatter',
374 | 				// 	coordinateSystem: 'arcgis',
375 | 				// 	zlevel: 2,
376 | 				// 	rippleEffect: {
377 | 				// 		brushType: 'stroke'
378 | 				// 	},
379 | 				// 	label: {
380 | 				// 		normal: {
381 | 				// 			show: true,
382 | 				// 			position: 'left',
383 | 				// 			formatter: '{b}'
384 | 				// 		}
385 | 				// 	},
386 | 				// 	symbolSize: function (val) {
387 | 				// 		return val[2] / 8;
388 | 				// 	},
389 | 				// 	itemStyle: {
390 | 				// 		normal: {
391 | 				// 			color: color[i]
392 | 				// 		}
393 | 				// 	},
394 | 				// 	data: item[1].map(function (dataItem) {
395 | 				// 		return {
396 | 				// 			name: dataItem[1].name,
397 | 				// 			value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
398 | 				// 		};
399 | 				// 	})
400 |                 // }
401 |                 );
402 | 			});
403 | 
404 |         view.on('layerview-create',function(){
405 |             console.log(echarts)
406 |             var chart = new echartsLayer(view);
407 | 			var option = {
408 |                 title: {
409 |                     text: 'ArcGIS API for Javascript4.10扩展Echarts4之模拟迁徙',
410 |                     subtext: 'Data from Echart社区,Develop By YANG',
411 |                     left: 'center',
412 |                     textStyle: {
413 |                         color: '#fff'
414 |                     }
415 |                 },
416 |                 series: series
417 | 			};
418 | 			chart.setChartOption(option);
419 | 		});		
420 | 	});
421 |     </script>
422 | </head>
423 | <body class="tundra">
424 |     <div id="map"></div>
425 | 	<span class="mytitle"></span>
426 | </body>
427 | </html>
428 | 


--------------------------------------------------------------------------------
/src/echartsLayer.js:
--------------------------------------------------------------------------------
  1 | define([
  2 | 	"dojo/_base/declare",
  3 | 	"dojo/_base/lang",
  4 | 	"esri/geometry/Point",
  5 | 	"esri/geometry/SpatialReference"
  6 | ], function (declare, lang, n, SpatialReference) {
  7 | 	return declare("EchartsglLayer", null, {
  8 | 		name: "EchartsglLayer",
  9 | 		view: null,
 10 | 		box: null,
 11 | 		chart: null,
 12 | 		chartOption: null,
 13 | 		visible: true,
 14 | 		constructor: function (view, option) {
 15 | 			//如果在服务器上使用该代码  可以将echart对象传入到option中
 16 | 			echarts.registerCoordinateSystem('arcgis', this.getE3CoordinateSystem(view));
 17 | 			this.init(view, option);
 18 | 		},
 19 | 		init: function (view, option) {
 20 | 			this.setBaseMap(view);
 21 | 			this.createLayer();
 22 | 			//this.setChartOption(option);
 23 | 		},
 24 | 		setBaseMap: function (view) {
 25 | 			this.view = view;
 26 | 		},
 27 | 		setChartOption: function (option) {
 28 | 			this.chartOption = option;
 29 | 			this.setCharts();
 30 | 		},
 31 | 		setVisible: function (bool) {
 32 | 			if (!this.box || this.visible === bool) return;
 33 | 			this.box.hidden = !bool;
 34 | 			this.visible = bool;
 35 | 			bool === true && setCharts();
 36 | 		},
 37 | 		refreshBegin: function () {
 38 | 			this.box.hidden = true;
 39 | 		},
 40 | 		refreshing: function () {
 41 | 			setCharts();
 42 | 		},
 43 | 		refreshEnd: function () {
 44 | 			this.box.hidden = false;
 45 | 		},
 46 | 		on: function (eventName, handler, context) {
 47 | 			this.chart.on(eventName, handler, context);
 48 | 		},
 49 | 		off: function (eventName, handler, context) {
 50 | 			this.chart.off(eventName, handler, context);
 51 | 		},
 52 | 		map_DragStart_Listener: null,
 53 | 		map_DragEnd_Listener: null,
 54 | 		map_ZoomStart_Listener: null,
 55 | 		map_ZoomEnd_Listener: null,
 56 | 		map_ExtentChange_Listener: null,
 57 | 		map_click_Listener: null,
 58 | 		setCharts: function () {
 59 | 			if (!this.visible) return;
 60 | 			if (this.chartOption == null || this.chartOption == 'undefined') return;
 61 | 			let baseExtent = this.view.extent;
 62 | 			//判断是否使用了mark类型标签，每次重绘要重新转换地理坐标到屏幕坐标
 63 | 			//根据地图extent,重绘echarts
 64 | 			this.chartOption.xAxis = { show: false, min: baseExtent.xmin, max: baseExtent.xmax };
 65 | 			this.chartOption.yAxis = { show: false, min: baseExtent.ymin, max: baseExtent.ymax };
 66 | 			this.chart.setOption(this.chartOption);
 67 | 			this.chartOption.animation = false;
 68 | 		},
 69 | 		/*创建layer的容器，添加到map的layers下面*/
 70 | 		createLayer: function () {
 71 | 			let box = this.box = document.createElement("div");
 72 | 			box.setAttribute("id", "echartsData")
 73 | 			box.setAttribute("name", "echartsData")
 74 | 			box.style.width = this.view.width + 'px';
 75 | 			box.style.height = this.view.height + 'px';
 76 | 			box.style.position = "absolute";
 77 | 			box.style.top = 0;
 78 | 			box.style.left = 0;
 79 | 			let parent = document.getElementsByClassName("esri-view-surface")[0];
 80 | 			parent.appendChild(box);
 81 | 			this.chart = echarts.init(box);
 82 | 			//this.setCharts();
 83 | 			this.startMapEventListeners();
 84 | 		},
 85 | 		/*销毁实例*/
 86 | 		removeLayer: function () {
 87 | 			this.box.outerHTML = "";
 88 | 			this.view = null;
 89 | 			this.box = null;
 90 | 			this.originLyr = null;
 91 | 			this.features = null;
 92 | 			this.screenData = [];
 93 | 			this.chart = null;
 94 | 			this.chartOption = null;
 95 | 			this.map_DragStart_Listener.remove();
 96 | 			this.map_DragEnd_Listener.remove();
 97 | 			this.map_ZoomStart_Listener.remove();
 98 | 			this.map_ZoomEnd_Listener.remove();
 99 | 			this.map_ExtentChange_Listener.remove();
100 | 		},
101 | 		/*监听地图事件，根据图层是否显示，判断是否重绘echarts*/
102 | 		startMapEventListeners: function () {
103 | 			let view = this.view;
104 | 			view.watch("extent", lang.hitch(this, function () {
105 | 
106 | 
107 | 				if (!this.visible) return;
108 | 				this.setCharts();
109 | 				this.chart.resize();
110 | 				this.box.hidden = false;
111 | 			}));
112 | 			view.watch("rotation", lang.hitch(this, function () {
113 | 				if (!this.visible) return;
114 | 				this.setCharts();
115 | 				this.chart.resize();
116 | 				this.box.hidden = false;
117 | 			}));
118 | 
119 | 		},
120 | 		getE3CoordinateSystem: function (map) {
121 | 			var CoordSystem = function CoordSystem(map) {
122 | 				this.map = map;
123 | 				this._mapOffset = [0, 0];
124 | 			};
125 | 			CoordSystem.create = function (ecModel) {
126 | 				ecModel.eachSeries(function (seriesModel) {
127 | 					if (seriesModel.get('coordinateSystem') === 'arcgis') {
128 | 						seriesModel.coordinateSystem = new CoordSystem(map);
129 | 					}
130 | 				});
131 | 			};
132 | 			CoordSystem.getDimensionsInfo = function () {
133 | 				return ['x', 'y'];
134 | 			};
135 | 			CoordSystem.dimensions = ['x', 'y'];
136 | 			CoordSystem.prototype.dimensions = ['x', 'y'];
137 | 			CoordSystem.prototype.setMapOffset = function setMapOffset(mapOffset) {
138 | 				this._mapOffset = mapOffset;
139 | 			}
140 | 			CoordSystem.prototype.dataToPoint = function dataToPoint(data) {
141 | 				var point = {
142 | 					type: "point",
143 | 					x: data[0],
144 | 					y: data[1],
145 | 					spatialReference: new SpatialReference(4326)
146 | 				};
147 | 				var px = map.toScreen(point);
148 | 				var mapOffset = this._mapOffset;
149 | 				return [px.x - mapOffset[0], px.y - mapOffset[1]];
150 | 			}
151 | 			CoordSystem.prototype.pointToData = function pointToData(pt) {
152 | 				var mapOffset = this._mapOffset;
153 | 				var screentPoint = {
154 | 					x: pt[0] + mapOffset[0],
155 | 					y: pt[1] + mapOffset[1]
156 | 				};
157 | 				var data = map.toMap(screentPoint);
158 | 				return [data.x, data.y];
159 | 			};
160 | 			CoordSystem.prototype.getViewRect = function getViewRect() {
161 | 				return new graphic.BoundingRect(0, 0, this.map.width, this.map.height);
162 | 			};
163 | 			CoordSystem.prototype.getRoamTransform = function getRoamTransform() {
164 | 				return matrix.create();
165 | 			};
166 | 			return CoordSystem
167 | 		}
168 | 
169 | 	});
170 | })


--------------------------------------------------------------------------------