From b8ef7fb5658178b28555d6f425992c6a3e32ea4b Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Fri, 8 May 2020 10:31:57 +0800 Subject: [PATCH] feat(district): add drilldown layer --- packages/district/src/config.ts | 2 +- packages/district/src/index.ts | 2 + packages/district/src/layer/baseLayer.ts | 4 +- packages/district/src/layer/city.ts | 4 +- packages/district/src/layer/country.ts | 2 +- packages/district/src/layer/county.ts | 4 +- packages/district/src/layer/drillDown.ts | 25 ++++++++ packages/district/src/layer/province.ts | 30 +++++++++- stories/District/Layer/drillDown.tsx | 73 ++++++++++++++++++++++++ stories/District/district.stories.tsx | 2 + 10 files changed, 138 insertions(+), 10 deletions(-) create mode 100644 packages/district/src/layer/drillDown.ts create mode 100644 stories/District/Layer/drillDown.tsx diff --git a/packages/district/src/config.ts b/packages/district/src/config.ts index 1c139d4974..ab98ccfbdd 100644 --- a/packages/district/src/config.ts +++ b/packages/district/src/config.ts @@ -7,7 +7,7 @@ let DataConfig: { [key: string]: any } = { url: '//gw.alipayobjects.com/os/bmw-prod/21bdf832-1dfc-4cae-92d1-aa8d156df40f.bin', }, - provinceLine: { + line: { type: 'pbf', url: '//gw.alipayobjects.com/os/bmw-prod/76914518-e04c-42c9-8c4b-1ae71aabb024.bin', diff --git a/packages/district/src/index.ts b/packages/district/src/index.ts index 8a064f0db9..1f1921aa38 100644 --- a/packages/district/src/index.ts +++ b/packages/district/src/index.ts @@ -2,6 +2,7 @@ import { setDataConfig } from './config'; import CityLayer from './layer/city'; import CountryLayer from './layer/country'; import CountyLayer from './layer/county'; +import DrillDownLayer from './layer/drillDown'; import ProvinceLayer from './layer/province'; import WorldLayer from './layer/world'; export { @@ -10,5 +11,6 @@ export { ProvinceLayer, CityLayer, CountyLayer, + DrillDownLayer, setDataConfig, }; diff --git a/packages/district/src/layer/baseLayer.ts b/packages/district/src/layer/baseLayer.ts index 362f524324..b5436bb45a 100644 --- a/packages/district/src/layer/baseLayer.ts +++ b/packages/district/src/layer/baseLayer.ts @@ -26,7 +26,7 @@ export default class BaseLayer { constructor(scene: Scene, option: Partial = {}) { this.scene = scene; - this.options = merge(this.getdefaultOption(), option); + this.options = merge(this.getDefaultOption(), option); } public destroy() { @@ -49,7 +49,7 @@ export default class BaseLayer { return (await fetch(data.url)).json(); } } - protected getdefaultOption(): IDistrictLayerOption { + protected getDefaultOption(): IDistrictLayerOption { return { zIndex: 0, depth: 1, diff --git a/packages/district/src/layer/city.ts b/packages/district/src/layer/city.ts index a2b0f04aa6..b67b54e6bd 100644 --- a/packages/district/src/layer/city.ts +++ b/packages/district/src/layer/city.ts @@ -16,8 +16,8 @@ export interface IProvinceLayerOption extends IDistrictLayerOption { adcode: string[]; } export default class CityLayer extends ProvinceLayer { - protected getdefaultOption(): IProvinceLayerOption { - const config = super.getdefaultOption(); + protected getDefaultOption(): IProvinceLayerOption { + const config = super.getDefaultOption(); return merge({}, config, { adcode: ['110000'], depth: 3, diff --git a/packages/district/src/layer/country.ts b/packages/district/src/layer/country.ts index b110554813..9038959623 100644 --- a/packages/district/src/layer/country.ts +++ b/packages/district/src/layer/country.ts @@ -139,7 +139,7 @@ export default class CountryLayer extends BaseLayer { this.scene.addLayer(lineLayer2); this.layers.push(lineLayer, lineLayer2); } - // 升级边界 + // 省级边界 private async addCityBorder(cfg: any) { const border1 = await this.fetchData(cfg); const { cityStroke, cityStrokeWidth } = this.options; diff --git a/packages/district/src/layer/county.ts b/packages/district/src/layer/county.ts index 52a4e684b2..77ca68db7c 100644 --- a/packages/district/src/layer/county.ts +++ b/packages/district/src/layer/county.ts @@ -8,8 +8,8 @@ export interface IProvinceLayerOption extends IDistrictLayerOption { adcode: string[]; } export default class CityLayer extends ProvinceLayer { - protected getdefaultOption(): IProvinceLayerOption { - const config = super.getdefaultOption(); + protected getDefaultOption(): IProvinceLayerOption { + const config = super.getDefaultOption(); return merge({}, config, { adcode: ['110100'], depth: 3, diff --git a/packages/district/src/layer/drillDown.ts b/packages/district/src/layer/drillDown.ts new file mode 100644 index 0000000000..c627898406 --- /dev/null +++ b/packages/district/src/layer/drillDown.ts @@ -0,0 +1,25 @@ +import { Scene } from '@antv/l7'; +import CityLayer from './city'; +import CountryLayer from './country'; +import { IDistrictLayerOption } from './interface'; +import ProvinceLayer from './province'; + +export default class DrillDownLayer { + private provinceLayer: ProvinceLayer; + private cityLayer: CityLayer; + private countryLayer: CountryLayer; + constructor(scene: Scene, option: Partial) { + this.countryLayer = new CountryLayer(scene, option); + this.provinceLayer = new ProvinceLayer(scene); + } + public getDefaultOption() { + return { + province: {}, + city: {}, + county: {}, + }; + } + public addProvinceEvent() { + return 'event'; + } +} diff --git a/packages/district/src/layer/province.ts b/packages/district/src/layer/province.ts index 12cca4fd2a..d3ad2cf0f8 100644 --- a/packages/district/src/layer/province.ts +++ b/packages/district/src/layer/province.ts @@ -26,12 +26,17 @@ export default class ProvinceLayer extends BaseLayer { } // 通过adcode 更新 public updateDistrict(adcode: adcodeType) { + if (!adcode && Array.isArray(adcode) && adcode.length === 0) { + this.hide(); + return; + } const fillData = this.filterData(this.fillData, adcode); const lineData = this.filterData(this.lineData, adcode); const labelData = this.filterLabelData(this.labelData, adcode); this.fillLayer.setData(fillData); this.lineLayer.setData(lineData); this.labelLayer.setData(labelData); + this.show(); } // 更新渲染数据 @@ -40,11 +45,32 @@ export default class ProvinceLayer extends BaseLayer { return 'update data'; } - protected getdefaultOption(): IProvinceLayerOption { - const config = super.getdefaultOption(); + protected getDefaultOption(): IProvinceLayerOption { + const config = super.getDefaultOption(); return merge({}, config, { adcode: ['110000'], depth: 2, + label: { + field: 'NAME_CHN', + textAllowOverlap: false, + }, + fill: { + field: 'NAME_CHN', + values: [ + '#feedde', + '#fdd0a2', + '#fdae6b', + '#fd8d3c', + '#e6550d', + '#a63603', + ], + }, + popup: { + enable: true, + Html: (props: any) => { + return `${props.NAME_CHN}`; + }, + }, }); } diff --git a/stories/District/Layer/drillDown.tsx b/stories/District/Layer/drillDown.tsx new file mode 100644 index 0000000000..068a11426a --- /dev/null +++ b/stories/District/Layer/drillDown.tsx @@ -0,0 +1,73 @@ +import { Scene } from '@antv/l7'; +import { DrillDownLayer } from '@antv/l7-district'; +import { GaodeMap, Mapbox } from '@antv/l7-maps'; +import { Cascader } from 'antd'; +import * as React from 'react'; + +export default class Country extends React.Component { + public state = { + options: [], + }; + // @ts-ignore + private scene: Scene; + private drillDown: DrillDownLayer; + + public componentWillUnmount() { + this.scene.destroy(); + } + + public async componentDidMount() { + const scene = new Scene({ + id: 'map', + map: new Mapbox({ + center: [116.2825, 39.9], + pitch: 0, + style: 'dark', + zoom: 3, + minZoom: 3, + maxZoom: 10, + }), + }); + scene.on('loaded', () => { + this.scene = scene; + this.drillDown = new DrillDownLayer(scene, { + data: [], + depth: 1, + fill: { + field: 'NAME_CHN', + values: [ + '#feedde', + '#fdd0a2', + '#fdae6b', + '#fd8d3c', + '#e6550d', + '#a63603', + ], + }, + popup: { + enable: true, + Html: (props) => { + return `${props.NAME_CHN}`; + }, + }, + }); + }); + } + + public render() { + return ( + <> +
+ + ); + } +} diff --git a/stories/District/district.stories.tsx b/stories/District/district.stories.tsx index b76c98693f..038f8255e2 100644 --- a/stories/District/district.stories.tsx +++ b/stories/District/district.stories.tsx @@ -7,6 +7,7 @@ import Country2 from './Layer/Country2'; import CountryCity from './Layer/country_city'; import CountryCounty from './Layer/country_county'; import County from './Layer/county'; +import DrillDown from './Layer/drillDown'; import Province from './Layer/province'; import World from './Layer/world'; @@ -18,4 +19,5 @@ storiesOf('行政区划', module) .add('中国地图附图', () => ) .add('县级地图', () => ) .add('市级地图', () => ) + .add('上钻下取', () => ) .add('省级地图', () => );