地理绘制多份远程 geoJSON 数据报错 #4928

AntV Open Source Contribution Plan（可选）

• 我同意将这个 Issue 参与 OSCP 计划

Issue 类型

初级任务

任务介绍

使得下面代码绘制出地图：

/**
 * A recreation of this demo: https://vega.github.io/vega-lite/examples/geo_layer_line_london.html
 */
import { Chart, register } from '@antv/g2';
import { feature } from 'topojson';

register('data.feature', ({ name }) => {
  return (data) => feature(data, data.objects[name]).features;
});

const chart = new Chart({
  container: 'container',
  theme: 'classic',
  autoFit: true,
});

const geoView = chart.geoView();

geoView
  .geoPath()
  .data({
    type: 'fetch',
    value: 'https://assets.antv.antgroup.com/g2/londonBoroughs.json',
    transform: [{ type: 'feature', name: 'boroughs' }],
  })
  .style('fill', 'lightgray')
  .style('stroke', 'white')
  .style('strokeWidth', 2);

geoView
  .text()
  .data({
    type: 'fetch',
    value: 'https://assets.antv.antgroup.com/g2/londonCentroids.json',
  })
  .encode('x', 'cx')
  .encode('y', 'cy')
  .encode('text', (d) => d.name.split(/\W/)[0])
  .style('fontSize', 8)
  .style('opacity', 0.6);

geoView
  .geoPath()
  .data({
    type: 'fetch',
    value: 'https://assets.antv.antgroup.com/g2/londonTubeLines.json',
    transform: [{ type: 'feature', name: 'line' }],
  })
  .encode('color', 'id')
  .encode('shape', 'hollow')
  .scale('color', {
    domain: [
      'Bakerloo',
      'Central',
      'Circle',
      'District',
      'DLR',
      'Hammersmith & City',
      'Jubilee',
      'Metropolitan',
      'Northern',
      'Piccadilly',
      'Victoria',
      'Waterloo & City',
    ],
    range: [
      'rgb(137,78,36)',
      'rgb(220,36,30)',
      'rgb(255,206,0)',
      'rgb(1,114,41)',
      'rgb(0,175,173)',
      'rgb(215,153,175)',
      'rgb(106,114,120)',
      'rgb(114,17,84)',
      'rgb(0,0,0)',
      'rgb(0,24,168)',
      'rgb(0,160,226)',
      'rgb(106,187,170)',
    ],
  });

chart.render();

参考说明

• 没有 normalize 远程数据。