p90524618
/
antv-l7
mirror of https://gitee.com/antv-l7/antv-l7
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

docs(site): add site district example

This commit is contained in:
thinkinggis 2020-05-12 17:59:42 +08:00
parent d7ede28c27 0233855ab4
commit 8e5224113c
28 changed files with 1124 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
docs/api/map.en.md
View File

@ -12,11 +12,10 @@ L7 在内部解决了不同地图底图之间差异，同时 L7 层面统一管
### 引入 Map ### 引入 Map
```javascropt ```javascript
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMap } from '@antv/l7-maps'; import { Mapbox } from '@antv/l7-maps';
import { Mapbox } from '@antv/l7-maps';
``` ```
### 实例化 ### 实例化

7
docs/api/map.zh.md
View File

@ -12,11 +12,10 @@ L7 在内部解决了不同地图底图之间差异，同时 L7 层面统一管
### 引入 Map ### 引入 Map
```javascropt ```javascript
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMap } from '@antv/l7-maps'; import { Mapbox } from '@antv/l7-maps';
import { Mapbox } from '@antv/l7-maps';
``` ```
### 实例化 ### 实例化

8
docs/tutorial/map/blankmap.en.md
View File

@ -26,11 +26,3 @@ const scene = new Scene({
离线，无token使用 离线，无token使用
<iframe
src="https://codesandbox.io/embed/worldmap-tv6uv?fontsize=14&hidenavigation=1&theme=dark"
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
title="worldmap"
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
></iframe>

10
docs/tutorial/map/blankmap.zh.md
View File

@ -24,12 +24,4 @@ const scene = new Scene({
``` ```
如果你只是需要做个中国地图，世界地图这样填充图，建议你采用这样的模式 如果你只是需要做个中国地图，世界地图这样填充图，建议你采用这样的模式
离线，无token使用 离线，无token使用
<iframe
src="https://codesandbox.io/embed/worldmap-tv6uv?fontsize=14&hidenavigation=1&theme=dark"
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
title="worldmap"
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
></iframe>

0
examples/district/basic/API.en.md Normal file
View File

8
examples/district/basic/API.zh.md Normal file
View File

@ -0,0 +1,8 @@
---
title: API
---
地图行政区划组件，支持世界地图，中国地图省市县三级，支持中国地图省市县上钻下取。
## 配置项
## 方法

215
examples/district/basic/demo/china_map.js Normal file
View File

@ -0,0 +1,215 @@
import { Scene } from '@antv/l7';
import { CountryLayer } from '@antv/l7-district';
import { Mapbox } from '@antv/l7-maps';
const ProvinceData = [
{
name: '云南省',
code: 530000,
value: 17881.12
},
{
name: '黑龙江省',
code: 230000,
value: 16361.62
},
{
name: '贵州省',
code: 520000,
value: 14806.45
},
{
name: '北京市',
code: 110000,
value: 30319.98
},
{
name: '河北省',
code: 130000,
value: 36010.27
},
{
name: '山西省',
code: 140000,
value: 16818.11
},
{
name: '吉林省',
code: 220000,
value: 15074
},
{
name: '宁夏回族自治区',
code: 640000,
value: 3705.18
},
{
name: '辽宁省',
code: 210000,
value: 25315.35
},
{
name: '海南省',
code: 460000,
value: 4832.05
},
{
name: '内蒙古自治区',
code: 150000,
value: 17289.22
},
{
name: '天津市',
code: 120000,
value: 18809.64
},
{
name: '新疆维吾尔自治区',
code: 650000,
value: 12199.08
},
{
name: '上海市',
code: 310000,
value: 32679.87
},
{
name: '陕西省',
code: 610000,
value: 24438.32
},
{
name: '甘肃省',
code: 620000,
value: 8246.07
},
{
name: '安徽省',
code: 340000,
value: 30006.82
},
{
name: '香港特别行政区',
code: 810000,
value: 0
},
{
name: '广东省',
code: 440000,
value: 97277.77
},
{
name: '河南省',
code: 410000,
value: 48055.86
},
{
name: '湖南省',
code: 430000,
value: 36425.78
},
{
name: '江西省',
code: 360000,
value: 21984.78
},
{
name: '四川省',
code: 510000,
value: 40678.13
},
{
name: '广西壮族自治区',
code: 450000,
value: 20353.51
},
{
name: '江苏省',
code: 320000,
value: 92595.4
},
{
name: '澳门特别行政区',
code: 820000,
value: null
},
{
name: '浙江省',
code: 330000,
value: 56197.15
},
{
name: '山东省',
code: 370000,
value: 76469.67
},
{
name: '青海省',
code: 630000,
value: 2865.23
},
{
name: '重庆市',
code: 500000,
value: 20363.19
},
{
name: '福建省',
code: 350000,
value: 35804.04
},
{
name: '湖北省',
code: 420000,
value: 39366.55
},
{
name: '西藏自治区',
code: 540000,
value: 1477.63
},
{
name: '台湾省',
code: 710000,
value: null
}
];
const scene = new Scene({
id: 'map',
map: new Mapbox({
center: [ 116.2825, 39.9 ],
pitch: 0,
style: 'blank',
zoom: 3,
minZoom: 0,
maxZoom: 10
})
});
scene.on('loaded', () => {
new CountryLayer(scene, {
data: ProvinceData,
joinBy: [ 'NAME_CHN', 'name' ],
// label: {
// field: 'NAME_CHN',
// textAllowOverlap: true,
// },
depth: 1,
fill: {
field: 'value',
values: [
'#feedde',
'#fdd0a2',
'#fdae6b',
'#fd8d3c',
'#e6550d',
'#a63603'
]
},
popup: {
enable: true,
Html: props => {
return `<span>${props.NAME_CHN}:</span><span>${props.value}</span>`;
}
}
});
});

61
examples/district/basic/demo/city.js Normal file
View File

@ -0,0 +1,61 @@
import { Scene } from '@antv/l7';
import { CityLayer } from '@antv/l7-district';
import { Mapbox } from '@antv/l7-maps';
async function initMap() {
const response = await fetch(
'https://gw.alipayobjects.com/os/bmw-prod/149b599d-21ef-4c24-812c-20deaee90e20.json'
);
const provinceData = await response.json();
const data = Object.keys(provinceData).map(key => {
return {
code: key,
name: provinceData[key][0],
pop: provinceData[key][2] * 1
};
});
const scene = new Scene({
id: 'map',
map: new Mapbox({
center: [ 116.2825, 39.9 ],
pitch: 0,
style: 'blank',
zoom: 3,
minZoom: 3,
maxZoom: 10
})
});
scene.on('loaded', () => {
new CityLayer(scene, {
data,
joinBy: [ 'adcode', 'code' ],
adcode: [ '330000', '330100' ],
depth: 3,
label: {
field: 'NAME_CHN',
textAllowOverlap: false
},
fill: {
field: 'pop',
values: [
'#feedde',
'#fdd0a2',
'#fdae6b',
'#fd8d3c',
'#e6550d',
'#a63603'
]
},
popup: {
enable: true,
Html: props => {
return `<span>${props.NAME_CHN}:</span><span>${props.pop}</span>`;
}
}
});
});
}
initMap();

41
examples/district/basic/demo/county.js Normal file
View File

@ -0,0 +1,41 @@
import { Scene } from '@antv/l7';
import { CountyLayer } from '@antv/l7-district';
import { Mapbox } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new Mapbox({
center: [ 116.2825, 39.9 ],
pitch: 0,
style: 'blank',
zoom: 3,
minZoom: 3,
maxZoom: 10
})
});
scene.on('loaded', () => {
new CountyLayer(scene, {
data: [],
adcode: [ '110101', '110102', '110106' ],
depth: 3,
label: {
field: 'NAME_CHN'
},
fill: {
field: 'NAME_CHN',
values: [
'#feedde',
'#fdd0a2',
'#fdae6b',
'#fd8d3c',
'#e6550d',
'#a63603'
]
},
popup: {
enable: true,
Html: props => {
return `<span>${props.NAME_CHN}</span>`;
}
}
});
});

37
examples/district/basic/demo/drill_down.js Normal file
View File

@ -0,0 +1,37 @@
import { Scene } from '@antv/l7';
import { DrillDownLayer } from '@antv/l7-district';
import { Mapbox } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new Mapbox({
center: [ 116.2825, 39.9 ],
pitch: 0,
style: 'blank',
zoom: 3,
minZoom: 3,
maxZoom: 10
})
});
scene.on('loaded', () => {
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>`;
}
}
});
});

39
examples/district/basic/demo/meta.json Normal file
View File

@ -0,0 +1,39 @@
{
"title": {
"zh": "行政区划",
"en": "District"
},
"demos": [
{
"filename": "china_map.js",
"title": "中国地图",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*tClNQoAo5isAAAAAAAAAAABkARQnAQ"
},
{
"filename": "world_map.js",
"title": "世界地图",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*EtRFRYyGs98AAAAAAAAAAABkARQnAQ"
},
{
"filename": "province.js",
"title": "中国省级地图",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*eVVcRaCBkdYAAAAAAAAAAABkARQnAQ"
},
{
"filename": "city.js",
"title": "中国市地图",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*C_y8Tr0V8GIAAAAAAAAAAABkARQnAQ"
},
{
"filename": "county.js",
"title": "中国县地图",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*iVwLSpIf_ckAAAAAAAAAAABkARQnAQ"
},
{
"filename": "drill_down.js",
"title": "中国地图上钻下取",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*xjjARqU70xoAAAAAAAAAAABkARQnAQ"
}
]
}

59
examples/district/basic/demo/province.js Normal file
View File

@ -0,0 +1,59 @@
import { Scene } from '@antv/l7';
import { ProvinceLayer } from '@antv/l7-district';
import { Mapbox } from '@antv/l7-maps';
async function initMap() {
const response = await fetch(
'https://gw.alipayobjects.com/os/bmw-prod/149b599d-21ef-4c24-812c-20deaee90e20.json'
);
const provinceData = await response.json();
const data = Object.keys(provinceData).map(key => {
return {
code: key,
name: provinceData[key][0],
pop: provinceData[key][2] * 1
};
});
const scene = new Scene({
id: 'map',
map: new Mapbox({
center: [ 116.2825, 39.9 ],
pitch: 0,
style: 'blank',
zoom: 3,
minZoom: 3,
maxZoom: 10
})
});
scene.on('loaded', () => {
new ProvinceLayer(scene, {
data,
joinBy: [ 'adcode', 'code' ],
adcode: [ '330000' ],
depth: 3,
label: {
field: 'NAME_CHN',
textAllowOverlap: false
},
fill: {
field: 'pop',
values: [
'#feedde',
'#fdd0a2',
'#fdae6b',
'#fd8d3c',
'#e6550d',
'#a63603'
]
},
popup: {
enable: true,
Html: props => {
return `<span>${props.NAME_CHN}:</span><span>${props.pop}</span>`;
}
}
});
});
}
initMap();

42
examples/district/basic/demo/world_map.js Normal file
View File

@ -0,0 +1,42 @@
import { Scene } from '@antv/l7';
import { WorldLayer } from '@antv/l7-district';
import { Mapbox } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new Mapbox({
center: [ 116.2825, 39.9 ],
pitch: 0,
style: 'blank',
zoom: 0,
minZoom: 0,
maxZoom: 10
})
});
scene.on('loaded', () => {
new WorldLayer(scene, {
data: [],
fill: {
field: 'NAME_CHN',
values: [
'#feedde',
'#fdd0a2',
'#fdae6b',
'#fd8d3c',
'#e6550d',
'#a63603'
]
},
stroke: '#ccc',
label: {
enable: true,
textAllowOverlap: false,
field: 'Short_Name_ZH'
},
popup: {
enable: false,
Html: props => {
return `<span>${props.Short_Name_ZH}</span>`;
}
}
});
});

4
examples/district/basic/index.en.md Normal file
View File

@ -0,0 +1,4 @@
---
title: L7 District
order: 3
---

4
examples/district/basic/index.zh.md Normal file
View File

@ -0,0 +1,4 @@
---
title: 基础组件
order: 3
---

115
examples/district/react/demo/city.tsx Normal file
View File

@ -0,0 +1,115 @@
import { Scene } from '@antv/l7';
import { CityLayer } from '@antv/l7-district';
import { GaodeMap, Mapbox } from '@antv/l7-maps';
import { Cascader } from 'antd';
import * as React from 'react';
import ReactDOM from 'react-dom';
class City extends React.Component {
public state = {
options: [],
};
// @ts-ignore
private scene: Scene;
private cityLayer: CityLayer;
public componentWillUnmount() {
this.scene.destroy();
}
public async componentDidMount() {
const res = await fetch(
'https://gw.alipayobjects.com/os/bmw-prod/551e3ca6-6dad-421b-a8b4-b225e47f73ca.json',
);
const options = await res.json();
this.setState({
options,
});
const response = await fetch(
'https://gw.alipayobjects.com/os/bmw-prod/149b599d-21ef-4c24-812c-20deaee90e20.json',
);
const provinceData = await response.json();
const data = Object.keys(provinceData).map((key: string) => {
return {
code: key,
name: provinceData[key][0],
pop: provinceData[key][2] * 1,
};
});
const scene = new Scene({
id: 'map',
map: new Mapbox({
center: [116.2825, 39.9],
pitch: 0,
style: 'blank',
zoom: 3,
minZoom: 3,
maxZoom: 10,
}),
});
scene.on('loaded', () => {
this.cityLayer = new CityLayer(scene, {
data,
joinBy: ['adcode', 'code'],
adcode: ['330000', '330100'],
depth: 3,
label: {
field: 'NAME_CHN',
textAllowOverlap: false,
},
fill: {
field: 'NAME_CHN',
values: [
'#feedde',
'#fdd0a2',
'#fdae6b',
'#fd8d3c',
'#e6550d',
'#a63603',
],
},
popup: {
enable: true,
Html: (props) => {
return `<span>${props.NAME_CHN}:</span>`;
},
},
});
});
this.scene = scene;
}
public render() {
return (
<>
<Cascader
style={{
width: 200,
zIndex: 2,
position: 'absolute',
right: '10px',
top: '10px',
}}
options={this.state.options}
defaultValue={['330000', '330100']}
onChange={this.handleProvinceChange}
placeholder="Please select"
/>
<div
id="map"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
/>
</>
);
}
private handleProvinceChange = (value: string[]) => {
this.cityLayer.updateDistrict([value[1]]);
};
}
ReactDOM.render(<City />, document.getElementById('map'));

103
examples/district/react/demo/county.tsx Normal file
View File

@ -0,0 +1,103 @@
import { Scene } from '@antv/l7';
import { CountyLayer } from '@antv/l7-district';
import { GaodeMap, Mapbox } from '@antv/l7-maps';
import { Cascader } from 'antd';
import ReactDOM from 'react-dom';
import * as React from 'react';
export default class County extends React.Component {
public state = {
options: [],
};
// @ts-ignore
private scene: Scene;
private countyLayer: CountyLayer;
public componentWillUnmount() {
this.scene.destroy();
}
public async componentDidMount() {
const res = await fetch(
'https://gw.alipayobjects.com/os/bmw-prod/04de56cc-5998-4f7e-9ad3-e87e9ac5fd39.json',
);
const options = await res.json();
this.setState({
options,
});
const scene = new Scene({
id: 'map',
map: new Mapbox({
center: [116.2825, 39.9],
pitch: 0,
style: 'blank',
zoom: 3,
minZoom: 3,
maxZoom: 10,
}),
});
scene.on('loaded', () => {
this.countyLayer = new CountyLayer(scene, {
data: [],
adcode: ['110101'],
depth: 3,
label: {
field: 'NAME_CHN',
},
fill: {
field: 'NAME_CHN',
values: [
'#feedde',
'#fdd0a2',
'#fdae6b',
'#fd8d3c',
'#e6550d',
'#a63603',
],
},
popup: {
enable: true,
Html: (props) => {
return `<span>${props.NAME_CHN}</span>`;
},
},
});
});
this.scene = scene;
}
public render() {
return (
<>
<Cascader
style={{
width: 200,
zIndex: 2,
position: 'absolute',
right: '10px',
top: '10px',
}}
options={this.state.options}
defaultValue={['110000', '110100', '110101']}
onChange={this.handleProvinceChange}
placeholder="Please select"
/>
<div
id="map"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
/>
</>
);
}
private handleProvinceChange = (value: string[]) => {
this.countyLayer.updateDistrict([value[2]]);
};
}
ReactDOM.render(<County />, document.getElementById('map'));

24
examples/district/react/demo/meta.json Normal file
View File

@ -0,0 +1,24 @@
{
"title": {
"zh": "行政区划",
"en": "District"
},
"demos": [
{
"filename": "province.tsx",
"title": "省级地图切换",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*LZAZSYFf0-MAAAAAAAAAAABkARQnAQ"
},
{
"filename": "city.tsx",
"title": "市级地图切换",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*Q7-tSpvgHjcAAAAAAAAAAABkARQnAQ"
},
{
"filename": "county.tsx",
"title": "县地图切换",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*pBaIQo9D50YAAAAAAAAAAABkARQnAQ"
}
]
}

290
examples/district/react/demo/province.tsx Normal file
View File

@ -0,0 +1,290 @@
import { Scene } from '@antv/l7';
import { ProvinceLayer } from '@antv/l7-district';
import { GaodeMap, Mapbox } from '@antv/l7-maps';
import ReactDOM from 'react-dom';
import { Select } from 'antd';
import * as React from 'react';
const { Option } = Select;
const ProvinceData = [
{
NAME_CHN: '云南省',
adcode: 530000,
value: 17881.12,
},
{
NAME_CHN: '黑龙江省',
adcode: 230000,
value: 16361.62,
},
{
NAME_CHN: '贵州省',
adcode: 520000,
value: 14806.45,
},
{
NAME_CHN: '北京市',
adcode: 110000,
value: 30319.98,
},
{
NAME_CHN: '河北省',
adcode: 130000,
value: 36010.27,
},
{
NAME_CHN: '山西省',
adcode: 140000,
value: 16818.11,
},
{
NAME_CHN: '吉林省',
adcode: 220000,
value: 15074,
},
{
NAME_CHN: '宁夏回族自治区',
adcode: 640000,
value: 3705.18,
},
{
NAME_CHN: '辽宁省',
adcode: 210000,
value: 25315.35,
},
{
NAME_CHN: '海南省',
adcode: 460000,
value: 4832.05,
},
{
NAME_CHN: '内蒙古自治区',
adcode: 150000,
value: 17289.22,
},
{
NAME_CHN: '天津市',
adcode: 120000,
value: 18809.64,
},
{
NAME_CHN: '新疆维吾尔自治区',
adcode: 650000,
value: 12199.08,
},
{
NAME_CHN: '上海市',
adcode: 310000,
value: 32679.87,
},
{
NAME_CHN: '陕西省',
adcode: 610000,
value: 24438.32,
},
{
NAME_CHN: '甘肃省',
adcode: 620000,
value: 8246.07,
},
{
NAME_CHN: '安徽省',
adcode: 340000,
value: 30006.82,
},
{
NAME_CHN: '香港特别行政区',
adcode: 810000,
value: 0,
},
{
NAME_CHN: '广东省',
adcode: 440000,
value: 97277.77,
},
{
NAME_CHN: '河南省',
adcode: 410000,
value: 48055.86,
},
{
NAME_CHN: '湖南省',
adcode: 430000,
value: 36425.78,
},
{
NAME_CHN: '江西省',
adcode: 360000,
value: 21984.78,
},
{
NAME_CHN: '四川省',
adcode: 510000,
value: 40678.13,
},
{
NAME_CHN: '广西壮族自治区',
adcode: 450000,
value: 20353.51,
},
{
NAME_CHN: '江苏省',
adcode: 320000,
value: 92595.4,
},
{
NAME_CHN: '澳门特别行政区',
adcode: 820000,
value: null,
},
{
NAME_CHN: '浙江省',
adcode: 330000,
value: 56197.15,
},
{
NAME_CHN: '山东省',
adcode: 370000,
value: 76469.67,
},
{
NAME_CHN: '青海省',
adcode: 630000,
value: 2865.23,
},
{
NAME_CHN: '重庆市',
adcode: 500000,
value: 20363.19,
},
{
NAME_CHN: '福建省',
adcode: 350000,
value: 35804.04,
},
{
NAME_CHN: '湖北省',
adcode: 420000,
value: 39366.55,
},
{
NAME_CHN: '西藏自治区',
adcode: 540000,
value: 1477.63,
},
{
NAME_CHN: '台湾省',
adcode: 710000,
value: null,
},
];
class Province extends React.Component {
public state = {
province: '110000',
};
// @ts-ignore
private scene: Scene;
private provinceLayer: ProvinceLayer;
public componentWillUnmount() {
this.scene.destroy();
}
public async componentDidMount() {
const response = await fetch(
'https://gw.alipayobjects.com/os/bmw-prod/149b599d-21ef-4c24-812c-20deaee90e20.json',
);
const provinceData = await response.json();
const data = Object.keys(provinceData).map((key: string) => {
return {
code: key,
name: provinceData[key][0],
pop: provinceData[key][3],
};
});
const scene = new Scene({
id: 'map',
map: new Mapbox({
center: [116.2825, 39.9],
pitch: 0,
style: 'blank',
zoom: 3,
minZoom: 3,
maxZoom: 10,
}),
});
scene.on('loaded', () => {
const { province } = this.state;
this.provinceLayer = new ProvinceLayer(scene, {
adcode: ['230000'],
depth: 3,
label: {
field: 'NAME_CHN',
textAllowOverlap: false,
},
fill: {
field: 'NAME_CHN',
values: [
'#feedde',
'#fdd0a2',
'#fdae6b',
'#fd8d3c',
'#e6550d',
'#a63603',
],
},
popup: {
enable: true,
Html: (props) => {
return `<span>${props.NAME_CHN}</span>`;
},
},
});
});
this.scene = scene;
}
public render() {
return (
<>
<Select
defaultValue="黑龙江省"
style={{
width: 120,
zIndex: 2,
position: 'absolute',
right: '10px',
top: '10px',
}}
onChange={this.handleProvinceChange}
>
{ProvinceData.map((province, i) => {
return (
<Option key={i} value={province.adcode}>
{province.NAME_CHN}
</Option>
);
})}
</Select>
<div
id="map"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
/>
</>
);
}
private handleProvinceChange = (value: string) => {
this.setState({
province: value,
});
this.provinceLayer.updateDistrict([value]);
};
}
ReactDOM.render(<Province />, document.getElementById('map'))

4
examples/district/react/index.en.md Normal file
View File

@ -0,0 +1,4 @@
---
title: React
order: 3
---

4
examples/district/react/index.zh.md Normal file
View File

@ -0,0 +1,4 @@
---
title: React 组件
order: 3
---

2
examples/react/control/demo/control.tsx
View File

@ -1,4 +1,4 @@
import { AMapScene, Control, LineLayer } from '@antv/l7-react'; import { AMapScene, Control } from '@antv/l7-react';
import * as React from 'react'; import * as React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
const MapScene = React.memo(function Map() { const MapScene = React.memo(function Map() {

3
gatsby-browser.js
View File

@ -1,11 +1,14 @@
require('./site/css/demo.css'); require('./site/css/demo.css');
require('./packages/component/src/css/l7.css'); require('./packages/component/src/css/l7.css');
require('antd/dist/antd.css');
window.geotiff = require('geotiff'); window.geotiff = require('geotiff');
window.g2 = require('@antv/g2'); window.g2 = require('@antv/g2');
window.l7 = require('@antv/l7'); window.l7 = require('@antv/l7');
window.l7Maps = require('@antv/l7-maps'); window.l7Maps = require('@antv/l7-maps');
window.l7React = require('@antv/l7-react'); window.l7React = require('@antv/l7-react');
window.l7Draw = require('@antv/l7-draw'); window.l7Draw = require('@antv/l7-draw');
window.l7District = require('@antv/l7-district');
window.react = require('react'); window.react = require('react');
window.reactDom = require('react-dom'); window.reactDom = require('react-dom');
window.antd = require('antd');

10
gatsby-config.js
View File

@ -191,11 +191,19 @@ module.exports = {
en: 'React Demo' en: 'React Demo'
} }
}, },
{
slug: 'district',
icon: 'map',
title: {
zh: '行政区划',
en: 'L7 District'
}
},
{ {
slug: 'draw', slug: 'draw',
icon: 'map', icon: 'map',
title: { title: {
zh: '绘制 组件', zh: '绘制组件',
en: 'L7 Draw' en: 'L7 Draw'
} }
}, },

3
gatsby-node.js
View File

@ -20,6 +20,7 @@ exports.onCreateWebpackConfig = ({ getConfig }) => {
'@antv/l7-source': path.resolve(__dirname, 'packages/source/src'), '@antv/l7-source': path.resolve(__dirname, 'packages/source/src'),
'@antv/l7-utils': path.resolve(__dirname, 'packages/utils/src'), '@antv/l7-utils': path.resolve(__dirname, 'packages/utils/src'),
'@antv/l7-react': path.resolve(__dirname, 'packages/react/src'), '@antv/l7-react': path.resolve(__dirname, 'packages/react/src'),
'@antv/l7-draw': path.resolve(__dirname, 'packages/draw/src') '@antv/l7-draw': path.resolve(__dirname, 'packages/draw/src'),
'@antv/l7-district': path.resolve(__dirname, 'packages/district/src')
}; };
}; };

56
packages/district/src/layer/drillDown.ts
View File

@ -42,8 +42,9 @@ export default class DrillDownLayer {
this.countryLayer.fillLayer.on('click', (e: any) => { this.countryLayer.fillLayer.on('click', (e: any) => {
this.countryLayer.hide(); this.countryLayer.hide();
// 更新市级行政区划 // 更新市级行政区划
this.provinceLayer.updateDistrict([e.feature.properties.adcode]); // this.provinceLayer.updateDistrict([e.feature.properties.adcode]);
this.drillState = 'city'; // this.drillState = 'city';
this.drillDown(e.feature.properties.adcode);
}); });
} }
@ -52,14 +53,16 @@ export default class DrillDownLayer {
this.drillUp(); this.drillUp();
}); });
this.provinceLayer.fillLayer.on('click', (e: any) => { this.provinceLayer.fillLayer.on('click', (e: any) => {
this.provinceLayer.hide(); // this.provinceLayer.hide();
let adcode = e.feature.properties.adcode.toFixed(0); // const adcode = e.feature.properties.adcode.toFixed(0);
if (adcode.substr(2, 2) === '00') { this.drillDown(e.feature.properties.adcode);
adcode = adcode.substr(0, 2) + '0100'; // if (adcode.substr(2, 2) === '00') {
} // adcode = adcode.substr(0, 2) + '0100';
// 更新县级行政区划 // }
this.cityLayer.updateDistrict([adcode]); // // 更新县级行政区划
this.drillState = 'county'; // this.cityLayer.updateDistrict([adcode]);
// this.drillState = 'county';
// this.showCityView(adcode);
}); });
} }
@ -75,15 +78,30 @@ export default class DrillDownLayer {
this.cityLayer.destroy(); this.cityLayer.destroy();
} }
public showProvinceView() { public showProvinceView(
adcode: adcodeType,
newData: Array<{ [key: string]: any }> = [],
joinByField?: [string, string],
) {
this.provinceLayer.show(); this.provinceLayer.show();
this.provinceLayer.updateDistrict(adcode, newData, joinByField);
this.provinceLayer.fillLayer.fitBounds(); this.provinceLayer.fillLayer.fitBounds();
this.cityLayer.hide(); this.cityLayer.hide();
this.drillState = 'city'; this.drillState = 'city';
} }
public showCityView() { public showCityView(
this.countryLayer.show(); code: adcodeType,
this.countryLayer.fillLayer.fitBounds(); newData: Array<{ [key: string]: any }> = [],
joinByField?: [string, string],
) {
this.cityLayer.show();
let adcode = `${code}`;
if (adcode.substr(2, 2) === '00') {
adcode = adcode.substr(0, 2) + '0100';
}
// 更新县级行政区划
this.cityLayer.updateDistrict(adcode, newData, joinByField);
this.cityLayer.fillLayer.fitBounds();
this.provinceLayer.hide(); this.provinceLayer.hide();
this.drillState = 'county'; this.drillState = 'county';
} }
@ -107,13 +125,17 @@ export default class DrillDownLayer {
break; break;
} }
} }
public DrillDown(adcode: adcodeType, data: any) { public drillDown(
adcode: adcodeType,
newData: Array<{ [key: string]: any }> = [],
joinByField?: [string, string],
) {
switch (this.drillState) { switch (this.drillState) {
case 'province': case 'province':
this.showProvinceView(); this.showProvinceView(adcode);
break; break;
case 'city': case 'city':
this.showCityView(); this.showCityView(adcode);
break; break;
} }
} }

13
packages/district/src/layer/world.ts
View File

@ -74,7 +74,18 @@ export default class WorldLayer extends BaseLayer {
zIndex: zIndex + 1, zIndex: zIndex + 1,
}) })
.source(boundaries) .source(boundaries)
.size(0.6) // .size(0.6)
.size('type', (v: string) => {
if (v === '0') {
return chinaNationalWidth; // 中国国界线
} else if (v === '2' || v === '9') {
return coastlineWidth; // 中国海岸线
} else if (v === '7') {
return nationalWidth; // 国外国界
} else {
return nationalWidth;
}
})
.color('type', (v: string) => { .color('type', (v: string) => {
if (v === '0') { if (v === '0') {
return chinaNationalStroke; // 中国国界线 return chinaNationalStroke; // 中国国界线

2
stories/District/Layer/world.tsx
View File

@ -39,7 +39,7 @@ export default class Country extends React.Component {
}, },
stroke: '#ccc', stroke: '#ccc',
label: { label: {
enable: false, enable: true,
textAllowOverlap: false, textAllowOverlap: false,
field: 'Short_Name_ZH', field: 'Short_Name_ZH',
}, },