mirror of https://gitee.com/antv-l7/antv-l7
feat(district): add drilldown layer
This commit is contained in:
parent
4f106d9e24
commit
b8ef7fb565
|
@ -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',
|
||||
|
|
|
@ -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,
|
||||
};
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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';
|
||||
}
|
||||
}
|
|
@ -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>`;
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
@ -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,
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
|
@ -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 />);
|
||||
|
|
Loading…
Reference in New Issue