diff --git a/packages/layers/src/index.ts b/packages/layers/src/index.ts index 642c30eb34..d6b45f40cd 100644 --- a/packages/layers/src/index.ts +++ b/packages/layers/src/index.ts @@ -151,3 +151,5 @@ export { WindLayer, MaskLayer, }; + +export * from './core/interface'; diff --git a/stories/Scale/Scale.stories.tsx b/stories/Scale/Scale.stories.tsx index 77af2c7ec7..881f4b5c95 100644 --- a/stories/Scale/Scale.stories.tsx +++ b/stories/Scale/Scale.stories.tsx @@ -2,7 +2,9 @@ import { storiesOf } from '@storybook/react'; import * as React from 'react'; import Quantize from './components/Quantize'; import PointScale from './components/Point'; +import Threshold from './components/Threshold'; storiesOf('数据映射', module) .add('枚举类型', () => ) - .add('颜色范围等分', () => ); + .add('颜色范围等分', () => ) + .add('自定义范围', () => ); diff --git a/stories/Scale/components/Threshold.tsx b/stories/Scale/components/Threshold.tsx new file mode 100644 index 0000000000..7f15fec1f5 --- /dev/null +++ b/stories/Scale/components/Threshold.tsx @@ -0,0 +1,314 @@ +import { PolygonLayer, Scene, Popup } from '@antv/l7'; +import { GaodeMap } from '@antv/l7-maps'; +import * as React from 'react'; + +const list = [ + { + value: 1.0, + province_adcode: '110000', + province_adName: '北京市', + province: '北京市', + }, + { + value: 2.0, + province_adcode: '120000', + province_adName: '天津市', + province: '天津市', + }, + { + value: 3.0, + province_adcode: '130000', + province_adName: '河北省', + province: '河北省', + }, + { + value: 4.0, + province_adcode: '140000', + province_adName: '山西省', + province: '山西省', + }, + { + value: 5.0, + province_adcode: '150000', + province_adName: '内蒙古自治区', + province: '内蒙古自治区', + }, + { + value: 6.0, + province_adcode: '210000', + province_adName: '辽宁省', + province: '辽宁省', + }, + { + value: 7.0, + province_adcode: '220000', + province_adName: '吉林省', + province: '吉林省', + }, + { + value: 8.0, + province_adcode: '230000', + province_adName: '黑龙江省', + province: '黑龙江省', + }, + { + value: 9.0, + province_adcode: '310000', + province_adName: '上海市', + province: '上海市', + }, + { + value: 10.0, + province_adcode: '320000', + province_adName: '江苏省', + province: '江苏省', + }, + { + value: 11.0, + province_adcode: '330000', + province_adName: '浙江省', + province: '浙江省', + }, + { + value: 12.0, + province_adcode: '340000', + province_adName: '安徽省', + province: '安徽省', + }, + { + value: 13.0, + province_adcode: '350000', + province_adName: '福建省', + province: '福建省', + }, + { + value: 14.0, + province_adcode: '360000', + province_adName: '江西省', + province: '江西省', + }, + { + value: 15.0, + province_adcode: '370000', + province_adName: '山东省', + province: '山东省', + }, + { + value: 16.0, + province_adcode: '410000', + province_adName: '河南省', + province: '河南省', + }, + { + value: 17.0, + province_adcode: '420000', + province_adName: '湖北省', + province: '湖北省', + }, + { + value: 18.0, + province_adcode: '430000', + province_adName: '湖南省', + province: '湖南省', + }, + { + value: 19.0, + province_adcode: '440000', + province_adName: '广东省', + province: '广东省', + }, + { + value: 20.0, + province_adcode: '450000', + province_adName: '广西壮族自治区', + province: '广西壮族自治区', + }, + { + value: 21.0, + province_adcode: '460000', + province_adName: '海南省', + province: '海南省', + }, + { + value: 22.0, + province_adcode: '500000', + province_adName: '重庆市', + province: '重庆市', + }, + { + value: 23.0, + province_adcode: '510000', + province_adName: '四川省', + province: '四川省', + }, + { + value: 24.0, + province_adcode: '520000', + province_adName: '贵州省', + province: '贵州省', + }, + { + value: 25.0, + province_adcode: '530000', + province_adName: '云南省', + province: '云南省', + }, + { + value: 26.0, + province_adcode: '540000', + province_adName: '西藏自治区', + province: '西藏自治区', + }, + { + value: 27.0, + province_adcode: '610000', + province_adName: '陕西省', + province: '陕西省', + }, + { + value: 28.0, + province_adcode: '630000', + province_adName: '青海省', + province: '青海省', + }, + { + value: 29.0, + province_adcode: '640000', + province_adName: '宁夏回族自治区', + province: '宁夏回族自治区', + }, + { + value: 30.0, + province_adcode: '650000', + province_adName: '新疆维吾尔自治区', + province: '新疆维吾尔自治区', + }, + { + value: 31.0, + province_adcode: '710000', + province_adName: '台湾省', + province: '台湾省', + }, + { + value: 32.0, + province_adcode: '810000', + province_adName: '香港特别行政区', + province: '香港特别行政区', + }, + { + value: 33.0, + province_adcode: '820000', + province_adName: '澳门特别行政区', + province: '澳门特别行政区', + }, +]; + +export default class Quantize extends React.Component { + private scene: Scene; + + public componentWillUnmount() { + this.scene.destroy(); + } + + public async componentDidMount() { + const scene = new Scene({ + id: 'map', + pickBufferScale: 1.0, + map: new GaodeMap({ + style: 'light', + center: [-121.24357, 37.58264], + pitch: 0, + zoom: 6.45, + }), + }); + scene.on('loaded', () => { + fetch( + 'https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/choropleth-data/country/100000_country_province.json', + ) + .then((res) => res.json()) + .then((data) => { + const chinaPolygonLayer = new PolygonLayer({ + autoFit: true, + }) + .source(data, { + transforms: [ + { + type: 'join', + sourceField: 'province_adName', + targetField: 'name', // data 对应字段名 绑定到的地理数据 + data: list, + }, + ], + }) + .scale({ + value: { + type: 'threshold', + domain: [5, 13, 24, 40], + }, + }) + .color('value', [ + '#d7191c', + '#fdae61', + '#ffffbf', + '#abdda4', + '#2b83ba', + ]) + .shape('fill'); + + const textLayer = new PolygonLayer({ + autoFit: false, + }) + .source(data, { + transforms: [ + { + type: 'join', + sourceField: 'province_adName', + targetField: 'name', // data 对应字段名 绑定到的地理数据 + data: list, + }, + ], + }) + .size(10) + .color('#f00') + .shape('value', 'text'); + + chinaPolygonLayer.on('add', (type) => { + console.log( + 'getLegendItems: ', + chinaPolygonLayer.getLegendItems('color'), + ); + }); + + chinaPolygonLayer.on('mousemove', (e) => { + const popup = new Popup({ + offsets: [0, 0], + closeButton: false, + }) + .setLnglat(e.lngLat) + .setHTML(e.feature.properties.name + e.feature.properties.value); + scene.addPopup(popup); + }); + + scene.addLayer(chinaPolygonLayer); + scene.addLayer(textLayer); + }); + + this.scene = scene; + }); + } + + public render() { + return ( +
+ ); + } +}