feat(district): add drilldown layer

This commit is contained in:
thinkinggis 2020-05-08 10:31:57 +08:00
parent 4f106d9e24
commit b8ef7fb565
10 changed files with 138 additions and 10 deletions

View File

@ -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',

View File

@ -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,
};

View File

@ -26,7 +26,7 @@ export default class BaseLayer {
constructor(scene: Scene, option: Partial<IDistrictLayerOption> = {}) {
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,

View File

@ -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,

View File

@ -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;

View File

@ -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,

View File

@ -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<IDistrictLayerOption>) {
this.countryLayer = new CountryLayer(scene, option);
this.provinceLayer = new ProvinceLayer(scene);
}
public getDefaultOption() {
return {
province: {},
city: {},
county: {},
};
}
public addProvinceEvent() {
return 'event';
}
}

View File

@ -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 `<span>${props.NAME_CHN}</span>`;
},
},
});
}

View File

@ -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 `<span>${props.NAME_CHN}</span>`;
},
},
});
});
}
public render() {
return (
<>
<div
id="map"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
/>
</>
);
}
}

View File

@ -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('中国地图附图', () => <Country2 />)
.add('县级地图', () => <County />)
.add('市级地图', () => <City />)
.add('上钻下取', () => <DrillDown />)
.add('省级地图', () => <Province />);