Newer
Older
XinYang_SanWei+RongYun / src / views / CesiumCom / swqj3Dmap - 副本.vue
@raoxianxuan raoxianxuan on 22 Dec 2021 107 KB gis
<template>
  <div id="supermap3D" style="height:100%">
    <div id="cesiumContainer" style="height:100%"></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/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="'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">{{ item.id }}</div>
                    </div>
                    <div class="item">
                        <div class="l">联系方式 :</div>
                        <div class="r">{{ item.telephone }}</div>
                    </div>
                    <div class="item">
                        <div class="l">人员单位 :</div>
                        <div class="r">{{ item.company }}</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 {
      //原经开三维飞行相关参数
      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);


      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;
  //var promise = scene.open("http://10.5.37.60:8090/iserver/services/3D-modelcache/rest/realspace");  //url为在SuperMap iServer上发布的服务地址  */
  //var promise = scene.open("http://localhost:8090/iserver/services/3D-YSLINE84_1-pipeline/rest/realspace");  //url为在SuperMap iServer上发布的服务地址  (信阳)
   //var promise = scene.open("http://111.231.190.116:8090/iserver/services/3D-YuShuiJing84-jkqline3D6/rest/realspace");  //url为在SuperMap iServer上发布的服务地址  (海口)


            //加载倾斜摄影
            this.addOSGBtileset()

          
        

      //鼠标点击事件
        this.mouseMapClick();



       //entities实体点击事件
        viewer.selectedEntityChanged.addEventListener((entity)=> { 
   
          //document.getElementById("bubble").style.display="none" 
          // this.removeAllpopup()

         //井盖
          if(entity&&entity._feature&&typeof(entity._type)=="undefined"){ 
            console.log(entity)
            console.log("点击站点的编号是:",entity.id._stCode)
           /*  var feature= entity._feature
            this.lineInfo.basicData = feature;
         

             document.getElementById("bubble").style.display="block" */


                 
          }
         
        })

         


        

  //加载b3dm
 // this.addOSGB()

  },
  beforeDestroy() {
    if(handler) {
      handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOWN)//移除事件
    }
    handler=undefined;

  },
  methods: {
    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);
            }
    

        },

        //根据sql查询
   async doSqlQueryWSG(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.smidarraywsg=[]
               for(var i=0;i<res.features.length;i++)
               {
               this.smidarraywsg.push(res.features[i].ID)
              
               }
                //根据图层和smid赋值
                 var layer = window.earth.scene.layers.find('污水管84@jkqline3D6');
                layer.selectColorType=1.0
                layer.setObjsColor(this.smidarraywsg,Cesium.Color.YELLOW);
            }
    

        },

        //根据sql查询
   async doSqlQueryYSG(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.smidarrayysg=[]
               for(var i=0;i<res.features.length;i++)
               {
               this.smidarrayysg.push(res.features[i].ID)
              
               }
                //根据图层和smid赋值
                 var layer1 = window.earth.scene.layers.find('雨水管84@jkqline3D6');
                layer1.selectColorType=1.0
                layer1.setObjsColor(this.smidarrayysg,Cesium.Color.YELLOW);
            }
    

        },
      clearPopup(event) {
            var clickDom = event.currentTarget;
            var willshow = clickDom.parentNode;
            willshow.style.display = "none";

            this.bgMarkStation=false;
            this.siteInfo.realTimeData = [];
        },
     //消除所有属性面板
        removeAllpopup()  {
      
         
        /*  document.getElementById("bubble").style.display="none" */


         for(var j=0;j<this.MonitorStation.length;j++) {
              if(document.getElementById(this.MonitorStation[j].stCode))
              {
             document.getElementById(this.MonitorStation[j].stCode).style.display="none"
              }
           

         }
           
            this.bgMarkStation=false

          

        },
    // 鼠标点击图层事件
        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让其展示并跟着地球转动
                        
                                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("张小明").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 {
                   
                }
            }, 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: "张小明",
                    type: "人员",
                     stCode:"03760000467",
                    lon: 114.0805319404991,
                    lat: 32.10399069614823,
                 
                },

              
                 {
                    id: "问题2",
                    type: "问题点",
                    ms:"此处有水面垃圾",
                    stCode:"002",
                    lon: 114.0864063271,
                    lat: 32.0967950080981,

                },
               
                //  {
                //     id: "张小明",
                //     type: "人员",
                //     stCode:"23232323",
                //     lon: 114.148984,
                //     lat: 32.444625,
                //     telephone: "1222332332",
                //     company: "A公司",
                // },
               /* {
                    id: "李大明",
                    type: "人员",
                    lon: 114.149276,
                    lat: 32.444964,
                    telephone: "132333332",
                    company: "B公司",
                }, */
                // {
                //     id: "鄂A888888",
                //     type: "车辆",
                //     lon: 114.15077,
                //     lat: 30.446176,
                // },
            ];
            //加载点位数据
            //泵站点位
            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/tools_icon_53.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;
                    }
                }
            }
        },
    // //请求所有站点
		// async stationbaselist() {
    //   var params={"current":1,"size":999}
		// 	let result = await this.$api.stationbaselist(params);
		// 	if(result?.code === 200) {
    //    this.MonitorStation=result.data.records
    //    console.log(this.MonitorStation)

    //         //水质站
    //         this.MonitorStationBZ = this.MonitorStation.filter(function (
    //             item
    //         ) {
    //             return item.stationType == "水质站";
    //         });
    //         this.addPoint(this.MonitorStationBZ);

    //         //流量站
    //         this.MonitorStationZZ = this.MonitorStation.filter(function (
    //             item
    //         ) {
    //             return item.stationType == "流量站";
    //         });
    //         this.addPoint(this.MonitorStationZZ);
    //         //雨量站
    //         this.MonitorStationSPD = this.MonitorStation.filter(function (
    //             item
    //         ) {
    //             return item.stationType == "雨量站";
    //         });
    //         this.addPoint(this.MonitorStationSPD);

    //     //加载后台接口和json计算出来的高亮报警管线
    //      this.getPipeJsonData()

		// 	}
    // },
     getPipeJsonData() {
            this.featurespipe=pipeJson.features
              //计算关联的高亮管线   this.MonitorStation
            for(var i=0;i< this.MonitorStation.length;i++)
            {
              if(this.MonitorStation[i].warnType&&(this.MonitorStation[i].warnType==1||this.MonitorStation[i].warnType==2)&&this.MonitorStation[i].pids.length>0)
              {
              var cutid = this.MonitorStation[i].pids.split(',');
              for(var k=0;k<cutid.length;k++)
              {
                
              for(var j=0;j<this.featurespipe.length;j++)
              {
                       if(cutid[k]==this.featurespipe[j].properties.newid)
                       {
                         //this.MonitorStation[i].jsonpipe=this.featurespipe[j].properties;
                         this.featurespipe[j].properties.stCode=this.MonitorStation[i].stCode
                         this.pipeBjArray[cutid[k]]=this.featurespipe[j].properties
                         //添加到高亮图层
                         //this.featurespipe[j].properties.stCode=this.MonitorStation[i].stCode
                         
                         break
                       }
                
              }
              }
              }
            }
           
           
            var ysgnewids=""
            var wsgnewids=""
            var ysjnewids=""
            var wsjnewids=""
              for(var key in this.pipeBjArray)
          {
            if(key.indexOf("W")>-1&&key.indexOf("WJ")<0)
            {
              wsgnewids+="NEWID="+"'"+key+"'"+" or "
            }
            else if(key.indexOf("WJ")>-1)
            {
              wsjnewids+="NEWID="+"'"+key+"'"+" or "
            }
             else if(key.indexOf("Y")>-1&&key.indexOf("YJ")<0)
            {
              ysgnewids+="NEWID="+"'"+key+"'"+" or "
            }
             else if(key.indexOf("YJ")>-1)
            {
              ysjnewids+="NEWID="+"'"+key+"'"+" or "
            }
    
           
           
          } 
      /*  console.log(this.featurespipe)
       console.log(this.MonitorStation)
          console.log(this.pipeBjArray)

            console.log(wsjnewids.substring(0,wsjnewids.length-4))
             console.log(ysjnewids.substring(0,ysjnewids.length-4))
            console.log(wsgnewids.substring(0,wsgnewids.length-4))
            console.log(ysgnewids.substring(0,ysgnewids.length-4)) */

           /*  this.doSqlQueryWSJ("NEWID='WJ488'") */
            if(wsjnewids.substring(0,wsjnewids.length-4))
            this.doSqlQueryWSJ(wsjnewids.substring(0,wsjnewids.length-4))
            if(ysjnewids.substring(0,ysjnewids.length-4))
            this.doSqlQueryYSJ(ysjnewids.substring(0,ysjnewids.length-4))
            if(wsgnewids.substring(0,wsgnewids.length-4))
            this.doSqlQueryWSG(wsgnewids.substring(0,wsgnewids.length-4))
            if(ysgnewids.substring(0,ysgnewids.length-4))
            this.doSqlQueryYSG(ysgnewids.substring(0,ysgnewids.length-4))

        },

        

         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;

    
});

        },

        addBaimo() {
          var promise=  window.earth.scene.addS3MTilesLayerByScp(
'http://localhost:8090/iserver/services/3D-WuHan-jkqbaimo/rest/realspace/datas/武汉@jkqbaimo/config', //地址写到config那一级
{ name: '武汉' }
)

promise.then((layer)=> {
    layer.visible = true;

    //this.osgblayer=layer

    
});

        },

        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-Config/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";
        },

        //原经开项目三维飞行方法
         //消除所有属性面板
        removeAllpopup(){
            if(document.getElementById("长丰泵站"))
            document.getElementById("长丰泵站").style.display="none"
            if(document.getElementById("烂泥湖泵站"))
            document.getElementById("烂泥湖泵站").style.display="none"
            if(document.getElementById("长丰闸站"))
            document.getElementById("长丰闸站").style.display="none"
            if(document.getElementById("DFAQ-07"))
            document.getElementById("DFAQ-07").style.display="none"
            if(document.getElementById("DFAQ-06"))
            document.getElementById("DFAQ-06").style.display="none"
            if(document.getElementById("堤防存放点"))
            document.getElementById("堤防存放点").style.display="none"
            if(document.getElementById("张小明"))
            document.getElementById("张小明").style.display="none"
            if(document.getElementById("李大明"))
            document.getElementById("李大明").style.display="none"
           
            this.bgMarkStationSPDXinsheng=false

          

        },
        //飞行到视频点视角
        cameraAngleFly() {
            this.flyByLontion({
                lon: 114.1445306085,
                lat: 30.4462301539,
                alt: 10,
                heading: -50, //东南西北
                pitch: 0.0, //上下抬
                roll: 0, //正前方旋转
            });
        },
        // 地图初始化
        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,
                },
            });
        },
        fullClick() {
            //全屏事件
            if (this.isFullscreen == false) {
                this.isFullscreen = true;
                Cesium.Fullscreen.requestFullscreen(document.body);
            }
            //退出全屏事件
            else {
                this.isFullscreen = false;
                this.exitFullScreen();
            }
        },
        // 退出全屏
        exitFullScreen(el) {
            var el = document,
                cfs =
                    el.cancelFullScreen ||
                    el.webkitCancelFullScreen ||
                    el.mozCancelFullScreen ||
                    el.exitFullScreen,
                wscript;
            if (typeof cfs != "undefined" && cfs) {
                cfs.call(el);
                return;
            }
            if (typeof window.ActiveXObject != "undefined") {
                wscript = new ActiveXObject("WScript.Shell");
                if (wscript != null) {
                    wscript.SendKeys("{F11}");
                }
            }
        },
        //飞行相关
         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 = {
                // modeluri: "/gltfUrl/gltf/00256_Daud008.fbx.glb", 
                //modeluri: "/gltfUrl/00256_Daud008.fbx.glb",
                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 = ClockRange.CLAMPED; //到达终止时间后自动停止
            window.earth.clock.multiplier = 1;

            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/car01.gltf", 

                //uri: "/gltfUrl/00256_Daud008.fbx.glb",
                scale: 0.05
            },

               /*  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,-6);
      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) {
            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();
        },
        videoPlayPause() {
            this.video.addEventListener("play", () => {
                //播放开始执行的函数

                if (this.video.currentTime > 1) this.holdMY();
            });
            this.video.addEventListener("pause", () => {
                //暂停开始执行的函数

                if (this.video.currentTime > 1) this.holdMY();
            });
            //回放
            this.video.addEventListener("playing", () => {
                //暂停开始执行的函数
                /* console.log(window.earth.clock.startTime.secondsOfDay);
        console.log(this.video.currentTime); */
                if (
                    window.earth.clock.startTime.secondsOfDay &&
                    this.video.currentTime
                )
                    window.earth.clock.currentTime.secondsOfDay =
                        window.earth.clock.startTime.secondsOfDay +
                        this.video.currentTime;
                // if (this.video.currentTime > 1) this.holdMY();
            });
        },
        //点击通话
        callPerson() {
          /*   this.$emit("callPerson"); */

          console.log("点击了通话请求")
          this.$emit("showcall","15629078847")
        },

  }
}
</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: -158px;
    margin-top: -80px;
    background-color: #101333;
    padding: 15px 20px 15px;
    top: 0;
    left: 0;
    border-radius: 2px;
    max-width: 500px;
    min-width: 320px;
    min-height: 60px;
    box-shadow: 0 0 6px #101333;
    .close {
        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;
}
/****  地图属性面板通用样式  ****/
.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>