北京市公交线路

一个简单的示例

结果

Loading...

实时编辑器

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

  const data = useBaseUrl('/json/lines-bus.json');

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

    chart.appendTo(map);
  }

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

    fetch(data).then(res => res.json()).then(rawData => {
      const hStep = 300 / (rawData.length - 1);
        const busLines = rawData.map((busLine, idx) => {
          let prevPt = [];
          const points = [];
          for (let i = 0; i < busLine.length; i += 2) {
            let pt = [busLine[i], busLine[i + 1]];
            if (i > 0 && prevPt.length > 1) {
              pt = [prevPt[0] + pt[0], prevPt[1] + pt[1]];
            }
            prevPt = pt;

            points.push([pt[0] / 1e4, pt[1] / 1e4]);
          }
          return {
            coords: points,
            lineStyle: {
              normal: {
                color: echarts.color.modifyHSL('#5A94DF', Math.round(hStep * idx)),
              },
            },
          };
        });
        const option = {
          series: [
            {
              type: 'lines',
              polyline: true,
              data: busLines,
              lineStyle: {
                normal: {
                  width: 0,
                },
              },
              effect: {
                constantSpeed: 20,
                show: true,
                trailLength: 0.5,
                symbolSize: 1.5,
              },
              zlevel: 1,
            },
          ],
        };

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