微博签到数据点亮中国-WEBGL

示例

结果

Loading...

实时编辑器

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

  const dataUrl = useBaseUrl('/json/weibo-gl.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: 5,
        rotation: 0,
        center: [113.53450137499999, 34.44104525],
      }),
      layers: [
        new TileLayer({
          source: new XYZ({
            url: 'https://{a-c}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
          }),
        }),
      ],
    });

    const data = await fetch(dataUrl).then(res => res.json());

    const weiboData = data.map((serieData) => {
      let px = serieData[0] / 1000;
      let py = serieData[1] / 1000;
      const res = [[px, py]];
      for (let i = 2; i < serieData.length; i += 2) {
        const dx = serieData[i] / 1000;
        const dy = serieData[i + 1] / 1000;
        const x = px + dx;
        const y = py + dy;
        const ptx = parseFloat(x.toFixed(2));
        const pty = parseFloat(y.toFixed(2));
        res.push([ptx, pty, 1]);
        px = x;
        py = y;
      }
      return res;
    });

    const option = {
      title: {
        text: '微博签到数据点亮中国',
        left: 'center',
        top: 'top',
        textStyle: {
          color: '#fff',
        },
      },
      tooltip: {},
      legend: {
        left: 'right',
        data: ['强', '中', '弱'],
        textStyle: {
          color: '#ccc',
        },
      },
      series: [
        {
          name: '弱',
          type: 'scatterGL',
          symbolSize: 1,
          itemStyle: {
            shadowBlur: 2,
            shadowColor: 'rgba(37, 140, 249, 0.8)',
            color: 'rgba(37, 140, 249, 0.8)',
          },
          data: weiboData[0],
        },
        {
          name: '中',
          type: 'scatterGL',
          symbolSize: 1,
          itemStyle: {
            shadowBlur: 2,
            shadowColor: 'rgba(14, 241, 242, 0.8)',
            color: 'rgba(14, 241, 242, 0.8)',
          },
          data: weiboData[1],
        },
        {
          name: '强',
          type: 'scatterGL',
          symbolSize: 1,
          itemStyle: {
            shadowBlur: 2,
            shadowColor: 'rgba(255, 255, 255, 0.8)',
            color: 'rgba(255, 255, 255, 0.8)',
          },
          data: weiboData[2],
        },
      ],
    };

    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>
  );
}