antvis / L7Plot

🌍 Geospatial Visualization Chart Library
https://l7plot.antv.antgroup.com
MIT License
83 stars 23 forks source link

🤔 [QUESTION]世界地图下钻后,在国家及以下区域等级开启autoFit失败。 #282

Closed hewitt99 closed 1 year ago

hewitt99 commented 1 year ago

🐛 Question description [Please make everyone to understand it]

预期:行政区域世界地图按照设定zoom和center展示,点击下钻后,中国、某省、某区能够autoFit

💻 Link to minimal reproduction

以下代码于官方案例运行:

  import { Choropleth } from '@antv/l7plot';

fetch(`https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.2/administrative-data/area-list.json`)
  .then((response) => response.json())
  .then((list) => {
    const cdata = [
      { name: '中华人民共和国', value: 200 },
      { name: '美国', value: 250 },
      { name: '俄罗斯', value: 180 },
      { name: '日本', value: 120 },
      { name: '加拿大', value: 130 },
      { name: '澳大利亚', value: 130 },
      { name: '新加坡', value: 170 },
      { name: '巴西', value: 80 },
    ]
    const data = list
      .filter(({ level }) => level === 'province')
      .map((item) => Object.assign({}, item, { value: Math.random() * 5000 }));

    const cityData = list
      .filter(({ level }) => level === 'city')
      .map((item) => Object.assign({}, item, { value: Math.random() * 2000 }));

    const districtData = list
      .filter(({ level }) => level === 'district')
      .map((item) => Object.assign({}, item, { value: Math.random() * 1000 }));

    const cho = new Choropleth('container', {
      map: {
        type: 'map',
        // style: 'blank',
        center: [120.19382669582967, 30.258134],
        zoom: 3,
        pitch: 0,
      },
      source: {
        data: cdata,
        joinBy: {
          sourceField: 'name',
          geoField: 'name',
        },
      },
      viewLevel: {
        level: 'world',
        adcode: 'all',
      },
      autoFit: false,
      drill: {
        steps: [
          {
            level: 'country',
            source: { data: data },
          },
          {
            level: 'province',
            source: { data: cityData },
          },
          {
            level: 'city',
            source: { data: districtData },
          },
          {
            level: 'district',
            source: { data: districtData },
            // color: 'green',
            // style: { opacity: 0.5 },
          },
        ],
        triggerUp: 'unclick',
        triggerDown: 'click',
      },
      color: {
        field: 'value',
        value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
        scale: { type: 'quantize' },
      },
      style: {
        opacity: 1,
        stroke: '#ccc',
        lineWidth: 0.6,
        lineOpacity: 1,
      },
      label: {
        visible: true,
        field: 'name',
        style: {
          fill: '#000',
          opacity: 0.8,
          fontSize: 10,
          stroke: '#fff',
          strokeWidth: 1.5,
          textAllowOverlap: false,
          padding: [5, 5],
        },
      },
      state: {
        active: { stroke: 'black', lineWidth: 1 },
      },
      tooltip: {
        items: ['name', 'adcode', 'value'],
      },
      zoom: {
        position: 'bottomright',
      },
      legend: {
        position: 'bottomleft',
      },
    });
   /*
    这里的姿势是否正确
    */
        cho.on('loaded', () => {
            cho.on('drilldown', () => {
        cho.update({autoFit: true})
                console.log(cho)
            })
        })
  });

🏞 Expected result

下钻后,能够展示autoFit后的中国地图

🚑 Any additional [like screenshots]

调用zoomIn和setCenter难以达到autoFit的效果 对比图: image image

lvisei commented 1 year ago

autoFit 属于用于定位到数据的范围,如果需要自定义范围,使用fitBounds 方法