antvis / antvis/G2

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

Open
#4,928 0 comments 0 reactions 0 assignees View on GitHub
OSCP v5
Dominant language
TypeScript
Stars
12.6k
Forks
1.7k
PR merge metrics
No merged PRs in 30d

Description

### AntV Open Source Contribution Plan(可选)

- [X] 我同意将这个 Issue 参与 OSCP 计划

### Issue 类型

初级任务

### 任务介绍

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

```js
/**
* 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();
```

![image](https://user-images.githubusercontent.com/49330279/235103275-ebd2b35e-cfd2-4d57-a42f-88de47641b2c.png)

### 参考说明

- 没有 normalize 远程数据。

Contributor guide

Open the contributing guide

Research direction

Start by running the supplied G2 example with the three remote GeoJSON sources and inspect the geoView data-loading and normalization path. Done means the borough, centroid, and tube-line layers all render together without the remote-data error.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
data-visualization
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.