arcgis for js实现迁徙图组件化封装

一、组件化代码

/***
 * echarts图层通用工具
 * date:2022-01-28
 * author：zdh
 * @type {EchartsLayerUtil}
 */
import {EchartsLayer} from './EchartsLayer'

let EchartsLayerUtil = (function () {
  function EchartsLayerUtil (arcgis2d) {
    this.arcgis2d=arcgis2d
    this.transferLayer = null
  }
  EchartsLayerUtil.prototype.createTransferLayer = function (data,idField,labelField){
    let geoCoordMap = data.geoCoordMap;
    let convertData = function (data) {
      let res = [];
      for (let i = 0; i < data.length; i++) {
        let dataItem = data[i];
        let fromCoord = geoCoordMap[dataItem[0][idField]];
        let toCoord = geoCoordMap[dataItem[1][idField]];
        if (fromCoord && toCoord) {
          res.push({
            fromName: dataItem[0][idField],
            toName: dataItem[1][idField],
            coords: [fromCoord, toCoord],
            value: 3,
          });
        }
      }
      return res;
    }
    let series = [];
    data.resultData.forEach(function (item, i) {
      series.push(
        {
          coordinateSystem: 'arcgis',
          type: "effectScatter",
          symbolSize: 20,
          hoverAnimation: true,
          itemStyle: {
            color: "rgba(60,53,212,1)",
            borderColor: "rgba(60,53,212,0.4)",
            borderWidth: 10
          },
          data: [
            {
              value: geoCoordMap[item[0][0][idField]],
              itemStyle: {
                normal: {
                  color: '#df27ba'
                }
              }
            }
          ],
          label: {
            normal: {
              show: true,
              position: 'right', //显示位置
              offset: [5, 0], //偏移设置
              formatter: function (params) {
                //圆环显示文字
                return item[0][0][labelField];
              },
              fontWeight: 8,
              fontSize: 20,
            },
          }

        },
        {
          name: ' Top10',
          type: 'lines',
          coordinateSystem: 'arcgis',
          zlevel: 2,
          symbol: ['none','circle'],
          symbolSize: 10,
          effect: {
            show: true,
            period: 4, //箭头指向速度，值越小速度越快
            trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
            symbol: 'arrow', //箭头图标
            symbolSize: 15, //图标大小
          },
          lineStyle: {
            normal: {
              color:'#eee',
              width: 1, //尾迹线条宽度
              opacity: 1, //尾迹线条透明度
              curveness: 0.3, //尾迹线条曲直度
            },
          },
          data: convertData(item)
        }
      )
    })
    this.transferLayer = new EchartsLayer()
    this.transferLayer.view=this.arcgis2d.mapView
    let option = {
      // title: {
      //     text: 'ArcGIS API for Javascript4.10扩展Echarts4之模拟迁徙',
      //     subtext: 'Data from Echart社区,Develop By YANG',
      //     left: 'center',
      //     textStyle: {
      //         color: '#fff'
      //     }
      // },
      series: series,
    };
    if (this.transferLayer.domDiv == null) {
      let divdom = document.createElement("div")
      this.transferLayer.init(this.arcgis2d.mapView,option,divdom)
    }
    else {
      this.transferLayer.chart.clear()
      if(option.series.length == 0){
        this.transferLayer.setVisible(false)
        return
      }else {
        this.transferLayer.setChartOption(option)
      }
    }
    this.transferLayer.chart.resize()
    this.transferLayer.box.hidden = false
  }
  return EchartsLayerUtil
}())
export {EchartsLayerUtil}

二、调用

 

三、展示效果

 如果对您有帮助

 感谢支持技术分享，请扫码点赞支持：

技术合作交流qq:2401315930