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

docs: remove website demos (#1328) 

* fix: 修复 featureScale 错误

* style: lint style

* fix: remove featureScalePlugin async

* docs: remove demos

Co-authored-by: shihui <yiqianyao.yqy@alibaba-inc.com>
This commit is contained in:
YiQianYao 2022-09-07 15:16:59 +08:00 committed by GitHub
parent d4ec1ca59e
commit 1abed43e70
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
46 changed files with 97 additions and 2093 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/site/examples/choropleth/administrative/demo/administrative-switch.tsx → packages/site/examples/choropleth/administrative/delete/administrative-switch.tsx
View File

@ -161,3 +161,12 @@ function AdministrativeSwitch() {
}
ReactDOM.render(<AdministrativeSwitch />, document.getElementById('map'));
// {
// "filename": "administrative-switch.tsx",
// "title": {
// "zh": "行政区域切换",
// "en": "Administrative Switch"
// },
// "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/qSFaP32j8q/4428acf4-9362-4705-90c9-de950be5a177.png"
// }

9
packages/site/examples/choropleth/administrative/demo/china-city.ts → packages/site/examples/choropleth/administrative/delete/china-city.ts
View File

@ -76,3 +76,12 @@ scene.on('loaded', () => {
choropleth.addToScene(scene);
});
});
// {
// "filename": "china-city.ts",
// "title": {
// "zh": "中国市级地图",
// "en": "China Citys Map"
// },
// "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/GN35RftkmZ/c53bc5ab-189f-42a2-9288-7b34f616f18d.png"
// },

9
packages/site/examples/choropleth/administrative/demo/china-map.ts → packages/site/examples/choropleth/administrative/delete/china-map.ts
View File

@ -70,3 +70,12 @@ scene.on('loaded', () => {
choropleth.addToScene(scene);
});
});
// {
// "filename": "china-map.ts",
// "title": {
// "zh": "中国地图",
// "en": "China Map"
// },
// "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/qSFaP32j8q/4428acf4-9362-4705-90c9-de950be5a177.png"
// },

9
packages/site/examples/choropleth/administrative/demo/world-map.ts → packages/site/examples/choropleth/administrative/delete/world-map.ts
View File

@ -69,3 +69,12 @@ const choropleth = new Choropleth({
scene.on('loaded', () => {
choropleth.addToScene(scene);
});
// {
// "filename": "world-map.ts",
// "title": {
// "zh": "世界地图",
// "en": "World Map"
// },
// "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/2W6xl7Y3wm/e7590fc4-f49b-43c0-ba3b-8b40a9ac3b39.png"
// },

33
packages/site/examples/choropleth/administrative/demo/meta.json
View File

@ -4,30 +4,7 @@
"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": {
@ -59,14 +36,6 @@
"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"
}
]
}

1
packages/site/examples/choropleth/drill/API.en.md
View File

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

1
packages/site/examples/choropleth/drill/API.zh.md
View File

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

124
packages/site/examples/choropleth/drill/demo/drill-callback.ts
View File

@ -1,124 +0,0 @@
import { Mapbox, Scene } from '@antv/l7';
import { Choropleth } from '@antv/l7plot';
const scene = new Scene({
id: 'map',
map: new Mapbox({
style: 'blank',
center: [120.19382669582967, 30.258134],
zoom: 3,
pitch: 0,
}),
});
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) => ({ ...item, value: Math.random() * 5000 }));
const cityData = list
.filter(({ level }) => level === 'city')
.map((item) => ({ ...item, value: Math.random() * 2000 }));
const districtData = list
.filter(({ level }) => level === 'district')
.map((item) => ({ ...item, value: Math.random() * 1000 }));
const choropleth = new Choropleth({
source: {
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',
},
});
if (scene.loaded) {
choropleth.addToScene(scene);
} else {
scene.on('loaded', () => {
choropleth.addToScene(scene);
});
}
});

114
packages/site/examples/choropleth/drill/demo/drill-intercept.ts
View File

@ -1,114 +0,0 @@
import { Mapbox, Scene } from '@antv/l7';
import { Choropleth } from '@antv/l7plot';
const scene = new Scene({
id: 'map',
map: new Mapbox({
style: 'blank',
center: [120.19382669582967, 30.258134],
zoom: 3,
pitch: 0,
}),
});
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) => ({ ...item, value: Math.random() * 5000 }));
const cityData = list
.filter(({ level }) => level === 'city')
.map((item) => ({ ...item, value: Math.random() * 2000 }));
const districtData = list
.filter(({ level }) => level === 'district')
.map((item) => ({ ...item, value: Math.random() * 1000 }));
const choropleth = new Choropleth({
source: {
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',
},
});
if (scene.loaded) {
choropleth.addToScene(scene);
} else {
scene.on('loaded', () => {
choropleth.addToScene(scene);
});
}
});

40
packages/site/examples/choropleth/drill/demo/meta.json
View File

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

109
packages/site/examples/choropleth/drill/demo/order-drill.ts
View File

@ -1,109 +0,0 @@
import { Mapbox, Scene } from '@antv/l7';
import { Choropleth } from '@antv/l7plot';
const scene = new Scene({
id: 'map',
map: new Mapbox({
style: 'blank',
center: [120.19382669582967, 30.258134],
zoom: 3,
pitch: 0,
}),
});
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) => ({ ...item, value: Math.random() * 5000 }));
const cityData = list
.filter(({ level }) => level === 'city')
.map((item) => ({ ...item, value: Math.random() * 2000 }));
const districtData = list
.filter(({ level }) => level === 'district')
.map((item) => ({ ...item, value: Math.random() * 1000 }));
const choropleth = new Choropleth({
source: {
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',
},
});
if (scene.loaded) {
choropleth.addToScene(scene);
} else {
scene.on('loaded', () => {
choropleth.addToScene(scene);
});
}
});

102
packages/site/examples/choropleth/drill/demo/unorder-drill.ts
View File

@ -1,102 +0,0 @@
import { Mapbox, Scene } from '@antv/l7';
import { Choropleth } from '@antv/l7plot';
const scene = new Scene({
id: 'map',
map: new Mapbox({
style: 'blank',
center: [120.19382669582967, 30.258134],
zoom: 3,
pitch: 0,
}),
});
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) => ({ ...item, value: Math.random() * 5000 }));
const districtData = list
.filter(({ level }) => level === 'district')
.map((item) => ({ ...item, value: Math.random() * 1000 }));
const choropleth = new Choropleth({
source: {
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',
},
});
if (scene.loaded) {
choropleth.addToScene(scene);
} else {
scene.on('loaded', () => {
choropleth.addToScene(scene);
});
}
});

4
packages/site/examples/choropleth/drill/index.en.md
View File

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

4
packages/site/examples/choropleth/drill/index.zh.md
View File

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

7
packages/site/examples/gallery/animate/demo/amap_car.js → packages/site/examples/gallery/animate/delete/amap_car.js
View File

@ -242,3 +242,10 @@ function setMaterial(object) {
object.material.side = THREE.DoubleSide;
}
}
// {
// "filename": "amap_car.js",
// "title": "旅行轨迹",
// "screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*ghmURqau13sAAAAAAAAAAAAAARQnAQ"
// },

5
packages/site/examples/gallery/animate/demo/box_select.js → packages/site/examples/gallery/animate/delete/box_select.js
View File

@ -148,3 +148,8 @@ scene.on('loaded', () => {
});
});
// {
// "filename": "box_select.js",
// "title": "框选要素",
// "screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*G1lyQ6e5gKAAAAAAAAAAAAAAARQnAQ"
// },

6
packages/site/examples/gallery/animate/demo/plane_animate.js → packages/site/examples/gallery/animate/delete/plane_animate.js
View File

@ -139,3 +139,9 @@ scene.on('loaded', () => {
scene.addLayer(flyLine);
});
});
// {
// "filename": "plane_animate.js",
// "title": "航向图",
// "screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*8h-QSqDgzxYAAAAAAAAAAAAAARQnAQ"
// },

6
packages/site/examples/gallery/animate/demo/route_line.js → packages/site/examples/gallery/animate/delete/route_line.js
View File

@ -186,3 +186,9 @@ scene.on('loaded', () => {
scene.addLayer(layerPlaneLine);
});
});
// {
// "filename": "route_line.js",
// "title": "航线图",
// "screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*NEKUR6HzXFEAAAAAAAAAAAAAARQnAQ"
// },

21
packages/site/examples/gallery/animate/demo/meta.json
View File

@ -19,36 +19,17 @@
"title": "风场图层",
"screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*K6NHRL_fjTQAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "amap_car.js",
"title": "旅行轨迹",
"screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*ghmURqau13sAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "animate_path_texture.js",
"title": "路径贴图",
"screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*0DwvSIHihVEAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "plane_animate.js",
"title": "航向图",
"screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*8h-QSqDgzxYAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "turin.js",
"title": "都灵道路图",
"screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*P1o6R7jm0JsAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "route_line.js",
"title": "航线图",
"screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*NEKUR6HzXFEAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "box_select.js",
"title": "框选要素",
"screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*G1lyQ6e5gKAAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "timeline.js",
"title": "公交站点时序数据",

5
packages/site/examples/polygon/3d/demo/meta.json
View File

@ -18,11 +18,6 @@
"filename": "floatMap.js",
"title": "漂浮地图板块",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*D8GeSKNZxWIAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "texture3D.js",
"title": "手绘地图",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*K18EQZoe4awAAAAAAAAAAAAAARQnAQ"
}
]
}

5
packages/site/examples/polygon/fill/demo/china_linear_in.js → packages/site/examples/polygon/delete/china_linear_in.js
View File

@ -57,3 +57,8 @@ scene.on('loaded', () => {
scene.addLayer(layer2);
});
});
// {
// "filename": "china_linear_in.js",
// "title": "中国地图-径向渐变",
// "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*SgKRRKJ1w-EAAAAAAAAAAAAAARQnAQ"
// },

6
packages/site/examples/polygon/fill/demo/city.js → packages/site/examples/polygon/delete/city.js
View File

@ -87,3 +87,9 @@ scene.on('loaded', () => {
scene.addLayer(labelLayer);
});
});
// {
// "filename": "city.js",
// "title": "中国地图市级",
// "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*I-dVQ4kzmmoAAAAAAAAAAAAAARQnAQ"
// },

6
packages/site/examples/polygon/fill/demo/province.js → packages/site/examples/polygon/delete/province.js
View File

@ -77,3 +77,9 @@ scene.on('loaded', () => {
scene.addLayer(labelLayer);
});
});
// {
// "filename": "province.js",
// "title": "中国地图省级",
// "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*i02qTq1C1IYAAAAAAAAAAAAAARQnAQ"
// },

6
packages/site/examples/polygon/3d/demo/texture3D.js → packages/site/examples/polygon/delete/texture3D.js
View File

@ -32,3 +32,9 @@ scene.on('loaded', () => {
scene.addLayer(provincelayer);
});
});
// {
// "filename": "texture3D.js",
// "title": "手绘地图",
// "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*K18EQZoe4awAAAAAAAAAAAAAARQnAQ"
// }

15
packages/site/examples/polygon/fill/demo/meta.json
View File

@ -4,16 +4,6 @@
"en": "Category"
},
"demos": [
{
"filename": "province.js",
"title": "中国地图省级",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*i02qTq1C1IYAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "city.js",
"title": "中国地图市级",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*I-dVQ4kzmmoAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "usa.js",
"title": "地图交互",
@ -24,11 +14,6 @@
"title": "连续填充图",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*t9QJRL7uVk4AAAAAAAAAAAAAARQnAQ"
},
{
"filename": "china_linear_in.js",
"title": "中国地图-径向渐变",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*SgKRRKJ1w-EAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "water.js",
"title": "简单水面",

6
packages/site/examples/raster/basic/demo/dem.js → packages/site/examples/raster/basic/delete/dem.js
View File

@ -69,3 +69,9 @@ async function addLayer() {
scene.addLayer(layer);
}
// {
// "filename": "dem.js",
// "title": "地形图",
// "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*jhWWS6dhKhYAAAAAAAAAAAAAARQnAQ"
// },

6
packages/site/examples/raster/basic/demo/ndvi.js → packages/site/examples/raster/basic/delete/ndvi.js
View File

@ -65,3 +65,9 @@ async function addLayer() {
scene.addLayer(layer);
}
// {
// "filename": "ndvi.js",
// "title": "NDVI",
// "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*lpWZQKaCu6cAAAAAAAAAAAAAARQnAQ"
// },

10
packages/site/examples/raster/basic/demo/meta.json
View File

@ -10,21 +10,11 @@
"title": "雷达图",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*JDO-R5XU7xwAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "dem.js",
"title": "地形图",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*jhWWS6dhKhYAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "light.js",
"title": "夜光图",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*xznhSJFEAXYAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "ndvi.js",
"title": "NDVI",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*lpWZQKaCu6cAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "image.js",
"title": "图片",

226
packages/site/examples/react/covid/demo/covid_animate.tsx
View File

@ -1,226 +0,0 @@
import {
LayerEvent,
LineLayer,
MapboxScene,
Marker,
PointLayer,
PolygonLayer,
Popup,
} from '@antv/l7-react';
import * as React from 'react';
import ReactDOM from 'react-dom';
function joinData(geodata: any, ncovData: any) {
const ncovDataObj: any = {};
ncovData.forEach((item: any) => {
const {
countryName,
countryEnglishName,
currentConfirmedCount,
confirmedCount,
suspectedCount,
curedCount,
deadCount,
} = item;
if (countryName === '中国') {
if (!ncovDataObj[countryName]) {
ncovDataObj[countryName] = {
countryName: 0,
countryEnglishName,
currentConfirmedCount: 0,
confirmedCount: 0,
suspectedCount: 0,
curedCount: 0,
deadCount: 0,
};
} else {
ncovDataObj[countryName].currentConfirmedCount += currentConfirmedCount;
ncovDataObj[countryName].confirmedCount += confirmedCount;
ncovDataObj[countryName].suspectedCount += suspectedCount;
ncovDataObj[countryName].curedCount += curedCount;
ncovDataObj[countryName].deadCount += deadCount;
}
} else {
ncovDataObj[countryName] = {
countryName,
countryEnglishName,
currentConfirmedCount,
confirmedCount,
suspectedCount,
curedCount,
deadCount,
};
}
});
const geoObj: any = {};
geodata.features.forEach((feature: any) => {
const { name } = feature.properties;
geoObj[name] = feature.properties;
const ncov = ncovDataObj[name] || {};
feature.properties = {
...feature.properties,
...ncov,
};
});
return geodata;
}
const World = React.memo(function Map() {
const [data, setData] = React.useState();
const [filldata, setfillData] = React.useState();
const [popupInfo, setPopupInfo] = React.useState<{
lnglat: number[];
feature: any;
}>();
React.useEffect(() => {
const fetchData = async () => {
const [geoData, ncovData] = await Promise.all([
fetch(
'https://gw.alipayobjects.com/os/bmw-prod/e62a2f3b-ea99-4c98-9314-01d7c886263d.json',
).then((d) => d.json()),
// https://lab.isaaclin.cn/nCoV/api/area?latest=1
fetch(
'https://gw.alipayobjects.com/os/bmw-prod/55a7dd2e-3fb4-4442-8899-900bb03ee67a.json',
).then((d) => d.json()),
]);
const worldData = joinData(geoData, ncovData.results);
const pointdata = worldData.features.map((feature: any) => {
return feature.properties;
});
setfillData(worldData);
setData(pointdata);
};
fetchData();
}, []);
function showPopup(args: any): void {
setPopupInfo({
lnglat: args.lngLat,
feature: args.feature,
});
}
return (
<>
<MapboxScene
map={{
center: [110.19382669582967, 50.258134],
pitch: 0,
style: 'blank',
zoom: 1,
}}
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
>
{popupInfo && (
<Popup lnglat={popupInfo.lnglat}>
{popupInfo.feature.name}
<ul
style={{
margin: 0,
}}
>
<li>现有确诊:{popupInfo.feature.currentConfirmedCount}</li>
<li>累计确诊:{popupInfo.feature.confirmedCount}</li>
<li>治愈:{popupInfo.feature.curedCount}</li>
<li>死亡:{popupInfo.feature.deadCount}</li>
</ul>
</Popup>
)}
{data && [
<PolygonLayer
key={'1'}
options={{
autoFit: false,
}}
source={{
data: filldata,
}}
scale={{
values: {
confirmedCount: {
type: 'quantile',
},
},
}}
color={{
values: '#ddd',
}}
shape={{
values: 'fill',
}}
style={{
opacity: 1,
}}
/>,
<LineLayer
key={'3'}
source={{
data: filldata,
}}
size={{
values: 0.6,
}}
color={{
values: '#fff',
}}
shape={{
values: 'line',
}}
style={{
opacity: 1,
}}
/>,
<PointLayer
key={'2'}
options={{
autoFit: true,
}}
source={{
data,
parser: {
type: 'json',
coordinates: 'centroid',
},
}}
scale={{
values: {
confirmedCount: {
type: 'log',
},
},
}}
color={{
values: '#b10026',
}}
shape={{
values: 'circle',
}}
active={{
option: {
color: '#0c2c84',
mix: 0.6,
},
}}
size={{
field: 'confirmedCount',
values: [5, 60],
}}
animate={{
enable: true,
}}
style={{
opacity: 0.6,
}}
>
<LayerEvent type="mousemove" handler={showPopup} />
</PointLayer>,
]}
</MapboxScene>
</>
);
});
ReactDOM.render(<World />, document.getElementById('map'));

280
packages/site/examples/react/covid/demo/covid_bubble.tsx
View File

@ -1,280 +0,0 @@
import {
LayerEvent,
LineLayer,
MapboxScene,
Marker,
PointLayer,
PolygonLayer,
Popup,
} from '@antv/l7-react';
import * as React from 'react';
import ReactDOM from 'react-dom';
const colors = [
'#732200',
'#CC3D00',
'#FF6619',
'#FF9466',
'#FFC1A6',
'#FCE2D7',
'#ffffff',
].reverse();
function joinData(geodata: any, ncovData: any) {
const ncovDataObj: any = {};
ncovData.forEach((item: any) => {
const {
countryName,
countryEnglishName,
currentConfirmedCount,
confirmedCount,
suspectedCount,
curedCount,
deadCount,
} = item;
if (countryName === '中国') {
if (!ncovDataObj[countryName]) {
ncovDataObj[countryName] = {
countryName,
countryEnglishName,
currentConfirmedCount: 0,
confirmedCount: 0,
suspectedCount: 0,
curedCount: 0,
deadCount: 0,
};
} else {
ncovDataObj[countryName].currentConfirmedCount += currentConfirmedCount;
ncovDataObj[countryName].confirmedCount += confirmedCount;
ncovDataObj[countryName].suspectedCount += suspectedCount;
ncovDataObj[countryName].curedCount += curedCount;
ncovDataObj[countryName].deadCount += deadCount;
}
} else {
ncovDataObj[countryName] = {
countryName,
countryEnglishName,
currentConfirmedCount,
confirmedCount,
suspectedCount,
curedCount,
deadCount,
};
}
});
const geoObj: any = {};
geodata.features.forEach((feature: any) => {
const { name } = feature.properties;
geoObj[name] = feature.properties;
const ncov = ncovDataObj[name] || {};
feature.properties = {
...feature.properties,
...ncov,
};
});
return geodata;
}
const World = React.memo(function Map() {
const [data, setData] = React.useState();
const [filldata, setfillData] = React.useState();
const [popupInfo, setPopupInfo] = React.useState<{
lnglat: number[];
feature: any;
}>();
React.useEffect(() => {
const fetchData = async () => {
const [geoData, ncovData] = await Promise.all([
fetch(
'https://gw.alipayobjects.com/os/bmw-prod/e62a2f3b-ea99-4c98-9314-01d7c886263d.json',
).then((d) => d.json()),
// https://lab.isaaclin.cn/nCoV/api/area?latest=1
fetch(
'https://gw.alipayobjects.com/os/bmw-prod/55a7dd2e-3fb4-4442-8899-900bb03ee67a.json',
).then((d) => d.json()),
]);
const worldData = joinData(geoData, ncovData.results);
const pointdata = worldData.features.map((feature: any) => {
return feature.properties;
});
setfillData(worldData);
setData(pointdata);
};
fetchData();
}, []);
function showPopup(args: any): void {
setPopupInfo({
lnglat: args.lngLat,
feature: args.feature,
});
}
return (
<>
<MapboxScene
map={{
center: [110.19382669582967, 50.258134],
pitch: 0,
style: 'blank',
zoom: 1,
}}
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
>
{popupInfo && (
<Popup lnglat={popupInfo.lnglat}>
{popupInfo.feature.name}
<ul
style={{
margin: 0,
}}
>
<li>现有确诊:{popupInfo.feature.currentConfirmedCount}</li>
<li>累计确诊:{popupInfo.feature.confirmedCount}</li>
<li>治愈:{popupInfo.feature.curedCount}</li>
<li>死亡:{popupInfo.feature.deadCount}</li>
</ul>
</Popup>
)}
{data && [
<PolygonLayer
key={'1'}
options={{
autoFit: true,
}}
source={{
data: filldata,
}}
scale={{
values: {
confirmedCount: {
type: 'quantile',
},
},
}}
color={{
values: '#ddd',
}}
shape={{
values: 'fill',
}}
style={{
opacity: 1,
}}
/>,
<LineLayer
key={'3'}
source={{
data: filldata,
}}
size={{
values: 0.6,
}}
color={{
values: '#fff',
}}
shape={{
values: 'line',
}}
style={{
opacity: 1,
}}
/>,
<PointLayer
key={'2'}
options={{
autoFit: true,
}}
source={{
data,
parser: {
type: 'json',
coordinates: 'centroid',
},
}}
scale={{
values: {
confirmedCount: {
type: 'log',
},
},
}}
color={{
field: 'confirmedCount',
values: (count) => {
return count > 10000
? colors[6]
: count > 1000
? colors[5]
: count > 500
? colors[4]
: count > 100
? colors[3]
: count > 10
? colors[2]
: count > 1
? colors[1]
: colors[0];
},
}}
shape={{
values: 'circle',
}}
active={{
option: {
color: '#0c2c84',
mix: 0.6,
},
}}
size={{
field: 'confirmedCount',
values: [0, 30],
}}
style={{
opacity: 0.8,
}}
>
<LayerEvent type="mousemove" handler={showPopup} />
</PointLayer>,
<PointLayer
key={'5'}
source={{
data,
parser: {
type: 'json',
coordinates: 'centroid',
},
}}
color={{
values: '#fff',
}}
shape={{
field: 'countryName',
values: 'text',
}}
filter={{
field: 'currentConfirmedCount',
values: (v) => {
return v > 500;
},
}}
size={{
values: 12,
}}
style={{
opacity: 1,
strokeOpacity: 1,
strokeWidth: 0,
}}
>
<LayerEvent type="mousemove" handler={showPopup} />
</PointLayer>,
]}
</MapboxScene>
</>
);
});
ReactDOM.render(<World />, document.getElementById('map'));

225
packages/site/examples/react/covid/demo/covid_column.tsx
View File

@ -1,225 +0,0 @@
import {
LineLayer,
MapboxScene,
Marker,
PointLayer,
PolygonLayer,
Popup,
} from '@antv/l7-react';
import * as React from 'react';
import ReactDOM from 'react-dom';
function joinData(geodata: any, ncovData: any) {
const ncovDataObj: any = {};
ncovData.forEach((item: any) => {
const {
countryName,
countryEnglishName,
currentConfirmedCount,
confirmedCount,
suspectedCount,
curedCount,
deadCount,
} = item;
if (countryName === '中国') {
if (!ncovDataObj[countryName]) {
ncovDataObj[countryName] = {
countryName: 0,
countryEnglishName,
currentConfirmedCount: 0,
confirmedCount: 0,
suspectedCount: 0,
curedCount: 0,
deadCount: 0,
};
} else {
ncovDataObj[countryName].currentConfirmedCount += currentConfirmedCount;
ncovDataObj[countryName].confirmedCount += confirmedCount;
ncovDataObj[countryName].suspectedCount += suspectedCount;
ncovDataObj[countryName].curedCount += curedCount;
ncovDataObj[countryName].deadCount += deadCount;
}
} else {
ncovDataObj[countryName] = {
countryName,
countryEnglishName,
currentConfirmedCount,
confirmedCount,
suspectedCount,
curedCount,
deadCount,
};
}
});
const geoObj: any = {};
geodata.features.forEach((feature: any) => {
const { name } = feature.properties;
geoObj[name] = feature.properties;
const ncov = ncovDataObj[name] || {};
feature.properties = {
...feature.properties,
...ncov,
};
});
return geodata;
}
const World = React.memo(function Map() {
const [data, setData] = React.useState();
const [filldata, setfillData] = React.useState();
React.useEffect(() => {
const fetchData = async () => {
const [geoData, ncovData] = await Promise.all([
fetch(
'https://gw.alipayobjects.com/os/bmw-prod/e62a2f3b-ea99-4c98-9314-01d7c886263d.json',
).then((d) => d.json()),
// https://lab.isaaclin.cn/nCoV/api/area?latest=1
fetch(
'https://gw.alipayobjects.com/os/bmw-prod/55a7dd2e-3fb4-4442-8899-900bb03ee67a.json',
).then((d) => d.json()),
]);
const worldData = joinData(geoData, ncovData.results);
const pointdata = worldData.features.map((feature: any) => {
return feature.properties;
});
setfillData(worldData);
setData(pointdata);
};
fetchData();
}, []);
return (
<>
<MapboxScene
map={{
center: [110.19382669582967, 50.258134],
pitch: 50,
style: 'blank',
zoom: 1,
}}
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
>
{data && [
<PolygonLayer
key={'1'}
options={{
autoFit: true,
}}
source={{
data: filldata,
}}
scale={{
values: {
confirmedCount: {
type: 'quantile',
},
},
}}
color={{
values: '#ddd',
}}
shape={{
values: 'fill',
}}
style={{
opacity: 1,
}}
/>,
<LineLayer
key={'3'}
source={{
data: filldata,
}}
size={{
values: 0.6,
}}
color={{
values: '#fff',
}}
shape={{
values: 'line',
}}
style={{
opacity: 1,
}}
/>,
<PointLayer
key={'2'}
options={{
autoFit: true,
}}
source={{
data,
parser: {
type: 'json',
coordinates: 'centroid',
},
}}
scale={{
values: {
confirmedCount: {
type: 'log',
},
},
}}
active={{
option: {
color: '#0c2c84',
mix: 0.6,
},
}}
color={{
field: 'confirmedCount',
values: (count) => {
return count > 10000
? '#732200'
: count > 1000
? '#CC3D00'
: count > 500
? '#FF6619'
: count > 100
? '#FF9466'
: count > 10
? '#FFC1A6'
: count > 1
? '#FCE2D7'
: 'rgb(255,255,255)';
},
}}
shape={{
values: 'cylinder',
}}
size={{
field: 'confirmedCount',
values: (count: number) => {
const height =
count > 10000
? 70
: count > 1000
? 40
: count > 500
? 30
: count > 100
? 20
: count > 10
? 10
: count > 1
? 5
: 1;
return [5, 5, height];
},
}}
style={{
opacity: 1,
}}
/>,
]}
</MapboxScene>
</>
);
});
ReactDOM.render(<World />, document.getElementById('map'));

151
packages/site/examples/react/covid/demo/covid_extrude.tsx
View File

@ -1,151 +0,0 @@
import { MapboxScene, PolygonLayer } from '@antv/l7-react';
import * as React from 'react';
import ReactDOM from 'react-dom';
function joinData(geodata: any, ncovData: any) {
const ncovDataObj: any = {};
ncovData.forEach((item: any) => {
const {
countryName,
countryEnglishName,
currentConfirmedCount,
confirmedCount,
suspectedCount,
curedCount,
deadCount,
} = item;
if (countryName === '中国') {
if (!ncovDataObj[countryName]) {
ncovDataObj[countryName] = {
countryName: 0,
countryEnglishName,
currentConfirmedCount: 0,
confirmedCount: 0,
suspectedCount: 0,
curedCount: 0,
deadCount: 0,
};
} else {
ncovDataObj[countryName].currentConfirmedCount += currentConfirmedCount;
ncovDataObj[countryName].confirmedCount += confirmedCount;
ncovDataObj[countryName].suspectedCount += suspectedCount;
ncovDataObj[countryName].curedCount += curedCount;
ncovDataObj[countryName].deadCount += deadCount;
}
} else {
ncovDataObj[countryName] = {
countryName,
countryEnglishName,
currentConfirmedCount,
confirmedCount,
suspectedCount,
curedCount,
deadCount,
};
}
});
const geoObj: any = {};
geodata.features.forEach((feature: any) => {
const { name } = feature.properties;
geoObj[name] = feature.properties;
const ncov = ncovDataObj[name] || {};
feature.properties = {
...feature.properties,
...ncov,
};
});
return geodata;
}
const World = React.memo(function Map() {
const [data, setData] = React.useState();
React.useEffect(() => {
const fetchData = async () => {
const [geoData, ncovData] = await Promise.all([
fetch(
'https://gw.alipayobjects.com/os/bmw-prod/e62a2f3b-ea99-4c98-9314-01d7c886263d.json',
).then((d) => d.json()),
// https://lab.isaaclin.cn/nCoV/api/area?latest=1
fetch(
'https://gw.alipayobjects.com/os/bmw-prod/55a7dd2e-3fb4-4442-8899-900bb03ee67a.json',
).then((d) => d.json()),
]);
setData(joinData(geoData, ncovData.results));
};
fetchData();
}, []);
return (
<>
<MapboxScene
map={{
center: [110.19382669582967, 50.258134],
pitch: 50,
style: 'blank',
zoom: 1,
}}
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
>
{data && [
<PolygonLayer
key={'1'}
options={{
autoFit: true,
}}
source={{
data,
}}
scale={{
values: {
confirmedCount: {
type: 'quantile',
},
},
}}
active={{
option: {
color: '#ff0',
mix: 0.6,
},
}}
color={{
field: 'confirmedCount',
values: (count) => {
return count > 10000
? '#732200'
: count > 1000
? '#CC3D00'
: count > 500
? '#FF6619'
: count > 100
? '#FF9466'
: count > 10
? '#FFC1A6'
: count > 1
? '#FCE2D7'
: 'rgb(255,255,255)';
},
}}
shape={{
values: 'extrude',
}}
size={{
field: 'confirmedCount',
values: [0, 1000000, 3000000, 4000000, 5000000],
}}
style={{
opacity: 1,
pickLight: true,
heightfixed: true,
}}
/>,
]}
</MapboxScene>
</>
);
});
ReactDOM.render(<World />, document.getElementById('map'));

164
packages/site/examples/react/covid/demo/covid_fill.tsx
View File

@ -1,164 +0,0 @@
import {
LineLayer,
MapboxScene,
Marker,
PolygonLayer,
Popup,
} from '@antv/l7-react';
import * as React from 'react';
import ReactDOM from 'react-dom';
function joinData(geodata: any, ncovData: any) {
const ncovDataObj: any = {};
ncovData.forEach((item: any) => {
const {
countryName,
countryEnglishName,
currentConfirmedCount,
confirmedCount,
suspectedCount,
curedCount,
deadCount,
} = item;
if (countryName === '中国') {
if (!ncovDataObj[countryName]) {
ncovDataObj[countryName] = {
countryName: 0,
countryEnglishName,
currentConfirmedCount: 0,
confirmedCount: 0,
suspectedCount: 0,
curedCount: 0,
deadCount: 0,
};
} else {
ncovDataObj[countryName].currentConfirmedCount += currentConfirmedCount;
ncovDataObj[countryName].confirmedCount += confirmedCount;
ncovDataObj[countryName].suspectedCount += suspectedCount;
ncovDataObj[countryName].curedCount += curedCount;
ncovDataObj[countryName].deadCount += deadCount;
}
} else {
ncovDataObj[countryName] = {
countryName,
countryEnglishName,
currentConfirmedCount,
confirmedCount,
suspectedCount,
curedCount,
deadCount,
};
}
});
const geoObj: any = {};
geodata.features.forEach((feature: any) => {
const { name } = feature.properties;
geoObj[name] = feature.properties;
const ncov = ncovDataObj[name] || {};
feature.properties = {
...feature.properties,
...ncov,
};
});
return geodata;
}
const World = React.memo(function Map() {
const [data, setData] = React.useState();
React.useEffect(() => {
const fetchData = async () => {
const [geoData, ncovData] = await Promise.all([
fetch(
'https://gw.alipayobjects.com/os/bmw-prod/e62a2f3b-ea99-4c98-9314-01d7c886263d.json',
).then((d) => d.json()),
// https://lab.isaaclin.cn/nCoV/api/area?latest=1
fetch(
'https://gw.alipayobjects.com/os/bmw-prod/55a7dd2e-3fb4-4442-8899-900bb03ee67a.json',
).then((d) => d.json()),
]);
setData(joinData(geoData, ncovData.results));
};
fetchData();
}, []);
return (
<>
<MapboxScene
map={{
center: [110.19382669582967, 50.258134],
pitch: 0,
style: 'blank',
zoom: 1,
}}
style={{
position: 'absolute',
background: '#fff', // 地图背景色
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
>
{data && [
<PolygonLayer
key={'1'}
options={{
autoFit: true,
}}
source={{
data,
}}
scale={{
values: {
confirmedCount: {
type: 'quantile',
},
},
}}
active={{
option: {
color: '#0c2c84',
mix: 0.6,
},
}}
color={{
field: 'confirmedCount', // 填充颜色
values: [
'#732200',
'#CC3D00',
'#FF6619',
'#FF9466',
'#FFC1A6',
'#FCE2D7',
].reverse(),
}}
shape={{
values: 'fill',
}}
style={{
opacity: 1,
}}
/>,
<LineLayer
key={'2'}
source={{
data,
}}
size={{
values: 0.6,
}}
color={{
values: '#aaa', // 描边颜色
}}
shape={{
values: 'line',
}}
style={{
opacity: 1,
}}
/>,
]}
</MapboxScene>
</>
);
});
ReactDOM.render(<World />, document.getElementById('map'));

234
packages/site/examples/react/covid/demo/covid_grid.tsx
View File

@ -1,234 +0,0 @@
import {
HeatmapLayer,
LayerEvent,
LineLayer,
MapboxScene,
Marker,
PointLayer,
PolygonLayer,
Popup,
} from '@antv/l7-react';
import * as React from 'react';
import ReactDOM from 'react-dom';
const colors = [
'#f7fcf0',
'#e0f3db',
'#ccebc5',
'#a8ddb5',
'#7bccc4',
'#4eb3d3',
'#2b8cbe',
'#08589e',
].reverse();
function joinData(geodata: any, ncovData: any) {
const ncovDataObj: any = {};
ncovData.forEach((item: any) => {
const {
countryName,
countryEnglishName,
currentConfirmedCount,
confirmedCount,
suspectedCount,
curedCount,
deadCount,
} = item;
if (countryName === '中国') {
if (!ncovDataObj[countryName]) {
ncovDataObj[countryName] = {
countryName,
countryEnglishName,
currentConfirmedCount: 0,
confirmedCount: 0,
suspectedCount: 0,
curedCount: 0,
deadCount: 0,
};
} else {
ncovDataObj[countryName].currentConfirmedCount += currentConfirmedCount;
ncovDataObj[countryName].confirmedCount += confirmedCount;
ncovDataObj[countryName].suspectedCount += suspectedCount;
ncovDataObj[countryName].curedCount += curedCount;
ncovDataObj[countryName].deadCount += deadCount;
}
} else {
ncovDataObj[countryName] = {
countryName,
countryEnglishName,
currentConfirmedCount,
confirmedCount,
suspectedCount,
curedCount,
deadCount,
};
}
});
const geoObj: any = {};
geodata.features.forEach((feature: any) => {
const { name } = feature.properties;
geoObj[name] = feature.properties;
const ncov = ncovDataObj[name] || {};
feature.properties = {
...feature.properties,
...ncov,
};
});
return geodata;
}
const World = React.memo(function Map() {
const [data, setData] = React.useState();
const [filldata, setfillData] = React.useState();
const [popupInfo, setPopupInfo] = React.useState<{
lnglat: number[];
feature: any;
}>();
React.useEffect(() => {
const fetchData = async () => {
const [geoData, ncovData, gridData] = await Promise.all([
fetch(
'https://gw.alipayobjects.com/os/bmw-prod/e62a2f3b-ea99-4c98-9314-01d7c886263d.json',
).then((d) => d.json()),
// https://lab.isaaclin.cn/nCoV/api/area?latest=1
fetch(
'https://gw.alipayobjects.com/os/bmw-prod/55a7dd2e-3fb4-4442-8899-900bb03ee67a.json',
).then((d) => d.json()),
fetch(
'https://gw.alipayobjects.com/os/bmw-prod/8990e8b4-c58e-419b-afb9-8ea3daff2dd1.json',
).then((d) => d.json()),
]);
const worldData = joinData(geoData, ncovData.results);
const pointdata = worldData.features.map((feature: any) => {
return feature.properties;
});
setfillData(gridData);
setData(pointdata);
};
fetchData();
}, []);
function showPopup(args: any): void {
setPopupInfo({
lnglat: args.lngLat,
feature: args.feature,
});
}
return (
<>
<MapboxScene
map={{
center: [110.19382669582967, 50.258134],
pitch: 0,
style: 'blank',
zoom: 1,
}}
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
>
{popupInfo && (
<Popup lnglat={popupInfo.lnglat}>
{popupInfo.feature.name}
<ul
style={{
margin: 0,
}}
>
<li>现有确诊:{popupInfo.feature.currentConfirmedCount}</li>
<li>累计确诊:{popupInfo.feature.confirmedCount}</li>
<li>治愈:{popupInfo.feature.curedCount}</li>
<li>死亡:{popupInfo.feature.deadCount}</li>
</ul>
</Popup>
)}
{data && [
<HeatmapLayer
key={'1'}
source={{
data: filldata,
transforms: [
{
type: 'hexagon',
size: 500000,
field: 'capacity',
method: 'sum',
},
],
}}
color={{
values: 'rgb(221,230,238)',
}}
shape={{
values: 'hexagon',
}}
style={{
coverage: 0.7,
angle: 0.3,
opacity: 0.8,
}}
/>,
<PointLayer
key={'2'}
options={{
autoFit: true,
}}
source={{
data,
parser: {
type: 'json',
coordinates: 'centroid',
},
}}
scale={{
values: {
confirmedCount: {
type: 'log',
},
},
}}
color={{
field: 'confirmedCount',
values: (count) => {
return count > 10000
? colors[6]
: count > 1000
? colors[5]
: count > 500
? colors[4]
: count > 100
? colors[3]
: count > 10
? colors[2]
: count > 1
? colors[1]
: colors[0];
},
}}
shape={{
values: 'circle',
}}
active={{
option: {
color: '#0c2c84',
mix: 0.6,
},
}}
size={{
field: 'confirmedCount',
values: [0, 20],
}}
style={{
opacity: 0.6,
}}
>
<LayerEvent type="mousemove" handler={showPopup} />
</PointLayer>,
]}
</MapboxScene>
</>
);
});
ReactDOM.render(<World />, document.getElementById('map'));

38
packages/site/examples/react/covid/demo/meta.json
View File

@ -1,38 +0,0 @@
{
"title": {
"zh": "COVID-19 地图",
"en": "COVID-19 Map"
},
"demos": [
{
"filename": "covid_grid.tsx",
"title": "世界地图网格背景",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*CSUXTIYXXFwAAAAAAAAAAABkARQnAQ"
},
{
"filename": "covid_animate.tsx",
"title": "气泡动图",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*4Er4Qo128bkAAAAAAAAAAABkARQnAQ"
},
{
"filename": "covid_fill.tsx",
"title": "填充图",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*9lzaSrHuYx0AAAAAAAAAAABkARQnAQ"
},
{
"filename": "covid_bubble.tsx",
"title": "气泡图",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*mAWsSrM52gYAAAAAAAAAAABkARQnAQ"
},
{
"filename": "covid_column.tsx",
"title": "3D柱图",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*aLV4S6QJ104AAAAAAAAAAABkARQnAQ"
},
{
"filename": "covid_extrude.tsx",
"title": "3D 填充图",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*cuMmRqXzQu4AAAAAAAAAAABkARQnAQ"
}
]
}

6
packages/site/examples/react/covid/index.en.md
View File

@ -1,6 +0,0 @@
---
title: COVID-19 Map
order: 0
---
[![github](https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Nk9mQ48ZoZMAAAAAAAAAAABkARQnAQ)](https://github.com/antvis/L7)

5
packages/site/examples/react/covid/index.zh.md
View File

@ -1,5 +0,0 @@
---
title: COVID-19（新冠肺炎）地图
order: 0
---
[![github](https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Nk9mQ48ZoZMAAAAAAAAAAABkARQnAQ)](https://github.com/antvis/L7)

0
packages/site/examples/tile/vector/API.en.md
View File

0
packages/site/examples/tile/vector/API.zh.md
View File

35
packages/site/examples/tile/vector/demo/line.js
View File

@ -1,35 +0,0 @@
import { Scene, LineLayer } from '@antv/l7';
import { Map } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
stencil: true,
map: new Map({
center: [ 100, 30.3628 ],
zoom: 1
})
});
scene.on('loaded', () => {
const layer = new LineLayer({
featureId: 'COLOR',
sourceLayer: 'ecoregions2'
});
layer
.source(
'https://ganos.oss-cn-hangzhou.aliyuncs.com/m2/rs_l7/{z}/{x}/{y}.pbf',
{
parser: {
type: 'mvt',
tileSize: 256,
zoomOffset: 0,
maxZoom: 9,
extent: [ -180, -85.051129, 179, 85.051129 ]
}
}
)
.size(2)
.color('COLOR');
scene.addLayer(layer);
});

28
packages/site/examples/tile/vector/demo/meta.json
View File

@ -1,28 +0,0 @@
{
"title": {
"zh": "矢量瓦片图层",
"en": "Vector Tile"
},
"demos": [
{
"filename": "polygon.js",
"title": "矢量 polygon",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*GgzeQoJdn80AAAAAAAAAAAAAARQnAQ"
},
{
"filename": "line.js",
"title": "矢量 line",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*qGm9S756ggMAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "point.js",
"title": "矢量 point",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*GlzySLqOgH8AAAAAAAAAAAAAARQnAQ"
},
{
"filename": "text.js",
"title": "矢量 text",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*0TVXSbkyKvsAAAAAAAAAAAAAARQnAQ"
}
]
}

36
packages/site/examples/tile/vector/demo/point.js
View File

@ -1,36 +0,0 @@
import { Scene, PointLayer } from '@antv/l7';
import { Map } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
stencil: true,
map: new Map({
center: [ 100, 30.3628 ],
zoom: 1
})
});
scene.on('loaded', () => {
const layer = new PointLayer({
featureId: 'COLOR',
sourceLayer: 'ecoregions2'
});
layer
.source(
'https://ganos.oss-cn-hangzhou.aliyuncs.com/m2/rs_l7/{z}/{x}/{y}.pbf',
{
parser: {
type: 'mvt',
tileSize: 256,
zoomOffset: 0,
maxZoom: 9,
extent: [ -180, -85.051129, 179, 85.051129 ]
}
}
)
.size(10)
.color('COLOR')
.active(true);
scene.addLayer(layer);
});

35
packages/site/examples/tile/vector/demo/polygon.js
View File

@ -1,35 +0,0 @@
import { Scene, PolygonLayer } from '@antv/l7';
import { Map } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
stencil: true,
map: new Map({
center: [ 100, 30.3628 ],
zoom: 1
})
});
scene.on('loaded', () => {
const layer = new PolygonLayer({
featureId: 'COLOR',
sourceLayer: 'ecoregions2'
});
layer
.source(
'https://ganos.oss-cn-hangzhou.aliyuncs.com/m2/rs_l7/{z}/{x}/{y}.pbf',
{
parser: {
type: 'mvt',
tileSize: 256,
zoomOffset: 0,
maxZoom: 9,
extent: [ -180, -85.051129, 179, 85.051129 ]
}
}
)
.color('COLOR')
.active(true);
scene.addLayer(layer);
});

41
packages/site/examples/tile/vector/demo/text.js
View File

@ -1,41 +0,0 @@
import { Scene, PointLayer } from '@antv/l7';
import { Map } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
stencil: true,
map: new Map({
center: [ 100, 30.3628 ],
zoom: 1
})
});
scene.on('loaded', () => {
const layer = new PointLayer({
featureId: 'COLOR',
sourceLayer: 'ecoregions2'
});
layer
.source(
'https://ganos.oss-cn-hangzhou.aliyuncs.com/m2/rs_l7/{z}/{x}/{y}.pbf',
{
parser: {
type: 'mvt',
tileSize: 256,
zoomOffset: 0,
maxZoom: 9
}
}
)
.shape('NNH_NAME', 'text')
.size(10)
.color('COLOR')
.active(true)
.style({
stroke: '#00f',
strokeWidth: 1,
textAllowOverlap: false
});
scene.addLayer(layer);
});

4
packages/site/examples/tile/vector/index.en.md
View File

@ -1,4 +0,0 @@
---
title: Vector Tile
order: 1
---

4
packages/site/examples/tile/vector/index.zh.md
View File

@ -1,4 +0,0 @@
---
title: 矢量瓦片图层
order: 1
---