Closed hewitt99 closed 1 year ago
预期:行政区域世界地图按照设定zoom和center展示,点击下钻后,中国、某省、某区能够autoFit
以下代码于官方案例运行:
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) }) }) });
下钻后,能够展示autoFit后的中国地图
调用zoomIn和setCenter难以达到autoFit的效果 对比图:
autoFit 属于用于定位到数据的范围,如果需要自定义范围,使用fitBounds 方法
🐛 Question description [Please make everyone to understand it]
预期:行政区域世界地图按照设定zoom和center展示,点击下钻后,中国、某省、某区能够autoFit
💻 Link to minimal reproduction
以下代码于官方案例运行:
🏞 Expected result
下钻后,能够展示autoFit后的中国地图
🚑 Any additional [like screenshots]
调用zoomIn和setCenter难以达到autoFit的效果 对比图: