Recently the company has an ArcGIS API for JS Project, need to use the Baidu echarts migration map effect, and Baidu that effect is a combination of Baidu map, how can be combined with ArcGIS API, online search, finally found in GitHub, GitHub Source code address: https://github.com/wandergis/arcgis-echarts; In this, thank the original author Wandergis selfless dedication;
Integrate your demo as follows:
Implementation ideas:
1. Customize the Echartslayer class, in order to bind the rendering effect of the Echarts migration map with ESRI maps, for example, the d of the render map effect is placed in the map container:
this. _echartscontainer = document.createelement (' div '); = ' absolute '; = "Moveecharts_map"; = map.height + ' px '; = map.width + ' px '; = 0; = 0; Map.__container.appendchild (div);
Binding Series events for maps:
/** * handling of Bound map events * * @private*/self._bindevent=function() {Self._map.on (' Zoom-end ',function(e) {self.setoption (self._option); }); Self._map.on (' Zoom-start ',function(e) {self._ec.clear (); }); Self._map.on (' Pan ',function(e) {self._ec.clear (); }); Self._map.on (' Pan-end ',function(e) {self.setoption (self._option); }); Self._ec.getzrender (). On (' DragStart ',function(e) {Self._map.disablepan (); //self._ec.clear (); }); Self._ec.getzrender (). On (' Dragend ',function(e) {Self._map.enablepan (); //self.setoption (self._option); }); Self._ec.getzrender (). On (' MouseWheel ',function(e) {self._ec.clear (); Self._map.emit (' Mouse-wheel ', E.event)}); };
Specific can see GitHub source code
2.echarts migration diagram of the simulation data structure, here itself slightly modified, and GitHub source code to construct data inconsistent:
varoption ={color: [' Gold ', ' aqua ', ' lime '], tooltip: {trigger:' Item ', Formatter:' {b} '}, DataRange: {show:false, min:0, Max:100, calculable:true, color: [' #ff3333 ', ' orange ', ' yellow ', ' lime ', ' aqua '], TextStyle: {color:' #fff '}}, Series: [{name:' Dalian ', type:' Map ', Roam:true, hoverable:false, Maptype:' None ', ItemStyle: {normal: {bordercolor:' Rgba (100,149,237,1) ', BorderWidth:0.5, Areastyle: {color:' #1b1b1b '}}, Data: [], markline: {smooth : true, symbol: [' None ', ' Circle '], Symbolsize:1, ItemStyle: {normal: {color:' #fff ', BorderWidth:1, BorderColor:' Rgba (30,144,255,0.5) '}}, data: [[{Name:' Dalian Base '}, {name: ' Reach # # '}], [{name:' Dalian Base '}, {name: ' Reach # # '}], [{name:' Dalian Base '}, {name: ' Reach # # '}], [{name:' Dalian Base '}, {name: ' Reach # # '}], [{name:' Dalian Base '}, {name: ' Reach # # '}], [{name:' Dalian Base '}, {name: ' Reach '}], [{name:' Dalian Base '}, {name: ' Reach # # '}], [{name:' Dalian Base '}, {name: ' Reach # # '}], [{name:' Dalian Base '}, {name: ' Reach # # '}], [{name:' Dalian Base '}, {name: ' Reach # # '}], [{name:' Dalian Base '}, {name: ' Reach #11 '}], [{name:' Dalian Base '}, {name: ' Reach #12 '}], [{name:' Dalian Base '}, {name: ' Reach #13 '}], [{name:' Dalian Base '}, {name: ' Reach #14 '}], [{name:' Dalian Base '}, {name: ' Reach #15 '}], [{name:' Dalian Base '}, {name: ' Reach #16 '}], [{name:' Dalian Base '}, {name: ' Reach #17 '}], [{name:' Dalian Base '}, {name: ' Reach #18 '}], [{name:' Dalian Base '}, {name: ' Reach #19 '}], [{name:' Dalian Base '}, {name: ' Reach #20 '}]],}, Geocoord: {' Dalian base ': [121.939, 39.703], ' Reach # # ': [121.563, 39.582], ' Reach # # ': [121.579, 39.411], ' Reach # # ': [121.715, 39.401], ' Reach # # ': [121.746, 39.278], ' Reach # # ': [121.613, 39.027], ' Reach ': [121.768, 39.066], ' Reach # # ': [121.921, 39.414], ' Reach ': [121.941, 39.089], ' Reach # # ': [122.088, 39.206], ' Reach # # ': [122.214, 39.342], ' Reach #11 ': [121.979, 39.357], ' Reach #12 ': [121.091, 39.541], ' Reach #13 ': [122.397, 39.421], ' Reach #14 ': [122.649, 39.534], ' Reach #15 ': [122.955, 39.652], ' Reach #16 ': [122.512, 39.691], ' Reach #17 ': [122.183, 39.622], ' Reach #18 ': [122.288, 39.803], ' Reach #19 ': [122.119, 39.911], ' Reach #20 ': [122.133, 39.629]}}, {name:' Dalian Top10 ', type:' Map ', Maptype:' None ', data: [], Markline: {smooth:true, Effect: {show:true, Scalesize:1, Period:30, Color:' #fff ', Shadowblur:10}, ItemStyle: {normal: {borderWidth:1, LineStyle: {type:' Solid ', Shadowblur:10}} , data: [[{Name:
' Dalian Base '}, {name: ' Reach # # ', value:95}], [{name:' Dalian Base '}, {name: ' Reach # # ', value:90}], [{name:' Dalian Base '}, {name: ' Reach # # ', value:80}], [{name:' Dalian Base '}, {name: ' Reach #14 ', value:70}], [{name:' Dalian Base '}, {name: ' Reach # # ', value:60}], [{name:' Dalian Base '}, {name: ' Reach #16 ', value:50}], [{name:' Dalian Base '}, {name: ' Reach # # ', value:40}], [{name:' Dalian Base '}, {name: ' Reach #18 ', value:30}], [{name:' Dalian Base '}, {name: ' Reach # # ', value:20}], [{name:' Dalian Base '}, {name: ' Reach #20 ', value:10}]]}, Markpoint: {symbol:' Emptycircle ', Symbolsize:function(v) {returnTen + V/10}, Effect: {show:true, Shadowblur:0}, ItemStyle: {normal: {label: {show: false}}, emphasis: {label: {position:' Top '}} , data: [{name:' Reach # # ', value:95}, {name:' Reach # # ', value:90}, {name:' Reach # # ', value:80}, {name:' Reach #14 ', value:70}, {name:' Reach # # ', value:60}, {name:' Reach #16 ', value:50}, {name:' Reach # # ', value:40}, {name:' Reach #18 ', value:30}, {name:' Reach # # ', value:20}, {name:' Reach #20 ', value:10 } ] } } ]};
3. Invoke the implementation:
function (map) { varnew moveechartsmap.echartslayer (map, echarts); var chartscontainer = overlay.getechartscontainer (); var mychart = overlay.initecharts (chartscontainer); = mychart.onresize; overlay.setoption (option); }
ArcGIS API for JS Starter Development Series 16 Migration flow chart