杭州热门步行路线

一个简单的示例

结果

Loading...

实时编辑器

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

  const data = useBaseUrl('/json/tracks.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: 5,
        rotation: 0,
        center: [113.53450137499999, 34.44104525],
      }),
      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(res => {
      const lines = res.map((track) => ({
        coords: track.map((seg) => seg.coord),
      }));
      const option = {
        title: {
          text: '杭州热门步行路线',
          left: 'center',
          textStyle: {
            color: '#eee',
          },
        },
        backgroundColor: 'transparent',
        series: [{
          type: 'lines',
          data: lines,
          polyline: true,
          lineStyle: {
            normal: {
              color: '#ddb926',
              opacity: 0.6,
              width: 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>
  );
}