世界地图

源码
/**
 * A recreation of this demo: https://observablehq.com/@d3/world-map
 */
import { Chart, register } from '@antv/g2';
import { feature } from 'topojson-client';

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

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

chart.options({
  type: 'geoView',
  coordinate: { type: 'orthographic' },
  children: [
    {
      type: 'geoPath',
      data: { type: 'graticule10' },
      style: { stroke: '#ccc', fill: 'none' },
    },
    {
      type: 'geoPath',
      data: {
        type: 'fetch',
        value: 'https://assets.antv.antgroup.com/g2/countries-50m.json',
        transform: [{ type: 'feature', name: 'land' }],
      },
      style: { fill: 'black' },
    },
    {
      type: 'geoPath',
      data: { type: 'sphere' },
      style: { stroke: 'black', fill: 'none' },
    },
  ],
});

chart.render();
全站搜索
文档与示例输入关键词开始搜索

输入关键词,查找文档、API 与示例

↑↓选择↵打开Esc关闭