antv-l7/stories/React/components/world_ncov_fill.tsx

207 lines
5.1 KiB
TypeScript

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 [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();
}, []);
return (
<>
<AMapScene
map={{
center: [110.19382669582967, 50.258134],
pitch: 0,
style: 'blank',
zoom: 10,
}}
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
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>
</>
);
});