全球飞机航线

示例

结果

Loading...

实时编辑器

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

  const dataUrl = useBaseUrl('/json/flights.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());

    function getAirportCoord (idx) {
      return [data.airports[idx][3], data.airports[idx][4]];
    }

    const routes = data.routes.map(function (airline) {
      return [
        getAirportCoord(airline[1]),
        getAirportCoord(airline[2])
      ];
    });

    const option = {
      title: {
        text: '航线',
        left: 'center',
        textStyle: {
          color: '#eee'
        }
      },
      backgroundColor: 'transparent',
      tooltip: {
        formatter: function (param) {
          var route = data.routes[param.dataIndex];
          return data.airports[route[1]][1] + ' > ' + data.airports[route[2]][1];
        }
      },
      series: [{
        type: 'lines',
        data: routes,
        large: true,
        largeThreshold: 100,
        lineStyle: {
          opacity: 0.05,
          width: 0.5,
          curveness: 0.3
        },
        // 设置混合模式为叠加
        blendMode: 'lighter'
      }]
    };

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