68 lines
1.8 KiB
JavaScript
68 lines
1.8 KiB
JavaScript
import { useEffect, useMemo, useState } from "react";
|
|
import { ImageryLayer, useCesium } from "resium";
|
|
import { WebMapServiceImageryProvider } from "cesium";
|
|
import { useInterval } from "ahooks";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
|
|
const url = "http://analysis.tpdc.ac.cn/gs/geoserver/phitrellis/wms";
|
|
const nameList = [
|
|
1980, 1981, 1982, 1983, 1984, 1985, 1986, 1987, 1988, 1989, 1990, 1991, 1992,
|
|
1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005,
|
|
2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017,
|
|
].map((item) => "phitrellis:4_1_la_" + item);
|
|
|
|
function LabradorImageLayer() {
|
|
const dispatch = useDispatch();
|
|
const { viewer } = useCesium();
|
|
const { imageLayer } = useSelector((state) => state.data);
|
|
const [delay, setDelay] = useState(undefined);
|
|
const [index, setIndex] = useState(0);
|
|
|
|
useEffect(() => {
|
|
const { labrador } = imageLayer;
|
|
if (!!labrador) {
|
|
setDelay((60 / nameList.length) * 1000);
|
|
setIndex(0);
|
|
}
|
|
}, [imageLayer]);
|
|
|
|
const layers = nameList.map((name, index) => {
|
|
const tempProvider = useMemo(
|
|
() =>
|
|
new WebMapServiceImageryProvider({
|
|
url: url,
|
|
layers: name,
|
|
parameters: {
|
|
service: "WMS",
|
|
format: "image/png",
|
|
transparent: true,
|
|
},
|
|
}),
|
|
[name, url]
|
|
);
|
|
|
|
return (
|
|
<ImageryLayer
|
|
key={`ImageryLayer-${index}`}
|
|
imageryProvider={tempProvider}
|
|
show={true}
|
|
/>
|
|
);
|
|
});
|
|
|
|
useInterval(() => {
|
|
setIndex((index) => index + 1);
|
|
|
|
if (index >= nameList.length) {
|
|
setIndex(0);
|
|
setDelay((60 / nameList.length) * 1000);
|
|
}
|
|
}, delay);
|
|
|
|
if (!viewer.clock?.shouldAnimate) return;
|
|
|
|
return layers[index];
|
|
}
|
|
|
|
export default LabradorImageLayer;
|