湘西旅游景点客源分布图_城规所

示例

结果

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: 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 option = {
      backgroundColor: 'transparent',
      title: {
        text: '湘西旅游景点客源分布图_城规所',
        left: 'center',
        textStyle: {
          color: '#fff'
        }
      },
      legend: {
        show: false,
        orient: 'vertical',
        top: 'top',
        left: 'right',
        data: ['地点', '线路'],
        textStyle: {
          color: '#fff'
        }
      },
      series: [
        {
          name: '地点',
          type: 'effectScatter',
          zlevel: 2,
          rippleEffect: {
            brushType: 'stroke'
          },
          label: {
            emphasis: {
              show: true,
              position: 'right',
              formatter: '{b}'
            }
          },
          symbolSize: 2,
          showEffectOn: 'render',
          itemStyle: {
            color: '#46bee9'
          },
          data: data.citys
        },
        {
          name: '线路',
          type: 'lines',
          zlevel: 2,
          large: true,
          effect: {
            show: true,
            constantSpeed: 30,
            symbol: 'pin',
            symbolSize: 3,
            trailLength: 0,
          },
          lineStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0, color: '#58B3CC'
            }, {
              offset: 1, color: '#F58158'
            }], false),
            width: 1,
            opacity: 0.2,
            curveness: 0.1
          },
          data: data.moveLines
        }
      ]
    };

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