<template>
|
<div class="bottom">
|
<div v-if="historyShow" class="historySelectContainer">
|
<!-- 历史列表 -->
|
<div class="history-item">
|
<p class="historyTitle">历史影像</p>
|
<div class="thisYearConatiner">
|
<p class="thisYear">{{ nowDate }}</p>
|
</div>
|
</div>
|
<!-- 分屏对比 -->
|
<div class="history-item" style="margin: 0 60px">
|
<el-button class="fpBtn" @click="fp">
|
<img src="@/assets/img/bottom/fp.png" />
|
</el-button>
|
</div>
|
<!-- 时间年限滑动条 -->
|
<div class="yearSlider">
|
<!-- 上方刻度条和时间值 -->
|
<div class="topRuler">
|
<div v-for="(item, index) in 8" :key="index" class="topRulerItems">
|
<span>{{ marks[12 * index + 6] }}</span>
|
</div>
|
</div>
|
|
<!-- 滑动条 -->
|
<el-slider
|
v-model="iniData"
|
:step="6"
|
:format-tooltip="formateTooltip"
|
:max="96"
|
@input="yearChange"
|
></el-slider>
|
|
<!-- 下方刻度条和时间值 -->
|
<div class="bottomRuler">
|
<div v-for="(item, index) in 8" :key="index" class="bottomRulerItems">
|
<span>{{ marks[12 * index] }}</span
|
><span v-if="index == 7" style="right: -100%">{{
|
marks[12 * index + 12]
|
}}</span>
|
</div>
|
</div>
|
</div>
|
<div class="mapHisChange">
|
<div class="mapItem" @click="showHistory">
|
<img src="@/assets/img/bottom/1.png" />
|
<div class="mapItemTitle">历史影像</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
window.historyImager = undefined;
|
export default {
|
name: "bottom",
|
data() {
|
return {
|
// yhadd
|
show3d: true,
|
showjj: true,
|
iniData: 96,
|
nowDate: "2019",
|
marks: {},
|
// yhadd
|
historyShow: false,
|
historyIndex: undefined,
|
timeData: [],
|
yearData: null
|
};
|
},
|
methods: {
|
// yhadd
|
// 切换模式
|
changeMode() {
|
this.show3d = !this.show3d;
|
if (this.show3d) {
|
Viewer.scene.mode = 3;
|
this.$message({ message: "已切换为3d模式", type: "success" });
|
} else {
|
Viewer.scene.mode = 2;
|
this.$message({ message: "已切换为2d模式", type: "success" });
|
}
|
},
|
changeJj() {
|
this.showjj = !this.showjj;
|
},
|
// 切换街景
|
// 格式化当前的提示信息
|
formateTooltip(value) {
|
return this.marks[value];
|
},
|
// 当年份变化时
|
yearChange(index) {
|
this.nowDate = this.marks[index];
|
for (var i = 0; i < this.timeData.length; i++) {
|
if (this.timeData[i].name == this.nowDate) {
|
this.yearData = this.timeData[i];
|
}
|
}
|
if (historyImager) {
|
Viewer.imageryLayers.remove(historyImager);
|
historyImager = undefined;
|
}
|
this.addHistoryImage(
|
this.yearData.name,
|
this.yearData.urls + "?token=2c92920471632e8f0171731439580008",
|
this.yearData.layer
|
);
|
},
|
// yhadd
|
// 显示时间
|
pre: function() {
|
this.timeData.unshift(this.timeData[this.timeData.length - 1]);
|
this.timeData.pop();
|
this.changeImage();
|
},
|
next: function() {
|
this.timeData.push(this.timeData[0]);
|
this.timeData.shift();
|
this.changeImage();
|
},
|
fastGo() {
|
this.next();
|
this.next();
|
},
|
fastBack() {
|
this.pre();
|
this.pre();
|
},
|
changeImage() {
|
if (historyImager) {
|
Viewer.imageryLayers.remove(historyImager);
|
historyImager = undefined;
|
}
|
this.addHistoryImage(
|
this.timeData[2].name,
|
this.timeData[2].urls + "?token=2c92920471632e8f0171731439580008",
|
this.timeData[2].layer
|
);
|
},
|
addHistoryImage(name, urls, layer) {
|
//行列号差两倍
|
var geotil = new Cesium.GeographicTilingScheme({
|
rectangle: Cesium.Rectangle.MAX_VALUE
|
});
|
geotil.positionToTileXY = function(position, level, result) {
|
level > 0 && level++;
|
var rectangle = this._rectangle;
|
if (!Cesium.Rectangle.contains(rectangle, position)) {
|
// outside the bounds of the tiling scheme
|
return undefined;
|
}
|
|
var xTiles = this.getNumberOfXTilesAtLevel(level);
|
var yTiles = this.getNumberOfYTilesAtLevel(level);
|
|
var xTileWidth = rectangle.width / xTiles;
|
var yTileHeight = rectangle.height / yTiles;
|
|
var longitude = position.longitude;
|
if (rectangle.east < rectangle.west) {
|
longitude += Cesium.Math.TWO_PI;
|
}
|
|
var xTileCoordinate = ((longitude - rectangle.west) / xTileWidth) | 0;
|
if (xTileCoordinate >= xTiles) {
|
xTileCoordinate = xTiles - 1;
|
}
|
|
var yTileCoordinate =
|
((rectangle.north - position.latitude) / yTileHeight) | 0;
|
if (yTileCoordinate >= yTiles) {
|
yTileCoordinate = yTiles - 1;
|
}
|
|
if (!Cesium.defined(result)) {
|
return new Cesium.Cartesian2(xTileCoordinate, yTileCoordinate);
|
}
|
|
result.x = xTileCoordinate;
|
result.y = yTileCoordinate;
|
return result;
|
};
|
geotil.tileXYToRectangle = function(x, y, level, result) {
|
level > 0 && level++;
|
var rectangle = this._rectangle;
|
|
var xTiles = this.getNumberOfXTilesAtLevel(level);
|
var yTiles = this.getNumberOfYTilesAtLevel(level);
|
|
var xTileWidth = rectangle.width / xTiles;
|
var west = x * xTileWidth + rectangle.west;
|
var east = (x + 1) * xTileWidth + rectangle.west;
|
|
var yTileHeight = rectangle.height / yTiles;
|
var north = rectangle.north - y * yTileHeight;
|
var south = rectangle.north - (y + 1) * yTileHeight;
|
|
if (!Cesium.defined(result)) {
|
result = new Cesium.Rectangle(west, south, east, north);
|
}
|
|
result.west = west;
|
result.south = south;
|
result.east = east;
|
result.north = north;
|
return result;
|
};
|
historyImager = sgworld.Creator.createWebMapTileServerImageLayer(
|
name,
|
{
|
url: urls,
|
layer: layer,
|
style: "default",
|
tileMatrixSetID: "esritilematirx",
|
format: "image/png",
|
tilingScheme: geotil,
|
addLevel: 2, //层级加2
|
enablePickFeatures: false,
|
show: true
|
},
|
0,
|
Viewer.imageryLayers.length - 1,
|
true,
|
""
|
);
|
|
historyImager = historyImager.item;
|
if (this.historyIndex !== undefined) {
|
sgworld.Analysis.clearCurtainContrast();
|
this.historyIndex = (historyImager && historyImager._layerIndex) || 1;
|
sgworld.Analysis.createCurtainContrast(0, this.historyIndex);
|
}
|
},
|
fp() {
|
if (this.historyIndex !== undefined) {
|
sgworld.Analysis.clearCurtainContrast();
|
this.historyIndex = undefined;
|
} else {
|
this.historyIndex = (historyImager && historyImager._layerIndex) || 1;
|
sgworld.Analysis.createCurtainContrast(0, this.historyIndex);
|
}
|
},
|
showHistory() {
|
this.historyShow = !this.historyShow;
|
if (this.historyShow) {
|
document.getElementById("bottomInfo").style.background =
|
"rgba(0, 0, 0, 0)";
|
} else {
|
document.getElementById("bottomInfo").style.background =
|
"rgba(0, 0, 0, 0.27)";
|
}
|
if (!this.historyShow && this.historyIndex !== undefined) {
|
sgworld.Analysis.clearCurtainContrast();
|
this.historyIndex = undefined;
|
}
|
|
if (historyImager) {
|
historyImager.show = this.historyShow;
|
} else if (this.historyShow && !historyImager) {
|
this.addHistoryImage(
|
this.timeData[2].name,
|
this.timeData[2].urls + "?token=2c92920471632e8f0171731439580008",
|
this.timeData[2].layer
|
);
|
}
|
}
|
},
|
mounted() {}
|
};
|
</script>
|
<style scoped>
|
/* yhadd */
|
.clearfix:after {
|
content: "";
|
display: table;
|
height: 0;
|
visibility: both;
|
clear: both;
|
}
|
|
.mapChange,
|
.mapHisChange {
|
float: right;
|
border-radius: 5px;
|
margin-right: 10px;
|
overflow: hidden;
|
width: 118px;
|
height: 67%;
|
pointer-events: all;
|
transition: all 0.3s ease;
|
background: rgba(0, 0, 0, 0.5);
|
}
|
/* .mapChange:hover {
|
width: 12.5%;
|
} */
|
.mapItem {
|
position: relative;
|
float: right;
|
margin: 10px 10px;
|
box-sizing: border-box;
|
border: 1px solid transparent;
|
}
|
.mapItem:hover {
|
border: 1px solid #0988ff;
|
border-radius: 4px;
|
transform: scale(1.05);
|
}
|
.mapItemTitle {
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
text-align: center;
|
background: rgba(0, 0, 0, 0.5);
|
color: white;
|
width: 100%;
|
}
|
.topRuler,
|
.bottomRuler {
|
margin-top: -16px;
|
display: flex;
|
color: white;
|
}
|
.topRuler {
|
margin-bottom: -16px;
|
width: 100%;
|
margin-left: 6%;
|
}
|
.bottomRuler:last-child {
|
border-right: 1px solid white;
|
}
|
.topRuler:last-child {
|
border-right: 1px solid white;
|
}
|
.topRulerItems,
|
.bottomRulerItems {
|
position: relative;
|
flex: 1;
|
width: 14%;
|
height: 10px;
|
border-left: 1px solid white;
|
}
|
.bottomRulerItems span {
|
position: absolute;
|
top: 15px;
|
left: -25%;
|
}
|
.topRulerItems span {
|
position: absolute;
|
bottom: 15px;
|
left: -20%;
|
}
|
.yearSlider {
|
width: 40%;
|
margin: 0 auto;
|
display: inline-block;
|
}
|
/* yhadd */
|
.bottom {
|
position: absolute;
|
bottom: 0;
|
width: 100%;
|
height: 14%;
|
pointer-events: none;
|
}
|
.historySelectContainer {
|
text-align: center;
|
pointer-events: all;
|
display: inline-block;
|
width: 100%;
|
height: 100%;
|
background-image: url(~@/assets/img/bottom/background.png);
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
/* background: rgba(0, 0, 0, .5); */
|
}
|
.historySelect {
|
width: 94.25%;
|
}
|
.history-item {
|
display: inline-block;
|
}
|
.history-item .el-button {
|
padding: 0 !important;
|
border: unset;
|
float: unset;
|
display: block;
|
background: rgba(0, 0, 0, 0);
|
}
|
.fpBtn,
|
.closeBtn {
|
position: relative;
|
top: 18px;
|
width: 100%;
|
}
|
/* yhadd */
|
.fpBtn {
|
top: -15px;
|
}
|
/* yhadd */
|
.fpBtn img,
|
.closeBtn img,
|
.changeBtn img {
|
width: 100%;
|
}
|
.closeBtn,
|
.changeBtn {
|
margin-left: 2.8%;
|
}
|
.changeBtn {
|
width: 4.5%;
|
}
|
.changeBtn .el-button {
|
margin: 0 10%;
|
width: 27.2%;
|
display: inline-block !important;
|
position: relative;
|
top: 18px;
|
}
|
.historyTitle {
|
width: 102px;
|
font-size: 17px;
|
font-family: Microsoft YaHei;
|
font-weight: bold;
|
color: #ffffff;
|
line-height: 21px;
|
text-shadow: 0px 2px 5px rgba(3, 3, 3, 0.46);
|
}
|
.mapModeControl {
|
position: absolute;
|
right: 0px;
|
bottom: 39%;
|
width: 5.75%;
|
pointer-events: all;
|
}
|
.mapMode {
|
width: 100%;
|
}
|
.mapMode dl {
|
width: 86%;
|
cursor: pointer;
|
margin: 7%;
|
}
|
|
.mapMode dl {
|
position: relative;
|
}
|
.mapMode dl img {
|
width: 100%;
|
}
|
|
.mapMode dt {
|
width: 100%;
|
height: 20px;
|
line-height: 20px;
|
position: absolute;
|
left: 0;
|
bottom: 0px;
|
font-size: 12px;
|
text-align: center;
|
color: #fff;
|
text-shadow: 1px 1px 2px #000;
|
background: rgba(0, 0, 0, 0.5);
|
}
|
|
.mapModeActive {
|
background: rgba(1, 37, 80, 0.5) !important;
|
}
|
|
.thisYearConatiner {
|
min-width: 102px;
|
height: 29px;
|
background: rgba(0, 0, 0, 0.27);
|
border-radius: 15px;
|
text-align: center;
|
margin: 12px 0;
|
display: inline-block;
|
}
|
.thisYearConatiner p {
|
height: 29px;
|
font-size: 16px;
|
font-family: Microsoft YaHei;
|
font-weight: 400;
|
color: #3da5ec;
|
line-height: 29px;
|
text-shadow: 0px 2px 5px rgba(3, 3, 3, 0.46);
|
}
|
|
.thisYear {
|
display: inline-block;
|
line-height: 28px;
|
margin-right: 5px;
|
}
|
|
.timeSet {
|
width: 100%;
|
height: 10px;
|
background: rgba(255, 255, 255, 0.29);
|
border-radius: 5px;
|
position: relative;
|
top: 24px;
|
display: flex;
|
}
|
.timeSet li {
|
height: 19px;
|
font-size: 19px;
|
font-family: Microsoft YaHei;
|
font-weight: 400;
|
color: #e1f4ff;
|
line-height: 19px;
|
margin: auto;
|
position: relative;
|
top: 15px;
|
}
|
.timeSet li:first-child {
|
margin-left: 0;
|
}
|
.timeSet li:last-child {
|
margin-right: 0;
|
}
|
.selectIcon {
|
width: 17px;
|
height: 17px;
|
background: #ffffff;
|
border: 5px solid #0987ff;
|
box-shadow: 0px 3px 8px 0px rgba(3, 3, 3, 0.25);
|
border-radius: 50%;
|
position: absolute;
|
bottom: 20px;
|
left: -14px;
|
margin-left: 50%;
|
}
|
</style>
|
