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

docs(district): l7Plot Choropleth for district (#935)

This commit is contained in:
lviser 2022-01-14 18:39:15 +08:00 committed by GitHub
parent 976be1bff6
commit 4896bb66c6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
29 changed files with 1489 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.en-US.md
View File

@ -89,6 +89,7 @@ scene.addLayer(pointLayer);
## 🔗 Links
- [L7Plot](https://github.com/antvis/L7Plot)
- [L7 React](https://github.com/antvis/L7-React)
- [L7 Boundary](https://github.com/antvis/L7-boundary)
- [L7 draw](https://github.com/antvis/L7-draw)

1
README.md
View File

@ -121,6 +121,7 @@ scene.addLayer(pointLayer);
## 🔗 Links
- [L7Plot](https://github.com/antvis/L7Plot)
- [L7 React](https://github.com/antvis/L7-React)
- [L7 Boundary](https://github.com/antvis/L7-boundary)
- [L7 draw](https://github.com/antvis/L7-draw)

6
docs/api/district/start.zh.md
View File

@ -3,8 +3,8 @@ title: 文档链接
order: 0
---
[旧版地图行政区划组件 L7Boundary](https://antv.vision/L7-boundary/)
旧版地图行政区划组件 - [L7Boundary](https://antv.vision/L7-boundary/)
[新版地图行政区划组件 L7Plot Choropleth](https://l7plot.antv.vision/zh/docs/api/plots/choropleth)
新版地图行政区划组件 - [L7Plot Choropleth](https://l7plot.antv.vision/zh/docs/api/plots/choropleth)
🌟 旧版本行政区划组件库不再继续维护，推荐使用 L7Plot 的行政区划图表
🌟 旧版本行政区划组件库不再继续维护，推荐使用 L7Plot 的 [Choropleth 行政区划图表](https://l7plot.antv.vision/zh/examples/gallery#category-%E8%A1%8C%E6%94%BF%E5%8C%BA%E5%9F%9F)。

35
docs/common/district/choropleth.zh.md Normal file
View File

@ -0,0 +1,35 @@
## Usage
1. 按图表方式
```js
import { Choropleth } from '@antv/l7plot';
const choropleth = new Choropleth('container', options);
```
2. 按场景方式
```js
import { Scene, Mapbox } from '@antv/l7';
import { Choropleth } from '@antv/l7plot';
const scene = new Scene({
id: 'container',
map: new Mapbox({
style: 'light',
center: [102.447303, 37.753574],
zoom: 5,
}),
});
const choropleth = new Choropleth(options);
scene.on('loaded', () => {
choropleth.addToScene(scene);
});
```
## API
Choropleth 具体 API 文档移步 [L7Plot 官网](https://l7plot.antv.vision/zh/docs/api/plots/choropleth)。

1
examples/choropleth/administrative/API.en.md Normal file
View File

@ -0,0 +1 @@
`markdown:docs/common/district/choropleth.zh.md`

1
examples/choropleth/administrative/API.zh.md Normal file
View File

@ -0,0 +1 @@
`markdown:docs/common/district/choropleth.zh.md`

163
examples/choropleth/administrative/demo/administrative-switch.tsx Normal file
View File

@ -0,0 +1,163 @@
import React, { useRef, useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Cascader } from 'antd';
import { Choropleth } from '@antv/l7plot';
function AdministrativeSwitch() {
const administrativeList = useRef([]);
const [administrativeTree, setAdministrativeTree] = useState([]);
const map = useRef<Choropleth>();
const getRandomNumber = (min = 10, max = 2000) => {
return Math.random() * (max - min) + min;
};
useEffect(() => {
fetch(
`https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/administrative-data/area-tree.json`,
)
.then((response) => response.json())
.then((data) => {
const china = data.filter(({ adcode }) => adcode === 100000);
setAdministrativeTree(china);
});
}, []);
useEffect(() => {
fetch(
`https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/administrative-data/area-list.json`,
)
.then((response) => response.json())
.then((list) => {
administrativeList.current = list;
const data = list
.filter(({ level }) => level === 'province')
.map((item) => Object.assign({}, item, { value: getRandomNumber() }));
const chinaMap = new Choropleth('mapContainer', {
map: {
type: 'mapbox',
style: 'blank',
center: [120.19382669582967, 30.258134],
zoom: 3,
pitch: 0,
},
source: {
data: data,
joinBy: {
sourceField: 'adcode',
geoField: 'adcode',
},
},
viewLevel: {
level: 'country',
adcode: '100000',
},
autoFit: true,
color: {
field: 'value',
value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
scale: { type: 'quantize' },
},
style: {
opacity: 1,
stroke: '#ccc',
lineWidth: 0.6,
lineOpacity: 1,
},
chinaBorder: {
// 国界
national: { color: '#ccc', width: 1, opacity: 1 },
// 争议
dispute: {
color: '#ccc',
width: 1,
opacity: 0.8,
dashArray: [2, 2],
},
// 海洋
coast: { color: '#ccc', width: 0.7, opacity: 0.8 },
// 港澳
hkm: { color: 'gray', width: 0.7, opacity: 0.8 },
},
label: {
visible: true,
field: 'name',
style: {
fill: '#000',
opacity: 0.8,
fontSize: 10,
stroke: '#fff',
strokeWidth: 1.5,
textAllowOverlap: false,
padding: [5, 5],
},
},
state: {
active: { stroke: 'black', lineWidth: 1 },
},
tooltip: {
items: ['name', 'adcode', 'value'],
},
zoom: {
position: 'bottomright',
},
legend: {
position: 'bottomleft',
},
});
map.current = chinaMap;
});
return () => map.current?.destroy();
}, []);
const onCascaderChange = (value, selectedOptions) => {
const currentSelected = selectedOptions[selectedOptions.length - 1];
const { adcode, level, children } = currentSelected;
if (map.current) {
const data = children
? children.map((item) => ({
adcode: item.adcode,
value: getRandomNumber(),
}))
: [{ adcode, value: getRandomNumber() }];
map.current.changeView({ adcode, level }, { source: { data } });
}
};
return (
<>
<div
id="mapContainer"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
/>
{administrativeTree.length && (
<Cascader
style={{
width: 300,
zIndex: 2,
position: 'absolute',
right: '10px',
top: '10px',
}}
changeOnSelect
allowClear={false}
fieldNames={{ label: 'name', value: 'adcode', children: 'children' }}
defaultValue={[100000]}
options={administrativeTree}
onChange={onCascaderChange}
/>
)}
</>
);
}
ReactDOM.render(<AdministrativeSwitch />, document.getElementById('map'));

70
examples/choropleth/administrative/demo/china-city.ts Normal file
View File

@ -0,0 +1,70 @@
import { Choropleth } from '@antv/l7plot';
fetch(
`https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/administrative-data/area-list.json`,
)
.then((response) => response.json())
.then((list) => {
const data = list
.filter(({ level }) => level === 'city')
.map((item) => Object.assign({}, item, { value: Math.random() * 5000 }));
new Choropleth('map', {
map: {
type: 'mapbox',
style: 'blank',
center: [120.19382669582967, 30.258134],
zoom: 3,
pitch: 0,
},
source: {
data: data,
joinBy: {
sourceField: 'adcode',
geoField: 'adcode',
},
},
viewLevel: {
level: 'country',
adcode: 100000,
granularity: 'city',
},
autoFit: true,
color: {
field: 'value',
value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
scale: { type: 'quantize' },
},
style: {
opacity: 1,
stroke: '#ccc',
lineWidth: 0.6,
lineOpacity: 1,
},
label: {
visible: true,
field: 'name',
style: {
fill: '#000',
opacity: 0.8,
fontSize: 10,
stroke: '#fff',
strokeWidth: 1.5,
textAllowOverlap: false,
padding: [5, 5],
},
},
state: {
active: { stroke: 'black', lineWidth: 1 },
},
tooltip: {
items: ['name', 'adcode', 'value'],
},
zoom: {
position: 'bottomright',
},
legend: {
position: 'bottomleft',
},
});
});

240
examples/choropleth/administrative/demo/china-map.ts Normal file
View File

@ -0,0 +1,240 @@
import { Scene, Mapbox } from '@antv/l7';
import { Choropleth } from '@antv/l7plot';
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({
style: 'blank',
center: [120.19382669582967, 30.258134],
zoom: 3,
pitch: 0,
}),
});
const choropleth = new Choropleth({
source: {
data: ProvinceData,
joinBy: {
sourceField: 'code',
geoField: 'adcode',
},
},
viewLevel: {
level: 'country',
adcode: 100000,
},
autoFit: true,
color: {
field: 'value',
value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
scale: { type: 'quantile' },
},
style: {
opacity: 1,
stroke: '#ccc',
lineWidth: 0.6,
lineOpacity: 1,
},
label: {
visible: true,
field: 'name',
style: {
fill: '#000',
opacity: 0.8,
fontSize: 10,
stroke: '#fff',
strokeWidth: 1.5,
textAllowOverlap: false,
padding: [5, 5],
},
},
state: {
active: { stroke: 'black', lineWidth: 1 },
},
tooltip: {
items: ['name', 'adcode', 'value'],
},
zoom: {
position: 'bottomright',
},
legend: {
position: 'bottomleft',
},
});
scene.on('loaded', () => {
choropleth.addToScene(scene);
});

69
examples/choropleth/administrative/demo/hangzhou-city.ts Normal file
View File

@ -0,0 +1,69 @@
import { Choropleth } from '@antv/l7plot';
fetch(
`https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/administrative-data/area-list.json`,
)
.then((response) => response.json())
.then((list) => {
const data = list
.filter(({ level, parent }) => level === 'district' && parent === 330100)
.map((item) => Object.assign({}, item, { value: Math.random() * 5000 }));
new Choropleth('map', {
map: {
type: 'mapbox',
style: 'blank',
center: [120.19382669582967, 30.258134],
zoom: 3,
pitch: 0,
},
source: {
data: data,
joinBy: {
sourceField: 'adcode',
geoField: 'adcode',
},
},
viewLevel: {
level: 'city',
adcode: 330100,
},
autoFit: true,
color: {
field: 'value',
value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
scale: { type: 'quantize' },
},
style: {
opacity: 1,
stroke: '#ccc',
lineWidth: 0.6,
lineOpacity: 1,
},
label: {
visible: true,
field: 'name',
style: {
fill: '#000',
opacity: 0.8,
fontSize: 10,
stroke: '#fff',
strokeWidth: 1.5,
textAllowOverlap: false,
padding: [5, 5],
},
},
state: {
active: { stroke: 'black', lineWidth: 1 },
},
tooltip: {
items: ['name', 'adcode', 'value'],
},
zoom: {
position: 'bottomright',
},
legend: {
position: 'bottomleft',
},
});
});

72
examples/choropleth/administrative/demo/meta.json Normal file
View File

@ -0,0 +1,72 @@
{
"title": {
"zh": "分类",
"en": "Category"
},
"demos": [
{
"filename": "world-map.ts",
"title": {
"zh": "世界地图",
"en": "World Map"
},
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/2W6xl7Y3wm/e7590fc4-f49b-43c0-ba3b-8b40a9ac3b39.png"
},
{
"filename": "china-map.ts",
"title": {
"zh": "中国地图",
"en": "China Map"
},
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/qSFaP32j8q/4428acf4-9362-4705-90c9-de950be5a177.png"
},
{
"filename": "china-city.ts",
"title": {
"zh": "中国市级地图",
"en": "China Citys Map"
},
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/GN35RftkmZ/c53bc5ab-189f-42a2-9288-7b34f616f18d.png"
},
{
"filename": "zhejiang-province.ts",
"title": {
"zh": "浙江省地图",
"en": "Zhejiang Province Map"
},
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/tX2zfzui76/821b3d1d-421c-4f09-a44e-53422db302f6.png"
},
{
"filename": "zhejiang-province-district.ts",
"title": {
"zh": "浙江省县级地图",
"en": "Zhejiang District Map"
},
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/YQU0%24nl0gh/c9a9a70d-8abc-42f6-8795-856646346326.png"
},
{
"filename": "hangzhou-city.ts",
"title": {
"zh": "杭州市地图",
"en": "Hangzhou City Map"
},
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/kagsfItG%26g/49861247-bc88-4d64-b5b1-0913c8ff55f8.png"
},
{
"filename": "xihu-district.ts",
"title": {
"zh": "西湖区地图",
"en": "Xihu District Map"
},
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/04xm5U4yvt/828e6055-f005-4dba-8936-aaf451487db9.png"
},
{
"filename": "administrative-switch.tsx",
"title": {
"zh": "行政区域切换",
"en": "Administrative Switch"
},
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/qSFaP32j8q/4428acf4-9362-4705-90c9-de950be5a177.png"
}
]
}

63
examples/choropleth/administrative/demo/world-map.ts Normal file
View File

@ -0,0 +1,63 @@
import { Choropleth } from '@antv/l7plot';
new Choropleth('map', {
map: {
type: 'mapbox',
style: 'blank',
center: [120.19382669582967, 30.258134],
zoom: 3,
pitch: 0,
},
source: {
data: [],
joinBy: {
sourceField: 'code',
geoField: 'adcode',
},
},
viewLevel: {
level: 'world',
adcode: 'all',
},
autoFit: true,
color: {
field: 'name',
value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
},
style: {
opacity: 1,
stroke: '#ccc',
lineWidth: 0.6,
lineOpacity: 1,
},
label: {
visible: true,
field: 'name',
style: {
fill: '#000',
opacity: 0.8,
fontSize: 10,
stroke: '#fff',
strokeWidth: 1.5,
textAllowOverlap: false,
padding: [5, 5],
},
},
state: {
active: true,
select: {
stroke: 'black',
lineWidth: 1.5,
lineOpacity: 0.8,
},
},
tooltip: {
items: ['name', 'adcode', 'value'],
},
zoom: {
position: 'bottomright',
},
legend: {
position: 'bottomleft',
},
});

59
examples/choropleth/administrative/demo/xihu-district.ts Normal file
View File

@ -0,0 +1,59 @@
import { Choropleth } from '@antv/l7plot';
new Choropleth('map', {
map: {
type: 'mapbox',
style: 'blank',
center: [120.19382669582967, 30.258134],
zoom: 3,
pitch: 0,
},
source: {
data: [{ adcode: 330106, value: 200 }],
joinBy: {
sourceField: 'adcode',
geoField: 'adcode',
},
},
viewLevel: {
level: 'district',
adcode: 330106,
},
autoFit: true,
color: {
field: 'value',
value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
scale: { type: 'quantize' },
},
style: {
opacity: 1,
stroke: '#ccc',
lineWidth: 0.6,
lineOpacity: 1,
},
label: {
visible: true,
field: 'name',
style: {
fill: '#000',
opacity: 0.8,
fontSize: 10,
stroke: '#fff',
strokeWidth: 1.5,
textAllowOverlap: false,
padding: [5, 5],
},
},
state: {
active: { stroke: 'black', lineWidth: 1 },
},
tooltip: {
items: ['name', 'adcode', 'value'],
},
zoom: {
position: 'bottomright',
},
legend: {
position: 'bottomleft',
},
});

70
examples/choropleth/administrative/demo/zhejiang-province-district.ts Normal file
View File

@ -0,0 +1,70 @@
import { Choropleth } from '@antv/l7plot';
fetch(
`https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/administrative-data/area-list.json`,
)
.then((response) => response.json())
.then((list) => {
const data = list
.filter(({ level }) => level === 'district')
.map((item) => Object.assign({}, item, { value: Math.random() * 5000 }));
new Choropleth('map', {
map: {
type: 'mapbox',
style: 'blank',
center: [120.19382669582967, 30.258134],
zoom: 3,
pitch: 0,
},
source: {
data: data,
joinBy: {
sourceField: 'adcode',
geoField: 'adcode',
},
},
viewLevel: {
level: 'province',
adcode: 330000,
granularity: 'district',
},
autoFit: true,
color: {
field: 'value',
value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
scale: { type: 'quantize' },
},
style: {
opacity: 1,
stroke: '#ccc',
lineWidth: 0.6,
lineOpacity: 1,
},
label: {
visible: true,
field: 'name',
style: {
fill: '#000',
opacity: 0.8,
fontSize: 10,
stroke: '#fff',
strokeWidth: 1.5,
textAllowOverlap: false,
padding: [5, 5],
},
},
state: {
active: { stroke: 'black', lineWidth: 1 },
},
tooltip: {
items: ['name', 'adcode', 'value'],
},
zoom: {
position: 'bottomright',
},
legend: {
position: 'bottomleft',
},
});
});

69
examples/choropleth/administrative/demo/zhejiang-province.ts Normal file
View File

@ -0,0 +1,69 @@
import { Choropleth } from '@antv/l7plot';
fetch(
`https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/administrative-data/area-list.json`,
)
.then((response) => response.json())
.then((list) => {
const data = list
.filter(({ level, parent }) => level === 'city' && parent === 330000)
.map((item) => Object.assign({}, item, { value: Math.random() * 5000 }));
new Choropleth('map', {
map: {
type: 'mapbox',
style: 'blank',
center: [120.19382669582967, 30.258134],
zoom: 3,
pitch: 0,
},
source: {
data: data,
joinBy: {
sourceField: 'adcode',
geoField: 'adcode',
},
},
viewLevel: {
level: 'province',
adcode: 330000,
},
autoFit: true,
color: {
field: 'value',
value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
scale: { type: 'quantize' },
},
style: {
opacity: 1,
stroke: '#ccc',
lineWidth: 0.6,
lineOpacity: 1,
},
label: {
visible: true,
field: 'name',
style: {
fill: '#000',
opacity: 0.8,
fontSize: 10,
stroke: '#fff',
strokeWidth: 1.5,
textAllowOverlap: false,
padding: [5, 5],
},
},
state: {
active: { stroke: 'black', lineWidth: 1 },
},
tooltip: {
items: ['name', 'adcode', 'value'],
},
zoom: {
position: 'bottomright',
},
legend: {
position: 'bottomleft',
},
});
});

4
examples/choropleth/administrative/index.en.md Normal file
View File

@ -0,0 +1,4 @@
---
title: Administrative Division
order: 0
---

4
examples/choropleth/administrative/index.zh.md Normal file
View File

@ -0,0 +1,4 @@
---
title: 行政区域
order: 0
---

1
examples/choropleth/drill/API.en.md Normal file
View File

@ -0,0 +1 @@
`markdown:docs/common/district/choropleth.zh.md`

1
examples/choropleth/drill/API.zh.md Normal file
View File

@ -0,0 +1 @@
`markdown:docs/common/district/choropleth.zh.md`

112
examples/choropleth/drill/demo/drill-callback.ts Normal file
View File

@ -0,0 +1,112 @@
import { Choropleth } from '@antv/l7plot';
fetch(
`https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/administrative-data/area-list.json`,
)
.then((response) => response.json())
.then((list) => {
const data = list
.filter(({ level }) => level === 'province')
.map((item) => Object.assign({}, item, { value: Math.random() * 5000 }));
const cityData = list
.filter(({ level }) => level === 'city')
.map((item) => Object.assign({}, item, { value: Math.random() * 2000 }));
const districtData = list
.filter(({ level }) => level === 'district')
.map((item) => Object.assign({}, item, { value: Math.random() * 1000 }));
new Choropleth('map', {
map: {
type: 'mapbox',
style: 'blank',
center: [120.19382669582967, 30.258134],
zoom: 3,
pitch: 0,
},
source: {
data: data,
joinBy: {
sourceField: 'adcode',
geoField: 'adcode',
},
},
viewLevel: {
level: 'country',
adcode: 100000,
},
autoFit: true,
drill: {
steps: ['province', 'city'],
triggerUp: 'unclick',
triggerDown: 'click',
onDown: (from, to, callback) => {
const { level, granularity } = to;
if (granularity === 'city') {
callback({
source: { data: cityData, joinBy: { sourceField: 'adcode' } },
});
} else if (granularity === 'district') {
callback({
source: { data: districtData, joinBy: { sourceField: 'adcode' } },
});
}
},
onUp: (from, to, callback) => {
callback();
},
},
color: {
field: 'value',
value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
scale: { type: 'quantize' },
},
style: {
opacity: 1,
stroke: '#ccc',
lineWidth: 0.6,
lineOpacity: 1,
},
chinaBorder: {
// 国界
national: { color: '#ccc', width: 1, opacity: 1 },
// 争议
dispute: {
color: '#ccc',
width: 1,
opacity: 0.8,
dashArray: [2, 2],
},
// 海洋
coast: { color: '#ccc', width: 0.7, opacity: 0.8 },
// 港澳
hkm: { color: 'gray', width: 0.7, opacity: 0.8 },
},
label: {
visible: true,
field: 'name',
style: {
fill: '#000',
opacity: 0.8,
fontSize: 10,
stroke: '#fff',
strokeWidth: 1.5,
textAllowOverlap: false,
padding: [5, 5],
},
},
state: {
active: { stroke: 'black', lineWidth: 1 },
},
tooltip: {
items: ['name', 'adcode', 'value'],
},
zoom: {
position: 'bottomright',
},
legend: {
position: 'bottomleft',
},
});
});

102
examples/choropleth/drill/demo/drill-intercept.ts Normal file
View File

@ -0,0 +1,102 @@
import { Choropleth } from '@antv/l7plot';
fetch(
`https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/administrative-data/area-list.json`,
)
.then((response) => response.json())
.then((list) => {
const data = list
.filter(({ level }) => level === 'province')
.map((item) => Object.assign({}, item, { value: Math.random() * 5000 }));
const cityData = list
.filter(({ level }) => level === 'city')
.map((item) => Object.assign({}, item, { value: Math.random() * 2000 }));
const districtData = list
.filter(({ level }) => level === 'district')
.map((item) => Object.assign({}, item, { value: Math.random() * 1000 }));
new Choropleth('map', {
map: {
type: 'mapbox',
style: 'blank',
center: [120.19382669582967, 30.258134],
zoom: 3,
pitch: 0,
},
source: {
data: data,
joinBy: {
sourceField: 'adcode',
geoField: 'adcode',
},
},
viewLevel: {
level: 'country',
adcode: 100000,
},
autoFit: true,
drill: {
steps: ['province', 'city'],
triggerUp: 'unclick',
triggerDown: 'click',
onDown: (from, to, callback) => {
const { adcode, level, granularity } = to;
// 如果是浙江省，禁止下钻
if (adcode === 330000) {
return;
}
if (granularity === 'city') {
callback({
source: { data: cityData, joinBy: { sourceField: 'adcode' } },
});
} else if (granularity === 'district') {
callback({
source: { data: districtData, joinBy: { sourceField: 'adcode' } },
});
}
},
onUp: (from, to, callback) => {
callback();
},
},
color: {
field: 'value',
value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
scale: { type: 'quantize' },
},
style: {
opacity: 1,
stroke: '#ccc',
lineWidth: 0.6,
lineOpacity: 1,
},
label: {
visible: true,
field: 'name',
style: {
fill: '#000',
opacity: 0.8,
fontSize: 10,
stroke: '#fff',
strokeWidth: 1.5,
textAllowOverlap: false,
padding: [5, 5],
},
},
state: {
active: { stroke: 'black', lineWidth: 1 },
},
tooltip: {
items: ['name', 'adcode', 'value'],
},
zoom: {
position: 'bottomright',
},
legend: {
position: 'bottomleft',
},
});
});

40
examples/choropleth/drill/demo/meta.json Normal file
View File

@ -0,0 +1,40 @@
{
"title": {
"zh": "分类",
"en": "Category"
},
"demos": [
{
"filename": "order-drill.ts",
"title": {
"zh": "省市区下钻",
"en": "Order Drill"
},
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ftd%248FdI08/zuanqu.gif"
},
{
"filename": "unorder-drill.ts",
"title": {
"zh": "跨粒度下钻",
"en": "Unorder Drill"
},
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/w4VwQsFCgy/zuanqu.gif"
},
{
"filename": "drill-callback.ts",
"title": {
"zh": "下钻回调",
"en": "Drill Callback"
},
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/kNXBgAN4%26Z/zuanqu2.gif"
},
{
"filename": "drill-intercept.ts",
"title": {
"zh": "下钻拦截",
"en": "Drill Intercept"
},
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/rftSqwzjdj/zuanqu3.gif"
}
]
}

97
examples/choropleth/drill/demo/order-drill.ts Normal file
View File

@ -0,0 +1,97 @@
import { Choropleth } from '@antv/l7plot';
fetch(
`https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/administrative-data/area-list.json`,
)
.then((response) => response.json())
.then((list) => {
const data = list
.filter(({ level }) => level === 'province')
.map((item) => Object.assign({}, item, { value: Math.random() * 5000 }));
const cityData = list
.filter(({ level }) => level === 'city')
.map((item) => Object.assign({}, item, { value: Math.random() * 2000 }));
const districtData = list
.filter(({ level }) => level === 'district')
.map((item) => Object.assign({}, item, { value: Math.random() * 1000 }));
new Choropleth('map', {
map: {
type: 'mapbox',
style: 'blank',
center: [120.19382669582967, 30.258134],
zoom: 3,
pitch: 0,
},
source: {
data: data,
joinBy: {
sourceField: 'adcode',
geoField: 'adcode',
},
},
viewLevel: {
level: 'country',
adcode: 100000,
},
autoFit: true,
drill: {
steps: [
{
level: 'province',
source: { data: cityData },
},
{
level: 'city',
source: { data: districtData },
},
{
level: 'district',
source: { data: districtData },
// color: 'green',
// style: { opacity: 0.5 },
},
],
triggerUp: 'unclick',
triggerDown: 'click',
},
color: {
field: 'value',
value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
scale: { type: 'quantize' },
},
style: {
opacity: 1,
stroke: '#ccc',
lineWidth: 0.6,
lineOpacity: 1,
},
label: {
visible: true,
field: 'name',
style: {
fill: '#000',
opacity: 0.8,
fontSize: 10,
stroke: '#fff',
strokeWidth: 1.5,
textAllowOverlap: false,
padding: [5, 5],
},
},
state: {
active: { stroke: 'black', lineWidth: 1 },
},
tooltip: {
items: ['name', 'adcode', 'value'],
},
zoom: {
position: 'bottomright',
},
legend: {
position: 'bottomleft',
},
});
});

90
examples/choropleth/drill/demo/unorder-drill.ts Normal file
View File

@ -0,0 +1,90 @@
import { Choropleth } from '@antv/l7plot';
fetch(
`https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/administrative-data/area-list.json`,
)
.then((response) => response.json())
.then((list) => {
const data = list
.filter(({ level }) => level === 'province')
.map((item) => Object.assign({}, item, { value: Math.random() * 5000 }));
const districtData = list
.filter(({ level }) => level === 'district')
.map((item) => Object.assign({}, item, { value: Math.random() * 1000 }));
new Choropleth('map', {
map: {
type: 'mapbox',
style: 'blank',
center: [120.19382669582967, 30.258134],
zoom: 3,
pitch: 0,
},
source: {
data: data,
joinBy: {
sourceField: 'adcode',
geoField: 'adcode',
},
},
viewLevel: {
level: 'country',
adcode: 100000,
},
autoFit: true,
drill: {
steps: [
{
level: 'province',
granularity: 'district',
source: { data: districtData },
},
{
level: 'district',
source: { data: districtData },
// color: 'green',
// style: { opacity: 0.5 },
},
],
triggerUp: 'unclick',
triggerDown: 'click',
},
color: {
field: 'value',
value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
scale: { type: 'quantize' },
},
style: {
opacity: 1,
stroke: '#ccc',
lineWidth: 0.6,
lineOpacity: 1,
},
label: {
visible: true,
field: 'name',
style: {
fill: '#000',
opacity: 0.8,
fontSize: 10,
stroke: '#fff',
strokeWidth: 1.5,
textAllowOverlap: false,
padding: [5, 5],
},
},
state: {
active: { stroke: 'black', lineWidth: 1 },
},
tooltip: {
items: ['name', 'adcode', 'value'],
},
zoom: {
position: 'bottomright',
},
legend: {
position: 'bottomleft',
},
});
});

4
examples/choropleth/drill/index.en.md Normal file
View File

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

4
examples/choropleth/drill/index.zh.md Normal file
View File

@ -0,0 +1,4 @@
---
title: 区域钻取
order: 1
---

2
gatsby-browser.js
View File

@ -1,4 +1,3 @@
require('./site/css/demo.css');
require('./packages/component/src/css/l7.css');
require('antd/dist/antd.less');
@ -8,6 +7,7 @@ window.l7 = require('@antv/l7');
window.l7Mini = require('@antv/l7-mini');
window.l7MiniMap = require('@antv/l7-maps/lib/map');
window.l7Maps = require('@antv/l7-maps');
window.l7plot = require('@antv/l7plot');
window.l7React = require('@antv/l7-react');
window.l7Draw = require('@antv/l7-draw');
window.l7District = require('@antv/l7-district');

206
gatsby-config.js
View File

@ -3,14 +3,15 @@ module.exports = {
{
resolve: '@antv/gatsby-theme-antv',
options: {
GATrackingId: 'UA-148148901-7'
}
}
GATrackingId: 'UA-148148901-7',
},
},
],
siteMetadata: {
title: 'L7',
isAntVSite: false,
description: 'Large-scale WebGL-powered Geospatial data visualization analysis framework',
description:
'Large-scale WebGL-powered Geospatial data visualization analysis framework',
siteUrl: 'https://l7.antv.vision',
githubUrl: 'https://github.com/antvis/L7',
showChartResize: true, // 是否在demo页展示图表视图切换
@ -20,33 +21,40 @@ module.exports = {
slug: 'docs/api',
title: {
zh: '文档',
en: 'Document'
en: 'Document',
},
redirect: 'api/l7'
redirect: 'api/l7',
},
{
slug: 'docs/tutorial',
title: {
zh: '教程',
en: 'Tutorial'
}
en: 'Tutorial',
},
},
{
slug: 'examples',
title: {
zh: '图表演示',
en: 'Examples'
}
}
en: 'Examples',
},
},
],
ecosystems: [
{
name: {
zh: 'L7 React组件',
en: 'L7React L7 For React',
zh: 'L7 React 组件',
en: 'L7 For React',
},
url: 'http://antv.vision/L7-react/',
},
{
name: {
zh: 'L7 Plot 图表',
en: 'L7Plot',
},
url: 'https://l7plot.antv.vision/',
},
{
name: {
zh: 'L7 地理围栏绘制组件库',
@ -78,26 +86,26 @@ module.exports = {
slug: 'tutorial/map',
title: {
zh: '地图',
en: 'Map'
en: 'Map',
},
order: 3
order: 3,
},
{
slug: 'tutorial/interactive',
title: {
zh: '交互',
en: 'interactive'
en: 'interactive',
},
order: 4
order: 4,
},
{
slug: 'tutorial/demo',
icon: 'map',
title: {
zh: '教程示例',
en: 'Tutorial demo'
en: 'Tutorial demo',
},
order: 5
order: 5,
},
// ****** api
@ -105,290 +113,298 @@ module.exports = {
slug: 'api/map',
title: {
zh: '地图 Map',
en: 'Map'
en: 'Map',
},
order: 1
order: 1,
},
{
slug: 'api/map/earth',
title: {
zh: '地球模式',
en: 'Earth Mode'
en: 'Earth Mode',
},
order: 3
order: 3,
},
{
slug: 'api/base',
title: {
zh: '图层 base',
en: 'Layer'
en: 'Layer',
},
order: 2
order: 2,
},
{
slug: 'api/point_layer',
title: {
zh: '点图层',
en: 'PointLayer'
en: 'PointLayer',
},
order: 3
order: 3,
},
{
slug: 'api/line_layer',
title: {
zh: '线图层',
en: 'LineLayer'
en: 'LineLayer',
},
order: 4
order: 4,
},
{
slug: 'api/polygon_layer',
title: {
zh: '面图层',
en: 'PolygonLayer'
en: 'PolygonLayer',
},
order: 5
order: 5,
},
{
slug: 'api/heatmap_layer',
title: {
zh: '热力图层',
en: 'HeatMapLayer'
en: 'HeatMapLayer',
},
order: 6
order: 6,
},
{
slug: 'api/imagelayer',
title: {
zh: '图片图层',
en: 'ImageLayer'
en: 'ImageLayer',
},
order: 7
order: 7,
},
{
slug: 'api/raster',
title: {
zh: '栅格图层',
en: 'RasterLayer'
en: 'RasterLayer',
},
order: 8
order: 8,
},
{
slug: 'api/component',
title: {
zh: '组件 Component',
en: 'Component'
en: 'Component',
},
order: 8
order: 8,
},
{
slug: 'api/renderer',
title: {
zh: '第三方引擎接入',
en: 'import other gl'
en: 'import other gl',
},
order: 8
order: 8,
},
{
slug: 'api/cityBuilding',
title: {
zh: '城市图层',
en: 'CityBuildLayer'
en: 'CityBuildLayer',
},
order: 9
order: 9,
},
{
slug: 'api/wind',
title: {
zh: '风场图层',
en: 'WindLayer'
en: 'WindLayer',
},
order: 9
order: 9,
},
{
slug: 'api/mini',
title: {
zh: '小程序',
en: 'mini'
en: 'mini',
},
order: 9
order: 9,
},
{
slug: 'api/source',
title: {
zh: '数据 Source',
en: 'Source'
en: 'Source',
},
order: 10
order: 10,
},
{
slug: 'api/district',
title: {
zh: '行政区划',
en: 'District'
en: 'District',
},
order: 11
order: 11,
},
{
slug: 'api/draw',
title: {
zh: '绘制组件',
en: 'Draw Component'
en: 'Draw Component',
},
order: 12
order: 12,
},
{
slug: 'api/react',
title: {
zh: 'React 组件',
en: 'React Component'
en: 'React Component',
},
order: 13
order: 13,
},
{
slug: 'api/mini/demos',
title: {
zh: '案例集合',
en: 'demos'
en: 'demos',
},
order: 14
}
order: 14,
},
],
examples: [
{
slug: 'gallery',
icon: 'gallery',
title: {
zh: '官方精品库',
en: 'Featured'
en: 'Featured',
},
order: 0
order: 0,
},
{
slug: 'point',
icon: 'point',
title: {
zh: '点图层',
en: 'Point Layer'
en: 'Point Layer',
},
order: 1
order: 1,
},
{
slug: 'line',
icon: 'line',
title: {
zh: '线图层',
en: 'Line Layer'
en: 'Line Layer',
},
order: 2
order: 2,
},
{
slug: 'polygon',
icon: 'polygon',
title: {
zh: '面图层',
en: 'Polygon Layer'
en: 'Polygon Layer',
},
order: 3
order: 3,
},
{
slug: 'earth',
icon: 'map',
title: {
zh: '地球模式',
en: 'Earth Mode'
en: 'Earth Mode',
},
order: 4
order: 4,
},
{
slug: 'heatmap',
icon: 'heatmap',
title: {
zh: '热力图',
en: 'HeatMap Layer'
en: 'HeatMap Layer',
},
order: 6
order: 6,
},
{
slug: 'raster',
icon: 'raster',
title: {
zh: '栅格图层',
en: 'Raster Layer'
en: 'Raster Layer',
},
order: 7
order: 7,
},
{
slug: 'wind',
icon: 'raster',
title: {
zh: '风场图层',
en: 'Wind Layer'
en: 'Wind Layer',
},
order: 7
order: 7,
},
{
slug: 'engine',
icon: 'map',
title: {
zh: '第三方引擎',
en: 'other engine'
en: 'other engine',
},
order: 8
order: 8,
},
{
slug: 'react',
icon: 'map',
title: {
zh: 'React 组件',
en: 'React Demo'
en: 'React Demo',
},
order: 9
order: 9,
},
{
slug: 'amapPlugin',
icon: 'map',
title: {
zh: '高德地图插件',
en: 'amapPlugin'
en: 'amapPlugin',
},
order: 10
order: 10,
},
{
slug: 'district',
icon: 'map',
title: {
zh: '行政区划',
en: 'L7 District'
en: 'L7 District',
},
order: 11
order: 11,
},
{
slug: 'choropleth',
icon: 'map',
title: {
zh: '行政区划 🌟',
en: 'Choropleth',
},
order: 11,
},
{
slug: 'draw',
icon: 'map',
title: {
zh: '绘制组件',
en: 'L7 Draw'
en: 'L7 Draw',
},
order: 12
order: 12,
},
{
slug: 'tutorial',
icon: 'map',
title: {
zh: '教程示例',
en: 'Tutorial demo'
}
}
en: 'Tutorial demo',
},
},
],
playground: {
container: '<div style="height: 100vh;justify-content: center; position: relative" id="map"/>',
container:
'<div style="height: 100vh;justify-content: center; position: relative" id="map"/>',
dependencies: {
'@antv/l7': 'latest',
'@antv/l7-maps': 'latest'
}
'@antv/l7-maps': 'latest',
},
},
mdPlayground: {
// markdown 文档中的 playground 若干设置
@ -396,7 +412,7 @@ module.exports = {
},
docsearchOptions: {
apiKey: '97db146dbe490416af81ef3a8923bcaa',
indexName: 'antv_l7'
}
}
indexName: 'antv_l7',
},
},
};

1
package.json
View File

@ -12,6 +12,7 @@
"@antv/l7-district": "^2.3.9",
"@antv/l7-draw": "2.4.18",
"@antv/l7-react": "^2.3.3",
"@antv/l7plot": "^0.0.4",
"@babel/cli": "^7.6.4",
"@babel/core": "^7.6.4",
"@babel/plugin-proposal-decorators": "^7.6.0",