mirror of https://gitee.com/antv-l7/antv-l7
207 lines
5.1 KiB
TypeScript
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>
|
|
</>
|
|
);
|
|
});
|