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

docs: 完善官网案例

This commit is contained in:
shihui 2022-01-14 18:47:40 +08:00
parent 4896bb66c6
commit b6eb0c5c3e
38 changed files with 0 additions and 1861 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
examples/district/basic/API.en.md
View File

@ -1,4 +0,0 @@
---
title: API
---
`markdown:docs/api/district/baselayer.zh.md`

5
examples/district/basic/API.zh.md
View File

@ -1,5 +0,0 @@
---
title: API
---
`markdown:docs/api/district/baselayer.zh.md`

92
examples/district/basic/demo/attach_map.js
View File

@ -1,92 +0,0 @@
import { Scene } from '@antv/l7';
import { CountryLayer } from '@antv/l7-district';
import { Mapbox } from '@antv/l7-maps';
const colors = [ '#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70' ];
const scene = new Scene({
id: 'map',
map: new Mapbox({
center: [ 116.2825, 39.9 ],
pitch: 0,
style: 'blank',
zoom: 3,
minZoom: 0,
maxZoom: 10
})
});
const attachMapContainer = document.createElement('div');
attachMapContainer.id = 'attach';
attachMapContainer.style.cssText = `position: absolute;
height: 125px;
width: 98px;
right: 50px;
bottom: 20px;
border: 1px solid #333;`;
document.getElementById('map').parentElement.append(attachMapContainer);
scene.on('loaded', () => {
new CountryLayer(scene, {
data: [],
joinBy: [ 'NAME_CHN', 'name' ],
depth: 1,
provinceStroke: '#fff',
cityStroke: '#EBCCB4',
cityStrokeWidth: 1,
label: {
enable: false
},
fill: {
color: {
field: 'NAME_CHN',
values: colors
}
},
popup: {
enable: true,
Html: props => {
return `<span>${props.NAME_CHN}</span>`;
}
}
});
});
// 添加附图，附图需要和主图保持一致
const scene2 = new Scene({
id: 'attach',
logoVisible: false,
map: new Mapbox({
center: [ 113.60540108435657, 12.833692637803168 ],
pitch: 0,
style: 'blank',
zoom: 1.93,
minZoom: 0,
maxZoom: 3,
interactive: false
})
});
scene2.on('loaded', () => {
new CountryLayer(scene2, {
data: [],
label: {
enable: false
},
popup: {
enable: false
},
autoFit: false,
depth: 1,
fill: {
color: {
field: 'NAME_CHN',
values: [
'#feedde',
'#fdd0a2',
'#fdae6b',
'#fd8d3c',
'#e6550d',
'#a63603'
]
}
}
});
});

210
examples/district/basic/demo/china_map_2.js
View File

@ -1,210 +0,0 @@
import { Scene } from '@antv/l7';
import { CountryLayer } from '@antv/l7-district';
import { Mapbox } from '@antv/l7-maps';
const colors = [ '#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70' ];
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' ],
depth: 1,
provinceStroke: '#fff',
cityStroke: '#EBCCB4',
cityStrokeWidth: 1,
fill: {
color: {
field: 'NAME_CHN',
values: colors
}
},
popup: {
enable: true,
Html: props => {
return `<span>${props.NAME_CHN}</span>`;
}
}
});
});

56
examples/district/basic/demo/city.js
View File

@ -1,56 +0,0 @@
import { Scene } from '@antv/l7';
import { CityLayer } from '@antv/l7-district';
import { Mapbox } from '@antv/l7-maps';
const colors = [ '#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70' ];
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: {
color: { field: 'pop',
values: colors
}
},
popup: {
enable: true,
Html: props => {
return `<span>${props.NAME_CHN}:</span><span>${props.pop}</span>`;
}
}
});
});
}
initMap();

37
examples/district/basic/demo/county.js
View File

@ -1,37 +0,0 @@
import { Scene } from '@antv/l7';
import { CountyLayer } from '@antv/l7-district';
import { Mapbox } from '@antv/l7-maps';
const colors = [ '#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70' ];
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: {
color: {
field: 'NAME_CHN',
values: colors
}
},
popup: {
enable: true,
Html: props => {
return `<span>${props.NAME_CHN}</span>`;
}
}
});
});

106
examples/district/basic/demo/hainan.js
View File

@ -1,106 +0,0 @@
import { Scene } from '@antv/l7';
import { ProvinceLayer, CountryLayer } from '@antv/l7-district';
import { Mapbox } from '@antv/l7-maps';
async function initMap() {
const scene = new Scene({
id: 'map',
map: new Mapbox({
center: [ 109.803, 19.347 ],
pitch: 0,
style: 'blank',
zoom: 7,
minZoom: 6,
maxZoom: 11
})
});
const attachMapContainer = document.createElement('div');
attachMapContainer.id = 'attach';
attachMapContainer.style.cssText = `position: absolute;
height: 125px;
width: 98px;
right: 50px;
bottom: 20px;
border: 1px solid #333;`;
document.getElementById('map').parentElement.append(attachMapContainer);
scene.on('loaded', () => {
new ProvinceLayer(scene, {
data: [],
geoDataLevel: 1,
autoFit: false,
joinBy: [ 'adcode', 'code' ],
adcode: [ '460000' ],
depth: 2,
stroke: '#aaa',
label: {
enable: false,
field: 'NAME_CHN',
textAllowOverlap: false
},
fill: {
color: '#A3d7FF'
},
popup: {
enable: false,
Html: props => {
return `<span>${props.NAME_CHN}:</span><span>${props.pop}</span>`;
}
}
});
});
const scene2 = new Scene({
id: 'attach',
logoVisible: false,
map: new Mapbox({
center: [ 113.60540108435657, 12.833692637803168 ],
pitch: 0,
style: 'blank',
zoom: 1.93,
// zoom: 3,
minZoom: 0,
maxZoom: 3,
interactive: false
})
});
scene2.on('loaded', () => {
new CountryLayer(scene2, {
data: [],
label: {
enable: false
},
popup: {
enable: false
},
autoFit: false,
provinceStroke: '#aaa',
depth: 1,
fill: {
color: '#A3d7FF'
}
});
new ProvinceLayer(scene2, {
data: [],
autoFit: false,
adcode: [ '460000' ],
depth: 2,
zIndex: 2,
stroke: '#aaa',
strokeWidth: 0.1,
label: {
enable: false,
field: 'NAME_CHN',
textAllowOverlap: false
},
fill: {
color: '#A3d7ff'
},
popup: {
enable: false,
Html: props => {
return `<span>${props.NAME_CHN}:</span><span>${props.pop}</span>`;
}
}
});
});
}
initMap();

43
examples/district/basic/demo/meta.json
View File

@ -1,43 +0,0 @@
{
"title": {
"zh": "行政区划",
"en": "District"
},
"demos": [
{
"filename": "china_map_2.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": "attach_map.js",
"title": "中国地图附图",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*bGX-Tbw5uVAAAAAAAAAAAABkARQnAQ"
},
{
"filename": "hainan.js",
"title": "海南省地图",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*nHOTQ61hFbYAAAAAAAAAAABkARQnAQ"
}
]
}

55
examples/district/basic/demo/province.js
View File

@ -1,55 +0,0 @@
import { Scene } from '@antv/l7';
import { ProvinceLayer } from '@antv/l7-district';
import { Mapbox } from '@antv/l7-maps';
const colors = [ '#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70' ];
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: {
color: {
field: 'pop',
values: colors
}
},
popup: {
enable: true,
Html: props => {
return `<span>${props.NAME_CHN}:</span><span>${props.pop}</span>`;
}
}
});
});
}
initMap();

44
examples/district/basic/demo/world_map.js
View File

@ -1,44 +0,0 @@
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: 5
})
});
scene.on('loaded', () => {
new WorldLayer(scene, {
data: [],
fill: {
color: {
field: 'NAME_CHN',
values: [
'#feedde',
'#fdd0a2',
'#fdae6b',
'#fd8d3c',
'#e6550d',
'#a63603'
]
}
},
stroke: '#ccc',
label: {
enable: true,
textAllowOverlap: false,
field: 'NAME_CHN'
},
popup: {
enable: false,
Html: props => {
return `<span>${props.NAME_CHN}</span>`;
}
}
});
});

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

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

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

@ -1,4 +0,0 @@
---
title: 填充图
order: 1
---

4
examples/district/bubble/API.en.md
View File

@ -1,4 +0,0 @@
---
title: API
---
`markdown:docs/api/district/baselayer.zh.md`

4
examples/district/bubble/API.zh.md
View File

@ -1,4 +0,0 @@
---
title: API
---
`markdown:docs/api/district/baselayer.zh.md`

210
examples/district/bubble/demo/china_bubble.js
View File

@ -1,210 +0,0 @@
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' ],
depth: 1,
fill: {
color: '#ccc'
},
bubble: {
enable: true,
size: {
field: 'value',
values: [ 3, 20 ]
}
},
popup: {
enable: true,
Html: props => {
return `<span>${props.NAME_CHN}:</span><span>${props.value}</span>`;
}
}
});
});

57
examples/district/bubble/demo/city.js
View File

@ -1,57 +0,0 @@
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
},
bubble: {
enable: true,
size: {
field: 'pop',
values: [ 3, 20 ]
}
},
popup: {
enable: true,
Html: props => {
return `<span>${props.NAME_CHN}:</span><span>${props.pop}</span>`;
}
}
});
});
}
initMap();

44
examples/district/bubble/demo/county.js
View File

@ -1,44 +0,0 @@
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'
},
bubble: {
enable: true,
color: {
field: 'NAME_CHN',
values: [
'#feedde',
'#fdd0a2',
'#fdae6b',
'#fd8d3c',
'#e6550d',
'#a63603'
]
}
},
popup: {
enable: true,
Html: props => {
return `<span>${props.NAME_CHN}</span>`;
}
}
});
});

33
examples/district/bubble/demo/meta.json
View File

@ -1,33 +0,0 @@
{
"title": {
"zh": "行政区划",
"en": "District"
},
"demos": [
{
"filename": "china_bubble.js",
"title": "中国地图气泡图",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_b82228/afts/img/A*U86gSZpLV54AAAAAAAAAAABkARQnAQ"
},
{
"filename": "world_map.js",
"title": "世界地图气泡",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_b82228/afts/img/A*jljdRbDWNIgAAAAAAAAAAABkARQnAQ"
},
{
"filename": "province.js",
"title": "中国省级地图气泡",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_b82228/afts/img/A*wS2QRa4kPTAAAAAAAAAAAABkARQnAQ"
},
{
"filename": "city.js",
"title": "中国市地图气泡",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_b82228/afts/img/A*usBDQ4cHxtsAAAAAAAAAAABkARQnAQ"
},
{
"filename": "county.js",
"title": "中国县地图气泡",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_b82228/afts/img/A*0p7aSJ8AXoMAAAAAAAAAAABkARQnAQ"
}
]
}

62
examples/district/bubble/demo/province.js
View File

@ -1,62 +0,0 @@
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
},
bubble: {
enable: true,
color: {
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();

45
examples/district/bubble/demo/world_map.js
View File

@ -1,45 +0,0 @@
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: [],
bubble: {
enable: true,
color: {
field: 'NAME_CHN',
values: [
'#feedde',
'#fdd0a2',
'#fdae6b',
'#fd8d3c',
'#e6550d',
'#a63603'
]
}
},
stroke: '#ccc',
label: {
enable: true,
textAllowOverlap: false,
field: 'NAME_CHN'
},
popup: {
enable: false,
Html: props => {
return `<span>${props.NAME_CHN}</span>`;
}
}
});
});

4
examples/district/bubble/index.en.md
View File

@ -1,4 +0,0 @@
---
title: Bubbled
order: 0
---

4
examples/district/bubble/index.zh.md
View File

@ -1,4 +0,0 @@
---
title: 气泡图
order: 2
---

1
examples/district/drill/API.en.md
View File

@ -1 +0,0 @@
`markdown:docs/api/district/drilldown.en.md`

3
examples/district/drill/API.zh.md
View File

@ -1,3 +0,0 @@
`markdown:docs/common/style.md`
`markdown:docs/api/district/drilldown.zh.md`

34
examples/district/drill/demo/drill_down.js
View File

@ -1,34 +0,0 @@
import { Scene } from '@antv/l7';
import { DrillDownLayer } from '@antv/l7-district';
import { Mapbox } from '@antv/l7-maps';
const colors = [ '#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70' ];
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: [],
viewStart: 'Country',
viewEnd: 'City',
fill: {
color: {
field: 'NAME_CHN',
values: colors
}
},
popup: {
enable: true,
Html: props => {
return `<span>${props.NAME_CHN}</span>`;
}
}
});
});

34
examples/district/drill/demo/drill_down_bubble.js
View File

@ -1,34 +0,0 @@
import { Scene } from '@antv/l7';
import { DrillDownLayer } from '@antv/l7-district';
import { Mapbox } from '@antv/l7-maps';
const colors = [ '#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70' ];
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,
bubble: {
enable: true,
color: {
field: 'NAME_CHN',
values: colors
}
},
popup: {
enable: true,
Html: props => {
return `<span>${props.NAME_CHN}</span>`;
}
}
});
});

37
examples/district/drill/demo/drill_down_province.js
View File

@ -1,37 +0,0 @@
import { Scene } from '@antv/l7';
import { DrillDownLayer } from '@antv/l7-district';
import { Mapbox } from '@antv/l7-maps';
const colors = [ '#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70' ];
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: [],
viewStart: 'Province',
viewEnd: 'County',
fill: {
color: {
field: 'NAME_CHN',
values: colors
}
},
city: {
adcode: [ 330000 ]
},
popup: {
enable: true,
Html: props => {
return `<span>${props.NAME_CHN}</span>`;
}
}
});
});

34
examples/district/drill/demo/drill_down_view.js
View File

@ -1,34 +0,0 @@
import { Scene } from '@antv/l7';
import { DrillDownLayer } from '@antv/l7-district';
import { GaodeMap } from '@antv/l7-maps';
const colors = [ '#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70' ];
const scene = new Scene({
id: 'map',
map: new GaodeMap({
center: [ 116.2825, 39.9 ],
pitch: 0,
style: 'blank',
zoom: 3,
minZoom: 3,
maxZoom: 10
})
});
scene.on('loaded', () => {
new DrillDownLayer(scene, {
data: [],
viewStart: 'Country',
viewEnd: 'Province',
fill: {
color: {
field: 'NAME_CHN',
values: colors
}
},
popup: {
enable: true,
Html: props => {
return `<span>${props.NAME_CHN}</span>`;
}
}
});
});

28
examples/district/drill/demo/meta.json
View File

@ -1,28 +0,0 @@
{
"title": {
"zh": "行政区划",
"en": "District"
},
"demos": [
{
"filename": "drill_down.js",
"title": "中国地图钻取",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*xjjARqU70xoAAAAAAAAAAABkARQnAQ"
},
{
"filename": "drill_down_view.js",
"title": "中国地图钻取",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*KphnSq_0C6sAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "drill_down_province.js",
"title": "省级地图钻取",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*fVHISrzrz44AAAAAAAAAAAAAARQnAQ"
},
{
"filename": "drill_down_bubble.js",
"title": "中国地图钻取气泡图",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_b82228/afts/img/A*opUFTqjO9YgAAAAAAAAAAABkARQnAQ"
}
]
}

4
examples/district/drill/index.en.md
View File

@ -1,4 +0,0 @@
---
title: Drill Down
order: 0
---

4
examples/district/drill/index.zh.md
View File

@ -1,4 +0,0 @@
---
title: 钻取地图
order: 3
---

117
examples/district/react/demo/city.tsx
View File

@ -1,117 +0,0 @@
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: {
color: {
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'));

105
examples/district/react/demo/county.tsx
View File

@ -1,105 +0,0 @@
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: {
color: {
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
View File

@ -1,24 +0,0 @@
{
"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"
}
]
}

292
examples/district/react/demo/province.tsx
View File

@ -1,292 +0,0 @@
import { Scene } from '@antv/l7';
import { ProvinceLayer } from '@antv/l7-district';
import { GaodeMap, Mapbox } from '@antv/l7-maps';
import { Select } from 'antd';
import * as React from 'react';
import ReactDOM from 'react-dom';
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 GaodeMap({
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: 1,
label: {
field: 'NAME_CHN',
textAllowOverlap: false,
},
fill: {
color: {
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
View File

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

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

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

9
gatsby-config.js
View File

@ -362,15 +362,6 @@ module.exports = {
}, },
order: 10, order: 10,
}, },
{
slug: 'district',
icon: 'map',
title: {
zh: '行政区划',
en: 'L7 District',
},
order: 11,
},
{ {
slug: 'choropleth', slug: 'choropleth',
icon: 'map', icon: 'map',