g2渲染中国地图 #6298

Activity

1. pearmini commented on Jun 18, 2024

   

   pearmini

   on Jun 18, 2024

   Member

   More actions

   geoView.geoPath().data({type: 'inline', value: [...]}) 这样试试
2. Azariasa commented on Jun 19, 2024

   

   Azariasa

   on Jun 19, 2024

   Author

   More actions

   不行的呢，还是和之前一样的效果
3. pearmini commented on Jun 19, 2024

   

   pearmini

   on Jun 19, 2024

   Member

   More actions

   可以看一下这个例子哈：

   import { Chart } from '@antv/g2';
   import { feature } from 'topojson';
   
   Promise.all([
     // fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/china-provinces.geo.json')
     fetch('https://geojson.cn/api/data/china.topo.json') // t
       // fetch('https://geojson.cn/api/data/china.json')
       .then((res) => res.json()),
   ]).then((values) => {
     const [chian] = values;
     // topo 转换成 geo json
     const counties = feature(chian, chian.objects.default).features;
     const chart = new Chart({
       container: 'container',
       theme: 'classic',
       width: 1000,
       height: 1000,
     });
   
   
     const geoView = chart.geoView().coordinate({ type: 'mercator' });
   
     const nameValue = {
       新疆:100,
     }
   
     geoView
       .geoPath()
       .data(counties)
       .encode('latitude', 'latitude')
       .encode('longitude', 'longitude')
       .encode('color', (d) => nameValue[d.properties.name] || 0)
       .scale("color", { 
         relations:[[0, '#fff']]
       })
       .style("stroke", "#aaa")
       // .scale('color', {
       //   palette: 'ylGnBu',
       //   unknown: '#fff',
       // });
   
     geoView
       .text()
       .data(counties.filter((d) => d.properties.centroid))
       .encode('x', (d) => {
         const [x] = d.properties.centroid;
         return x;
       })
       .encode('y', (d) => {
         const [_, y] = d.properties.centroid;
         return y;
       })
       .encode('text', (d) => {
         const name = d.properties.name;
         console.log('name', name);
         return d.properties.name;
       })
       // .style('color', 'black')
       .style('fontSize', 12)
       .style('textAlign', 'center')
       .style("fill", d => (nameValue[d.properties.name] || 0) === 0 ? 'black':"white")
       .style('opacity', 1);
   
     geoView.legend(false);
   
     chart.render();
   });
4. Azariasa commented on Jun 20, 2024

   

   Azariasa

   on Jun 20, 2024

   Author

   More actions

   可以了，谢谢，我使用的是你提供的topojson数据转换后的geojson，但是从阿里云可视化平台下载的geojson数据就不可以，不知道什么原因
5. pearmini commented on Jun 21, 2024

   

   pearmini

   on Jun 21, 2024

   Member

   More actions

   @Azariasa 因为没有看见你的完整的代码，所以我暂时也不知道为啥，不过你可以比较一下你下载的数据和通过 topojson 转换而来的数据。
6. antvis

   locked and limited conversation to collaborators on Jun 21, 2024
7. pearmini

   converted this issue into a discussion #6309 on Jun 21, 2024