|
|
@@ -5,6 +5,7 @@ let chinaLineResource=undefined;
|
|
|
let currentDatas=[];
|
|
|
let currentDataIndex=0;
|
|
|
let yellowMapLayer=undefined;
|
|
|
+let redMapLayer=undefined;
|
|
|
let currentPosition=[];
|
|
|
let xxgcxy=[]; //信息工程学院
|
|
|
let chxy=[]; //测绘学院
|
|
|
@@ -12,6 +13,7 @@ let dzjsxy=[];//电子技术学院
|
|
|
let ygyxy=[];//外国语学院
|
|
|
let roadInterval;
|
|
|
let onTimeInterval;
|
|
|
+
|
|
|
const viewer=new Cesium.Viewer("global-container",{
|
|
|
shouldAnimate: true,
|
|
|
infoBox: false, //是否显示点击要素之后显示的信息
|
|
|
@@ -68,11 +70,10 @@ function changeLocation(){
|
|
|
chxy.length>0&&changeImgLocation(chxy[chxy.length-1].position[0],chxy[chxy.length-1].position[1],2)
|
|
|
dzjsxy.length>0&&changeImgLocation(dzjsxy[dzjsxy.length-1].position[0],dzjsxy[dzjsxy.length-1].position[1],3)
|
|
|
ygyxy.length>0&&changeImgLocation(ygyxy[ygyxy.length-1].position[0],ygyxy[ygyxy.length-1].position[1],4)
|
|
|
-
|
|
|
- xxgcxy.length>0&&changeFontLocation(xxgcxy[xxgcxy.length-1].position[0],xxgcxy[xxgcxy.length-1].position[1],xxgcxy[xxgcxy.length-1].imgUrl,1)
|
|
|
- chxy.length>0&&changeFontLocation(chxy[chxy.length-1].position[0],chxy[chxy.length-1].position[1],xxgcxy[xxgcxy.length-1].imgUrl,1)
|
|
|
- dzjsxy.length>0&&changeFontLocation(dzjsxy[dzjsxy.length-1].position[0],dzjsxy[dzjsxy.length-1].position[1],xxgcxy[xxgcxy.length-1].imgUrl,1)
|
|
|
- ygyxy.length>0&&changeFontLocation(ygyxy[ygyxy.length-1].position[0],ygyxy[ygyxy.length-1].position[1],xxgcxy[xxgcxy.length-1].imgUrl,1)
|
|
|
+ xxgcxy.length>0&&changeFontLocation(xxgcxy[xxgcxy.length-1].position[0],xxgcxy[xxgcxy.length-1].position[1],xxgcxy[xxgcxy.length-1].imgUrl,1,StyleClass)
|
|
|
+ chxy.length>0&&changeFontLocation(chxy[chxy.length-1].position[0],chxy[chxy.length-1].position[1],xxgcxy[xxgcxy.length-1].imgUrl,1,StyleClass)
|
|
|
+ dzjsxy.length>0&&changeFontLocation(dzjsxy[dzjsxy.length-1].position[0],dzjsxy[dzjsxy.length-1].position[1],xxgcxy[xxgcxy.length-1].imgUrl,1,StyleClass)
|
|
|
+ ygyxy.length>0&&changeFontLocation(ygyxy[ygyxy.length-1].position[0],ygyxy[ygyxy.length-1].position[1],xxgcxy[xxgcxy.length-1].imgUrl,1,StyleClass)
|
|
|
}
|
|
|
/**
|
|
|
* 动态箭头生成函数
|
|
|
@@ -157,7 +158,6 @@ function showData(result){
|
|
|
chxy=[];
|
|
|
dzjsxy=[];
|
|
|
ygyxy=[];
|
|
|
- console.log(result);
|
|
|
// showPoints(result);
|
|
|
showTifAndRoad(result);
|
|
|
}
|
|
|
@@ -165,16 +165,16 @@ function showData(result){
|
|
|
//添加地图基础数据
|
|
|
function addMapInit(){
|
|
|
|
|
|
- let url="http://192.168.0.95:8081/geoserver/gwc/service/wmts";
|
|
|
+ let url="http://120.24.176.22:8080/geoserver/gwc/service/wmts";
|
|
|
|
|
|
let matrixIds = ['EPSG:4326:0', 'EPSG:4326:1', 'EPSG:4326:2', 'EPSG:4326:3', 'EPSG:4326:4', 'EPSG:4326:5', 'EPSG:4326:6', 'EPSG:4326:7', 'EPSG:4326:8', 'EPSG:4326:9', 'EPSG:4326:10',
|
|
|
'EPSG:4326:11', 'EPSG:4326:12', 'EPSG:4326:13', 'EPSG:4326:14', 'EPSG:4326:15', 'EPSG:4326:16', 'EPSG:4326:17', 'EPSG:4326:18', 'EPSG:4326:19', 'EPSG:4326:20', 'EPSG:4326:21'];
|
|
|
|
|
|
- //1.新建ImageryProvider
|
|
|
+ //1.新建ImageryProvider yellow
|
|
|
let wmtsImageryProvider = new Cesium.WebMapTileServiceImageryProvider({
|
|
|
url: url,
|
|
|
- layer: "cite:globaldem21",
|
|
|
- style: 'zz',
|
|
|
+ layer: "xiaoshibianqian:dem-yellow",
|
|
|
+ style: '',
|
|
|
format: 'image/png',
|
|
|
tileMatrixSetID: 'EPSG:4326',
|
|
|
tileMatrixLabels: matrixIds,
|
|
|
@@ -185,15 +185,33 @@ function addMapInit(){
|
|
|
});
|
|
|
yellowMapLayer=new Cesium.ImageryLayer(wmtsImageryProvider);
|
|
|
viewer.imageryLayers.add(yellowMapLayer);
|
|
|
+ //1.新建ImageryProvider yellow
|
|
|
+ let wmtsImageryProviderred = new Cesium.WebMapTileServiceImageryProvider({
|
|
|
+ url: url,
|
|
|
+ layer: "xiaoshibianqian:dem-red",
|
|
|
+ style: '',
|
|
|
+ format: 'image/png',
|
|
|
+ tileMatrixSetID: 'EPSG:4326',
|
|
|
+ tileMatrixLabels: matrixIds,
|
|
|
+ tilingScheme: new Cesium.GeographicTilingScheme({
|
|
|
+ numberOfLevelZeroTilesX: 2,
|
|
|
+ numberOfLevelZeroTilesY: 1
|
|
|
+ })
|
|
|
+ });
|
|
|
+ redMapLayer=new Cesium.ImageryLayer(wmtsImageryProviderred);
|
|
|
+viewer.imageryLayers.add(redMapLayer);
|
|
|
+
|
|
|
+yellowMapLayer.show=false;
|
|
|
+redMapLayer.show=false;
|
|
|
Cesium.GeoJsonDataSource.load("./china1.json").then(ds=>{
|
|
|
viewer.dataSources.add(ds);
|
|
|
chinaLineResource=ds;
|
|
|
ds.entities.values.map(entity => {
|
|
|
- entity.polyline.material=new Cesium.Color(200/255, 169/255,145/255);
|
|
|
+ entity.polyline.material=new Cesium.Color(255/255, 255/255,255/255);
|
|
|
entity.polyline.width=1;
|
|
|
});
|
|
|
});
|
|
|
-
|
|
|
+
|
|
|
$.ajax({
|
|
|
type: 'GET',
|
|
|
url: "./data.json",
|
|
|
@@ -247,8 +265,6 @@ function clearMap(){
|
|
|
}
|
|
|
//特定时间
|
|
|
function onAtimeShow(time){
|
|
|
- console.log(datas);
|
|
|
- console.log("time--------------------------------------",time)
|
|
|
let index=0;
|
|
|
for(let i=0;i<datas.length;i++){
|
|
|
if(datas[i].time==time){
|
|
|
@@ -308,7 +324,8 @@ function showTifAndRoad(result,index){
|
|
|
}
|
|
|
|
|
|
function showTifAndRoadPrivate(result,i,index){
|
|
|
- changeFontLocation(result[i].position[0],result[i].position[1],result[i].imgUrl,index)
|
|
|
+
|
|
|
+ changeFontLocation(result[i].position[0],result[i].position[1],result[i].imgUrl,index,StyleClass)
|
|
|
changeImgLocation(result[i].position[0],result[i].position[1],result[i].type);
|
|
|
if(result[i].type==1){
|
|
|
xxgcxy.push(result[i])
|
|
|
@@ -430,117 +447,42 @@ function pauseShow(){
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-function changeStyle(){
|
|
|
- yellowMapLayer.show=!yellowMapLayer.show;
|
|
|
- !yellowMapLayer.show&&chinaLineResource.entities.values.map(entity => {
|
|
|
- entity.polyline.material=new Cesium.Color(255/255,255/255,255/255,0.8);
|
|
|
- });
|
|
|
- yellowMapLayer.show&&chinaLineResource.entities.values.map(entity => {
|
|
|
- entity.polyline.material=new Cesium.Color(200/255, 169/255,145/255);
|
|
|
- });
|
|
|
- yellowMapLayer.show&&pointsSource.entities.values.map(p=>{
|
|
|
- p.billboard.color=Cesium.Color.YELLOW;
|
|
|
- });
|
|
|
- !yellowMapLayer.show&&pointsSource.entities.values.map(p=>{
|
|
|
- p.billboard.color=Cesium.Color.WHITE;
|
|
|
- });
|
|
|
+function changeStyle(type){
|
|
|
+ StyleClass=type;
|
|
|
+ if(type==RED){
|
|
|
+ redMapLayer.show=true;
|
|
|
+ yellowMapLayer.show=false;
|
|
|
+ chinaLineResource&&chinaLineResource.entities.values.map(entity => {
|
|
|
+ entity.polyline.material=new Cesium.Color(255/255,0,0,0.8);
|
|
|
+ });
|
|
|
+ }else if(type==YELLOW){
|
|
|
+ yellowMapLayer.show=true;
|
|
|
+ redMapLayer.show=false;
|
|
|
+ chinaLineResource&&chinaLineResource.entities.values.map(entity => {
|
|
|
+ entity.polyline.material=new Cesium.Color(200/255, 169/255,145/255);
|
|
|
+ });
|
|
|
+ }else {
|
|
|
+ yellowMapLayer.show=false;
|
|
|
+ redMapLayer.show=false;
|
|
|
+ chinaLineResource&&chinaLineResource.entities.values.map(entity => {
|
|
|
+ entity.polyline.material=new Cesium.Color(255/255,255/255,255/255,0.8);
|
|
|
+ });
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
|
|
|
-// /**
|
|
|
-// * 按时间展示点
|
|
|
-// * @param {*} result
|
|
|
-// */
|
|
|
-// function showPoints(result){
|
|
|
-// let start,stop;
|
|
|
-// start = Cesium.JulianDate.fromDate(new Date());
|
|
|
-// // 结束时间
|
|
|
-// stop = Cesium.JulianDate.addSeconds(start, 4*result.length, new Cesium.JulianDate());
|
|
|
-// // 设置时钟开始时间
|
|
|
-// viewer.clock.startTime = start.clone();
|
|
|
-// // 设置时钟当前时间
|
|
|
-// viewer.clock.currentTime = start.clone();
|
|
|
-// // 设置时钟停止时间
|
|
|
-// viewer.clock.stopTime = stop.clone();
|
|
|
-// // 时间轴
|
|
|
-// viewer.clock.currentTime =start;
|
|
|
-// viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
|
|
|
-// for(let i=0;i<result.length;i++){
|
|
|
-// html2canvas(result[i].imgUrl).then(canvas=>{
|
|
|
-// // 结束时间
|
|
|
-// if(i==0){
|
|
|
-// stop= Cesium.JulianDate.addSeconds(start, 4, new Cesium.JulianDate());
|
|
|
-// }else{
|
|
|
-// start = stop;
|
|
|
-// stop= Cesium.JulianDate.addSeconds(start,4,new Cesium.JulianDate());
|
|
|
-// }
|
|
|
-// let entity=new Cesium.Entity({
|
|
|
-// position:Cesium.Cartesian3.fromDegrees(result[i].position[0],result[i].position[1],1000),
|
|
|
-// availability:new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
|
|
|
-// start : start,
|
|
|
-// stop : stop
|
|
|
-// })]),
|
|
|
-// billboard:{
|
|
|
-// // image:result[i].imgUrl,
|
|
|
-// image:canvas,
|
|
|
-// //scale:0.2,
|
|
|
-// scale:1,
|
|
|
-// pixelOffset:new Cesium.Cartesian2(0,-20),
|
|
|
-// }
|
|
|
-// });
|
|
|
-// pointsSource.entities.add(entity);
|
|
|
-// if(i+1<result.length&&result[i].time==result[i+1].time){
|
|
|
-// i++;
|
|
|
-// let nextEntity=new Cesium.Entity({
|
|
|
-// position:Cesium.Cartesian3.fromDegrees(result[i].position[0],result[i].position[1],1000),
|
|
|
-// availability:new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
|
|
|
-// start : start,
|
|
|
-// stop : stop
|
|
|
-// })]),
|
|
|
-// billboard:{
|
|
|
-// image:result[i].imgUrl,
|
|
|
-// scale:0.2,
|
|
|
-// pixelOffset:new Cesium.Cartesian2(0,-20)
|
|
|
-// }
|
|
|
-// });
|
|
|
-// pointsSource.entities.add(nextEntity);
|
|
|
-
|
|
|
-// }
|
|
|
-// });
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-// }
|
|
|
-// }
|
|
|
|
|
|
addMapInit();
|
|
|
getGif();//动态图
|
|
|
ontimeShow()
|
|
|
// document.getElementById("bu").addEventListener("click",()=>{
|
|
|
-// changeStyle();
|
|
|
+// changeStyle(Style.BLUE);
|
|
|
// });
|
|
|
-
|
|
|
// document.getElementById("bu1").addEventListener("click",()=>{
|
|
|
-// let i=0;
|
|
|
-// onAtimeShow(times[i]);
|
|
|
-// i++;
|
|
|
-// setInterval(()=>{
|
|
|
-// onAtimeShow(times[i]);//时间轴：点击某个年份的方法
|
|
|
-// i++;
|
|
|
-// },4000)
|
|
|
-
|
|
|
+// changeStyle(Style.YELLOW);
|
|
|
// });
|
|
|
-// document.getElementById("bu4").addEventListener("click",()=>{
|
|
|
-// let time='1970.1';
|
|
|
-
|
|
|
-// onAtimeShowPause(time);//时间轴：点击某个年份的方法
|
|
|
-// });
|
|
|
-// // document.getElementById("bu2").addEventListener("click",()=>{
|
|
|
-// // console.log("times",times);
|
|
|
-// // ontimeShow(); //时间轴：启动和复位
|
|
|
-// // });
|
|
|
-
|
|
|
-// document.getElementById("bu3").addEventListener("click",()=>{
|
|
|
-// pauseShow(); //时间轴：暂停和继续
|
|
|
-// });
|
|
|
+// document.getElementById("bu2").addEventListener("click",()=>{
|
|
|
+// changeStyle(Style.RED);
|
|
|
+// });
|
|
|
+
|
|
|
|
DR/4DAGE
