mirror of https://gitee.com/antv-l7/antv-l7
docs: 完善官网案例
This commit is contained in:
shihui
parent
4896bb66c6
commit
b6eb0c5c3e
|
|
@ -1,4 +0,0 @@
|
|||
---
|
||||
title: API
|
||||
---
|
||||
`markdown:docs/api/district/baselayer.zh.md`
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
---
|
||||
title: API
|
||||
---
|
||||
`markdown:docs/api/district/baselayer.zh.md`
|
||||
|
||||
|
|
@ -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'
|
||||
]
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -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>`;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -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();
|
||||
|
|
@ -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>`;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -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();
|
||||
|
|
@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -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();
|
||||
|
|
@ -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>`;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
---
|
||||
title: L7 District
|
||||
order: 0
|
||||
---
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
---
|
||||
title: 填充图
|
||||
order: 1
|
||||
---
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
---
|
||||
title: API
|
||||
---
|
||||
`markdown:docs/api/district/baselayer.zh.md`
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
---
|
||||
title: API
|
||||
---
|
||||
`markdown:docs/api/district/baselayer.zh.md`
|
||||
|
|
@ -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>`;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -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();
|
||||
|
|
@ -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>`;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -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();
|
||||
|
|
@ -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>`;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
---
|
||||
title: Bubbled
|
||||
order: 0
|
||||
---
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
---
|
||||
title: 气泡图
|
||||
order: 2
|
||||
---
|
||||
|
|
@ -1 +0,0 @@
|
|||
`markdown:docs/api/district/drilldown.en.md`
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
`markdown:docs/common/style.md`
|
||||
|
||||
`markdown:docs/api/district/drilldown.zh.md`
|
||||
|
|
@ -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>`;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -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>`;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -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>`;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -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>`;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
---
|
||||
title: Drill Down
|
||||
order: 0
|
||||
---
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
---
|
||||
title: 钻取地图
|
||||
order: 3
|
||||
---
|
||||
|
|
@ -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'));
|
||||
|
|
@ -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'));
|
||||
|
|
@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -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'));
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
---
|
||||
title: React
|
||||
order: 3
|
||||
---
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
---
|
||||
title: React 组件
|
||||
order: 4
|
||||
---
|
||||
|
|
@ -362,15 +362,6 @@ module.exports = {
|
|||
},
|
||||
order: 10,
|
||||
},
|
||||
{
|
||||
slug: 'district',
|
||||
icon: 'map',
|
||||
title: {
|
||||
zh: '行政区划',
|
||||
en: 'L7 District',
|
||||
},
|
||||
order: 11,
|
||||
},
|
||||
{
|
||||
slug: 'choropleth',
|
||||
icon: 'map',
|
||||
|
|
|
|||
Loading…
Reference in New Issue