mirror of https://gitee.com/antv-l7/antv-l7
chore: remove useless demo (#1233)
* feat: 在点图层中去除 global 的耦合 * style: lint style * fix: 修复更新 style 的同时更新了 option 带来的问题 * style: lint style * feat: 拆除 arc3d 地球模式和普通模式的耦合 * style: lint style * chore: remove useless demo
This commit is contained in:
YiQianYao
GitHub
parent
c2812205c5
commit
f05073fb07
|
|
@ -1,22 +0,0 @@
|
|||
import { storiesOf } from '@storybook/react';
|
||||
import * as React from 'react';
|
||||
import GaodeMapScene from './components/Scene';
|
||||
import WorldMap from './components/world';
|
||||
import WorldLayer from './components/worldLayer';
|
||||
import WorldExtrueMap from './components/world_ncov';
|
||||
import WorldBubbleMap from './components/world_ncov_bubble';
|
||||
import WorldBubbleAnimateMap from './components/world_ncov_bubble_animate';
|
||||
import WorldColumnMap from './components/world_ncov_column';
|
||||
import WorldFillMap from './components/world_ncov_fill';
|
||||
|
||||
// @ts-ignore
|
||||
storiesOf('React', module).add('高德地图', () => <GaodeMapScene />);
|
||||
storiesOf('React', module).add('世界地图', () => <WorldMap />);
|
||||
storiesOf('React', module).add('WorldLayer', () => <WorldLayer />);
|
||||
storiesOf('React', module).add('疫情地图-填充图', () => <WorldFillMap />);
|
||||
storiesOf('React', module).add('疫情地图-气泡图', () => <WorldBubbleMap />);
|
||||
storiesOf('React', module).add('疫情地图-3D柱图', () => <WorldColumnMap />);
|
||||
storiesOf('React', module).add('疫情地图- 3D填充', () => <WorldExtrueMap />);
|
||||
storiesOf('React', module).add('疫情地图- 气泡动画', () => (
|
||||
<WorldBubbleAnimateMap />
|
||||
));
|
||||
|
|
@ -1,116 +0,0 @@
|
|||
import {
|
||||
AMapScene,
|
||||
AMapSceneV2,
|
||||
LayerContext,
|
||||
LayerEvent,
|
||||
LineLayer,
|
||||
MapboxScene,
|
||||
Marker,
|
||||
PolygonLayer,
|
||||
Popup,
|
||||
SceneContext,
|
||||
SceneEvent,
|
||||
} from '@antv/l7-react';
|
||||
import * as React from 'react';
|
||||
|
||||
export default React.memo(function Map() {
|
||||
const [data, setData] = React.useState();
|
||||
React.useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
const response = await fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/32e1f3ab-8588-46cb-8a47-75afb692117d.json',
|
||||
);
|
||||
const raw = await response.json();
|
||||
setData(raw);
|
||||
};
|
||||
fetchData();
|
||||
}, []);
|
||||
const popupClick = (e: any) => {
|
||||
console.log(e);
|
||||
// e.stopPropagation();
|
||||
alert('11333');
|
||||
};
|
||||
|
||||
const markerClick = (e: any) => {
|
||||
console.log(e);
|
||||
// e.stopPropagation();
|
||||
alert('marker');
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<AMapSceneV2
|
||||
map={{
|
||||
center: [110.19382669582967, 50.258134],
|
||||
pitch: 0,
|
||||
style: 'dark',
|
||||
zoom: 1,
|
||||
}}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
>
|
||||
{/* <Popup
|
||||
option={{
|
||||
closeOnClick: false,
|
||||
stopPropagation: false,
|
||||
}}
|
||||
lnglat={[115, 30.25] as number[]}
|
||||
>
|
||||
<p onClick={popupClick}>122224</p>
|
||||
</Popup> */}
|
||||
<Marker lnglat={[100.1938, 27.25] as number[]}>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid #fff',
|
||||
background: '#FFF',
|
||||
fontSize: '24px',
|
||||
width: '50px',
|
||||
height: '150px',
|
||||
}}
|
||||
// onClick={markerClick}
|
||||
onTouchStart={markerClick}
|
||||
>
|
||||
1
|
||||
</div>
|
||||
</Marker>
|
||||
<PolygonLayer
|
||||
key={'2'}
|
||||
source={{
|
||||
data,
|
||||
}}
|
||||
size={{
|
||||
values: 1,
|
||||
}}
|
||||
color={{
|
||||
field: 'name',
|
||||
values: [
|
||||
'#2E8AE6',
|
||||
'#69D1AB',
|
||||
'#DAF291',
|
||||
'#FFD591',
|
||||
'#FF7A45',
|
||||
'#CF1D49',
|
||||
],
|
||||
}}
|
||||
shape={{
|
||||
values: 'fill',
|
||||
}}
|
||||
style={{
|
||||
opacity: 1,
|
||||
}}
|
||||
>
|
||||
<LayerEvent
|
||||
type="click"
|
||||
handler={(e) => {
|
||||
console.log('LayerEvent', e);
|
||||
}}
|
||||
/>
|
||||
</PolygonLayer>
|
||||
</AMapSceneV2>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
|
@ -1,80 +0,0 @@
|
|||
import { LineLayer, MapboxScene, PolygonLayer, Popup } from '@antv/l7-react';
|
||||
import * as React from 'react';
|
||||
|
||||
export default React.memo(function Map() {
|
||||
const [data, setData] = React.useState();
|
||||
React.useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
const response = await fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/68dc6756-627b-4e9e-a5ba-e834f6ba48f8.json',
|
||||
);
|
||||
const data = await response.json();
|
||||
setData(data);
|
||||
};
|
||||
fetchData();
|
||||
}, []);
|
||||
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,
|
||||
}}
|
||||
>
|
||||
<Popup lnglat={[110.1938, 50.25] as number[]}>
|
||||
<p>122222</p>
|
||||
</Popup>
|
||||
{data && [
|
||||
<PolygonLayer
|
||||
key={'2'}
|
||||
source={{
|
||||
data,
|
||||
}}
|
||||
color={{
|
||||
field: 'name',
|
||||
values: [
|
||||
'#2E8AE6',
|
||||
'#69D1AB',
|
||||
'#DAF291',
|
||||
'#FFD591',
|
||||
'#FF7A45',
|
||||
'#CF1D49',
|
||||
],
|
||||
}}
|
||||
shape={{
|
||||
values: 'fill',
|
||||
}}
|
||||
style={{
|
||||
opacity: 1,
|
||||
}}
|
||||
/>,
|
||||
|
||||
<LineLayer
|
||||
key={'21'}
|
||||
source={{
|
||||
data,
|
||||
}}
|
||||
color={{
|
||||
values: '#fff',
|
||||
}}
|
||||
shape={{
|
||||
values: 'line',
|
||||
}}
|
||||
style={{
|
||||
opacity: 1,
|
||||
}}
|
||||
/>,
|
||||
]}
|
||||
</MapboxScene>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
|
@ -1,81 +0,0 @@
|
|||
import { Scene } from '@antv/l7';
|
||||
import { WorldLayer } from '@antv/l7-district';
|
||||
import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
|
||||
import * as React from 'react';
|
||||
|
||||
export default class Country extends React.Component {
|
||||
// @ts-ignore
|
||||
private scene: Scene;
|
||||
|
||||
public componentWillUnmount() {
|
||||
this.scene.destroy();
|
||||
}
|
||||
|
||||
public async componentDidMount() {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMapV2({
|
||||
pitch: 0,
|
||||
style: 'dark',
|
||||
center: [116.2825, 39.9],
|
||||
// zoom: 0,
|
||||
zoom: 3,
|
||||
// minZoom: 0,
|
||||
maxZoom: 24,
|
||||
}),
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
const Layer = new WorldLayer(scene, {
|
||||
autoFit: false,
|
||||
data: [],
|
||||
geoDataLevel: 2,
|
||||
joinBy: ['SOC', 'SOC'],
|
||||
fill: {
|
||||
color: {
|
||||
field: 'NAME_CHN',
|
||||
values: ['rgba(1.0, 0.0, 0.0, 0.5)'],
|
||||
},
|
||||
},
|
||||
stroke: '#ccc',
|
||||
label: {
|
||||
enable: true,
|
||||
textAllowOverlap: false,
|
||||
field: 'NAME_ENG',
|
||||
padding: [5, 5],
|
||||
},
|
||||
popup: {
|
||||
// enable: true,
|
||||
enable: false,
|
||||
Html: (props) => {
|
||||
return `<span>${props.NAME_CHN}</span>`;
|
||||
},
|
||||
},
|
||||
});
|
||||
// @ts-ignore
|
||||
// window.onresize = () => Layer.fillLayer.fitBounds()
|
||||
|
||||
// scene.setZoom(4)
|
||||
// console.log(scene.getZoom())
|
||||
setTimeout(() => {
|
||||
console.log('***', scene.getZoom());
|
||||
}, 1500);
|
||||
});
|
||||
|
||||
this.scene = scene;
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,170 +0,0 @@
|
|||
import {
|
||||
LineLayer,
|
||||
MapboxScene,
|
||||
Marker,
|
||||
PolygonLayer,
|
||||
Popup,
|
||||
} from '@antv/l7-react';
|
||||
import * as React from 'react';
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
export default 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()),
|
||||
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: '#0c2c84',
|
||||
},
|
||||
}}
|
||||
color={{
|
||||
field: 'confirmedCount',
|
||||
values: (count) => {
|
||||
return count > 10000
|
||||
? '#b10026'
|
||||
: count > 1000
|
||||
? '#e31a1c'
|
||||
: count > 500
|
||||
? '#fc4e2a'
|
||||
: count > 100
|
||||
? '#fd8d3c'
|
||||
: count > 10
|
||||
? '#feb24c'
|
||||
: count > 1
|
||||
? '#fed976'
|
||||
: 'rgb(255,255,255)';
|
||||
},
|
||||
}}
|
||||
shape={{
|
||||
values: 'extrude',
|
||||
}}
|
||||
size={{
|
||||
field: 'confirmedCount',
|
||||
values: [0, 200000, 600000, 800000, 1000000],
|
||||
}}
|
||||
style={{
|
||||
opacity: 1,
|
||||
}}
|
||||
/>,
|
||||
<LineLayer
|
||||
key={'2'}
|
||||
source={{
|
||||
data,
|
||||
}}
|
||||
size={{
|
||||
values: 0.6,
|
||||
}}
|
||||
color={{
|
||||
values: '#aaa',
|
||||
}}
|
||||
shape={{
|
||||
values: 'line',
|
||||
}}
|
||||
style={{
|
||||
opacity: 1,
|
||||
}}
|
||||
/>,
|
||||
]}
|
||||
</MapboxScene>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
|
@ -1,273 +0,0 @@
|
|||
import {
|
||||
LayerEvent,
|
||||
LineLayer,
|
||||
MapboxScene,
|
||||
Marker,
|
||||
PointLayer,
|
||||
PolygonLayer,
|
||||
Popup,
|
||||
} from '@antv/l7-react';
|
||||
import * as React from 'react';
|
||||
const colors = [
|
||||
'#ffffb2',
|
||||
'#fed976',
|
||||
'#feb24c',
|
||||
'#fd8d3c',
|
||||
'#fc4e2a',
|
||||
'#e31a1c',
|
||||
'#b10026',
|
||||
];
|
||||
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;
|
||||
}
|
||||
|
||||
export default 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()),
|
||||
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,
|
||||
});
|
||||
}
|
||||
function hidePopup(args: any): void {
|
||||
setPopupInfo(undefined);
|
||||
}
|
||||
|
||||
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>
|
||||
<button
|
||||
onMouseDown={() => {
|
||||
alert('test');
|
||||
}}
|
||||
value="点击"
|
||||
>
|
||||
点击
|
||||
</button>
|
||||
现有确诊:{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={{
|
||||
values: '#b10026',
|
||||
}}
|
||||
shape={{
|
||||
values: 'circle',
|
||||
}}
|
||||
active={{
|
||||
option: {
|
||||
color: '#0c2c84',
|
||||
},
|
||||
}}
|
||||
size={{
|
||||
field: 'confirmedCount',
|
||||
values: [0, 30],
|
||||
}}
|
||||
style={{
|
||||
opacity: 0.6,
|
||||
}}
|
||||
>
|
||||
<LayerEvent type="click" handler={showPopup} />
|
||||
{/* <LayerEvent type="mouseout" handler={hidePopup} /> */}
|
||||
</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,
|
||||
}}
|
||||
>
|
||||
<LayerEvent type="click" handler={showPopup} />
|
||||
</PointLayer>,
|
||||
]}
|
||||
</MapboxScene>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
|
@ -1,223 +0,0 @@
|
|||
import {
|
||||
LayerEvent,
|
||||
LineLayer,
|
||||
MapboxScene,
|
||||
Marker,
|
||||
PointLayer,
|
||||
PolygonLayer,
|
||||
Popup,
|
||||
} from '@antv/l7-react';
|
||||
import * as React from 'react';
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
export default 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()),
|
||||
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',
|
||||
},
|
||||
}}
|
||||
size={{
|
||||
field: 'confirmedCount',
|
||||
values: [5, 60],
|
||||
}}
|
||||
animate={{
|
||||
enable: true,
|
||||
}}
|
||||
style={{
|
||||
opacity: 1.0,
|
||||
}}
|
||||
>
|
||||
<LayerEvent type="mousemove" handler={showPopup} />
|
||||
</PointLayer>,
|
||||
]}
|
||||
</MapboxScene>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
|
@ -1,222 +0,0 @@
|
|||
import {
|
||||
LineLayer,
|
||||
MapboxScene,
|
||||
Marker,
|
||||
PointLayer,
|
||||
PolygonLayer,
|
||||
Popup,
|
||||
} from '@antv/l7-react';
|
||||
import * as React from 'react';
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
export default 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()),
|
||||
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',
|
||||
},
|
||||
}}
|
||||
color={{
|
||||
field: 'confirmedCount',
|
||||
values: (count) => {
|
||||
return count > 10000
|
||||
? '#b10026'
|
||||
: count > 1000
|
||||
? '#e31a1c'
|
||||
: count > 500
|
||||
? '#fc4e2a'
|
||||
: count > 100
|
||||
? '#fd8d3c'
|
||||
: count > 10
|
||||
? '#feb24c'
|
||||
: count > 1
|
||||
? '#fed976'
|
||||
: '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>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
|
@ -1,221 +0,0 @@
|
|||
import {
|
||||
LayerEvent,
|
||||
LineLayer,
|
||||
MapboxScene,
|
||||
AMapScene,
|
||||
Marker,
|
||||
PolygonLayer,
|
||||
Popup,
|
||||
} from '@antv/l7-react';
|
||||
import * as React from 'react';
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
export default React.memo(function Map() {
|
||||
const [showScene, setShowScene] = React.useState(true);
|
||||
const [data, setData] = React.useState();
|
||||
const [popupInfo, setPopupInfo] = React.useState<{
|
||||
lnglat: number[];
|
||||
feature: any;
|
||||
}>();
|
||||
|
||||
function showPopup(args: any): void {
|
||||
console.log(args.lngLat);
|
||||
setPopupInfo({
|
||||
lnglat: args.lngLat,
|
||||
feature: args.feature,
|
||||
});
|
||||
}
|
||||
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()),
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/bmw-prod/55a7dd2e-3fb4-4442-8899-900bb03ee67a.json',
|
||||
).then((d) => d.json()),
|
||||
]);
|
||||
setData(joinData(geoData, ncovData.results));
|
||||
};
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
setTimeout(() => {
|
||||
// setShowScene(false)
|
||||
}, 3000);
|
||||
|
||||
return (
|
||||
<>
|
||||
{showScene && (
|
||||
<AMapScene
|
||||
map={{
|
||||
center: [110.19382669582967, 50.258134],
|
||||
pitch: 0,
|
||||
style: 'blank',
|
||||
zoom: 10,
|
||||
}}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
onSceneLoaded={(scene) => {
|
||||
setTimeout(() => {
|
||||
// scene.removeAllLayer()
|
||||
// scene.destroy()
|
||||
}, 3000);
|
||||
// setTimeout(() => scene.destroy(), 5000)
|
||||
}}
|
||||
>
|
||||
{popupInfo && (
|
||||
<Popup lnglat={popupInfo.lnglat}>
|
||||
{popupInfo.feature.name}
|
||||
<ul
|
||||
style={{
|
||||
margin: 0,
|
||||
}}
|
||||
>
|
||||
<li>
|
||||
<button
|
||||
onClick={() => {
|
||||
alert('test');
|
||||
}}
|
||||
value="点击"
|
||||
>
|
||||
点击
|
||||
</button>
|
||||
现有确诊:{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,
|
||||
fitBoundsOptions: {
|
||||
duration: 0,
|
||||
animate: false,
|
||||
},
|
||||
}}
|
||||
source={{
|
||||
data,
|
||||
}}
|
||||
scale={{
|
||||
values: {
|
||||
confirmedCount: {
|
||||
type: 'quantile',
|
||||
},
|
||||
},
|
||||
}}
|
||||
active={{
|
||||
option: {
|
||||
color: '#0c2c84',
|
||||
},
|
||||
}}
|
||||
color={{
|
||||
field: 'confirmedCount',
|
||||
values: [
|
||||
'#732200',
|
||||
'#CC3D00',
|
||||
'#FF6619',
|
||||
'#FF9466',
|
||||
'#FFC1A6',
|
||||
'#FCE2D7',
|
||||
].reverse(),
|
||||
}}
|
||||
shape={{
|
||||
values: 'fill',
|
||||
}}
|
||||
style={{
|
||||
opacity: 1,
|
||||
}}
|
||||
>
|
||||
<LayerEvent type="click" handler={showPopup} />
|
||||
{/* <LayerEvent type="mouseout" handler={hidePopup} /> */}
|
||||
</PolygonLayer>,
|
||||
,
|
||||
<LineLayer
|
||||
key={'2'}
|
||||
source={{
|
||||
data,
|
||||
}}
|
||||
size={{
|
||||
values: 0.6,
|
||||
}}
|
||||
color={{
|
||||
values: '#aaa',
|
||||
}}
|
||||
shape={{
|
||||
values: 'line',
|
||||
}}
|
||||
style={{
|
||||
opacity: 1,
|
||||
}}
|
||||
/>,
|
||||
]}
|
||||
</AMapScene>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
|
@ -1,78 +0,0 @@
|
|||
// @ts-ignore
|
||||
import { LineLayer, Scene } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
import * as React from 'react';
|
||||
|
||||
export default class Line extends React.Component {
|
||||
// @ts-ignore
|
||||
private scene: Scene;
|
||||
|
||||
public componentWillUnmount() {
|
||||
this.scene.destroy();
|
||||
}
|
||||
|
||||
public async componentDidMount() {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
center: [120.19382669582967, 30.258134],
|
||||
pitch: 0,
|
||||
zoom: 8,
|
||||
viewMode: '3D',
|
||||
}),
|
||||
});
|
||||
this.scene = scene;
|
||||
|
||||
scene.on('loaded', () => {
|
||||
// @ts-ignore
|
||||
const layer = new LineLayer({})
|
||||
.source({
|
||||
type: 'FeatureCollection',
|
||||
name: 'dl2',
|
||||
crs: {
|
||||
type: 'name',
|
||||
properties: {
|
||||
name: 'urn:ogc:def:crs:OGC:1.3:CRS84',
|
||||
},
|
||||
},
|
||||
features: [
|
||||
{
|
||||
type: 'Feature',
|
||||
properties: {},
|
||||
geometry: {
|
||||
type: 'MultiLineString',
|
||||
coordinates: [
|
||||
[
|
||||
[120, 32],
|
||||
[121, 32],
|
||||
[121, 30],
|
||||
],
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
})
|
||||
.size(5)
|
||||
.shape('line')
|
||||
.color('#25d8b7');
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
import { storiesOf } from '@storybook/react';
|
||||
import * as React from 'react';
|
||||
|
||||
|
||||
import Line from './components/line';
|
||||
|
||||
|
||||
// @ts-ignore
|
||||
storiesOf('functions', module)
|
||||
|
||||
.add('line', () => <Line />)
|
||||
|
||||
|
||||
Loading…
Reference in New Issue