<template>
<div id="supermap3D" style="height: 100%">
<div id="cesiumContainer" style="height: 100%"></div>
<!--漫游工具条-->
<!-- <div class="bottomTools">
<el-row type="flex" justify="center">
<div class="iconDiv">
<i class="el-icon-s-home iconDivs" @click="homeClick()" theme="filled" title="主界面" />
<i class="el-icon-back iconDivs" @click="preStaMY()" theme="filled" title="上一站" />
<i class="el-icon-right iconDivs" @click="nextStaMY()" theme="filled" title="下一站" />
<i class="el-icon-s-promotion iconDivs" @click="beginMY()" theme="filled" title="开始" />
<<i :class="playstopIcon" @click="holdMY()" theme="filled" :title="playstopTitle" />
<i class="el-icon-switch-button iconDivs" @click="endMY()" theme="filled" title="停止" />
<i class="el-icon-full-screen iconDivs" @click="fullClick" title="全屏" />
</div>
</el-row>
</div> -->
<div class="tools-content" v-show="manyouContrl">
<div class="top-content1">
<img
src="./../../../public/static/img/shouye.png"
alt=""
title="首页"
@click="homeClick()"
/>
<img
src="./../../../public/static/img/manyou.png"
alt=""
title="漫游"
@click="beginMY()"
/>
<img
src="./../../../public/static/img/zanting.png"
v-if="AnimateState"
alt=""
title="暂停"
@click="holdMY()"
/>
<img
src="./../../../public/static/img/jixu.png"
v-if="!AnimateState"
alt=""
title="继续"
@click="holdMY()"
/>
<img
src="./../../../public/static/img/jieshu.png"
alt=""
title="结束"
@click="endMY()"
/>
<img
src="./../../../public/static/img/quanping.png"
alt=""
title="全屏"
@click="fullClick()"
/>
</div>
</div>
<!--泵站属性框-->
<template v-if="MonitorStationBZ.length">
<div
class="panelstyle"
v-show="bgMarkStationBZ"
v-for="(item, index) in MonitorStationBZ"
:key="'bengzmonitorStskds' + index"
:id="item.id"
>
<div class="close" @click="clearPopup($event)">x</div>
<div class="content">
<div class="item">
<div class="l">名称:</div>
<div class="r">{{item.id }}</div>
</div>
</div>
</div>
</template>
<!--泵站属性框-->
<template v-if="MonitorStationBZ.length">
<div
class="panelstyle"
v-show="bgMarkStationBZ"
v-for="(item, index) in MonitorStationBZ"
:key="'bengzmonitorStation' + index"
:id="item.id"
>
<div class="close" @click="clearPopup($event)">x</div>
<div class="content">
<div class="item">
<div class="l">名称 :</div>
<div class="r">{{ item.id }}</div>
</div>
</div>
</div>
</template>
<!--问题二属性框-->
<template v-if="MonitorStationZZ.length">
<div
class="panelstyle"
v-show="bgMarkStationZZ"
v-for="(item, index) in MonitorStationZZ"
:key="'zhazhanmonitorStation' + index"
:id="item.id"
>
<div class="close" @click="clearPopup($event)">x</div>
<div class="content">
<div class="item">
<div class="l">名称:</div>
<div class="r">{{ item.id }}</div>
</div>
<div class="item">
<div class="l">描述:</div>
<div class="r">{{item.ms }}</div>
</div>
</div>
</div>
</template>
<!--人员属性框-->
<template v-if="MonitorStationRY.length">
<div
class="panelstyle"
v-show="bgMarkStationZZ"
v-for="(item, index) in MonitorStationRY"
:key="'renyuanmonitorStation' + index"
:id="item.id"
>
<div class="close" @click="clearPopup($event)">x</div>
<div class="content">
<div class="item">
<div class="l">人员姓名 :</div>
<div class="r">{{ peoplename }}</div>
</div>
<div class="item">
<div class="l">所属河道 :</div>
<div class="r">{{ suoshuhedao }}</div>
</div>
<div class="item">
<div class="l">问题描述 :</div>
<div class="r">{{ wentimiaoshu }}</div>
</div>
<div class="item">
<div class="l">问题分类 :</div>
<div class="r">{{ wentifenlei }}</div>
</div>
<div class="item">
<div class="l">任务进度 :</div>
<div class="r">{{ renwujindu }}</div>
</div>
<div class="item">
<div class="l">事件时间 :</div>
<div class="r">{{ shijianshijian }}</div>
</div>
<div class="call" @click="callPerson">点击通话</div>
</div>
</div>
</template>
<!--站点属性框-->
<template v-if="MonitorStation.length">
<div
class="panelstyle"
v-show="bgMarkStation"
v-for="(item, index) in MonitorStation"
:key="'stationmonitorStation' + index"
:id="item.stCode"
>
<div class="page-panel mapPanel">
<a-icon type="close" class="close-icon" @click="clearPopup($event)" />
<div class="panel-head">
<div class="title">{{ siteInfo.siteName }}</div>
</div>
<div class="panel-body">
<a-carousel class="mapPanel-carousel" :dots="false">
<div class="panel-list-box" v-if="siteInfo.realTimeData.length">
<div
class="panel-list-item"
v-for="item in siteInfo.realTimeData"
:key="item.field"
>
<div class="label">{{ item.title }}</div>
<div class="value">{{ item.value }}</div>
</div>
</div>
</a-carousel>
</div>
</div>
</div>
</template>
<!--视频属性框-->
<!-- <template v-if="MonitorStationSPD.length">
<div
class="panelstylesp"
v-show="bgMarkStationSPD"
v-for="(item, index) in MonitorStationSPD"
:key="'spdmonitorStation' + index"
:id="item.id"
>
<div
class="close"
style="position: absolute; right: 10px; z-index: 99"
@click="clearPopup($event)"
>
x
</div>
<div class="content" v-if="bgMarkStationSPDXinsheng">
<VideoPlayer
src="https://139.155.49.237:8086/video/hls/xinsheng_road.m3u8"
style="width: 400px"
type="application/x-mpegURL"
/>
</div>
</div>
</template> -->
<!--闸站属性框-->
<!-- <template v-if="MonitorStationZZ.length">
<div
class="panelstyle"
v-show="bgMarkStationZZ"
v-for="(item, index) in MonitorStationZZ"
:key="'zhazhanmonitorStation' + index"
:id="item.id"
>
<div class="close" @click="clearPopup($event)">x</div>
<div class="content">
<div class="item">
<div class="l">名称 :</div>
<div class="r">{{ item.id }}</div>
</div>
<div class="item">
<div class="l">总过流量 :</div>
<div class="r">{{ item.zgll }}</div>
</div>
<div class="item">
<div class="l">闸上水位:</div>
<div class="r">{{ item.zssw }}</div>
</div>
<div class="item">
<div class="l">闸下水位:</div>
<div class="r">{{ item.zxsw }}</div>
</div>
<div class="item">
<div class="l">闸站状态:</div>
<div class="r">{{ item.zzzt }}</div>
</div>
<div class="item">
<div class="l">开闸孔数:</div>
<div class="r">{{ item.kzks }}</div>
</div>
<div class="cnt-list">
<div
class="item00"
v-for="(_item, _index) in item.list"
:key="_index"
>
<img
v-if="!_item.status"
src="./../../assets/images/img_11.png"
alt=""
/>
<img v-else src="./../../assets/images/img_12.png" alt="" />
<div class="name">{{ _item.name }}闸孔</div>
</div>
</div>
</div>
</div>
</template> -->
<!--存放点属性框-->
<!-- <template v-if="MonitorStationCFD.length">
<div
class="panelstyle"
v-show="bgMarkStationCFD"
v-for="(item, index) in MonitorStationCFD"
:key="'cfdmonitorStation' + index"
:id="item.id"
>
<div class="close" @click="clearPopup($event)">x</div>
<div class="content">
<div class="item">
<div class="l">存放点名称 :</div>
<div class="r">{{ item.id }}</div>
</div>
<div class="item">
<div class="l">存放地址 :</div>
<div class="r">{{ item.address }}</div>
</div>
<div class="item">
<div class="l">描述 :</div>
<div class="r">{{ item.miaoshu }}</div>
</div>
<div class="item">
<div class="l">经度 :</div>
<div class="r">{{ item.lon }}</div>
</div>
<div class="item">
<div class="l">纬度 :</div>
<div class="r">{{ item.lat }}</div>
</div>
<div class="item">
<div class="l">物资清单 :</div>
<div class="r">{{ item.wzqd }}</div>
</div>
</div>
</div>
</template> -->
<!-- 倾斜摄影透明度 -->
<!-- <div id="toolbar" class="param-container tool-bar">
<div id="qxsyopacity" style="width: 227px;right: 30px;margin-top: -272px;margin-left: 1700px;z-index: 999999999999;position: relative;">
<label style="color:#FFFFFF ">图层透明:</label>
<input type="range" style="width: 65%" min="0" max="1" step="0.02" title="调整地上图层透明度"
data-bind="value: overGroundAlpha, valueUpdate: 'input'">
</div>
</div> -->
<!-- 右侧菜单 -->
<!-- <div class="right-menu">
<div
class="item"
v-for="(item, index) in menuList"
:key="index"
:class="{ active: menuActive === index }"
@click="changeTuceng(index)"
>
{{ item }}
</div>
</div>
-->
<!--无人机视频 通顺河沿堤.mp4-->
<!-- src="https://47.97.35.33:6089/video/2021/2021052102.mp4" -->
<!-- src="/static/通顺河沿堤.mp4"-->
<!-- <div class="videoPop" v-show="videoPanelShow">
<div class="video">
<video
controls="controls"
src="https://47.97.35.33:6089/video/2021/2021052102.mp4"
id="videoEvent"
></video>
</div>
<div class="fs"></div>
<div class="close"></div>
<div
class="resizer"
style="
width: 10px;
height: 10px;
position: absolute;
bottom: 0px;
z-index: 9999;
right: 0px;
cursor: sw-resize;
"
></div>
<div
class="resizer"
style="
width: 10px;
height: 10px;
position: absolute;
bottom: 0px;
z-index: 9999;
right: 0px;
cursor: se-resize;
"
></div>
</div> -->
</div>
</template>
<script>
let handler = null;
export default {
name: "supermap3D",
data() {
return {
peoplename:"石付军",
suoshuhedao:"浉河",
wentimiaoshu:"浉河虹桥附近",
wentifenlei:"河道垃圾清理",
renwujinzhan:"待审核",
shijianshijian:"2021-10-27",
//原经开三维飞行相关参数
manyouContrl: true,
isFullscreen: false,
videoPanelShow: false, //播放视频面板显隐
isEndRoam: false,
AnimateState: false, //当前漫游状态
video: null, //播放视频标签
videoPanelShow: false, //播放视频面板显隐
dataliststation: [],
ispanelCFBZ: false,
ispanelCFZZ: false,
ispanelWZD: false,
ispanelSPD: false,
ispanelLNHBZ: false,
bgMarkStationRY: false, //人员
MonitorStationRY: [],
bgMarkStationCFD: false, //存放点
MonitorStationCFD: [],
MonitorStationBZ: [],
bgMarkStationBZ: false, //泵站
MonitorStationZZ: [],
bgMarkStationZZ: false, //闸站
MonitorStationSPD: [],
bgMarkStationSPD: false, //视频点
bgMarkStationSPDXinsheng: false, //视频点视频流
playerOptions: {
//摄像头
muted: false,
overNative: true,
autoplay: true,
controls: true,
techOrder: ["html5"],
sourceOrder: true,
width: "800px",
language: "zh",
html5: { hls: { withCredentials: false } },
sources: [
{
withCredentials: false,
type: "application/x-mpegURL",
src: "http://47.97.35.33:8301/proxy/hls/xinsheng_road.m3u8",
},
],
poster: "",
},
//自有参数
layerchecklist: [
"雨水管",
"污水管",
"合流管",
"雨水井",
"污水井",
"合流井",
],
menuList: [
"在线监测",
"视频监控",
"沿岸巡检",
"淹水模拟",
"管道开挖",
"清除",
],
menuActive: 0,
previousHeight: null,
smidarrayysg: [],
smidarraywsg: [],
smidarrayysj: [],
smidarraywsj: [],
newid: "",
Layer: "",
Elevation: "",
showArrow: false, //是否显示左右切换箭头
showArrow1: false, //是否显示左右切换箭头
//基础数据
basicData: null,
MonitorStation: [],
bgMarkStation: false,
pipeBjArray: {},
//管线相关
lineInfo: {
refresh: 1,
basicData: null,
siteName: "",
realTimeData: [],
showArrow: false, //是否显示左右切换箭头
},
//站点相关
siteInfo: {
siteName: "",
realTimeData: [],
},
};
},
watch: {
"lineInfo.refresh"() {
if (this.lineInfo.realTimeData.length) {
this.lineInfo.showArrow = true;
} else {
this.lineInfo.showArrow = false;
}
},
},
mounted: function () {
//加载天地图
// let imgTDT = new Cesium.WebMapTileServiceImageryProvider({
// url: "http://t0.tianditu.com/img_w/wmts?service=wmts&tk=5095c97223409ac114493d71ecb9cd87&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles",
// layer: "img",
// style: "default",
// format: "tiles",
// tileMatrixSetID: "w",
// credit: new Cesium.Credit("天地图全球影像服务"),
// subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
// maximumLevel: 18,
// show: false,
// });
//初始化viewer部件
var viewer = new Cesium.Viewer('cesiumContainer', {
// imageryProvider: imgTDT,
navigation: false,
animation: false, // 隐藏动画控件
baseLayerPicker: false, // 隐藏图层选择控件
fullscreenButton: false, // 隐藏全屏按钮
vrButton: false, // 隐藏VR按钮，默认false
geocoder: false, // 隐藏地名查找控件
homeButton: false, // 隐藏Home按钮
navigationHelpButton: false, // 隐藏帮助按钮
infoBox: false, //是否显示信息框
fullscreenButton: false, //是否显示全屏按钮
animation: false, //是否创建动画小器件，左下角仪表
timeline: false, //是否显示时间轴
selectionIndicator: false, //关闭点击绿色框
scene3DOnly: true, // 每个几何实例将只在3D中呈现，以节省GPU内存
});
//隐藏logo
viewer.scene._creditContainer.style.display="none";
var globe = viewer.scene.globe;
globe.globeAlpha = 0.5;
var scene = viewer.scene;
scene.skyAtmosphere.show = false;
scene.skyBox.show = false;
viewer.scene.undergroundMode = true;//设置开启地下场景
viewer.scene.screenSpaceCameraController.minimumZoomDistance = -1000;//设置相机最小缩放距离,距离地表-1000米
viewer.scene.terrainProvider.isCreateSkirt = false;
//监听滑动条变化，改变alpha的值，设置地表透明度
var viewModel = {
globeAlpha : 0.5
};
Cesium.knockout.track(viewModel);
//关闭深度检测
viewer.scene.globe.depthTestAgainstTerrain=false;
window.earth=viewer
// window.provider_imgLayer = new Cesium.TileMapServiceImageryProvider({
// // url:'/imgUrl/矩形区域(2)/tiles',
// // url:'/imgUrl/tdtTMS/xinyangimg1/tiles',
// url: '/imgUrl/xinyangimg',
// fileExtension: 'png',
// })
// window.imglayer = window.earth.imageryLayers.addImageryProvider(window.provider_imgLayer)
//高德影像
window.provider_imgLayer = new Cesium.TileMapServiceImageryProvider({
//url: '/imgUrl/xinyangimg',
url:'http://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
//url:"https://192.168.100.18:10001/webstUrl/appmaptile?style=6&x={x}&y={y}&z={z}",
fileExtension: 'png',
})
window.imglayer = window.earth.imageryLayers.addImageryProvider(window.provider_imgLayer)
// video控件是原生获取的dom
/* this.video = document.getElementById("videoEvent");
this.videoPlayPause(); */
//设置隐形飞机及路线
this.TravelCave(); //设置隐形飞机漫游指定路径
//加载图标
this.addMarks();
//展示属性
var infoboxContainer = document.getElementById("bubble");
viewer.customInfobox = infoboxContainer;
//加载超图SM3格式三维模型的osgb
var scene = viewer.scene;
//加载倾斜摄影
this.addOSGBtileset()
//鼠标点击事件
this.mouseMapClick();
},
beforeDestroy() {
if (handler) {
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOWN); //移除事件
}
handler = undefined;
},
methods: {
//点击tree闪烁并弹出属性
showAndHightPoint(data)
{
console.log("点击了人员：",data)
this.peoplename=data.userName
var keyid="张小明"
var lon= 114.0805319404991
var lat=32.10399069614823
document.getElementById(keyid).style.display="block"
window.earth.scene.preRender.addEventListener(()=> {
var position=new Cesium.Cartographic(lon,lat,0);
this.fixDomPosition(keyid,position);
})
},
clearPopup(event) {
var clickDom = event.currentTarget;
var willshow = clickDom.parentNode;
willshow.style.display = "none";
this.bgMarkStation = false;
this.siteInfo.realTimeData = [];
},
createTooltip(frameDiv) {
var tooltip = function (frameDiv) {
var div = document.createElement("DIV");
div.className = "twipsy right";
var arrow = document.createElement("DIV");
arrow.className = "twipsy-arrow";
div.appendChild(arrow);
var title = document.createElement("DIV");
title.className = "twipsy-inner";
div.appendChild(title);
this._div = div;
this._title = title;
this.message = "";
// add to frame div and display coordinates
frameDiv.appendChild(div);
var that = this;
div.onmousemove = function (evt) {
that.showAt({ x: evt.clientX, y: evt.clientY }, that.message);
};
};
tooltip.prototype.setVisible = function (visible) {
this._div.style.display = visible ? "block" : "none";
};
tooltip.prototype.showAt = function (position, message) {
if (position && message) {
this.setVisible(true);
this._title.innerHTML = message;
this._div.style.left = position.x + 10 + "px";
this._div.style.top = position.y - this._div.clientHeight / 2 + "px";
this.message = message;
}
};
return new tooltip(frameDiv);
},
//绘制开挖区域
excavation(overGroundLayer) {
var viewer = window.earth;
var handlerPolygon = new Cesium.DrawHandler(
viewer,
Cesium.DrawMode.Polygon
);
handlerPolygon.activeEvt.addEventListener((isActive) => {
if (isActive == true) {
viewer.enableCursorStyle = false;
viewer._element.style.cursor = "";
$("body").removeClass("drawCur").addClass("drawCur");
} else {
viewer.enableCursorStyle = true;
$("body").removeClass("drawCur");
}
});
//handlerPolygon.movingEvt.addEventListener(function (windowPosition) { });
var tooltip = this.createTooltip(viewer._element);
handlerPolygon.movingEvt.addEventListener((windowPosition) => {
if (windowPosition.x < 200 && windowPosition.y < 150) {
tooltip.setVisible(false);
return;
}
if (handlerPolygon.isDrawing) {
tooltip.showAt(windowPosition, "<p>右键单击结束绘制,进行开挖</p>");
} else {
tooltip.showAt(windowPosition, "<p>点击绘制开挖区域第一个点</p>");
}
});
handlerPolygon.drawEvt.addEventListener((result) => {
tooltip.setVisible(false);
handlerPolygon.polygon.show = false;
handlerPolygon.polyline.show = false;
var polygon = result.object;
var positions = polygon.positions;
var flatPoints = [];
for (var i = 0, j = positions.length; i < j; i++) {
//获取经纬度和高度
var position = positions[i];
var cartographic = Cesium.Cartographic.fromCartesian(position);
var lon = Cesium.Math.toDegrees(cartographic.longitude);
var lat = Cesium.Math.toDegrees(cartographic.latitude);
var height = cartographic.height;
flatPoints.push(lon);
flatPoints.push(lat);
flatPoints.push(height);
}
overGroundLayer.addExcavationRegion({
//设置倾斜开挖参数
position: flatPoints,
name: "excavation_" + Math.random(),
});
handlerPolygon.deactivate();
});
handlerPolygon.activate();
},
//点击“开始”按钮，则开始淹没分析
beginFlood(layer) {
this.clearFlood();
console.log("beginFlodd");
/* currentHeight = 0;
int = this.setInterval("flood()", 100);
maxValue = parseInt(document.getElementById("maxHeight").value);
minValue = parseInt(document.getElementById("minHeight").value); */
this.currentHeight = 0;
this.maxValue = 65;
this.floodInterval = setInterval(() => {
this.flood(layer);
}, 100);
},
clearFlood() {
console.log("clearFlood");
if (this.floodInterval) {
clearInterval(this.floodInterval);
this.floodInterval = null;
}
},
clearFloodByBtn(layer) {
if (this.floodInterval) {
clearInterval(this.floodInterval);
}
var hyp = new Cesium.HypsometricSetting();
hyp.MaxVisibleValue = -1000;
layer.hypsometricSetting = {
hypsometricSetting: hyp,
analysisMode: Cesium.HypsometricSettingEnum.AnalysisRegionMode.ARM_ALL,
};
},
flood(layer) {
console.log("flooding");
if (this.currentHeight > this.maxValue) {
this.clearFlood();
return;
}
/* var layer = window.earth.scene.layers.find("Config"); */
var hyp = new Cesium.HypsometricSetting();
//创建分层设色对象 设置最大/最小可见高度 颜色表 显示模式 透明度及线宽
var colorTable = new Cesium.ColorTable();
hyp.MaxVisibleValue = this.currentHeight;
hyp.MinVisibleValue = 0;
// var value = $("#colorTable").find("option:selected")[0].value;
//setColorTable(colorTable, 1);
colorTable.insert(71, new Cesium.Color(0, 39 / 255, 148 / 255));
colorTable.insert(0, new Cesium.Color(149 / 255, 232 / 255, 249 / 255));
hyp.ColorTable = colorTable;
hyp.DisplayMode = Cesium.HypsometricSettingEnum.DisplayMode.FACE;
hyp.Opacity = 0.5;
hyp.LineInterval = 10.0;
//设置图层分层设色属性
layer.hypsometricSetting = {
hypsometricSetting: hyp,
analysisMode: Cesium.HypsometricSettingEnum.AnalysisRegionMode.ARM_ALL,
};
this.currentHeight += 0.1;
console.log(this.currentHeight);
},
changeTuceng(index) {
//this.removeAllpopup()
this.menuActive = index;
console.log(index);
//在线监测
if (index == 0) {
this.manyouContrl = false;
this.endMY();
this.removeEntityByType("视频点");
this.addEntityByType("泵站");
this.addEntityByType("闸站");
}
//视频监控
else if (index == 1) {
this.manyouContrl = false;
this.endMY();
this.removeEntityByType("泵站");
this.removeEntityByType("闸站");
this.addEntityByType("视频点");
}
//沿岸巡检
else if (index == 2) {
this.addEntityByType("泵站");
this.addEntityByType("闸站");
this.addEntityByType("视频点");
this.manyouContrl = true;
this.homeClick();
}
//淹水模拟
else if (index == 3) {
//开始淹没分析
console.log(this.osgblayer);
this.beginFlood(this.osgblayer);
}
//管道开挖
else if (index == 4) {
this.excavation(this.osgblayer);
}
//清除所有
else if (index == 5) {
this.clearFloodByBtn(this.osgblayer);
//移除开挖的坑
this.osgblayer.removeAllExcavationRegion();
}
},
refreshLayerlist(newlayerlist) {
this.layerchecklist = newlayerlist;
console.log(this.layerchecklist);
},
//装载河流管流向
loadhsarrow() {
var features = hsgxJson.features;
// window.primitivexiaqufenqu = [];
console.log(features);
for (var m = 0; m < features.length; m++) {
var bianjieDataShiHe = features[m].geometry.coordinates;
var cell;
var result = [];
var resultH = [];
for (var i = 0; i < bianjieDataShiHe.length; i++) {
cell = bianjieDataShiHe[i];
result.push(cell[0]);
result.push(cell[1]);
result.push(3);
resultH.push(cell[0]);
resultH.push(cell[1]);
resultH.push(4);
}
console.log(result);
window.earth.entities.add({
type: "heliuarrow",
show: true,
clampToS3M: true,
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights(result),
width: 7,
followSurface: false,
material: new Cesium.PolylineArrowMaterialProperty(
Cesium.Color.YELLOW
),
show: true,
},
});
window.earth.entities.add({
// 尾迹线
type: "heliuarrow",
show: true,
clampToS3M: true,
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights(resultH),
width: 4, // 线的宽度，像素为单位
material: new Cesium.PolylineTrailMaterialProperty({
// 尾迹线材质
// color: new Cesium.Color(218,165,32, 1),
color: Cesium.Color.YELLOW,
trailLength: 0.1,
outlineWidth: 0.5,
period: 5.0,
}),
},
});
}
},
//装载雨水路线
loadysarrow() {
var features = ysgxJson.features;
// window.primitivexiaqufenqu = [];
console.log(features);
for (var m = 0; m < features.length; m++) {
var bianjieDataShiHe = features[m].geometry.coordinates;
var cell;
var result = [];
var resultH = [];
for (var i = 0; i < bianjieDataShiHe.length; i++) {
cell = bianjieDataShiHe[i];
result.push(cell[0]);
result.push(cell[1]);
result.push(3);
resultH.push(cell[0]);
resultH.push(cell[1]);
resultH.push(4);
}
console.log(result);
window.earth.entities.add({
type: "yushuiarrow",
show: true,
clampToS3M: true,
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights(result),
width: 7,
followSurface: false,
material: new Cesium.PolylineArrowMaterialProperty(
Cesium.Color.BLUE
),
show: true,
},
});
window.earth.entities.add({
// 尾迹线
type: "yushuiarrow",
show: true,
clampToS3M: true,
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights(resultH),
width: 4, // 线的宽度，像素为单位
material: new Cesium.PolylineTrailMaterialProperty({
// 尾迹线材质
/* color: new Cesium.Color(25,25,112, 1), */
color: Cesium.Color.BLUE,
trailLength: 0.1,
outlineWidth: 0.5,
period: 5.0,
}),
},
});
}
},
//装载污水路线
loadwsarrow() {
var features = wsgxJson.features;
// window.primitivexiaqufenqu = [];
console.log(features);
for (var m = 0; m < features.length; m++) {
var bianjieDataShiHe = features[m].geometry.coordinates;
var cell;
var result = [];
var resultH = [];
for (var i = 0; i < bianjieDataShiHe.length; i++) {
cell = bianjieDataShiHe[i];
result.push(cell[0]);
result.push(cell[1]);
result.push(1.7);
resultH.push(cell[0]);
resultH.push(cell[1]);
resultH.push(4);
}
console.log(result);
window.earth.entities.add({
type: "wushuiarrow",
show: true,
clampToS3M: true,
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights(result),
width: 7,
followSurface: false,
material: new Cesium.PolylineArrowMaterialProperty(
Cesium.Color.RED
),
show: true,
},
});
window.earth.entities.add({
// 尾迹线
type: "wushuiarrow",
show: true,
clampToS3M: true,
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights(resultH),
width: 4, // 线的宽度，像素为单位
material: new Cesium.PolylineTrailMaterialProperty({
// 尾迹线材质
/* color: new Cesium.Color(139,0,0, 1), */
color: Cesium.Color.RED,
trailLength: 0.1,
outlineWidth: 0.5,
period: 5.0,
}),
},
});
}
},
//获取站点/报警管线数据实时数据
async getSiteSiteManBySerial(stCode, type, info) {
let _data = {
stCode: stCode,
};
let arr = [];
let result = await this.$api.getSiteSiteManBySerial(_data);
if (result && result.st) {
let res = await this.$api.getSiteHead({ siteNo: stCode });
if (res.code == 200) {
arr = res.data;
arr.forEach((item) => {
for (let key in result) {
if (item.field === key) {
this.$set(item, "value", result[key]);
}
}
});
if (type === "line") {
this.lineInfo.refresh = Math.random();
this.lineInfo.realTimeData = arr;
} else {
this.siteInfo.realTimeData = arr;
}
}
} else {
/* this.$emit("realTimeData", [], type, siteName, true); */
}
if (type === "line")
document.getElementById("bubble").style.display = "block";
else if (type === "site") info.style.display = "block";
},
//根据sql查询--全量污水井赋值红色
async doSqlQueryWSJRed(sqlStr) {
console.log(sqlStr);
var sqlParameter = {
datasetNames: ["jkqline3D6:污水井84"],
getFeatureMode: "SQL",
maxFeatures: 10000,
queryParameter: {
attributeFilter: sqlStr,
},
};
let res = await this.$api.featureResults(sqlParameter);
if (res && res.features) {
var smidarray = [];
for (var i = 0; i < res.features.length; i++) {
smidarray.push(res.features[i].ID);
}
//根据图层和smid赋值
var layer3 = window.earth.scene.layers.find("污水井84@jkqline3D6");
console.log(layer3);
console.log(smidarray);
//根据图层和smid赋值
layer3.selectColorType = 1.0;
layer3.setObjsColor(smidarray, Cesium.Color.RED);
}
},
//根据sql查询--全量污水井赋值蓝色
async doSqlQueryYSJBlue(sqlStr) {
var sqlParameter = {
datasetNames: ["jkqline3D6:雨水井84"],
getFeatureMode: "SQL",
maxFeatures: 10000,
queryParameter: {
attributeFilter: sqlStr,
},
};
let res = await this.$api.featureResults(sqlParameter);
console.log(res);
if (res.features) {
console.log(res);
var smidarray = [];
for (var i = 0; i < res.features.length; i++) {
smidarray.push(res.features[i].ID);
}
//根据图层和smid赋值
var layer2 = window.earth.scene.layers.find("雨水井84@jkqline3D6");
layer2.selectColorType = 1.0;
layer2.setObjsColor(smidarray, Cesium.Color.BLUE);
}
},
//根据sql查询
async doSqlQueryWSJ(sqlStr) {
var sqlParameter = {
datasetNames: ["jkqline3D6:污水井84"],
getFeatureMode: "SQL",
maxFeatures: 10000,
queryParameter: {
attributeFilter: sqlStr,
},
};
let res = await this.$api.featureResults(sqlParameter);
console.log(res);
if (res.features) {
console.log(res);
this.smidarraywsj = [];
for (var i = 0; i < res.features.length; i++) {
this.smidarraywsj.push(res.features[i].ID);
}
//根据图层和smid赋值
var layer3 = window.earth.scene.layers.find("污水井84@jkqline3D6");
//根据图层和smid赋值
layer3.selectColorType = 1.0;
layer3.setObjsColor(this.smidarraywsj, Cesium.Color.YELLOW);
}
},
//根据sql查询
async doSqlQueryYSJ(sqlStr) {
var sqlParameter = {
datasetNames: ["jkqline3D6:雨水井84"],
getFeatureMode: "SQL",
maxFeatures: 10000,
queryParameter: {
attributeFilter: sqlStr,
},
};
let res = await this.$api.featureResults(sqlParameter);
if (res && res.features) {
this.smidarrayysj = [];
for (var i = 0; i < res.features.length; i++) {
this.smidarrayysj.push(res.features[i].ID);
}
//根据图层和smid赋值
var layer2 = window.earth.scene.layers.find("雨水井84@jkqline3D6");
layer2.selectColorType = 1.0;
layer2.setObjsColor(this.smidarrayysj, Cesium.Color.YELLOW);
}
},
// 鼠标点击图层事件
mouseMapClick() {
const canvas = window.earth.scene.canvas;
let startMousePosition;
let mousePosition;
const _that = this;
handler = new Cesium.ScreenSpaceEventHandler(canvas);
handler.setInputAction((movement) => {
const earthPosition = window.earth.camera.pickEllipsoid(
movement.position,
window.earth.scene.globe.ellipsoid
);
if (Cesium.defined(earthPosition)) {
// console.log(window.earth.entities.getById('SH1'));
const pickedFeature = window.earth.scene.pick(movement.position);
/* const cartesian = window.earth.camera.pickEllipsoid(movement.position, window.earth.scene.globe.ellipsoid); // Cartesian3对象
var ellipsoid = window.earth.scene.globe.ellipsoid;
*/
var cartographic = Cesium.Cartographic.fromCartesian(
earthPosition,
window.earth.scene.globe.ellipsoid,
new Cesium.Cartographic()
);
var lat = Cesium.Math.toDegrees(cartographic.latitude);
var lng = Cesium.Math.toDegrees(cartographic.longitude);
var height = window.earth.camera.positionCartographic.height;
if (pickedFeature == undefined) return;
if (pickedFeature) {
console.log(pickedFeature);
//预处理站点位
if (
pickedFeature.id &&
pickedFeature.id._id &&
pickedFeature.id.type
) {
let _data = {
id: pickedFeature.id._id,
type: pickedFeature.id.type,
};
//_that.$store.dispatch("siteInfo/set", _data);
if (
pickedFeature.id.type == "水质仪" ||
pickedFeature.id.type == "问题点" ||
pickedFeature.id.type == "人员"
) {
//测试点击对应dom让其展示并跟着地球转动
var cartographic = Cesium.Cartographic.fromCartesian(earthPosition, window.earth.scene.globe.ellipsoid, new Cesium.Cartographic());
var lat=Cesium.Math.toDegrees(cartographic.latitude);
var lng=Cesium.Math.toDegrees(cartographic.longitude);
var height=window.earth.camera.positionCartographic.height;
if (pickedFeature == undefined) return;
if (pickedFeature) {
console.log(pickedFeature)
//预处理站点位
if (
pickedFeature.id &&
pickedFeature.id._id &&
pickedFeature.id.type
) {
let _data = {
id: pickedFeature.id._id,
type: pickedFeature.id.type,
};
//_that.$store.dispatch("siteInfo/set", _data);
if (
pickedFeature.id.type == "水质仪" ||
pickedFeature.id.type == "问题点" ||
pickedFeature.id.type == "人员"
) {
//测试点击对应dom让其展示并跟着地球转动
if (typeof(pickedFeature.primitive._actualPosition) != "undefined")
{
// this.removeAllpopup()
let info = document.getElementById(
pickedFeature.id.id
);
info.style.display = "block";
let c = new Cesium.Cartesian2(movement.position.x, movement.position.y);
var topcut=300
var leftcut=190
console.log(pickedFeature)
if(pickedFeature.id.type == "问题点")
{
document.getElementById("问题2").style.display="block"
window.earth.scene.preRender.addEventListener(()=> {
var position=new Cesium.Cartographic(114.0864063271,32.0967950080981,-6);
this.fixDomPosition(pickedFeature.id.id,position);
})
}
else if(pickedFeature.id.type == "人员")
{
document.getElementById(pickedFeature.id.id).style.display="block"
window.earth.scene.preRender.addEventListener(()=> {
var position=new Cesium.Cartographic(pickedFeature.id.lon,pickedFeature.id.lat,0);
this.fixDomPosition(pickedFeature.id.id,position);
})
}
else if(pickedFeature.id.type == "水质仪")
{
var domid=pickedFeature.id.id
document.getElementById(domid).display="block"
window.earth.scene.preRender.addEventListener(()=> {
var position=new Cesium.Cartographic(pickedFeature.id.lon,pickedFeature.id.lat,0);
this.fixDomPosition(pickedFeature.id.id,position);
})
}
}
} else {
//_that.$store.dispatch("siteInfo/set", _data);
}
}
}
} else {
}
} else {
//_that.$store.dispatch("siteInfo/set", _data);
}
}
else {
}
}
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);
},
//根据sql查询
async doSqlQuery(sqlStr, name, pick) {
console.log(name);
var nameres = name.replace(/\s*/g, "");
var datasetName = nameres.split("@");
var sqlParameter = {
datasetNames: [datasetName[1] + ":" + datasetName[0]],
getFeatureMode: "SQL",
maxFeatures: 10000,
queryParameter: {
attributeFilter: sqlStr,
},
};
//用李喆发的数据源shp请求
//雨水管线1200@xyline3D3
// var postUrl = ""
//postUrl = "http://localhost:8090/iserver/services/data-pipeline2-bimPipe22/rest/data/featureResults.rjson?returnContent=true";
//postUrl = "/supermapapi/iserver/services/data-pipeline2-bimPipe22/rest/data/featureResults.rjson?returnContent=true"
let res = await this.$api.featureResults(sqlParameter);
console.log(res);
if (res && res.features) {
var feature = res.features[0];
var result = [];
for (var i = 0; i < feature.fieldNames.length; i++) {
result[feature.fieldNames[i]] = feature.fieldValues[i];
}
/* console.log(result) */
var dombubble = document.getElementById("bubble");
/* this.$http
.post(postUrl, sqlParameter)
.then((response) => {
console.log(response)
var dombubble = document.getElementById("bubble")
if (response.data.features && response.data.features[0]) {
var feature = response.data.features[0]
var result = []
for (var i = 0; i < feature.fieldNames.length; i++) {
result[feature.fieldNames[i]] = feature.fieldValues[i]
}
console.log(result) */
//管线
var data = {};
data = result;
//筛选data为空的不显示
var lastresult = {};
for (let key in data) {
if (data[key] != "" && key.indexOf("UNIQUEID") < 0) {
lastresult[key] = data[key];
}
}
console.log(lastresult);
// this.lineInfo.showArrow=true
this.lineInfo.basicData = lastresult;
dombubble.style.display = "block";
//设置让点击后的pick对象跟着地球点跑
window.earth.scene.postRender.addEventListener(() => {
var canvasHeight = window.earth.scene.canvas.height;
var windowPosition = new Cesium.Cartesian2();
Cesium.SceneTransforms.wgs84ToWindowCoordinates(
window.earth.scene,
pick,
windowPosition
);
dombubble.style.bottom = canvasHeight - windowPosition.y + "px";
dombubble.style.left = windowPosition.x + "px";
dombubble.style.visibility = "visible";
});
} else {
dombubble.style.display = "none";
}
/* }) */
},
//获取高
getHeight() {
if (window.earth) {
var scene = window.earth.scene;
var ellipsoid = scene.globe.ellipsoid;
var height = ellipsoid.cartesianToCartographic(
window.earth.camera.position
).height;
return height;
}
},
cameraChange() {
window.earth.camera.changed.addEventListener(() => {
//先判断有无勾选雨水，勾选才有高度显示判断
//判断雨水json
let currentHeight = this.getHeight();
if (this.previousHeight) {
if (this.previousHeight > 200 && currentHeight < 200) {
console.log(111111111111111111);
//循环删除多个实体lable
var viewer = window.earth;
var entitys = viewer.entities._entities._array;
for (var i = 0; i < entitys.length; i++) {
if (
entitys[i].type &&
(entitys[i].type == "wushuiarrow" ||
entitys[i].type == "yushuiarrow" ||
entitys[i].type == "heliuarrow")
) {
entitys[i].show = false;
}
}
} else if (this.previousHeight < 200 && currentHeight > 200) {
console.log(2222222222222222);
//循环删除多个实体lable
var viewer = window.earth;
var entitys = viewer.entities._entities._array;
for (var i = 0; i < entitys.length; i++) {
if (
entitys[i].type &&
this.layerchecklist.indexOf("污水管") > -1 &&
entitys[i].type == "wushuiarrow"
) {
entitys[i].show = true;
}
if (
entitys[i].type &&
this.layerchecklist.indexOf("雨水管") > -1 &&
entitys[i].type == "yushuiarrow"
) {
entitys[i].show = true;
}
if (
entitys[i].type &&
this.layerchecklist.indexOf("合流管") > -1 &&
entitys[i].type == "heliuarrow"
) {
entitys[i].show = true;
}
}
} else {
}
this.previousHeight = currentHeight;
} else {
this.previousHeight = currentHeight;
}
/* if (currentHeight < 1000) {
//循环删除多个实体lable
var viewer = window.earth;
var entitys = viewer.entities._entities._array;
for (var i = 0; i < entitys.length; i++) {
if (entitys[i].type && (entitys[i].type=="wushuiarrow"||entitys[i].type=="yushuiarrow"||entitys[i].type=="heliuarrow")) {
entitys[i].show = false;
}
}
} else {
//循环删除多个实体lable
var viewer = window.earth;
var entitys = viewer.entities._entities._array;
for (var i = 0; i < entitys.length; i++) {
if (entitys[i].type && (entitys[i].type=="wushuiarrow"||entitys[i].type=="yushuiarrow"||entitys[i].type=="heliuarrow")) {
entitys[i].show = true;
}
}
} */
});
},
// 添加图标事件
addMarks() {
this.dataliststation = [
{
id: "三里店和与浉河南路相交处",
type: "水质仪",
stCode:"0376000092",
lon: 114.077271,
lat: 32.107239,
},
{
id: "浉河南路（界河污水主管接入后，倒虹吸前）",
type: "水质仪",
stCode:"0376000042",
lon: 114.0815319404991,
lat: 32.10199069614823,
},
{
id: "问题2",
type: "问题点",
ms:"此处有水面垃圾",
stCode:"002",
lon: 114.0864063271,
lat: 32.0967950080981,
},
{
id: "张小明",
type: "人员",
stCode:"03760000467",
lon: 114.0805319404991,
lat: 32.10399069614823,
},
{
id: "李大明",
type: "人员",
stCode:"03760043240467",
lon: 114.088882400043,
lat: 32.0979350015851,
},
{
id: "张飞",
type: "人员",
stCode:"037565467",
lon: 114.089826231813,
lat: 32.0993981365747,
},
{
id: "胜五",
type: "人员",
stCode:"0376232340467",
lon: 114.079546279199,
lat: 32.1017924678198,
},
{
id: "张武",
type: "人员",
stCode:"037606866240467",
lon: 114.083925956929,
lat: 32.0963300318205,
},
{
id: "测试",
type: "人员",
stCode:"032327640467",
lon: 114.08635768121,
lat: 32.1066741381651,
},
];
//加载点位数据
//泵站点位
this.MonitorStationBZ = this.dataliststation.filter(function (item) {
return item.type == "水质仪";
});
this.addPoint(this.MonitorStationBZ);
//闸站
this.MonitorStationZZ = this.dataliststation.filter(function (item) {
return item.type == "问题点";
});
this.addPoint(this.MonitorStationZZ);
console.log("this.MonitorStationBZ", this.MonitorStationBZ);
console.log("this.MonitorStationZZ", this.MonitorStationZZ);
//人员
this.MonitorStationRY = this.dataliststation.filter(function (item) {
return item.type == "人员";
});
this.addPoint(this.MonitorStationRY);
},
//添加点
addPoint(data) {
// console.log(data);
let imgUrl = require("./../../../public/static/img/hdszy_zc.png");
let placesj = new Cesium.Cartesian2(0, -60);
var positionHeight = 15;
var isshow = true;
for (let i = 0; i < data.length; i++) {
switch (data[i].type) {
case "水质仪":
imgUrl = require("./../../../public/static/img/hdszy_zc.png");
break;
case "问题点":
imgUrl = require("./../../../public/static/img/camera_green.png");
break;
case "人员":
imgUrl = require("./../../../public/static/img/people.png");
positionHeight = 0;
break;
}
window.earth.entities.add({
name: data[i].id,
id: data[i].id,
lon:data[i].lon,
lat:data[i].lat,
num: data[i].id,
stCode: data[i].stCode,
type: data[i].type,
show: isshow,
position: Cesium.Cartesian3.fromDegrees(
data[i].lon,
data[i].lat,
positionHeight
),
billboard: {
image: imgUrl,
// HorizontalOrigin: HorizontalOrigin.LEFT,
// //垂直位置
// verticalOrigin: VerticalOrigin.UP,
pixelOffset: new Cesium.Cartesian2(0, -40),
//heightReference:Cesium.CLAMP_TO_GROUND
},
label: {
text: data[i].id,
// font: '14pt monospace',
//font: 'Avenir, Helvetica, Arial, sans-serif',
font: "18px sans-serif",
//style: LabelStyle.FILL_AND_OUTLINE,
fillColor: Cesium.Color.WHITE,
outlineWidth: 2,
HorizontalOrigin: Cesium.HorizontalOrigin.LEFT,
//垂直位置
verticalOrigin: Cesium.VerticalOrigin.BUTTON,
//中心位置
pixelOffset: placesj,
// heightReference:Cesium.CLAMP_TO_GROUND
},
});
}
},
//根据type去删除对应entities
removeEntityByType(typename) {
//循环删除多个实体lable
if (window.earth) {
var viewer = window.earth;
var entitys = viewer.entities._entities._array;
for (var i = 0; i < entitys.length; i++) {
if (entitys[i].type && entitys[i].type == typename) {
entitys[i].show = false;
}
}
}
},
//根据type去添加对应entities
addEntityByType(typename) {
//循环删除多个实体lable
if (window.earth) {
var viewer = window.earth;
var entitys = viewer.entities._entities._array;
for (var i = 0; i < entitys.length; i++) {
if (entitys[i].type && entitys[i].type == typename) {
entitys[i].show = true;
}
}
}
},
addOSGBunderline1() {
var promise = window.earth.scene.addS3MTilesLayerByScp(
"http://192.168.16.144:8090/iserver/services/3D-pipeline2-bimPipe2/rest/realspace/datas/常规模型_排水管线_20211012@bimPipe2/config", //地址写到config那一级
{ name: "常规模型_排水管线_20211012@bimPipe2" }
);
promise.then((layer) => {
layer.visible = true;
});
var promise1 = window.earth.scene.addS3MTilesLayerByScp(
"http://192.168.16.144:8090/iserver/services/3D-pipeline2-bimPipe2/rest/realspace/datas/墙_排水管线_20211012@bimPipe2/config", //地址写到config那一级
{ name: "墙_排水管线_20211012@bimPipe2" }
);
promise1.then((layer) => {
layer.visible = true;
});
var promise2 = window.earth.scene.addS3MTilesLayerByScp(
"http://192.168.16.144:8090/iserver/services/3D-pipeline2-bimPipe2/rest/realspace/datas/楼板_排水管线_20211012@bimPipe2/config", //地址写到config那一级
{ name: "楼板_排水管线_20211012@bimPipe2" }
);
promise2.then((layer) => {
layer.visible = true;
});
var promise3 = window.earth.scene.addS3MTilesLayerByScp(
"http://192.168.16.144:8090/iserver/services/3D-pipeline2-bimPipe2/rest/realspace/datas/管道_排水管线_20211012@bimPipe2/config", //地址写到config那一级
{ name: "管道_排水管线_20211012@bimPipe2 " }
);
promise3.then((layer) => {
layer.visible = true;
});
},
addOSGBunderline() {
var promise = window.earth.scene.addS3MTilesLayerByScp(
"http://localhost:8090/iserver/services/3D-YuShuiJing-jkqosgb/rest/realspace/datas/雨水井@jkqosgb/config", //地址写到config那一级
{ name: "雨水井@jkqosgb" }
);
promise.then((layer) => {
layer.visible = true;
});
var promise1 = window.earth.scene.addS3MTilesLayerByScp(
"http://localhost:8090/iserver/services/3D-YuShuiJing-jkqosgb/rest/realspace/datas/雨水管@jkqosgb/config", //地址写到config那一级
{ name: "雨水管@jkqosgb" }
);
promise1.then((layer) => {
layer.visible = true;
});
},
addOSGBtileset() {
// var promise= window.earth.scene.addS3MTilesLayerByScp(
// 'http://192.168.100.6:8090/iserver/services/3D-local3DCache-Config/rest/realspace/datas/Combine/config', //地址写到config那一级
// { name: 'Combine' }
// )
// var promise = window.earth.scene.addS3MTilesLayerByScp(
// "http://localhost:8090/iserver/services/3D-local3DCache-osgbxy1/rest/realspace/datas/Combine/config", //地址写到config那一级
// { name: "Combine" }
// );
var promise= window.earth.scene.addS3MTilesLayerByScp(
'http://localhost:8090/iserver/services/3D-local3DCache-Config/rest/realspace/datas/Combine/config', //地址写到config那一级
{ name: 'Combine' }
)
// var promise= window.earth.scene.addS3MTilesLayerByScp(
// '/supermap3Dapi/iserver/services/3D-local3DCache-osgbxy1/rest/realspace/datas/Combine/config', //地址写到config那一级
// //'http://192.168.100.6:8090/iserver/services/3D-local3DCache-osgbxy1/rest/realspace/datas/Combine/config', //地址写到config那一级
// { name: 'Combine' }
// )
promise.then((layer) => {
layer.visible = true;
this.osgblayer = layer;
window.earth.flyTo(layer);
});
},
addLayerByCheck(layername) {
if (layername.indexOf("水质站") > -1) {
this.addEntityByType("水质站");
}
if (layername.indexOf("流量站") > -1) {
this.addEntityByType("流量站");
}
if (layername.indexOf("雨量站") > -1) {
this.addEntityByType("雨量站");
}
if (layername.indexOf("雨水管") > -1) {
//流向
var viewer = window.earth;
var entitys = viewer.entities._entities._array;
for (var i = 0; i < entitys.length; i++) {
if (entitys[i].type && entitys[i].type == "yushuiarrow") {
entitys[i].show = true;
}
}
//s3m管线
var promise = window.earth.scene.addS3MTilesLayerByScp(
"http://111.231.190.116:8090/iserver/services/3D-YuShuiJing84-jkqline3D6/rest/realspace/datas/雨水管84@jkqline3D6/config", //地址写到config那一级
{ name: "雨水管84@jkqline3D6" }
);
promise.then((layer) => {
layer.visible = true;
layer.setQueryParameter({
url: "http://111.231.190.116:8090/iserver/services/data-YuShuiJing84-jkqline3D6/rest/data",
dataSourceName: "jkqline3D6",
dataSetName: "雨水管84",
keyWord: "SmID",
});
layer.textureUVSpeed = new Cesium.Cartesian2(0, -2);
if (this.smidarrayysg.length > 0) {
layer.selectColorType = 1.0;
layer.setObjsColor(this.smidarrayysg, Cesium.Color.YELLOW);
}
});
}
if (layername.indexOf("污水管") > -1) {
//流向
var viewer = window.earth;
var entitys = viewer.entities._entities._array;
for (var i = 0; i < entitys.length; i++) {
if (entitys[i].type && entitys[i].type == "wushuiarrow") {
entitys[i].show = true;
}
}
//s3m管线
var promise = window.earth.scene.addS3MTilesLayerByScp(
"http://111.231.190.116:8090/iserver/services/3D-YuShuiJing84-jkqline3D6/rest/realspace/datas/污水管84@jkqline3D6/config", //地址写到config那一级
{ name: "污水管84@jkqline3D6" }
);
promise.then((layer) => {
layer.visible = true;
layer.setQueryParameter({
url: "http://111.231.190.116:8090/iserver/services/data-YuShuiJing84-jkqline3D6/rest/data",
dataSourceName: "jkqline3D6",
dataSetName: "污水管84",
keyWord: "SmID",
});
layer.textureUVSpeed = new Cesium.Cartesian2(0, -2);
});
}
if (layername.indexOf("合流管") > -1) {
//流向
var viewer = window.earth;
var entitys = viewer.entities._entities._array;
for (var i = 0; i < entitys.length; i++) {
if (entitys[i].type && entitys[i].type == "heliuarrow") {
entitys[i].show = true;
}
}
//s3m管线
var promise = window.earth.scene.addS3MTilesLayerByScp(
"http://111.231.190.116:8090/iserver/services/3D-YuShuiJing84-jkqline3D6/rest/realspace/datas/合流管84@jkqline3D6/config", //地址写到config那一级
{ name: "合流管84@jkqline3D6" }
);
promise.then((layer) => {
layer.visible = true;
layer.setQueryParameter({
url: "http://111.231.190.116:8090/iserver/services/data-YuShuiJing84-jkqline3D6/rest/data",
dataSourceName: "jkqline3D6",
dataSetName: "合流管84",
keyWord: "SmID",
});
layer.textureUVSpeed = new Cesium.Cartesian2(0, -2);
});
}
if (layername.indexOf("雨水井") > -1) {
var promise = window.earth.scene.addS3MTilesLayerByScp(
"http://111.231.190.116:8090/iserver/services/3D-YuShuiJing84-jkqline3D6/rest/realspace/datas/雨水井84@jkqline3D6/config", //地址写到config那一级
{ name: "雨水井84@jkqline3D6" }
);
promise.then((layer) => {
layer.visible = true;
layer.setQueryParameter({
url: "http://111.231.190.116:8090/iserver/services/data-YuShuiJing84-jkqline3D6/rest/data",
dataSourceName: "jkqline3D6",
dataSetName: "雨水井84",
keyWord: "SmID",
});
});
}
if (layername.indexOf("污水井") > -1) {
var promise = window.earth.scene.addS3MTilesLayerByScp(
"http://111.231.190.116:8090/iserver/services/3D-YuShuiJing84-jkqline3D6/rest/realspace/datas/污水井84@jkqline3D6/config", //地址写到config那一级
{ name: "污水井84@jkqline3D6" }
);
promise.then((layer) => {
layer.visible = true;
layer.setQueryParameter({
url: "http://111.231.190.116:8090/iserver/services/data-YuShuiJing84-jkqline3D6/rest/data",
dataSourceName: "jkqline3D6",
dataSetName: "污水井84",
keyWord: "SmID",
});
});
}
if (layername.indexOf("合流井") > -1) {
var promise = window.earth.scene.addS3MTilesLayerByScp(
"http://111.231.190.116:8090/iserver/services/3D-YuShuiJing84-jkqline3D6/rest/realspace/datas/合流井84@jkqline3D6/config", //地址写到config那一级
{ name: "合流井84@jkqline3D6" }
);
promise.then((layer) => {
layer.visible = true;
layer.setQueryParameter({
url: "http://111.231.190.116:8090/iserver/services/data-YuShuiJing84-jkqline3D6/rest/data",
dataSourceName: "jkqline3D6",
dataSetName: "合流井84",
keyWord: "SmID",
});
});
}
},
removeLayerByCheck(layername) {
if (layername.indexOf("水质站") > -1) {
this.removeEntityByType("水质站");
}
if (layername.indexOf("流量站") > -1) {
this.removeEntityByType("流量站");
}
if (layername.indexOf("雨量站") > -1) {
this.removeEntityByType("雨量站");
}
if (layername.indexOf("雨水管") > -1) {
var viewer = window.earth;
var entitys = viewer.entities._entities._array;
for (var i = 0; i < entitys.length; i++) {
if (entitys[i].type && entitys[i].type == "yushuiarrow") {
entitys[i].show = false;
}
}
window.earth.scene.layers.remove("雨水管84@jkqline3D6");
}
if (layername.indexOf("污水管") > -1) {
var viewer = window.earth;
var entitys = viewer.entities._entities._array;
for (var i = 0; i < entitys.length; i++) {
if (entitys[i].type && entitys[i].type == "wushuiarrow") {
entitys[i].show = false;
}
}
window.earth.scene.layers.remove("污水管84@jkqline3D6");
}
if (layername.indexOf("合流管") > -1) {
var viewer = window.earth;
var entitys = viewer.entities._entities._array;
for (var i = 0; i < entitys.length; i++) {
if (entitys[i].type && entitys[i].type == "heliuarrow") {
entitys[i].show = false;
}
}
window.earth.scene.layers.remove("合流管84@jkqline3D6");
}
if (layername.indexOf("雨水井") > -1) {
window.earth.scene.layers.remove("雨水井84@jkqline3D6");
}
if (layername.indexOf("污水井") > -1) {
window.earth.scene.layers.remove("污水井84@jkqline3D6");
}
if (layername.indexOf("合流井") > -1) {
window.earth.scene.layers.remove("合流井84@jkqline3D6");
}
},
//根据全局报警id数组去重新渲染黄色报警管线
refreshBJlayer() {
//根据图层和smid赋值
if (this.smidarrayysg.length > 0) {
var layer1 = window.earth.scene.layers.find("雨水管84@jkqline3D6");
layer1.selectColorType = 1.0;
layer1.setObjsColor(this.smidarrayysg, Cesium.Color.YELLOW);
}
if (this.smidarraywsg.length > 0) {
var layer2 = window.earth.scene.layers.find("污水管84@jkqline3D6");
layer2.selectColorType = 1.0;
layer2.setObjsColor(this.smidarraywsg, Cesium.Color.YELLOW);
}
if (this.smidarrayysj.length > 0) {
var layer3 = window.earth.scene.layers.find("雨水井84@jkqline3D6");
layer3.selectColorType = 1.0;
layer3.setObjsColor(this.smidarrayysj, Cesium.Color.YELLOW);
}
if (this.smidarraywsj.length > 0) {
var layer4 = window.earth.scene.layers.find("污水井84@jkqline3D6");
layer4.selectColorType = 1.0;
layer4.setObjsColor(this.smidarraywsj, Cesium.Color.YELLOW);
}
},
//OSGB加载
addOSGB() {
// 加载3D
var m1 = Cesium.Matrix4.fromArray([
1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 30.0, 2.0,
0.0, 1.0,
]);
var tileset1 = new Cesium.Cesium3DTileset({
url: "http://192.168.16.144:6089/jingkaiqu/tileset.json",
modelMatrix: m1, //转移矩阵
baseScreenSpaceError: 512,
maximumScreenSpaceError: 128,
});
window.earth.scene.primitives.add(tileset1);
window.earth.flyTo(tileset1);
},
//关闭属性面板
closepopup() {
// this.basicData = null;
this.lineInfo.siteName = "";
this.lineInfo.basicData = null;
this.lineInfo.realTimeData = [];
document.getElementById("bubble").style.display = "none";
},
// 地图初始化
homeClick() {
//this.removeAllpopup()
/* this.flyByLontion({
lon: 114.14065,
lat: 30.4447,
alt: 150,
heading: 50,
pitch: -14.0,
roll: 0,
}); */
if(window.earth)
{
window.earth.camera.flyTo({
destination: new Cesium.Cartesian3(-2205455.99014828,4932877.268983923,3388815.671422814),
orientation: {
heading: 5.803243742536711, // east, default value is 0.0 (north)
pitch: -0.24049635580715845, // default value (looking down)
roll: 6.283185307179586,
}
});
}
},
// // 飞行到某一位置
// flyByLontion(lontion) {
// window.earth.camera.flyTo({
// destination: Cesium.Cartesian3.fromDegrees(
// lontion.lon,
// lontion.lat,
// lontion.alt
// ),
// orientation: {
// heading: Cesium.Math.toRadians(lontion.heading), // east, default value is 0.0 (north)
// pitch: Cesium.Math.toRadians(lontion.pitch), // default value (looking down)
// roll: lontion.roll,
// },
//飞行相关
TravelCave2() {
///依次遍历加载所有隧道管线
const routeCor = [];
// var lonarr=[114.148391,114.148672,114.14892,114.149219,114.149576,114.149862,114.150233,114.150742,114.15137,114.151965,114.152646,114.153179,114.15374,114.154335,114.154864,114.155401,114.156244,114.157195,114.158019,114.158775,114.159689,114.160579,114.161483,114.162502,114.163653,114.164667,114.165357,114.166475,114.167184,114.167941]
// var latarr=[30.444107,30.444402,30.444711,30.445026,30.445325,30.445616,30.445939,30.446253,30.446544,30.446824,30.447029,30.44721,30.447338,30.447491,30.447648,30.447814,30.448076,30.448376,30.448638,30.44888,30.449161,30.449518,30.449818,30.450156,30.450641,30.451079,30.451374,30.451802,30.452026,30.452183]
var lonarr = [
114.0898903854,14.089841264129,114.089796947407 ,114.089757095699 ,114.08970803082 ,114.089647304733
,114.089597569585,114.089535569953,114.089471080709,114.089413412573,114.089362228022,114.089319783143,114.089257792534
,114.089214671593,114.089144784234,114.089068820635,114.088954740737,114.088882400043
];
var latarr = [
32.0970053281074,32.0970490955161,32.0970904753084,32.0971270664774,32.0971707894215,32.097227628287,32.0972729702291,32.0973327638936,32.0973913445578,
32.097442311542,32.0974908939943,32.0975295785948,32.0975888500358,32.0976275724987,32.0976941238234,32.0977634521982,
32.0978698889827,32.0979350015851];
for (let kk = 0; kk < lonarr.length; kk++) {
/* var result = gcoord.transform(
[lonarr[kk], latarr[kk]], // 经纬度坐标
gcoord.GCJ02, // 当前坐标系
gcoord.WGS84 // 目标坐标系
); */
routeCor.push(lonarr[kk]);
routeCor.push(latarr[kk]);
routeCor.push(-5);
}
//求全管线漫游路径routeCor
const Lines = Cesium.Cartesian3.fromDegreesArrayHeights(routeCor);
//加载飞行模型参数
const options = {
time: 18,
// time: this.video.duration,
Lines: Lines,
isPathShow: true,
};
this.options = options;
this.entity = undefined;
//this.url = options.modeluri;
this.time = options.time;
this.start = undefined;
this.stop = undefined;
this.Lines = options.Lines;
this.isPathShow = options.isPathShow;
this.property = this.ComputeRoamingLineProperty(
options.Lines,
options.time,
options.start
);
},
//飞行相关
TravelCave() {
///依次遍历加载所有隧道管线
const routeCor = [];
// var lonarr=[114.148391,114.148672,114.14892,114.149219,114.149576,114.149862,114.150233,114.150742,114.15137,114.151965,114.152646,114.153179,114.15374,114.154335,114.154864,114.155401,114.156244,114.157195,114.158019,114.158775,114.159689,114.160579,114.161483,114.162502,114.163653,114.164667,114.165357,114.166475,114.167184,114.167941]
// var latarr=[30.444107,30.444402,30.444711,30.445026,30.445325,30.445616,30.445939,30.446253,30.446544,30.446824,30.447029,30.44721,30.447338,30.447491,30.447648,30.447814,30.448076,30.448376,30.448638,30.44888,30.449161,30.449518,30.449818,30.450156,30.450641,30.451079,30.451374,30.451802,30.452026,30.452183]
var lonarr = [
114.087763419737,114.087689192507,114.087653093624,114.08759766285,114.087516428843,114.087456655966,114.087387491646,114.087314330424,114.087253741682,114.087181761485,114.08710594273,114.087049911241,114.086966264683,114.0869241438,114.086782521269,114.086656495749,114.086552339414,
114.086467292841,114.086375418559,114.086325058138,114.086251488439,114.086212781833,114.086114747666,114.085987192653,114.08583189863
];
var latarr = [
32.0955439108,32.0956102636279,32.0956420811552,32.0956972372304,32.0957732456452,32.0958313509353,32.0958961703995,32.0959646428073,32.0960193913297,32.0960848141479,32.0961527850088,32.0961988123009,32.0962695200168,32.0963064886343,32.0964261570576,32.0965305774399,32.0966130044973,
32.0966857359645,32.0967631996461,32.0968071541257,32.0968684139987,32.0969048271719,32.0969862922884,32.0970946158659,32.0972330138566
];
for (let kk = 0; kk < lonarr.length; kk++) {
/* var result = gcoord.transform(
[lonarr[kk], latarr[kk]], // 经纬度坐标
gcoord.GCJ02, // 当前坐标系
gcoord.WGS84 // 目标坐标系
); */
routeCor.push(lonarr[kk]);
routeCor.push(latarr[kk]);
routeCor.push(-5);
}
routeCor.push(114.085719349506);
routeCor.push(32.0971357752289);
routeCor.push(1.5);
routeCor.push(114.085588643839);
routeCor.push(32.0972612917984);
routeCor.push(1.5);
routeCor.push(114.085491647299);
routeCor.push(32.097355446692);
routeCor.push(1.5);
routeCor.push(114.085318017236);
routeCor.push(32.0975266208165);
routeCor.push(1.5);
routeCor.push(114.085180056944);
routeCor.push(32.0976642995766);
routeCor.push(1.5);
routeCor.push(114.085119280774);
routeCor.push(32.0977270301215);
routeCor.push(1.5);
var lonarr1 = [
114.085255976288,114.085102694904,114.085014961749,114.084923781515,114.084786423886,114.084692750713,114.08460844511,114.084534852399,
114.084479672299,114.084400450906,114.084291694824,114.084214065142,114.084115479127,114.084036679425,114.083948853824,114.083828529212,114.083762618346,114.083670496717,114.083564187366,
114.083480203343,114.083397555403,114.083285951538,114.083209751656,114.083146979527,114.083040248719,114.082968458143,114.082938537003,114.08288101482,
114.082811049091,114.082774340772,114.082727661101,114.082680332365,114.082648783926,114.082594160631,114.082546284847,114.082503652205,
114.082434591266,114.082384186164,114.082308046589,114.082250405793,114.082192903706,114.08211938981,
114.082049117193,114.081992119443,114.081940938433,114.081879304096,114.081824030884,114.081748689648,114.081686859164,114.081597965895,
114.081531735095,114.081470914758,114.081400118209,114.081330735072,114.081271630674,114.081224359781,114.081150981215,114.08107153615,114.081034048701,114.080977739837,
114.080925212461,114.080852506325,114.080752521335,114.080700156844,114.080629328236,114.080532400489,
114.080459584228,114.080399009685,114.080335825006,114.080242918602,114.080179816621,114.080181204924,114.080089587943,114.08004499385,114.079971133277,
114.079850230649,114.079784782032,114.079729723803,114.079660313457,114.079583992338,114.079527995873,114.079459435964,114.079408140909,
114.079333362151,114.079230455162,114.079146661184
];
var latarr1 = [
32.0978345684551,32.0979785122343,32.0980605423124,32.0981493367731,32.0982863273092,32.0983793459651,32.0984714366192,32.0985561170528,
32.0986145838852,32.0987069863075,32.0988312425012,32.0989236314715,32.0990387312133,32.0991307915664,32.0992359345577,32.0993792349995,32.0994578651062,32.0995630877418,32.0996859900723,
32.0997828704268,32.0998817346794,32.1000085537278,32.100095185876,32.1001652907905,32.1002875662747,32.1003736480043,32.1004113295985,32.1004861755372,
32.1005750063695,32.1006252253616,32.1006890091389,32.1007584586724,32.1008019054174,32.1008821656155,32.1009512477213,32.1010090678594,
32.1011080872234,32.1011858150934,32.1012975869943,32.1013840172796,32.1014718984045,32.1015816187692,
32.1016894782681,32.1017769762188,32.1018535972501,32.1019493609947,32.1020317658604,32.1021482886804,32.1022408675649,32.1023756080394,
32.1024777230103,32.1025734534491,32.10268282509,32.102787689644,32.1028755374286,32.1029506991419,32.1030639197819,32.1031839026546,32.1032421167879,32.10333213833,
32.1034137656734,32.1035220905637,32.1036792532342,32.1037542274605,32.103833226122,32.1039417395034,
32.1040295715129,32.1041000089462,32.1041721958583,32.1042804199954,32.1043520409667,32.1043507388764,32.1044545582256,32.104506639531,32.1045937278367,
32.1047320829662,32.104803349756,32.1048685928752,32.1049456548293,32.1050357306808,32.1050977032556,32.1051800454596,32.1052386907462,
32.1053237777052,32.1054423308271,32.1055366473754
];
for (let kk = 0; kk < lonarr1.length; kk++) {
routeCor.push(lonarr1[kk]);
routeCor.push(latarr1[kk]);
routeCor.push(-5);
}
//求全管线漫游路径routeCor
const Lines = Cesium.Cartesian3.fromDegreesArrayHeights(routeCor);
//加载飞行模型参数
const options = {
time: 117,
// time: this.video.duration,
Lines: Lines,
isPathShow: true,
};
this.options = options;
this.entity = undefined;
//this.url = options.modeluri;
this.time = options.time;
this.start = undefined;
this.stop = undefined;
this.Lines = options.Lines;
this.isPathShow = options.isPathShow;
this.property = this.ComputeRoamingLineProperty(
options.Lines,
options.time,
options.start
);
},
/**
*漫游的暂停和继续
*
* @param {*} state bool类型 false为暂停，ture为继续
* @memberof Roaming
*/
//漫游
ComputeRoamingLineProperty(Lines, time) {
const property = new Cesium.SampledPositionProperty();
const lineLength = Lines.length;
const tempTime = time - (time % lineLength);
const increment = tempTime / lineLength;
//const increment = time / lineLength;
const start = Cesium.JulianDate.now();
this.start = start;
const stop = Cesium.JulianDate.addSeconds(start, tempTime, new Cesium.JulianDate());
//const stop = Cesium.JulianDate.addSeconds(start, time, new Cesium.JulianDate());
this.stop = stop;
window.earth.clock.startTime = start.clone();
window.earth.clock.stopTime = stop.clone();
window.earth.clock.currentTime = start.clone();
// window.earth.clock.clockRange = Cesium.ClockRange.LOOP_STOP; // Loop at the end循环
window.earth.clock.clockRange = Cesium.ClockRange.CLAMPED; //到达终止时间后自动停止
window.earth.clock.multiplier = 0.5;
for (let i = 0; i < lineLength; i++) {
const time = Cesium.JulianDate.addSeconds(
start,
i * increment,
new Cesium.JulianDate()
);
const position = Lines[i];
property.addSample(time, position);
}
return property;
},
/**
*
*
* @param {*} position computeRoamingLineProperty计算的属性
* @param {*} start 开始时间节点
* @param {*} stop 结束时间节点
* @param {*} isPathShow path路径是否显示
* @memberof Roaming
*/
InitRoaming(position, start, stop, isPathShow) {
//this.position = position;
this.entity = window.earth.entities.add({
availability: new Cesium.TimeIntervalCollection([
new Cesium.TimeInterval({
start: start,
stop: stop,
}),
]),
// 位置
position: position,
// 计算朝向
orientation: new Cesium.VelocityOrientationProperty(position),
model: {
//uri: "/gltfUrl/car01.gltf",
uri: "/gltfUrl/gltf/gongren.gltf",
//uri: "/gltfUrl/00256_Daud008.fbx.glb",
scale: 0.001
},
/* billboard: {
image: "./../../assets/images/manyoumark.png",
// HorizontalOrigin: HorizontalOrigin.LEFT,
// //垂直位置
// verticalOrigin: VerticalOrigin.UP,
pixelOffset: new Cesium.Cartesian2(0, -10),
heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND, //地形之上
}, */
path: {
resolution: 1,
material: new Cesium.PolylineGlowMaterialProperty({
glowPower: 0.1,
color: Cesium.Color.RED.withAlpha(0.5),
}),
width: 10,
show: true,
},
});
//追随视角
window.earth.trackedEntity = this.entity;
window.earth.clock.onTick.addEventListener((clock) => {
this.OneSeeFunc(position);
});
},
//第一视角漫游方法
OneSeeFunc(position) {
// console.log("进来了onsese")
let judgeTime = Cesium.JulianDate.compare(
window.earth.clock.currentTime,
window.earth.clock.stopTime
);
console.log(judgeTime);
if (judgeTime < 0) {
//设置第一视角
let hpRoll = new Cesium.HeadingPitchRoll();
const hpRange = new Cesium.HeadingPitchRange();
this.center = new Cesium.Cartesian3();
this.center = position.getValue(
window.earth.clock.currentTime,
this.center
);
// console.log(center);
// console.log(this.entity);
// if (
// this.center !== undefined &&
// this.entity &&
// this.isEndRoam == false
// ) {
// //console.log('进来了进来了进来了');
// const xx = new Cesium.VelocityOrientationProperty(position);
// const aa = xx.getValue(window.earth.clock.currentTime);
// hpRoll = HeadingPitchRoll.fromQuaternion(aa);
// /*hpRange.heading = hpRoll.heading - Math.PI / 2;
// hpRange.pitch = -Math.PI / 2;
// hpRange.range = 2000; */
// hpRange.heading = 5.486668339977669;
// hpRange.pitch = -0.3000302138834965;
// hpRange.range = 150;
// //window.earth.camera.lookAt(this.center, hpRange);
// }
//中途点击了停止漫游
if (this.isEndRoam == true) {
this.EndRoaming();
}
//漫游完毕停止漫游并归位视角
/* if (judgeTime > -3) {
setTimeout(() => {
// console.log('见来了进来了进来了');
if (this.isEndRoam == false) {
this.homeClick();
}
this.EndRoaming();
}, 3100);
} */
//自动到了指定位置，停止播放，弹出pop框
//长丰泵站
//this.AnimateState
if (judgeTime > -100 && judgeTime < -96 && this.ispanelCFBZ == false) {
this.holdMY();
console.log("开始展示长丰泵站");
document.getElementById("问题2").style.display = "block";
window.earth.scene.preRender.addEventListener(() => {
var position = new Cesium.Cartographic(
114.0864063271,
32.0967950080981,
-5
);
this.fixDomPosition("问题2", position);
});
this.ispanelCFBZ = true;
setTimeout(() => {
this.holdMY();
console.log("停止展示长丰泵站,继续动画");
document.getElementById("问题2").style.display = "none";
}, 4000);
}
//长丰闸站
// if (
// judgeTime > -76 &&
// judgeTime < -73 &&
// this.ispanelCFZZ == false
// ) {
// console.log("开始展示长丰闸站");
// document.getElementById("长丰闸站").style.display = "block";
// this.ispanelCFZZ = true;
// setTimeout(() => {
// console.log("停止展示长丰闸站,继续动画");
// document.getElementById("长丰闸站").style.display =
// "none";
// }, 3000);
// }
}
},
//三维笛卡尔坐标转屏幕坐标
transPosition(position) {
return Cesium.SceneTransforms.wgs84ToWindowCoordinates(
window.earth.scene,
position
);
},
//让dom跟着指定的经纬度位置跑
fixDomPosition(domId, position) {
var dom = document.getElementById(domId);
var cartesian = Cesium.Cartesian3.fromDegrees(
position.longitude,
position.latitude,
position.height
);
var winPosi = this.transPosition(cartesian);
if (winPosi !== undefined && winPosi !== null) {
//dom.style.display=""
dom.style.left = winPosi.x + "px";
dom.style.top = winPosi.y + "px";
}
},
PauseOrContinue(state) {
if(window.earth.clock)
window.earth.clock.shouldAnimate = state;
},
/**
*改变飞行的速度
*
* @param {*} value 整数类型
* @memberof Roaming
*/
ChangeRoamingSpeed(value) {
window.earth.clock.multiplier = value;
},
/**
*
*取消漫游
* @memberof Roaming
*/
EndRoaming() {
// console.log(JulianDate.compare(window.earth.clock.currentTime, window.earth.clock.stopTime));
this.isEndRoam = true;
if (this.entity !== undefined) {
window.earth.entities.remove(this.entity);
}
/* this.$parent.Show(true); */
},
//开始漫游暂停等
beginMY() {
this.ispanelCFBZ = false;
this.ispanelCFZZ = false;
this.endMY();
//控制视频播放
// video控件是原生获取的dom
this.videoPanelShow = true;
//控制地图上无人机飞行
this.isEndRoam = false;
// this.PauseOrContinue(true);
/* this.playstopIcon = 'el-icon-video-pause iconDivs';
this.playstopTitle = '暂停'; */
let lontion = {
//lon: 114.33572318755,
lon: 114.087763419737,
//lat: 30.5642200607852 - 0.018,
//lat: 30.5642200607852,
lat: 32.0955439108,
// alt: 150,
alt: 50,
heading: 5.486668339977669,
//pitch: -45.0,
pitch: -0.3000302138834965,
roll: 6.283185307179586,
};
window.earth.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(
lontion.lon,
lontion.lat,
lontion.alt
),
orientation: {
heading: Cesium.Math.toRadians(lontion.heading), // east, default value is 0.0 (north)
pitch: Cesium.Math.toRadians(lontion.pitch), // default value (looking down)
roll: lontion.roll,
},
maximumHeight: 20,
duration: 1,
});
setTimeout(() => {
this.property = this.ComputeRoamingLineProperty(
this.options.Lines,
this.options.time,
this.options.start
);
this.PauseOrContinue(true);
//this.flyToScene();
this.AnimateState = true;
this.InitRoaming(this.property, this.start, this.stop, this.isPathShow);
}, 1000);
},
holdMY() {
//控制视频播放
// video控件是原生获取的dom
// let video = document.getElementById('videoEvent');
if (this.AnimateState == false) {
//video播放
// video.play();
//地图事件
/* this.$parent.Show(false);
this.SiteShow = false; */
this.AnimateState = true;
this.playstopIcon = "el-icon-video-pause iconDivs";
this.playstopTitle = "暂停";
} else {
//video暂停
// video.pause();
//地图事件
//控制地图
this.AnimateState = false;
//document.getElementsByClassName("iconDiv")[0].children[2].type =
this.playstopIcon = ' el-icon-video-play iconDivs';
this.playstopTitle = '继续';
}
this.PauseOrContinue(this.AnimateState);
},
// continueMY() {
// this.PauseOrContinue(true);
// },
endMY() {
//this.removeAllpopup()
//变量隐藏
/* //展示实时泵站面板
this.isStationShow = true; */
// //关闭视频
window.earth.clock.currentTime = 0;
/* this.video.currentTime = 0;
this.video.pause();
this.videoPanelShow = false; */
// console.log(window.earth.scene.camera);
// console.log("endendendendend");
this.EndRoaming();
},
//点击通话
callPerson() {
/* this.$emit("callPerson"); */
console.log("点击了通话请求");
this.$emit("showcall", "15824808463");
},
},
};
</script>
<style lang="less" scoped>
.tools-content {
position: absolute;
left: 267px;
right: 0;
top: 60px;
transform: translateY(-60px);
transition: all 0.2s ease-in-out;
&.show {
transform: translateY(0);
}
.top-content1 {
display: flex;
height: 60px;
justify-content: center;
align-items: center;
/* background-color: rgba(0, 0, 0, 0.5); */
img {
width: 38px;
margin-right: 20px;
cursor: pointer;
}
.divider {
width: 2px;
height: 18px;
background-color: #fff;
margin-right: 20px;
}
.r {
width: 32px;
height: 32px;
background-color: #fff;
margin-right: 20px;
text-align: center;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
&.active {
background-color: #0bc3f5;
}
img {
width: 20px;
margin: 0 auto;
}
}
}
.toggle-tools {
text-align: center;
p {
margin: 0;
height: 30px;
display: flex;
align-items: center;
width: 50px;
margin: 0 auto;
background-color: rgba(0, 0, 0, 0.5);
cursor: pointer;
justify-content: center;
}
}
}
.videoPop {
display: inline-block;
right: 57px;
top: 0px;
width: 500px;
height: 300px;
z-index: 200;
position: absolute;
}
.video {
width: 100%;
height: 100%;
overflow: hidden;
}
#videoEvent {
width: 100%;
height: 100%;
}
.bzstyle {
position: absolute;
z-index: 2;
color: white;
/* height: 96px; */
line-height: 21px;
font-size: 16px;
font-weight: 600;
text-align: center;
/* width: 150px; */
cursor: pointer;
user-select: none;
}
.panelstylesp {
z-index: 1001;
position: absolute;
// margin-left: -200px;
// margin-top: -80px;
background-color: #101333;
top: 0;
left: 0;
border-radius: 2px;
max-width: 500px;
min-width: 320px;
min-height: 60px;
box-shadow: 0 0 6px #101333;
}
.panelstyle {
// z-index: 1001;
// position: absolute;
// margin-left: -115px;;
// margin-top: -349px;
// color: white;
// min-height: 60px;
background-color: #101333;
box-shadow: 0 0 6px #101333;
max-width: 385px;
z-index: 1001;
position: absolute;
right: 5px;
top: -3px;
cursor: pointer;
color: #aaa;
&:hover {
color: #777;
}
}
.item {
display: flex;
line-height: 28px;
margin-bottom: 5px;
.l {
width: 85px;
color: #ccc;
margin-right: 10px;
}
.r {
flex: 1;
text-align: right;
}
}
.call {
width: 80px;
height: 30px;
line-height: 30px;
background-color: #1890ff;
text-align: center;
font-size: 14px;
border-radius: 2px;
cursor: pointer;
margin: 15px auto 0;
}
.cnt-list {
margin-top: 10px;
display: flex;
flex-wrap: wrap;
.item00 {
width: 50px;
margin-right: 5px;
text-align: center;
.name {
margin-top: 5px;
font-size: 13px;
color: #ccc;
}
}
}
&::after {
content: "";
width: 0;
height: 0;
position: absolute;
display: block;
border-top: 7px solid #101333;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
bottom: -7px;
left: 50%;
transform: translateX(-50%);
}
#supermap3D {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
.right-menu {
position: absolute;
right: 30px;
color: white;
top: 100px;
z-index: 1001;
.item {
margin-bottom: 20px;
height: 70px;
line-height: 70px;
width: 200px;
text-align: center;
font-size: 24px;
font-family: "HUAKANG";
background-image: linear-gradient(
to right,
rgba(3, 39, 110, 1),
rgba(3, 39, 110, 0.2)
);
cursor: pointer;
transition: all 0.25s ease-in-out;
&.active {
background-image: linear-gradient(
to right,
rgba(0, 162, 255, 1),
rgba(0, 162, 255, 0.2)
);
}
}
}
}
.bubble {
position: absolute;
margin: 0;
margin-left: -500px;
margin-bottom: -25px;
}
.mapPanel {
position: relative;
}
// .panelstyle{
// z-index: 1001;
// position: absolute;
// margin-top: -233px;
// margin-left: -140px;
// top: 168px;
// left: 0px;
// color: white;
// min-height: 60px;
// }
// .panelstyle-bak {
// z-index: 1001;
// position: absolute;
// margin-left: -155px;;
// margin-top: -49px;
// color: white;
// min-height: 60px;
// }
/**** 地图属性面板通用样式 ****/
.page-panel {
position: absolute;
padding: 0 15px;
background: rgba(0, 0, 0, 0.7);
border: 1px solid #3b5082;
border-top: 2px solid #00ffff;
bottom: 30px;
}
.page-panel .panel-head {
display: flex;
color: #00ffff;
font-size: 16px;
font-weight: bold;
padding: 20px 7px 14px 0;
line-height: 16px;
cursor: pointer;
justify-content: space-between;
border-bottom: 1px solid #20343f;
}
.page-panel .panel-body {
padding: 10px 0 18px;
}
.panel-body1 {
display: flex;
width: 975px;
flex-wrap: wrap;
}
.panel-body1-item {
width: 32%;
height: 30px;
color: #fff;
}
.page-panel .panel-list-item {
display: flex;
height: 14px;
color: #b3c5ec;
font-size: 14px;
line-height: 14px;
margin-top: 20px;
align-items: center;
justify-content: space-between;
}
.page-panel .panel-list-item .label {
padding: 0;
}
.page-panel::before,
.page-panel::after {
position: absolute;
left: 50%;
width: 0;
height: 0;
border: 6px solid transparent;
content: "";
}
.page-panel::after {
bottom: -12px;
border-top-color: #3b5082;
z-index: 10;
margin-left: -2px;
}
.page-panel::before {
bottom: -11px;
border-top-color: rgba(0, 0, 0, 0.7);
z-index: 12;
margin-left: -2px;
}
.page-panel .close-icon {
position: absolute;
right: 7px;
top: 18px;
color: #1dfdf8 !important;
font-weight: bold;
font-size: 10px;
padding: 1px;
z-index: 100;
margin-top: -7px;
border: 1px solid #1dfdf8;
}
.qxsyopacity {
width: 227px;
/* top: 20px; */
right: 30px;
margin-top: -343px;
margin-left: 1700px;
z-index: 999999999999;
position: relative;
}
</style>
