diff --git a/examples/district/basic/API.zh.md b/examples/district/basic/API.zh.md index e43e583c33..c7dacba6d5 100644 --- a/examples/district/basic/API.zh.md +++ b/examples/district/basic/API.zh.md @@ -30,7 +30,6 @@ District 支持下面几种图 - ProvinceLayer 省级地图 - CityLayer 市级地图 - CountyLayer 县级地图 -- DrillDownLayer 上钻下取地图 ## 构造函数 diff --git a/examples/district/drill/demo/meta.json b/examples/district/drill/demo/meta.json index 1097c182f3..7c68a4fcd8 100644 --- a/examples/district/drill/demo/meta.json +++ b/examples/district/drill/demo/meta.json @@ -12,7 +12,7 @@ { "filename": "drill_down_bubble.js", "title": "中国地图钻取气泡图", - "screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*xjjARqU70xoAAAAAAAAAAABkARQnAQ" + "screenshot": "https://gw.alipayobjects.com/mdn/rms_b82228/afts/img/A*opUFTqjO9YgAAAAAAAAAAABkARQnAQ" } ] } diff --git a/packages/district/src/config_1.ts b/packages/district/src/config_1.ts new file mode 100644 index 0000000000..328a143b19 --- /dev/null +++ b/packages/district/src/config_1.ts @@ -0,0 +1,128 @@ +// tslint:disable-next-line:no-submodule-imports +import merge from 'lodash/merge'; +let DataConfig: { [key: string]: any } = { + world: { + fill: { + type: 'pbf', + url: + '//gw.alipayobjects.com/os/bmw-prod/d666a08d-fce1-48e2-913a-87d81772bcc9.bin', + }, + line: { + type: 'pbf', + url: + '//gw.alipayobjects.com/os/bmw-prod/62f61f5f-cca7-4137-845d-13c8f9969664.bin', + }, + label: { + type: 'pbf', + url: + '//gw.alipayobjects.com/os/bmw-prod/90c51eb3-04d7-402f-bd05-95e4bd27dd62.bin', + parser: { + type: 'geojson', + }, + }, + nationalBoundaries: { + type: 'json', + url: + '//gw.alipayobjects.com/os/bmw-prod/ee493a41-0558-4c0e-bee6-520276c4f1a8.json', + }, + }, + country: { + CHN: { + 1: { + fill: { + type: 'pbf', + url: + 'https://gw.alipayobjects.com/os/bmw-prod/dc890ed9-8b64-4fe6-bc51-5742753784fb.bin', + }, + line: { + type: 'pbf', + url: + '//gw.alipayobjects.com/os/bmw-prod/70ec087e-c48a-4b76-8825-6452f17bae7a.bin', + }, + provinceLine: { + type: 'pbf', + url: + 'https://gw.alipayobjects.com/os/bmw-prod/0024caaf-86b2-4e75-a3d1-6d2146490b67.bin', + }, + label: { + type: 'json', + url: + '//gw.alipayobjects.com/os/bmw-prod/36832a45-68f8-4b51-b006-9dec71f92a23.json', + }, + }, + 2: { + fill: { + type: 'pbf', + url: + 'https://gw.alipayobjects.com/os/bmw-prod/522c6496-c711-4581-88db-c3741cd39abd.bin', + }, + line: { + type: 'pbf', + url: + 'https://gw.alipayobjects.com/os/bmw-prod/f6a4e2b1-359b-43a6-921c-39d2088d1dab.bin', + }, + cityLine: { + type: 'pbf', + url: + '//gw.alipayobjects.com/os/bmw-prod/f6a4e2b1-359b-43a6-921c-39d2088d1dab.bin', + }, + provinceLine: { + type: 'pbf', + url: + '//gw.alipayobjects.com/os/bmw-prod/0024caaf-86b2-4e75-a3d1-6d2146490b67.bin', + }, + }, + 3: { + fill: { + type: 'pbf', + url: + '//gw.alipayobjects.com/os/bmw-prod/516b2703-d692-44e6-80dd-b3f5df0186e7.bin', + }, + line: { + type: 'pbf', + url: + '//gw.alipayobjects.com/os/bmw-prod/bc97875a-90f2-42c0-a62c-43d2efd7460d.bin', + }, + countryLine: { + type: 'pbf', + url: + '//gw.alipayobjects.com/os/bmw-prod/bc97875a-90f2-42c0-a62c-43d2efd7460d.bin', + }, + cityLine: { + type: 'pbf', + url: + '//gw.alipayobjects.com/os/bmw-prod/8bfbfe7e-bd0e-4bbe-84d8-629f4dc7abc4.bin', + }, + provinceLine: { + type: 'pbf', + url: + '//gw.alipayobjects.com/os/bmw-prod/778ad7ba-5a3f-4ed6-a94a-b8ab8acae9d6.bin', + }, + }, + nationalBoundaries: { + type: 'json', + url: + '//gw.alipayobjects.com/os/bmw-prod/ee493a41-0558-4c0e-bee6-520276c4f1a8.json', + }, + nationalBoundaries2: { + type: 'json', + url: + '//gw.alipayobjects.com/os/bmw-prod/f2189cc4-662b-4358-8573-36f0f918b7ca.json', + }, + island: { + type: 'json', + url: + '//gw.alipayobjects.com/os/bmw-prod/fe49b393-1147-4769-94ed-70471f4ff15d.json', + }, + }, + }, + province: { + 110000: '', + }, +}; + +function setDataConfig(config: any) { + DataConfig = merge(DataConfig, config); +} + +export { setDataConfig, DataConfig }; diff --git a/packages/district/src/index.ts b/packages/district/src/index.ts index 1f1921aa38..628c929fc8 100644 --- a/packages/district/src/index.ts +++ b/packages/district/src/index.ts @@ -1,4 +1,4 @@ -import { setDataConfig } from './config'; +import { setDataConfig } from './config_1'; import CityLayer from './layer/city'; import CountryLayer from './layer/country'; import CountyLayer from './layer/county'; diff --git a/packages/district/src/layer/baseLayer.ts b/packages/district/src/layer/baseLayer.ts index 790bba2bb9..5e6648ac7c 100644 --- a/packages/district/src/layer/baseLayer.ts +++ b/packages/district/src/layer/baseLayer.ts @@ -134,7 +134,7 @@ export default class BaseLayer extends EventEmitter { provinceStroke: '#f0f0f0', countyStroke: '#525252', coastlineStroke: '#4190da', - coastlineWidth: 1, + coastlineWidth: 0.6, nationalStroke: '#c994c7', nationalWidth: 0.5, chinaNationalStroke: 'gray', diff --git a/packages/district/src/layer/country.ts b/packages/district/src/layer/country.ts index 8efdae186a..87e9f0bf31 100644 --- a/packages/district/src/layer/country.ts +++ b/packages/district/src/layer/country.ts @@ -6,7 +6,7 @@ import { Scene, StyleAttrField, } from '@antv/l7'; -import { DataConfig } from '../config'; +import { DataConfig } from '../config_1'; import BaseLayer from './baseLayer'; import { IDistrictLayerOption } from './interface'; @@ -14,17 +14,8 @@ export default class CountryLayer extends BaseLayer { constructor(scene: Scene, option: Partial = {}) { super(scene, option); const { depth } = this.options; - this.loadData().then(([fillData, fillLabel]) => { - this.addFillLayer(fillData); - if (fillLabel && this.options.label?.enable) { - this.addLabelLayer( - fillLabel.filter((v: any) => { - return v.name !== '澳门'; - }), - ); - this.addMCLabel(); - } - }); + this.addProvinceFill(); + this.addProvinceLabel(); const countryConfig = DataConfig.country.CHN[depth]; this.addProvinceLine(countryConfig.provinceLine); @@ -36,6 +27,27 @@ export default class CountryLayer extends BaseLayer { this.addCountyBorder(countryConfig.countryLine); } } + protected async addProvinceFill() { + const { depth } = this.options; + const countryConfig = DataConfig.country.CHN[depth]; + const fillData = await this.fetchData(countryConfig.fill); + this.addFillLayer(fillData); + } + protected async addProvinceLabel() { + const { depth } = this.options; + const countryConfig = DataConfig.country.CHN[depth]; + const fillLabel = countryConfig.label + ? await this.fetchData(countryConfig.label) + : null; + if (fillLabel && this.options.label?.enable) { + this.addLabelLayer( + fillLabel.filter((v: any) => { + return v.name !== '澳门'; + }), + ); + this.addMCLabel(); + } + } // 国界,省界 protected async addProvinceLine(cfg: any) { const lineData = await this.fetchData(cfg); diff --git a/packages/district/src/layer/province.ts b/packages/district/src/layer/province.ts index 763c5eafb4..81fe9b72ec 100644 --- a/packages/district/src/layer/province.ts +++ b/packages/district/src/layer/province.ts @@ -8,7 +8,7 @@ import { } from '@antv/l7'; // tslint:disable-next-line: no-submodule-imports import merge from 'lodash/merge'; -import { DataConfig } from '../config'; +import { DataConfig } from '../config_1'; import BaseLayer from './baseLayer'; import { adcodeType, IDistrictLayerOption } from './interface'; diff --git a/packages/district/src/layer/world.ts b/packages/district/src/layer/world.ts index 136d38a593..c7170a0742 100644 --- a/packages/district/src/layer/world.ts +++ b/packages/district/src/layer/world.ts @@ -6,7 +6,7 @@ import { Scene, StyleAttrField, } from '@antv/l7'; -import { DataConfig } from '../config'; +import { DataConfig } from '../config_1'; import BaseLayer from './baseLayer'; import { IDistrictLayerOption } from './interface'; export default class WorldLayer extends BaseLayer { diff --git a/stories/District/district.stories.tsx b/stories/District/district.stories.tsx index 61cdaa2acb..0753cbe279 100644 --- a/stories/District/district.stories.tsx +++ b/stories/District/district.stories.tsx @@ -1,10 +1,10 @@ import { storiesOf } from '@storybook/react'; require('./../assets/css/antd.css'); import * as React from 'react'; -import ChinaBubble from './Layer/country_bubble'; import City from './Layer/city'; import Country from './Layer/Country'; import Country2 from './Layer/Country2'; +import ChinaBubble from './Layer/country_bubble'; import CountryCity from './Layer/country_city'; import CountryCounty from './Layer/country_county'; import County from './Layer/county';