广州人口迁徙

示例

结果

Loading...

实时编辑器

function render(props) {
  const container = useRef(null);

  const dataUrl = useBaseUrl('/json/toursim.json');

  const initChat = (map, option) => {
    const chart = new EChartsLayer(option, {
      stopEvent: false,
      hideOnMoving: false,
      hideOnZooming: false,
      forcedPrecomposeRerender: true,
    });

    chart.appendTo(map);
  }

  const init = async () => {
    const map = new ol.Map({
      target: container.current,
      view: new ol.View({
        projection: 'EPSG:4326',
        zoom: 9,
        rotation: 0,
        center: [113.466408,23.111777],
      }),
      layers: [
        new TileLayer({
          source: new XYZ({
            url: 'https://{a-c}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
          }),
        }),
      ],
    });

    const GZ_DATA_GEO_CoordMap = {
      '天河区': [113.368672,23.130389],
      '黄埔区': [113.466408,23.111777],
      '海珠区': [113.323254,23.089173],
      '越秀区': [113.272949,23.135441],
      '荔湾区': [113.250815,23.131453],
      '白云区': [113.278986,23.164151],
      '南沙区': [113.530511,22.808027],
      '花都区': [113.225806,23.412711],
      '增城区': [113.817106,23.267509],
      '从化区': [113.593464,23.555101],
      '番禺区': [113.391669,22.943615]
    }
    const ZCData = [
      [{name:'增城区'}, {name:'番禺区',value:95}],
      [{name:'增城区'}, {name:'从化区',value:90}],
      [{name:'增城区'}, {name:'天河区',value:80}],
      [{name:'增城区'}, {name:'花都区',value:70}],
      [{name:'增城区'}, {name:'南沙区',value:60}],
      [{name:'增城区'}, {name:'白云区',value:50}],
      [{name:'增城区'}, {name:'荔湾区',value:40}],
      [{name:'增城区'}, {name:'越秀区',value:30}],
      [{name:'增城区'}, {name:'海珠区',value:20}],
      [{name:'增城区'}, {name:'增城区',value:10}],
      [{name:'增城区'}, {name:'黄埔区',value:10}]
    ];
    const NSData = [
      [{name:'南沙区'},{name:'黄埔区',value:95}],
      [{name:'南沙区'},{name:'海珠区',value:90}],
      [{name:'南沙区'},{name:'越秀区',value:80}],
      [{name:'南沙区'},{name:'荔湾区',value:70}],
      [{name:'南沙区'},{name:'天河区',value:60}],
      [{name:'南沙区'},{name:'白云区',value:50}],
      [{name:'南沙区'},{name:'花都区',value:40}],
      [{name:'南沙区'},{name:'增城区',value:30}],
      [{name:'南沙区'},{name:'从化区',value:20}],
      [{name:'南沙区'},{name:'番禺区',value:10}]
    ];
    const HZData = [
      [{name:'海珠区'},{name:'黄埔区',value:95}],
      [{name:'海珠区'},{name:'白云区',value:90}],
      [{name:'海珠区'},{name:'越秀区',value:80}],
      [{name:'海珠区'},{name:'荔湾区',value:70}],
      [{name:'海珠区'},{name:'天河区',value:60}],
      [{name:'海珠区'},{name:'南沙区',value:50}],
      [{name:'海珠区'},{name:'花都区',value:40}],
      [{name:'海珠区'},{name:'增城区',value:30}],
      [{name:'海珠区'},{name:'从化区',value:20}],
      [{name:'海珠区'},{name:'番禺区',value:10}]
    ];
    const CHData = [
      [{name:'从化区'},{name:'黄埔区',value:95}],
      [{name:'从化区'},{name:'白云区',value:90}],
      [{name:'从化区'},{name:'越秀区',value:80}],
      [{name:'从化区'},{name:'荔湾区',value:70}],
      [{name:'从化区'},{name:'天河区',value:60}],
      [{name:'从化区'},{name:'南沙区',value:50}],
      [{name:'从化区'},{name:'花都区',value:40}],
      [{name:'从化区'},{name:'增城区',value:30}],
      [{name:'从化区'},{name:'海珠区',value:20}],
      [{name:'从化区'},{name:'番禺区',value:10}]
    ];
    const HDData = [
      [{name:'花都区'},{name:'黄埔区',value:95}],
      [{name:'花都区'},{name:'白云区',value:90}],
      [{name:'花都区'},{name:'越秀区',value:80}],
      [{name:'花都区'},{name:'荔湾区',value:70}],
      [{name:'花都区'},{name:'天河区',value:60}],
      [{name:'花都区'},{name:'南沙区',value:50}],
      [{name:'花都区'},{name:'从化区',value:40}],
      [{name:'花都区'},{name:'增城区',value:30}],
      [{name:'花都区'},{name:'海珠区',value:20}],
      [{name:'花都区'},{name:'番禺区',value:10}]
    ];
    const convertData_gz = function (data) {
      const res = [];
      for (let i = 0; i < data.length; i++) {
        const dataItem = data[i];
        const fromCoord = GZ_DATA_GEO_CoordMap[dataItem[0].name];
        const toCoord = GZ_DATA_GEO_CoordMap[dataItem[1].name];
        if (fromCoord && toCoord) {
          res.push({
            fromName: dataItem[0].name,
            fromValue : dataItem[1].value,
            toName: dataItem[1].name,
            coords: [fromCoord, toCoord]
          });
        }
      }
      return res;
    };
    const color = ['#a6c84c', '#ffa022', '#46bee9','#ff3399','#D15FEE'];
    const series = [];
    [['增城区', ZCData], ['南沙区', NSData], ['海珠区', HZData],['从化区', CHData],['花都区', HDData]].forEach(function (item, i) {
      series.push(
        {
          name: item[0],
          type: 'lines',
          zlevel: 1,
          effect: {
            show : true,
            period : 6,
            trailLength : 0.7,
            color : '#fff',
            symbolSize : 3,
            shadowBlur : 4.4
          },
          lineStyle: {
            color: color[i],
            width: 0,
            curveness: 0.2
          },
          data: convertData_gz(item[1])
        },
        {
          name: item[0],
          type: 'lines',
          zlevel: 2,
          symbol: ['none', 'arrow'],
          symbolSize: 10,
          effect: {
            show: true,
            period: 6,
            trailLength: 0,
            //symbol: planePath_gz,
            symbolSize: 6
          },
          lineStyle: {
            color: color[i],
            width: 1,
            opacity: 0.5,
            curveness: 0.2
          },
          data: convertData_gz(item[1])
        },
        {
          name: item[0],
          type: 'effectScatter',
          zlevel: 2,
          rippleEffect: {
            brushType: 'stroke'
          },
          label: {
            show: (i == 0 ? true : false),
            position: 'right',
            formatter: '{b}'
          },
          symbolSize: function (val) {
            return val[2] / 10;
          },
          itemStyle: {
            color: color[i]
          },
          data: item[1].map(function (dataItem) {
            return {
              name: dataItem[1].name,
              value: GZ_DATA_GEO_CoordMap[dataItem[1].name].concat([dataItem[1].value])
            };
          })
        });
    });

    const option = {
      tooltip: {
        trigger: 'item',
        formatter: function (params) {
          if (params.data.fromName) {
            return params.data.fromName + " > " + params.data.toName + " <br/>流量数 : " + params.data.fromValue;
          }else{
            return params.name + "<br/>流向广州人数：" + params.value[2];
          }
        }
      },
      legend: {
        orient: 'vertical',
        top:'5%',
        left: 'right',
        data:['增城区', '南沙区', '海珠区','从化区','花都区'],
        textStyle: {
          color: '#fff'
        },
        selectedMode: 'mutipla',
        bottom:'50%'
      },
      visualMap: {
        min: 0,
        max: 100,
        calculable: true,
        inRange: {
          color: ['#50a3ba', '#eac736', '#d94e5d']
        },
        textStyle: {
          color: '#fff'
        },
        bottom:"10%"
      },
      series : series
    };

    initChat(map, option);

    function resize(target) {}

    return {
      resize,
    }
  }

  useEffect(() => {
    const { resize } = init();

    return () => {
    };
  }, []);

  return (
    <div className="live-wrap">
      <div ref={container} className="map-content" />
    </div>
  );
}