api

多年来供销社发只arcgis api for
js的花色,需要为此到百度echarts迁徙图效果,而百度那些效果实现是构成百度地图的,怎么才可以跟arcgis
api结合为,网上找,终于以github找到了,github源代码地址:https://github.com/wandergis/arcgis-echarts;在是,异常感谢原创作者wandergis无私进献;

构成进好demo的功力图如下:

图片 1

 

心想事成思路:

1.从定义EchartsLayer类,为了把echarts迁徙图的渲染效果跟esri的地图map绑定以合,比如渲染图效果的d放在map地图容器里面:

      var div = this._echartsContainer = 
      document.createElement('div');
      div.style.position = 'absolute';
      div.id = "moveecharts_Map";
      div.style.height = map.height + 'px';
      div.style.width = map.width + 'px';
      div.style.top = 0;
      div.style.left = 0;
      map.__container.appendChild(div);

地图的绑定连串事件:

      /**
       * 绑定地图事件的处理方法
       *
       * @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)
        });
      };

切实的美观github源代码

2.echarts搬徙图的套数据构造,这里自己有点修改了之,跟github源代码的协会数据未均等:

var option = {
    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: '大连市',
            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: '大连基地' }, { name: '到达#1' }],
                    [{ name: '大连基地' }, { name: '到达#2' }],
                    [{ name: '大连基地' }, { name: '到达#3' }],
                    [{ name: '大连基地' }, { name: '到达#4' }],
                    [{ name: '大连基地' }, { name: '到达#5' }],
                    [{ name: '大连基地' }, { name: '到达#6' }],
                    [{ name: '大连基地' }, { name: '到达#7' }],
                    [{ name: '大连基地' }, { name: '到达#8' }],
                    [{ name: '大连基地' }, { name: '到达#9' }],
                    [{ name: '大连基地' }, { name: '到达#10' }],
                    [{ name: '大连基地' }, { name: '到达#11' }],
                    [{ name: '大连基地' }, { name: '到达#12' }],
                    [{ name: '大连基地' }, { name: '到达#13' }],
                    [{ name: '大连基地' }, { name: '到达#14' }],
                    [{ name: '大连基地' }, { name: '到达#15' }],
                    [{ name: '大连基地' }, { name: '到达#16' }],
                    [{ name: '大连基地' }, { name: '到达#17' }],
                    [{ name: '大连基地' }, { name: '到达#18' }],
                    [{ name: '大连基地' }, { name: '到达#19' }],
                    [{ name: '大连基地' }, { name: '到达#20' }]
                ],
            },
            geoCoord: {
                '大连基地': [121.939, 39.703],
                '到达#1': [121.563, 39.582],
                '到达#2': [121.579, 39.411],
                '到达#3': [121.715, 39.401],
                '到达#4': [121.746, 39.278],
                '到达#5': [121.613, 39.027],
                '到达#6': [121.768, 39.066],
                '到达#7': [121.921, 39.414],
                '到达#8': [121.941, 39.089],
                '到达#9': [122.088, 39.206],
                '到达#10': [122.214, 39.342],
                '到达#11': [121.979, 39.357],
                '到达#12': [121.091, 39.541],
                '到达#13': [122.397, 39.421],
                '到达#14': [122.649, 39.534],
                '到达#15': [122.955, 39.652],
                '到达#16': [122.512, 39.691],
                '到达#17': [122.183, 39.622],
                '到达#18': [122.288, 39.803],
                '到达#19': [122.119, 39.911],
                '到达#20': [122.133, 39.629]
            }
        },
        {
            name: '大连市 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: '大连基地' }, { name: '到达#1', value: 95 }],
                    [{ name: '大连基地' }, { name: '到达#2', value: 90 }],
                    [{ name: '大连基地' }, { name: '到达#3', value: 80 }],
                    [{ name: '大连基地' }, { name: '到达#14', value: 70 }],
                    [{ name: '大连基地' }, { name: '到达#5', value: 60 }],
                    [{ name: '大连基地' }, { name: '到达#16', value: 50 }],
                    [{ name: '大连基地' }, { name: '到达#7', value: 40 }],
                    [{ name: '大连基地' }, { name: '到达#18', value: 30 }],
                    [{ name: '大连基地' }, { name: '到达#9', value: 20 }],
                    [{ name: '大连基地' }, { name: '到达#20', value: 10 }]
                ]
            },
            markPoint: {
                symbol: 'emptyCircle',
                symbolSize: function (v) {
                    return 10 + v / 10
                },
                effect: {
                    show: true,
                    shadowBlur: 0
                },
                itemStyle: {
                    normal: {
                        label: { show: false }
                    },
                    emphasis: {
                        label: { position: 'top' }
                    }
                },
                data: [
                    { name: '到达#1', value: 95 },
                    { name: '到达#2', value: 90 },
                    { name: '到达#3', value: 80 },
                    { name: '到达#14', value: 70 },
                    { name: '到达#5', value: 60 },
                    { name: '到达#16', value: 50 },
                    { name: '到达#7', value: 40 },
                    { name: '到达#18', value: 30 },
                    { name: '到达#9', value: 20 },
                    { name: '到达#20', value: 10 }
                ]
            }
        }
    ]
};

3.调所以实现:

    loadMoveEchartsMap: function (map) {
        var overlay = new moveEchartsMap.EchartsLayer(map, echarts);
        var chartsContainer = overlay.getEchartsContainer();
        var myChart = overlay.initECharts(chartsContainer);
        window.onresize = myChart.onresize;
        overlay.setOption(option);

    }

 

相关文章