<template>
  <div id="cesiumContainer">
    <header>
      <transition
        enter-active-class="animate__animated animate__fadeInDown"
        leave-active-class="animate__animated animate__fadeOutUp"
      >
        <div v-if="gangkouActive" class="back" @click="back"/>
      </transition>
      <div class="title">秦港股份安全监管平台</div>
      <div class="guang"/>
    </header>
    <transition
      enter-active-class="animate__animated animate__fadeInLeft"
      leave-active-class="animate__animated animate__fadeOutLeft"
    >
      <div v-if="!collapse && !pureMap" :key="componentKey" class="content_index">
        <!--        <navigation-->
        <!--          v-if="!gangkouActive"-->
        <!--          :to-center="toCenter"-->
        <!--          :active.sync="gangkouActive"-->
        <!--          :component-key.sync="componentKey"-->
        <!--          @dragAreaEntity="dragAreaEntity"-->
        <!--        />-->
        <info v-if="!gangkouActive"/>
        <gangkou-index v-if="gangkouActive === '00003' && (bottomOptionsIndex === '' || bottomOptionsIndex === 5) && !CORP_INFO_ID" :area="area"/>
        <fengongsi-index
          v-if="gangkouActive && gangkouActive !== '00004' && (bottomOptionsIndex === '' || bottomOptionsIndex === 5) && CORP_INFO_ID"
          :corp-info-id="CORP_INFO_ID"
          :gangkou="gangkouActive"
        />
        <caofeidian-index
          v-if="gangkouActive && gangkouActive === '00004' && bottomOptionsIndex === '' && CORP_INFO_ID"
          :corp-info-id="CORP_INFO_ID"
          :gangkou="gangkouActive"
        />
        <menjin
          v-if="gangkouActive && gangkouActive !== '00004' && bottomOptionsIndex === 0"
          :corp-info-id="CORP_INFO_ID"
          :area="area"
          :gangkou="gangkouActive"/>
        <menjin-cfd
          v-if="gangkouActive && gangkouActive === '00004' && bottomOptionsIndex === 0"
          :corp-info-id="CORP_INFO_ID"
          :area="area"
          :gangkou="gangkouActive"/>
        <xiaofang
          v-if="gangkouActive && gangkouActive !== '00004' && bottomOptionsIndex === 1"
          :corp-info-id="CORP_INFO_ID"
          :area="area"
          :gangkou="gangkouActive"/>
        <anquan
          v-if="gangkouActive && gangkouActive !== '00004' && bottomOptionsIndex === 2"
          :corp-info-id="CORP_INFO_ID"
          :area="area"
          :gangkou="gangkouActive"/>
        <anquan-cfd
          v-if="gangkouActive && gangkouActive === '00004' && bottomOptionsIndex === 2"
          :corp-info-id="CORP_INFO_ID"
          :area="area"
          :gangkou="gangkouActive"/>
        <qixiang
          v-if="gangkouActive && gangkouActive !== '00004' && bottomOptionsIndex === 3"
          :corp-info-id="CORP_INFO_ID"
          :area="area"
          :gangkou="gangkouActive"/>
        <renyuan
          v-if="gangkouActive && gangkouActive !== '00004' && bottomOptionsIndex === 4"
          :corp-info-id="CORP_INFO_ID"
          :area="area"
          :gangkou="gangkouActive"/>
        <renyuan-cfd
          v-if="gangkouActive && gangkouActive === '00004' && bottomOptionsIndex === 1"
          :corp-info-id="CORP_INFO_ID"
          :area="area"
          :gangkou="gangkouActive"/>
        <zhongda
          v-if="gangkouActive && bottomOptionsIndex === 7"
          :corp-info-id="CORP_INFO_ID"
          :area="area"
          :gangkou="gangkouActive"/>
        <bianjieruqin
          v-if="gangkouActive && gangkouActive !== '00004' && bottomOptionsIndex === 6"
          :corp-info-id="CORP_INFO_ID"
          :area="area"
          :gangkou="gangkouActive"/>
        <layout-menu v-if="gangkouActive" :collapse.sync="collapse" :component-key.sync="componentKey"/>
      </div>
    </transition>
    <layout-menu
      v-if="collapse && gangkouActive && !pureMap"
      :collapse.sync="collapse"
      :component-key.sync="componentKey"/>
    <transition
      enter-active-class="animate__animated animate__fadeInDown"
      leave-active-class="animate__animated animate__fadeOutUp"
    >
      <div v-if="gangkouActive === '00003' && !CORP_INFO_ID && !pureMap" class="center_options">
        <div class="guang"/>
        <div
          v-for="(item,index) in centerOptionsList"
          :key="index"
          :class="['option','option'+index,{active:centerOptionsIndex === index}]"
          @click="centerOptionsClick(index,item.AREA)"
        >
          {{ item.label }}
        </div>
      </div>
    </transition>
    <transition
      :css="false"
      mode="out-in"
      @enter="bottomOptionsEnter"
      @leave="bottomOptionsLeave"
    >
      <div v-if="gangkouActive && !pureMap" :key="bottomOptionsKey" class="bottom_options">
        <template v-for="(item,index) in cfdBottomOptionsList" v-if="gangkouActive === '00004'">
          <template v-if="bottomOptionsIndex === '' ? true : bottomOptionsIndex === index">
            <template v-if="containAuthorizationShow(item)">
              <template v-if="eliminateAuthorizationShow(item)">
                <div
                  :class="['option',{active:bottomOptionsIndex === index}]"
                  :key="index"
                  @click="bottomOptionsClick(index)"
                >
                  <div v-if="bottomOptionsIndex !== ''" class="item">
                    <template v-for="(item1,index1) in item.list">
                      <template v-if="containAuthorizationShow(item1)">
                        <template v-if="eliminateAuthorizationShow(item1)">
                          <div
                            :key="index1"
                            class="items"
                            @click.stop="bottomOptionsItemsClick(index,index1,item1.label,item1.type,item.pointUrl,item1.dialog_width)"
                          >
                            <img :src="item1.check ? item1.checkImg : item1.img" alt="" class="suspension_img">
                            <div class="suspension_label">{{ item1.label }}</div>
                          </div>
                        </template>
                      </template>
                    </template>
                  </div>
                  <img :src="index === bottomOptionsIndex ? item.checkImg : item.img" alt="" class="img">
                  <div :class="['label',{active:index === bottomOptionsIndex}]">{{ item.label }}</div>
                </div>
              </template>
            </template>
          </template>
        </template>
        <template v-for="(item,index) in bottomOptionsList" v-if="gangkouActive !== '00004'">
          <template v-if="bottomOptionsIndex === '' ? true : bottomOptionsIndex === index">
            <template v-if="containAuthorizationShow(item)">
              <template v-if="eliminateAuthorizationShow(item)">
                <div
                  :class="['option',{active:bottomOptionsIndex === index}]"
                  :key="index"
                  @click="bottomOptionsClick(index)"
                >
                  <div v-if="bottomOptionsIndex !== ''" class="item">
                    <template v-for="(item1,index1) in item.list">
                      <template v-if="containAuthorizationShow(item1)">
                        <template v-if="eliminateAuthorizationShow(item1)">
                          <div
                            :key="index1"
                            class="items"
                            @click.stop="bottomOptionsItemsClick(index,index1,item1.label,item1.type,item.pointUrl,item1.dialog_width)"
                          >
                            <img :src="item1.check ? item1.checkImg : item1.img" alt="" class="suspension_img">
                            <div class="suspension_label">{{ item1.label }}</div>
                          </div>
                        </template>
                      </template>
                    </template>
                  </div>
                  <img :src="index === bottomOptionsIndex ? item.checkImg : item.img" alt="" class="img">
                  <div :class="['label',{active:index === bottomOptionsIndex}]">{{ item.label }}</div>
                </div>
              </template>
            </template>
          </template>
        </template>
      </div>
    </transition>
    <div class="right_options">
      <div
        v-for="(item,index) in rightOptionsList"
        :key="index"
        class="option"
        @click="handleClickRightTools(index)">
        <div class="tooltip">{{ item.label }}</div>
        <img :src="item.check ? item.checkImg : item.img" alt="">
      </div>
    </div>
    <layout-dialog
      :title.sync="dialog.title"
      :type.sync="dialog.type"
      :id.sync="dialog.id"
      :visible.sync="dialog.visible"
      :width="dialog.width"
      :corp-info-id="dialog.corpInfoId"
      :gangkou="gangkouActive"
      :infoname="dialog.infoname"
    />
  </div>
</template>

<script>
import RyDragEntity from './js/ry_dragentity.js'
import Bubble from './bubble/index.js'
import DragEntity, { imgMap } from './js/dragentity.js'
import { requestFN } from '@/utils/request'
// import navigation from './components/navigation.vue'
import gangkouIndex from './components/gangkou_index.vue'
import fengongsiIndex from './components/fengongsi_index.vue'
import caofeidianIndex from './components/caofeidian_index.vue'
import menjin from './components/menjin.vue'
import menjinCfd from './components/menjinCfd.vue'
import xiaofang from './components/xiaofang.vue'
import anquan from './components/anquan.vue'
import anquanCfd from './components/anquanCfd.vue'
import qixiang from './components/qixiang.vue'
import renyuan from './components/renyuan.vue'
import bianjieruqin from './components/bianjieruqin.vue'
import renyuanCfd from './components/renyuanCfd.vue'
import zhongda from './components/zhongda.vue'
import layoutMenu from './components/menu.vue'
import pako from 'pako' // 解密gzip插件
import info from './components/info.vue'
import layoutDialog from './dialog/index.vue'
import cloneDeep from 'lodash/cloneDeep'
import fullScreenMixins from '@/assets/mixins/fullScreen'
import { animate } from 'motion'
import loadMapBoxCfd from './js/mapboxCfd'
import loadMapBox from './js/mapbox'
import AnquanCfd from './components/anquanCfd'
import mqtt from 'mqtt'
import img4_0_1 from '../../assets/map/gangkou_index/point/icon27.png'
import img4_0_2 from '../../assets/map/gangkou_index/point/icon28.png'
import img4_0_3 from '../../assets/map/gangkou_index/point/icon29.png'
import img4_0 from '../../assets/map/gangkou_index/point/ico21.png'
let viewer = null
let drag = null
let ry_drag = null
var tiandituTk = 'e8a16137fd226a62a23cc7ba5c9c78ce'
var subdomains = ['0', '1', '2', '3', '4', '5', '6', '7']
const Cesium = window.Cesium
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkOWQ0MGYwMy0yODUwLTQ1YzktOGM4OC02MTMwY2UyZjNlMzQiLCJpZCI6MTY0NTUwLCJpYXQiOjE2OTM4OTU1Mjd9.1cC0sSzyj79LZv0ILNCcl0Mabw6hl8TNngFNFr7H8f4'

export default {
  components: {
    AnquanCfd,
    // navigation,
    gangkouIndex,
    fengongsiIndex,
    caofeidianIndex,
    layoutMenu,
    menjin,
    menjinCfd,
    xiaofang,
    anquan,
    qixiang,
    renyuan,
    renyuanCfd,
    zhongda,
    layoutDialog,
    info,
    bianjieruqin
  },
  mixins: [fullScreenMixins],
  data() {
    return {
      initCenter: { longitude: 119.6486945226887, latitude: 39.93555616569192, height: 900000 },
      parentCenter: {},
      center: { longitude: 119.6486945226887, latitude: 39.93555616569192, height: 900000 },
      initPoint: [
        {
          'id': '00002',
          'data_id': '00002',
          'MAP_POINT_NAME': '沧州矿石港务',
          'name': '沧州矿石港务',
          'point_type': '港口',
          'type': '港口',
          'descr': '公司现共有10个泊位（10-20万吨级），设计年通过能力6400万吨。堆场面积176万平米，堆存能力740万吨，大型装卸设备44台套。',
          'position': {
            'x': 117.91412,
            'y': 38.35902
          },
          CORP_INFO_ID: '016d19225e9d4ece863cce8a256a3e72'
        },
        {
          'id': '00003',
          'data_id': '00003',
          'MAP_POINT_NAME': '秦皇岛港',
          'name': '秦皇岛港',
          'point_type': '港口',
          'type': '港口',
          'descr': '秦皇岛港分为东、西两个港区，现有生产性泊位50个，年设计通过能力2.26亿吨，经营货类主要包括煤炭、金属矿石、油品及液体化工、集装箱及其他杂货等。',
          'position': {
            'x': 119.61254,
            'y': 39.92572
          }
        },
        {
          'id': '00004',
          'data_id': '00004',
          'MAP_POINT_NAME': '曹妃甸实业港务',
          'name': '曹妃甸实业港务',
          'point_type': '港口',
          'type': '港口',
          'descr': '公司现共有6个泊位(5-30万吨级)，设计年通过能力6550万吨。堆场面积146万平米，堆存能力1350万吨，大型装卸设备23台套。',
          'position': {
            'x': 118.51022,
            'y': 38.93503
          },
          CORP_INFO_ID: '8854edee3aa94be496cee676b6d4845a'
        },
        {
          'id': '00005',
          'data_id': '00005',
          'MAP_POINT_NAME': '曹妃甸煤炭港务',
          'name': '曹妃甸煤炭港务',
          'point_type': '港口',
          'type': '港口',
          'descr': '公司现共有5个泊位（5-10万吨级），设计年通过能力5000万吨。堆场面积83万平米，堆存能力373.5万吨，大型装卸设备19台套。',
          'position': {
            'x': 118.43701,
            'y': 38.9866
          },
          CORP_INFO_ID: 'c077f4ed66844ed4a191a36fa1fc641c'
        }
      ],
      branchPoint: [],
      rightOptionsList: [
        {
          img: require('../../assets/map/index/back.png'),
          checkImg: require('../../assets/map/index/back_on.png'),
          check: '',
          label: '返回主系统'
        },
        {
          img: require('../../assets/map/index/full.png'),
          checkImg: require('../../assets/map/index/full_on.png'),
          check: false,
          label: '全屏'
        },
        {
          img: require('../../assets/map/index/img2.png'),
          checkImg: require('../../assets/map/index/img2_on.png'),
          check: '',
          label: '返回中心点'
        },
        {
          img: require('../../assets/map/index/img4.png'),
          checkImg: require('../../assets/map/index/img4_on.png'),
          check: false,
          label: '切换视角'
        },
        {
          img: require('../../assets/map/index/del.png'),
          checkImg: require('../../assets/map/index/del_on.png'),
          check: '',
          label: '删除标记点'
        },
        {
          img: require('../../assets/map/index/map.png'),
          checkImg: require('../../assets/map/index/map_on.png'),
          check: false,
          label: '纯净地图'
        }
      ],
      myEntityCollection: {},
      poinEntity: {},
      mqttPoint: {},
      gangkouActive: '',
      centerOptionsList: [
        { label: '秦皇岛西', AREA: '2' },
        { label: '秦皇岛港区', AREA: '' },
        { label: '秦皇岛东', AREA: '1' }
      ],
      area: '',
      centerOptionsIndex: 1,
      bottomOptionsList: [
        {
          img: require('../../assets/map/gangkou_index/img4.png'),
          checkImg: require('../../assets/map/gangkou_index/img4_on.png'),
          label: '门口门禁',
          pointUrl: '/map/getGatePosition',
          containAuthorization: [],
          eliminateAuthorization: [],
          list: [
            {
              label: '人员',
              dialog_width: '800px',
              check: false,
              img: require('../../assets/map/gangkou_index/buttom/ico1.png'),
              checkImg: require('../../assets/map/gangkou_index/buttom/ico1_on.png'),
              type: 'PERSON',
              containAuthorization: [],
              eliminateAuthorization: []
            },
            {
              label: '车辆',
              dialog_width: '600px',
              check: false,
              img: require('../../assets/map/gangkou_index/buttom/ico2.png'),
              checkImg: require('../../assets/map/gangkou_index/buttom/ico2_on.png'),
              type: 'CAR',
              containAuthorization: [],
              eliminateAuthorization: []
            },
            {
              label: '摄像头',
              dialog_width: '600px',
              check: false,
              type: 'CAMERA',
              img: require('../../assets/map/gangkou_index/buttom/ico3.png'),
              checkImg: require('../../assets/map/gangkou_index/buttom/ico3_on.png'),
              containAuthorization: [],
              eliminateAuthorization: []
            }
          ]
        },
        {
          img: require('../../assets/map/gangkou_index/img5.png'),
          checkImg: require('../../assets/map/gangkou_index/img5_on.png'),
          label: '消防管控',
          containAuthorization: [],
          eliminateAuthorization: [],
          pointUrl: '/map/getFireControl',
          list: [
            {
              label: '消防救援队',
              dialog_width: '600px',
              check: false,
              img: require('../../assets/map/gangkou_index/buttom/ico4.png'),
              checkImg: require('../../assets/map/gangkou_index/buttom/ico4_on.png'),
              type: 'xfjyd01',
              containAuthorization: [],
              eliminateAuthorization: []
            },
            {
              label: '消防控制室',
              dialog_width: '600px',
              check: false,
              type: 'xfkzs01',
              img: require('../../assets/map/gangkou_index/buttom/ico5.png'),
              checkImg: require('../../assets/map/gangkou_index/buttom/ico5_on.png'),
              containAuthorization: [],
              eliminateAuthorization: []
            },
            {
              label: '消防泵房',
              dialog_width: '600px',
              check: false,
              type: 'xfbf01',
              img: require('../../assets/map/gangkou_index/buttom/ico6.png'),
              checkImg: require('../../assets/map/gangkou_index/buttom/ico6_on.png'),
              containAuthorization: [],
              eliminateAuthorization: []
            },
            // {
            //   label: '消防水源',
            //   dialog_width: '600px',
            //   check: false,
            //   type: 'xfsy01',
            //   img: require('../../assets/map/gangkou_index/buttom/ico7.png'),
            //   checkImg: require('../../assets/map/gangkou_index/buttom/ico7_on.png'),
            //   containAuthorization: [],
            //   eliminateAuthorization: []
            // },
            {
              label: '消防点位',
              dialog_width: '600px',
              check: false,
              type: 'point',
              img: require('../../assets/map/gangkou_index/buttom/ico8.png'),
              checkImg: require('../../assets/map/gangkou_index/buttom/ico8_on.png'),
              containAuthorization: [],
              eliminateAuthorization: []
            }
          ]
        },
        {
          img: require('../../assets/map/gangkou_index/img6.png'),
          checkImg: require('../../assets/map/gangkou_index/img6_on.png'),
          label: '危险作业',
          containAuthorization: [],
          eliminateAuthorization: [],
          pointUrl: '/map/Eight/listAllHighRiskWorkLocation',
          list: [
            {
              label: '动火作业',
              dialog_width: '1200px',
              type: 'HOTWORK',
              check: false,
              img: require('../../assets/map/gangkou_index/buttom/ico9.png'),
              checkImg: require('../../assets/map/gangkou_index/buttom/ico9_on.png'),
              containAuthorization: [],
              eliminateAuthorization: []
            },
            {
              label: '受限空间作业',
              dialog_width: '1200px',
              type: 'CONFINEDSPACE',
              check: false,
              img: require('../../assets/map/gangkou_index/buttom/ico10.png'),
              checkImg: require('../../assets/map/gangkou_index/buttom/ico10_on.png'),
              containAuthorization: [],
              eliminateAuthorization: []
            },
            {
              label: '临时用电作业',
              dialog_width: '1200px',
              type: 'ELECTRICITY',
              check: false,
              img: require('../../assets/map/gangkou_index/buttom/ico11.png'),
              checkImg: require('../../assets/map/gangkou_index/buttom/ico11_on.png'),
              containAuthorization: [],
              eliminateAuthorization: []
            },
            {
              label: '高处作业',
              dialog_width: '1200px',
              type: 'HIGHWORK',
              check: false,
              img: require('../../assets/map/gangkou_index/buttom/ico12.png'),
              checkImg: require('../../assets/map/gangkou_index/buttom/ico12_on.png'),
              containAuthorization: [],
              eliminateAuthorization: []
            },
            {
              label: '断路作业',
              dialog_width: '1200px',
              type: 'CUTROAD',
              check: false,
              img: require('../../assets/map/gangkou_index/buttom/ico13.png'),
              checkImg: require('../../assets/map/gangkou_index/buttom/ico13_on.png'),
              containAuthorization: [],
              eliminateAuthorization: ['035958e685cf4850bc40151c5e0617a6']
            },
            {
              label: '动土作业',
              dialog_width: '1200px',
              type: 'BREAKGROUND',
              check: false,
              img: require('../../assets/map/gangkou_index/buttom/ico14.png'),
              checkImg: require('../../assets/map/gangkou_index/buttom/ico14_on.png'),
              containAuthorization: [],
              eliminateAuthorization: ['035958e685cf4850bc40151c5e0617a6']
            },
            {
              label: '吊装作业',
              dialog_width: '1200px',
              type: 'HOISTING',
              check: false,
              img: require('../../assets/map/gangkou_index/buttom/ico15.png'),
              checkImg: require('../../assets/map/gangkou_index/buttom/ico15_on.png'),
              containAuthorization: [],
              eliminateAuthorization: []
            },
            {
              label: '盲板抽堵作业',
              dialog_width: '1200px',
              type: 'BLINDBOARD',
              check: false,
              img: require('../../assets/map/gangkou_index/buttom/ico16.png'),
              checkImg: require('../../assets/map/gangkou_index/buttom/ico16_on.png'),
              containAuthorization: [],
              eliminateAuthorization: []
            },
            {
              label: '摄像头',
              dialog_width: '600px',
              check: false,
              type: 'CAMERA',
              img: require('../../assets/map/gangkou_index/buttom/ico3.png'),
              checkImg: require('../../assets/map/gangkou_index/buttom/ico3_on.png'),
              containAuthorization: [],
              eliminateAuthorization: []
            }
          ]
        },
        {
          img: require('../../assets/map/gangkou_index/img7.png'),
          checkImg: require('../../assets/map/gangkou_index/img7_on.png'),
          label: '气象监测',
          containAuthorization: [],
          eliminateAuthorization: [],
          pointUrl: '/map/listbyType',
          list: [
            {
              label: '气象站',
              dialog_width: '1200px',
              type: '293187ddfd984c9ab3fd716aef58da0e',
              check: false,
              img: require('../../assets/map/gangkou_index/buttom/ico17.png'),
              checkImg: require('../../assets/map/gangkou_index/buttom/ico17_on.png'),
              containAuthorization: [],
              eliminateAuthorization: []
            },
            // {
            //   label: '温度站',
            //   dialog_width: '1200px',
            //   type: '561347f0cff641dba8b2b22c0f443348',
            //   check: false,
            //   img: require('../../assets/map/gangkou_index/buttom/ico18.png'),
            //   checkImg: require('../../assets/map/gangkou_index/buttom/ico18_on.png'),
            //   containAuthorization: [],
            //   eliminateAuthorization: []
            // },
            {
              label: '风速站',
              dialog_width: '1200px',
              type: '2da29f00852a4653ba3e760b9de57412',
              check: false,
              img: require('../../assets/map/gangkou_index/buttom/ico19.png'),
              checkImg: require('../../assets/map/gangkou_index/buttom/ico19_on.png'),
              containAuthorization: [],
              eliminateAuthorization: []
            }
            // ,
            // {
            //   label: '湿度站',
            //   dialog_width: '1200px',
            //   type: '732fe73933b845c6b1e2aee06a38ed31',
            //   check: false,
            //   img: require('../../assets/map/gangkou_index/buttom/ico20.png'),
            //   checkImg: require('../../assets/map/gangkou_index/buttom/ico20_on.png'),
            //   containAuthorization: [],
            //   eliminateAuthorization: []
            // }
          ]
        },
        {
          img: require('../../assets/map/gangkou_index/img8.png'),
          checkImg: require('../../assets/map/gangkou_index/img8_on.png'),
          label: '人员定位',
          pointUrl: '/map/getCurrentLocationOnline',
          containAuthorization: [],
          eliminateAuthorization: [],
          list: [
            {
              label: '人员定位',
              dialog_width: '1200px',
              check: false,
              type: 'peoplePosition',
              img: require('../../assets/map/gangkou_index/buttom/ico21.png'),
              checkImg: require('../../assets/map/gangkou_index/buttom/ico21_on.png'),
              containAuthorization: [],
              eliminateAuthorization: []
            }
            // {
            //   label: '车辆定位',
            //   dialog_width: '1200px',
            //   check: false,
            //   img: require('../../assets/map/gangkou_index/buttom/ico22.png'),
            //   checkImg: require('../../assets/map/gangkou_index/buttom/ico22_on.png'),
            //   containAuthorization: [],
            //   eliminateAuthorization: []
            // }
          ]
        },
        {
          img: require('../../assets/map/gangkou_index/img10.png'),
          checkImg: require('../../assets/map/gangkou_index/img10_on.png'),
          label: '摄像头',
          containAuthorization: [],
          eliminateAuthorization: [],
          pointUrl: '/platformvideomanagement/listAll',
          list: [
            {
              label: '摄像头',
              dialog_width: '1200px',
              check: false,
              type: 'platcamera',
              img: require('../../assets/map/gangkou_index/buttom/ico26.png'),
              checkImg: require('../../assets/map/gangkou_index/buttom/ico26_on.png'),
              containAuthorization: [],
              eliminateAuthorization: []
            }
          ]
        },
        {
          img: require('../../assets/map/gangkou_index/img11.png'),
          checkImg: require('../../assets/map/gangkou_index/img11_on.png'),
          label: '边界入侵',
          containAuthorization: [],
          eliminateAuthorization: [],
          pointUrl: '/map/mapPlatformelectronic/listAllLocation',
          list: [
            {
              label: '摄像头',
              dialog_width: '1200px',
              check: false,
              type: 'bianjieruqin',
              img: require('../../assets/map/gangkou_index/buttom/ico26.png'),
              checkImg: require('../../assets/map/gangkou_index/buttom/ico26_on.png'),
              containAuthorization: [],
              eliminateAuthorization: []
            }
          ]
        },
        {
          img: require('../../assets/map/gangkou_index/img9.png'),
          checkImg: require('../../assets/map/gangkou_index/img9_on.png'),
          label: '重大危险源',
          containAuthorization: ['035958e685cf4850bc40151c5e0617a6'],
          eliminateAuthorization: [],
          pointUrl: '/api/homemajor/listMajordangersourceLocation',
          list: [
            {
              label: '储罐区',
              dialog_width: '1200px',
              check: false,
              type: 'majordangersource',
              img: require('../../assets/map/gangkou_index/buttom/ico23.png'),
              checkImg: require('../../assets/map/gangkou_index/buttom/ico23_on.png'),
              containAuthorization: [],
              eliminateAuthorization: []
            },
            {
              label: '压力管道',
              dialog_width: '1200px',
              check: false,
              img: require('../../assets/map/gangkou_index/buttom/ico24.png'),
              checkImg: require('../../assets/map/gangkou_index/buttom/ico24_on.png'),
              containAuthorization: [],
              eliminateAuthorization: []
            }
            // {
            //   label: '锅炉',
            //   dialog_width: '1200px',
            //   check: false,
            //   img: require('../../assets/map/gangkou_index/buttom/ico25.png'),
            //   checkImg: require('../../assets/map/gangkou_index/buttom/ico25_on.png'),
            //   containAuthorization: [],
            //   eliminateAuthorization: []
            // },
            // {
            //   label: '摄像头',
            //   dialog_width: '1200px',
            //   check: false,
            //   type: 'video',
            //   img: require('../../assets/map/gangkou_index/buttom/ico26.png'),
            //   checkImg: require('../../assets/map/gangkou_index/buttom/ico26_on.png'),
            //   containAuthorization: [],
            //   eliminateAuthorization: []
            // }
          ]
        }
      ],
      bottomOptionsIndex: '',
      componentKey: Math.random(),
      bottomOptionsKey: Math.random(),
      bottomOptionsAnimationComplex: false,
      collapse: false,
      pureMap: false,
      CORP_INFO_ID: '',
      dialog: {
        visible: false,
        title: '',
        type: '',
        id: '',
        corpInfoId: '',
        width: '',
        infoname: ''
      },
      /* 曹妃甸使用参数开始*/
      // 人员定位

      timer: '',
      cfdDIngweiTimer: '',
      cfdCarDIngweiTimer: '',
      perLocArr: [],
      carLocArr: [],
      pointBoxCfd: [],
      pointBox: [],
      fwebsocket: {},
      redList: [],
      orangeList: [],
      yellowList: [],
      i: 0,
      cfdBottomOptionsList: [
        {
          img: require('../../assets/map/gangkou_index/img4.png'),
          checkImg: require('../../assets/map/gangkou_index/img4_on.png'),
          label: '门口门禁',
          pointUrl: '/map/getGatePosition',
          containAuthorization: [],
          eliminateAuthorization: [],
          list: [
            {
              label: '人员',
              dialog_width: '600px',
              check: false,
              img: require('../../assets/map/gangkou_index/buttom/ico1.png'),
              checkImg: require('../../assets/map/gangkou_index/buttom/ico1_on.png'),
              type: 'PERSON',
              containAuthorization: [],
              eliminateAuthorization: []
            },
            {
              label: '车辆',
              dialog_width: '600px',
              check: false,
              img: require('../../assets/map/gangkou_index/buttom/ico2.png'),
              checkImg: require('../../assets/map/gangkou_index/buttom/ico2_on.png'),
              type: 'CAR',
              containAuthorization: [],
              eliminateAuthorization: []
            },
            {
              label: '摄像头',
              dialog_width: '600px',
              check: false,
              type: 'CAMERA',
              img: require('../../assets/map/gangkou_index/buttom/ico3.png'),
              checkImg: require('../../assets/map/gangkou_index/buttom/ico3_on.png'),
              containAuthorization: [],
              eliminateAuthorization: []
            }
          ]
        },
        {
          img: require('../../assets/map/gangkou_index/img8.png'),
          checkImg: require('../../assets/map/gangkou_index/img8_on.png'),
          label: '四色四固定',
          pointUrl: '/map/getCurrentLocationOnline',
          containAuthorization: [],
          eliminateAuthorization: [],
          list: [
            {
              label: '人员定位',
              dialog_width: '1200px',
              check: false,
              type: 'peoplePosition',
              img: require('../../assets/map/gangkou_index/buttom/ico21.png'),
              checkImg: require('../../assets/map/gangkou_index/buttom/ico21_on.png'),
              containAuthorization: [],
              eliminateAuthorization: []
            },
            {
              label: '车辆定位',
              dialog_width: '1200px',
              check: false,
              type: 'carPosition',
              img: require('../../assets/map/gangkou_index/buttom/ico22.png'),
              checkImg: require('../../assets/map/gangkou_index/buttom/ico22_on.png'),
              containAuthorization: [],
              eliminateAuthorization: []
            },
            {
              label: '摄像头',
              dialog_width: '600px',
              check: false,
              type: 'CAMERA',
              img: require('../../assets/map/gangkou_index/buttom/ico3.png'),
              checkImg: require('../../assets/map/gangkou_index/buttom/ico3_on.png'),
              containAuthorization: [],
              eliminateAuthorization: []
            }
          ]
        },
        {
          img: require('../../assets/map/gangkou_index/img6.png'),
          checkImg: require('../../assets/map/gangkou_index/img6_on.png'),
          label: '危险作业',
          containAuthorization: [],
          eliminateAuthorization: [],
          pointUrl: '/map/Eight/listAllHighRiskWorkLocation',
          list: [
            {
              label: '动火作业',
              dialog_width: '1200px',
              type: 'HOTWORK',
              check: false,
              img: require('../../assets/map/gangkou_index/buttom/ico9.png'),
              checkImg: require('../../assets/map/gangkou_index/buttom/ico9_on.png'),
              containAuthorization: [],
              eliminateAuthorization: []
            },
            {
              label: '受限空间作业',
              dialog_width: '1200px',
              type: 'CONFINEDSPACE',
              check: false,
              img: require('../../assets/map/gangkou_index/buttom/ico10.png'),
              checkImg: require('../../assets/map/gangkou_index/buttom/ico10_on.png'),
              containAuthorization: [],
              eliminateAuthorization: []
            },
            {
              label: '临时用电作业',
              dialog_width: '1200px',
              type: 'ELECTRICITY',
              check: false,
              img: require('../../assets/map/gangkou_index/buttom/ico11.png'),
              checkImg: require('../../assets/map/gangkou_index/buttom/ico11_on.png'),
              containAuthorization: [],
              eliminateAuthorization: []
            },
            {
              label: '高处作业',
              dialog_width: '1200px',
              type: 'HIGHWORK',
              check: false,
              img: require('../../assets/map/gangkou_index/buttom/ico12.png'),
              checkImg: require('../../assets/map/gangkou_index/buttom/ico12_on.png'),
              containAuthorization: [],
              eliminateAuthorization: []
            },
            {
              label: '断路作业',
              dialog_width: '1200px',
              type: 'CUTROAD',
              check: false,
              img: require('../../assets/map/gangkou_index/buttom/ico13.png'),
              checkImg: require('../../assets/map/gangkou_index/buttom/ico13_on.png'),
              containAuthorization: [],
              eliminateAuthorization: ['035958e685cf4850bc40151c5e0617a6']
            },
            {
              label: '动土作业',
              dialog_width: '1200px',
              type: 'BREAKGROUND',
              check: false,
              img: require('../../assets/map/gangkou_index/buttom/ico14.png'),
              checkImg: require('../../assets/map/gangkou_index/buttom/ico14_on.png'),
              containAuthorization: [],
              eliminateAuthorization: ['035958e685cf4850bc40151c5e0617a6']
            },
            {
              label: '吊装作业',
              dialog_width: '1200px',
              type: 'HOISTING',
              check: false,
              img: require('../../assets/map/gangkou_index/buttom/ico15.png'),
              checkImg: require('../../assets/map/gangkou_index/buttom/ico15_on.png'),
              containAuthorization: [],
              eliminateAuthorization: []
            },
            {
              label: '盲板抽堵作业',
              dialog_width: '1200px',
              type: 'BLINDBOARD',
              check: false,
              img: require('../../assets/map/gangkou_index/buttom/ico16.png'),
              checkImg: require('../../assets/map/gangkou_index/buttom/ico16_on.png'),
              containAuthorization: [],
              eliminateAuthorization: []
            },
            {
              label: '摄像头',
              dialog_width: '600px',
              check: false,
              type: 'CAMERA',
              img: require('../../assets/map/gangkou_index/buttom/ico3.png'),
              checkImg: require('../../assets/map/gangkou_index/buttom/ico3_on.png'),
              containAuthorization: [],
              eliminateAuthorization: []
            }
          ]
        },
        {
          img: require('../../assets/map/gangkou_index/img10.png'),
          checkImg: require('../../assets/map/gangkou_index/img10_on.png'),
          label: '视频监控',
          containAuthorization: [],
          eliminateAuthorization: [],
          pointUrl: '/platformvideomanagement/listAll',
          list: [
            {
              label: '摄像头',
              dialog_width: '1200px',
              check: false,
              type: 'platcamera',
              img: require('../../assets/map/gangkou_index/buttom/ico26.png'),
              checkImg: require('../../assets/map/gangkou_index/buttom/ico26_on.png'),
              containAuthorization: [],
              eliminateAuthorization: []
            }
          ]
        }
      ],
      arr: [
        {
          x: 118.50197080443918,
          y: 38.922992617470584,
          id: 'router-fly-line1',
          name: '1大弹窗'
        },
        {
          x: 118.60197080443918,
          y: 38.822992617470584,
          id: 'router-fly-line2',
          name: '1大弹窗'
        }
      ],
      pointBoxNine: [],
      ninePerLocArr: [],
      /* 曹妃甸使用参数结束*/

      /* 一公司人员定位*/
      // mqtt  开始
      connection: {
        protocol: 'ws',
        host: '192.168.211.80',
        port: 13083,
        endpoint: '/mqtt',
        // for more options, please refer to https://github.com/mqttjs/MQTT.js#mqttclientstreambuilder-options
        clean: true,
        connectTimeout: 30 * 1000, // ms
        reconnectPeriod: 4000, // ms
        clientId: Math.random()
          .toString(16)
          .substring(2, 8),
        // auth
        username: '008ecc903cfb4bc08f7ed02f9b46345e',
        password: '58d06a44d56c4445b4c019492f86ee8d'
      },
      subscription: {
        topic: '1698584148364034050/UwbBQ/+/prop',
        qos: 0
      },

      client: {
        connected: false
      },
      receiveNews: '',
      subscribeSuccess: false,
      connecting: false,
      retryTimes: 0,
      // mqtt  结束
      onePerLocArr: [],
      iniOne: 0

      /* 一公司人员定位 结束*/
    }
  },
  mounted() {
    this.initMap()
    this.pointBoxCfd = loadMapBoxCfd()
    this.pointBox = loadMapBox()
  },
  methods: {
    initMap() {
      viewer = new Cesium.Viewer('cesiumContainer', {
        // terrainProvider: Cesium.createWorldTerrain()
        animation: false, // 动画
        homeButton: true, // home键
        geocoder: true, // 地址编码
        baseLayerPicker: false, // 图层选择控件
        timeline: false, // 时间轴
        fullscreenButton: true, // 全屏显示
        infoBox: true, // 点击要素之后浮窗
        sceneModePicker: true, // 投影方式  三维/二维
        navigationInstructionsInitiallyVisible: false, // 导航指令
        navigationHelpButton: false, // 帮助信息
        selectionIndicator: false, // 选择
        imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
          // 影像底图
          url: 'http://t{s}.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=' + tiandituTk,
          subdomains: subdomains,
          layer: 'tdtImgLayer',
          style: 'default',
          format: 'image/jpeg',
          tileMatrixSetID: 'GoogleMapsCompatible', // 使用谷歌的瓦片切片方式
          show: true
        })
      })

      viewer._cesiumWidget._creditContainer.style.display = 'none' // 隐藏cesium ion
      viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
        // 影像注记
        url: 'http://t{s}.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=' + tiandituTk,
        subdomains: subdomains,
        layer: 'tdtCiaLayer',
        style: 'default',
        format: 'image/jpeg',
        tileMatrixSetID: 'GoogleMapsCompatible',
        show: true
      }))

      drag = new DragEntity({
        viewer
      })
      // 视图缩放至加载资源位置
      this.toCenter()

      this.leftDownAction()

      this.dragAreaEntity(this.initPoint)

      this.loadTilesetHandler()
      ry_drag = new RyDragEntity({
        viewer
      })
      // setInterval(() => {
      //   for (let i = 0; i < this.arr.length; i++) {
      //     if (!this.arr[i].property) {
      //       ry_drag.addEntity(this.arr[i])
      //     } else {
      //       this.arr[i].x += 0.0003 * Math.random()
      //       this.arr[i].y += 0.0001
      //       ry_drag.getPosition(this.arr[i])
      //     }
      //   }
      // }, 1000)
    },

    loadTilesetHandler() {
      Cesium.ExperimentalFeatures.enableModelExperimental = true
      var cfdd = new Cesium.Cesium3DTileset({
        url: '/mapapi/ware/upload/%E6%9B%B9%E5%A6%83%E7%94%B8%E6%B8%AF%E4%B8%9C/%E6%9B%B9%E5%A6%83%E7%94%B8%E6%B8%AF%E4%B8%9C/merge_tile.json'
      })
      viewer.scene.primitives.add(cfdd)

      var cfdx = new Cesium.Cesium3DTileset({
        url: '/mapapi/ware/upload/%E6%9B%B9%E5%A6%83%E7%94%B8%E6%B8%AF%E8%A5%BF/%E6%9B%B9%E5%A6%83%E7%94%B8%E6%B8%AF%E8%A5%BF/merge_tile.json'
      })
      viewer.scene.primitives.add(cfdx)

      var qhdxys = new Cesium.Cesium3DTileset({
        url: '/mapapi/ware/upload/qhdxys/merge_tile.json'
      })
      viewer.scene.primitives.add(qhdxys)

      var qhdgysh = new Cesium.Cesium3DTileset({
        url: '/mapapi/ware/upload/qhdgysh/merge_tile.json'
      })
      viewer.scene.primitives.add(qhdgysh)
    },

    leftDownAction() {
      // 去掉entity的点击事件 start
      viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
      viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
      // 去掉entity的点击事件 end
      this.handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
      let id
      this.handler.setInputAction(movement => {
        const pick = viewer.scene.pick(movement.position)
        if (Cesium.defined(pick) && (pick.id.id)) {
          if (!pick.id._monitoItems) {
            this.closeBubbles()
            return
          }
          const point_type = pick.id._monitoItems.data.point_type
          const point_id = pick.id._monitoItems.data.id
          if (point_type === '报警') {
            viewer.dataSources.remove(this.myEntityCollection[pick.id._monitoItems.data.id])
            delete this.poinEntity[pick.id._monitoItems.data.id]
          }
          if (point_type === '港口' || point_type === '分公司') {
            id = pick.id.id
            this.bubble(id)
          }
          if (this.gangkouActive === '00004' && point_type.indexOf('标记点') !== -1 && (point_id.substring(0, 1) === '0' || point_id.substring(0, 1) === '3' || point_id.substring(0, 3) === '1_2' || point_id.substring(0, 3) === '2_8')) {
            // if (this.gangkouActive === '00004' && point_type.indexOf('标记点') !== -1 && point_id.substring(0, 1) === '0' || point_id.substring(0, 1) === '5') {

            const { label, point_type, data_id, infoname, code } = pick.id._monitoItems.data
            this.dialog.visible = true
            this.dialog.title = label
            this.dialog.type = point_type.substring(3) + this.gangkouActive
            this.dialog.id = point_type.substring(3) === 'CAMERA' ? code : point_type.substring(3) === 'platcamera' ? code : data_id
            this.dialog.infoname = infoname
            return
          }
          if (point_type.indexOf('标记点') !== -1) {
            const { label, point_type, data_id, corpInfoId, dialog_width, infoname } = pick.id._monitoItems.data
            this.dialog.visible = true
            this.dialog.title = label
            this.dialog.type = point_type.substring(3)
            this.dialog.id = data_id
            this.dialog.corpInfoId = corpInfoId
            this.dialog.infoname = infoname
            this.dialog.width = dialog_width || '50%'
          }
        } else {
          this.closeBubbles()
        }
        // var cartesian = this.getCatesian3FromPX(movement.position)
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
    },

    getCatesian3FromPX: function(px) {
      if (viewer && px) {
        var picks = viewer.scene.drillPick(px)
        var cartesian = null
        var isOn3dtiles = false,
          isOnTerrain = false
        // drillPick
        for (const i in picks) {
          const pick = picks[i]

          if (
            (pick && pick.primitive instanceof Cesium.Cesium3DTileFeature) ||
            (pick && pick.primitive instanceof Cesium.Cesium3DTileset) ||
            (pick && pick.primitive instanceof Cesium.Model)
          ) {
            // 模型上拾取
            isOn3dtiles = true
          }
          // 3dtilset
          if (isOn3dtiles) {
            viewer.scene.pick(px) // pick
            cartesian = viewer.scene.pickPosition(px)
            if (cartesian) {
              const cartographic = Cesium.Cartographic.fromCartesian(cartesian)
              if (cartographic.height < 0) cartographic.height = 0
              let lon = Cesium.Math.toDegrees(cartographic.longitude),
                lat = Cesium.Math.toDegrees(cartographic.latitude),
                height = cartographic.height
              cartesian = this.transformWGS84ToCartesian({
                lng: lon,
                lat: lat,
                alt: height
              })
            }
          }
        }
        // 地形
        const boolTerrain =
          viewer.terrainProvider instanceof
          Cesium.EllipsoidTerrainProvider
        // Terrain
        if (!isOn3dtiles && !boolTerrain) {
          var ray = viewer.scene.camera.getPickRay(px)
          if (!ray) return null
          cartesian = viewer.scene.globe.pick(ray, viewer.scene)
          isOnTerrain = true
        }
        // 地球
        if (!isOn3dtiles && !isOnTerrain && boolTerrain) {
          cartesian = viewer.scene.camera.pickEllipsoid(
            px,
            viewer.scene.globe.ellipsoid
          )
        }
        const cartesian1 = new Cesium.Cartesian3(cartesian.x, cartesian.y, cartesian.z) // 替换为实际的 Cartesian3 坐标值

        // 将 Cartesian3 坐标转换为 Cartographic 坐标
        const cartographic = Cesium.Cartographic.fromCartesian(cartesian1)

        // 将 Cartographic 坐标转换为 CGCS2000 计算经纬度
        const lng = Cesium.Math.toDegrees(cartographic.longitude)
        const lat = Cesium.Math.toDegrees(cartographic.latitude)
        const height = cartographic.height // 高度

        return `CGCS2000 坐标: 经度 ${lng}, 纬度 ${lat}, 高度 ${height}`
      }
    },

    transformWGS84ToCartesian: function(position, alt) {
      // eslint-disable-next-line no-return-assign
      return position ? Cesium.Cartesian3.fromDegrees(
        position.lng || position.lon,
        position.lat,
        position.alt = alt || position.alt,
        Cesium.Ellipsoid.WGS84
      )
        : Cesium.Cartesian3.ZERO
    },
    closeBubbles() {
      if (this.bubbles) {
        this.bubbles.windowClose()
      }
    },
    bubble(id) {
      this.closeBubbles()
      this.bubbles = new Bubble(Object.assign(this.poinEntity[id], {
        viewer: viewer,
        clickBranch: this.clickBranch,
        clickPort: this.clickPort
      }))
    },

    clickPort({ id, longitude, latitude, height, CORP_INFO_ID }) {
      this.gangkouActive = id
      this.CORP_INFO_ID = CORP_INFO_ID
      this.componentKey = Math.random()
      this.bottomOptionsKey = Math.random()
      this.bottomOptionsAnimationComplex = false
      this.toCenter({ longitude, latitude, height })
      drag.addPolygon(id)
      if (id === '00003') {
        this.addBranchPoint()
      } else {
        viewer.dataSources.removeAll()
        this.poinEntity = {}
        this.branchPoint = []
        for (let i = 0; i < this.initPoint.length; i++) {
          if (this.initPoint[i].CORP_INFO_ID === CORP_INFO_ID) {
            const point = cloneDeep(this.initPoint[i])
            point.id = CORP_INFO_ID
            point.data_id = CORP_INFO_ID
            point.point_type = '分公司'
            point.type = '分公司'
            point.position.height = 2000
            this.dragAreaEntity([point])
            this.branchPoint.push(point)
            break
          }
        }
      }
    },

    addBranchPoint() {
      viewer.dataSources.removeAll()
      this.poinEntity = {}
      this.branchPoint = []
      if (this.gangkouActive !== '00003') return
      requestFN(
        '/map/corpsForMap',
        {
          AREA: this.area
        }
      ).then((data) => {
        const varList = this.filterNull(data.varList)
        for (let i = 0; i < varList.length; i++) {
          const point = {}
          point.id = varList[i].CORPINFO_ID
          point.data_id = varList[i].CORPINFO_ID
          point.name = varList[i].CORP_NAME
          point.point_type = '分公司'
          point.type = '分公司'
          point.MAP_POINT_NAME = varList[i].MAP_POINT_NAME
          point.position = {}
          point.position.x = +varList[i].LONGITUDE
          point.position.y = +varList[i].LATITUDE
          point.position.height = 2000
          this.branchPoint.push(point)
        }
        this.dragAreaEntity(this.branchPoint)
      })
    },

    // 过滤经纬度为空
    filterNull(arr = []) {
      return arr.filter(item => item.LONGITUDE && item.LATITUDE)
    },

    // 加载区域点
    dragAreaEntity(pointArr) {
      const collection = new Cesium.CustomDataSource('clickEntityCollection')
      pointArr.forEach(item => {
        if (!this.poinEntity.hasOwnProperty(item.id)) {
          const entity = drag.addEntity(item)
          this.poinEntity[item.id] = entity
          collection.entities.add(entity)
        }
      })
      viewer.dataSources.add(collection)
    },

    // 加载点
    dragEntity(poin, pindex, index) {
      var _this = this
      const collection = new Cesium.CustomDataSource('clickEntityCollection')

      poin.forEach(item => {
        if (!this.poinEntity.hasOwnProperty(item.id)) {
          const entity = drag.addEntity(item)
          this.poinEntity[item.id] = entity
          collection.entities.add(entity)
        }
      })
      this.myEntityCollection[pindex + '_' + index] = collection
      var dataSourcePromise = viewer.dataSources.add(collection)

      dataSourcePromise.then(dataSource => {
        const pixelRange = 50
        const minimumClusterSize = 3
        const enabled = true

        dataSource.clustering.enabled = enabled // 聚合开启
        dataSource.clustering.pixelRange = pixelRange // 设置像素范围，以扩展显示边框
        dataSource.clustering.minimumClusterSize = minimumClusterSize // 设置最小的聚合点数目，超过此数目才能聚合

        let removeListener
        // 按聚合层级创建对应图标
        const pinBuilder = new Cesium.PinBuilder()
        var pin100 = pinBuilder
          .fromText('100+', Cesium.Color.BLUE, 48)
          .toDataURL()
        var pin50 = pinBuilder
          .fromText('50+', Cesium.Color.BLUE, 48)
          .toDataURL()
        var pin40 = pinBuilder
          .fromText('40+', Cesium.Color.RED, 48)
          .toDataURL()
        var pin30 = pinBuilder
          .fromText('30+', Cesium.Color.RED, 48)
          .toDataURL()
        var pin20 = pinBuilder
          .fromText('20+', Cesium.Color.RED, 48)
          .toDataURL()
        var pin10 = pinBuilder
          .fromText('10+', Cesium.Color.RED, 48)
          .toDataURL()

        // 10以内聚合图标
        const singleDigitPins = new Array(8)
        for (let i = 0; i < singleDigitPins.length; ++i) {
          singleDigitPins[i] = pinBuilder
            .fromText(`${i + 2}`, Cesium.Color.VIOLET, 48)
            .toDataURL()
        }
        customStyle()

        function customStyle() {
          if (Cesium.defined(removeListener)) {
            removeListener()
            removeListener = undefined
          } else {
            removeListener = dataSource.clustering.clusterEvent.addEventListener(
              function(clusteredEntities, cluster) {
                cluster.label.show = false
                cluster.billboard.show = true
                cluster.billboard.id = cluster.label.id
                cluster.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM
                if (clusteredEntities.length >= 100) {
                  cluster.billboard.image = pin100
                } else if (clusteredEntities.length >= 50) {
                  cluster.billboard.image = pin50
                } else if (clusteredEntities.length >= 40) {
                  cluster.billboard.image = pin40
                } else if (clusteredEntities.length >= 30) {
                  cluster.billboard.image = pin30
                } else if (clusteredEntities.length >= 20) {
                  cluster.billboard.image = pin20
                } else if (clusteredEntities.length >= 10) {
                  cluster.billboard.image = pin10
                } else {
                  cluster.billboard.image =
                    singleDigitPins[clusteredEntities.length - 2]
                }
              }
            )
          }

          // force a re-cluster with the new styling
          const pixelRange = dataSource.clustering.pixelRange
          dataSource.clustering.pixelRange = 0
          dataSource.clustering.pixelRange = pixelRange
        }
      })
    },

    combineIconAndLabel(url, label) {
      // 创建画布对象
      const canvas = document.createElement('canvas')
      const width = 30
      const height = 36
      canvas.width = width
      canvas.height = height
      const ctx = canvas.getContext('2d')

      // eslint-disable-next-line new-cap
      const promise = new Cesium.Resource.fetchImage(url).then(image => {
        // 异常判断
        try {
          ctx.drawImage(image, 0, 0)
        } catch (e) {
          console.log(e)
        }

        // 渲染字体
        // font属性设置顺序：font-style, font-variant, font-weight, font-size, line-height, font-family
        ctx.fillStyle = Cesium.Color.RED.toCssColorString()
        ctx.font = 'bold 20px Microsoft YaHei'
        ctx.textAlign = 'center'
        ctx.textBaseline = 'middle'
        ctx.fillText(label, width / 2, height / 2)

        return canvas
      })
      return promise
    },

    etCameras(pindex, index) {
      requestFN(
        '/videomanager/listAllForMap').then((data) => {
        this.videoList = data.videoList
        let points = []
        if (data.videoList) {
          points = data.videoList.map(item => {
            const point = {}
            point.id = item.VIDEOMANAGER_ID
            point.name = item.VIDEONAME
            point.type = '摄像头'
            point.icon_type = pindex + '_' + index
            point.position = {}
            point.position.x = item.LONGITUDE
            point.position.y = item.LATITUDE
            return point
          })
          this.dragEntity(points, pindex, index)
        }
      }).catch((e) => {
      })
    },
    removeCameras() {
      viewer.dataSources.remove(this.myEntityCollection)
      this.poinEntity = {}
    },

    handleClickRightTools(index) {
      if (this.rightOptionsList[index].check !== '') this.rightOptionsList[index].check = !this.rightOptionsList[index].check
      if (index === 0) {
        if (this.gangkouActive === '00004') {
          // if (this.fwebsocket) {
          //   this.fwebsocket.close()
          // }
          if (this.timer) {
            clearInterval(this.timer)
          }
          if (this.cfdDIngweiTimer) {
            clearInterval(this.cfdDIngweiTimer)
          }
        }

        this.destroyConnection()
        this.onePerLocArr = []
        this.$router.push('/index')
      } else if (index === 1) {
        this.handleFullScreen(undefined)
      } else if (index === 2) {
        this.toCenter()
      } else if (index === 3) {
        this.changeSceneMode(this.rightOptionsList[index].check)
      } else if (index === 4) {
        this.destroyConnection()
        this.clearAllBottomOptionsItemsCheck()
        this.clearAllBottomOptionsItemsEntityCollection()
        this.onePerLocArr = []
        this.perLocArr = []
        this.clearMqttPoint()
        if (this.gangkouActive === '00004') {
          // if (this.fwebsocket) {
          //   this.fwebsocket.close()
          // }
          if (this.timer) {
            clearInterval(this.timer)
          }
          if (this.cfdDIngweiTimer) {
            clearInterval(this.cfdDIngweiTimer)
          }
        }
      } else if (index === 5) {
        this.pureMap = !this.pureMap
        this.componentKey = Math.random()
        this.bottomOptionsKey = Math.random()
        this.bottomOptionsAnimationComplex = false
      }
    },
    changeSceneMode(check) {
      viewer.scene.mode = check ? Cesium.SceneMode.COLUMBUS_VIEW : Cesium.SceneMode.SCENE3D
    },
    toCenter(center = this.center) {
      this.center.longitude = center.longitude
      this.center.latitude = center.latitude
      this.center.height = center.height
      viewer.camera.flyTo({
        // 设置中心点,x,y,缩放等级
        destination: Cesium.Cartesian3.fromDegrees(this.center.longitude, this.center.latitude, this.center.height)
      })
    },
    centerOptionsClick(index, AREA) {
      this.centerOptionsIndex = index
      this.area = AREA
      this.bottomOptionsIndex = ''
      this.collapse = false
      this.componentKey = Math.random()
      this.bottomOptionsKey = Math.random()
      this.bottomOptionsAnimationComplex = false
      this.addBranchPoint()
      this.clearAllBottomOptionsItemsCheck()
      this.clearAllBottomOptionsItemsEntityCollection()
    },
    bottomOptionsClick(index) {
      if (this.bottomOptionsIndex === index) {
        this.bottomOptionsIndex = ''
        // (this.gangkouActive === '00004' && index !== 1) && drag.addPolygon(this.gangkouActive)
      } else {
        this.bottomOptionsIndex = index
        // (this.gangkouActive === '00004' && index !== 1) && viewer.entities.removeAll()
      }
      this.collapse = false
      this.componentKey = Math.random()
      this.bottomOptionsKey = Math.random()
      this.bottomOptionsAnimationComplex = true
    },
    clearAllBottomOptionsItemsCheck() {
      if (this.gangkouActive === '00004') {
        for (let i = 0; i < this.cfdBottomOptionsList.length; i++) {
          for (let j = 0; j < this.cfdBottomOptionsList[i].list.length; j++) {
            this.cfdBottomOptionsList[i].list[j].check = false
          }
        }
      } else {
        for (let i = 0; i < this.bottomOptionsList.length; i++) {
          for (let j = 0; j < this.bottomOptionsList[i].list.length; j++) {
            this.bottomOptionsList[i].list[j].check = false
          }
        }
      }
    },
    clearAllBottomOptionsItemsEntityCollection() {
      if (this.cfdDIngweiTimer) {
        clearInterval(this.cfdDIngweiTimer)
      }
      this.perLocArr = []
      if (this.cfdCarDIngweiTimer) {
        clearInterval(this.cfdCarDIngweiTimer)
      }
      this.carLocArr = []
      for (const myEntityCollectionKey in this.myEntityCollection) {
        viewer.dataSources.remove(this.myEntityCollection[myEntityCollectionKey])
        for (const poinEntityKey in this.poinEntity) {
          if (this.poinEntity[poinEntityKey].id.indexOf(myEntityCollectionKey) > -1) {
            delete this.poinEntity[poinEntityKey]
          }
        }
      }
    },
    back() {
      if (this.gangkouActive !== '00003' && this.CORP_INFO_ID) {
        // 曹妃甸
        if (this.gangkouActive === '00004') {
          // if (this.fwebsocket) {
          //   this.fwebsocket.close()
          // }
          if (this.timer) {
            clearInterval(this.timer)
          }
          if (this.cfdDIngweiTimer) {
            clearInterval(this.cfdDIngweiTimer)
          }
        }

        this.clearAllBottomOptionsItemsCheck()
        this.CORP_INFO_ID = ''
        this.gangkouActive = ''
        viewer.entities.removeAll()
        viewer.dataSources.removeAll()
        this.poinEntity = {}
        this.toCenter(this.initCenter)
        this.dragAreaEntity(this.initPoint)
      } else if (this.CORP_INFO_ID) {
        this.CORP_INFO_ID = ''
        this.clearAllBottomOptionsItemsEntityCollection()
        this.dragAreaEntity(this.branchPoint)
        this.toCenter(this.parentCenter)
        this.destroyConnection()
        this.clearMqttPoint()
      } else if (!this.CORP_INFO_ID) {
        this.gangkouActive = ''
        this.area = ''
        this.centerOptionsIndex = 1
        viewer.entities.removeAll()
        viewer.dataSources.removeAll()
        this.poinEntity = {}
        this.toCenter(this.initCenter)
        this.dragAreaEntity(this.initPoint)
      }

      this.componentKey = Math.random()
      this.bottomOptionsKey = Math.random()
      this.bottomOptionsAnimationComplex = false
      this.collapse = false
      this.bottomOptionsIndex = ''
      this.clearAllBottomOptionsItemsCheck()
    },

    bottomOptionsItemsClick(pindex, index, label, urlType, pointUrl, dialog_width) {
      if (this.bottomOptionsList[pindex].list[index].check || this.gangkouActive === '00004' && this.cfdBottomOptionsList[pindex].list[index].check) {
        // 人员定位关闭实时获取定位websocket 并关闭人员对比定时器（曹妃甸使用）
        if (this.gangkouActive === '00004' && urlType === 'peoplePosition') {
          // if (this.fwebsocket) {
          //   this.fwebsocket.close()
          // }
          if (this.timer) {
            clearInterval(this.timer)
          }
          if (this.cfdDIngweiTimer) {
            clearInterval(this.cfdDIngweiTimer)
          }
          this.perLocArr = []
          this.clearMqttPoint('cfdrydw')
        }
        if (this.gangkouActive === '00004' && urlType === 'carPosition') {
          if (this.cfdCarDIngweiTimer) {
            clearInterval(this.cfdCarDIngweiTimer)
          }
          this.carLocArr = []
        }
        if (this.gangkouActive === '00003' && this.CORP_INFO_ID === '035958e685cf4850bc40151c5e0617a6' && urlType === 'peoplePosition') {
          this.doUnSubscribe()
          this.clearMqttPoint('1698584148364034050/UwbBQ/')
        }
        this.bottomOptionsList[pindex].list[index].check = false
        if (this.gangkouActive === '00004') {
          this.cfdBottomOptionsList[pindex].list[index].check = false
        }
        viewer.dataSources.remove(this.myEntityCollection[pindex + '_' + index])
        const keys = Object.keys(this.poinEntity)
        keys.filter(key => {
          if (this.poinEntity[key].id.indexOf(pindex + '_' + index) > -1) {
            delete this.poinEntity[key]
          }
        })
      } else {
        this.bottomOptionsList[pindex].list[index].check = true
        if (this.gangkouActive === '00004') {
          this.cfdBottomOptionsList[pindex].list[index].check = true
          this.bottomOptionsList[pindex].list[index].check = false
        }

        if (this.gangkouActive === '00003' && this.CORP_INFO_ID === '035958e685cf4850bc40151c5e0617a6' && urlType === 'peoplePosition') {
          !this.connecting ? this.createConnection(this.CORP_INFO_ID) : this.doSubscribe()
        } else {
          requestFN(
            pointUrl,
            {
              CORPINFO_ID: this.CORP_INFO_ID,
              TYPE: urlType,
              AREA: this.area,
              GANGKOU: this.gangkouActive
            }
          ).then(async(data) => {
            const points = []
            const varList = this.filterNull(data.varList)
            for (let i = 0; i < varList.length; i++) {
              const point = {}
              point.id = pindex + '_' + index + '_' + i
              point.data_id = varList[i].id
              point.corpInfoId = varList[i].CORPINFO_ID
              point.name = varList[i].NAME
              point.point_type = '标记点' + urlType
              point.label = label
              point.type = '标记点'
              point.icon_type = pindex + '_' + index
              point.position = {}
              point.position.x = +varList[i].LONGITUDE
              point.position.y = +varList[i].LATITUDE
              point.dialog_width = dialog_width
              point.MAP_POINT_NAME = varList[i].MAP_POINT_NAME
              // 曹妃甸使用
              point.gangkou = this.gangkouActive
              // 闸机名称
              point.gate_machine_name = varList[i].GATE_MACHINE_NAME
              // 摄像头编号
              point.code = varList[i].INDEXCODE || '' // 摄像头编号
              // 人员定位
              if (urlType === 'peoplePosition') {
                point.data_id = varList[i].empNo || ''
              }
              point.empNo = varList[i].empNo || '' // 工号
              point.cardNo = varList[i].cardNo || '' // 卡号
              if (pindex === 0) {
                point.infoname = varList[i].GATE_MACHINE_NAME
              } else {
                point.infoname = varList[i].NAME
              }
              points.push(point)
            }
            if (this.gangkouActive === '00004' && urlType === 'carPosition') {
              this.timerCfdCarDingwei()
              this.carLocArr = points
            }
            console.info('================' + urlType)
            // 人员定位开启实时获取定位websocket （曹妃甸使用） - 开始
            if (this.gangkouActive === '00004' && urlType === 'peoplePosition') {
              console.info('================' + urlType)
              this.timerCfdDingwei()
              this.delayedAccessEightWorkers()
              this.perLocArr = points
              // 获取各种颜色人员列表（八项作业与工单）
              await this.initColorList()
              this.isItWithinTheArea()
              // this.initPerLocWebsocket()
              this.timerCfdDingweiPoint()
            } else {
              this.dragEntity(points, pindex, index)
            }
          }).catch((e) => {
            console.log(e)
          })
        }

        // if (label === '摄像头') {
        //   setTimeout(() => {
        //     const point = cloneDeep(points[2])
        //     point.point_type = '报警'
        //     point.type = '报警'
        //     const collection = new Cesium.CustomDataSource('clickEntityCollection')
        //     const entity = drag.addEntity(point)
        //     this.poinEntity[point.id] = entity
        //     collection.entities.add(entity)
        //     viewer.dataSources.add(collection)
        //     this.myEntityCollection[point.id] = collection
        //   }, 1000)
        // }
      }
    },
    timerCfdDingweiPoint() {
      for (let i = 0; i < this.perLocArr.length; i++) {
        if (this.perLocArr[i].color === 'red') this.perLocArr[i].icon_type = 'img4_0_1'
        else if (this.perLocArr[i].color === 'orange') this.perLocArr[i].icon_type = 'img4_0_2'
        else if (this.perLocArr[i].color === 'yellow') this.perLocArr[i].icon_type = 'img4_0_3'
        else this.perLocArr[i].icon_type = 'img4_0'
        this.perLocArr[i].id = this.perLocArr[i].cardNo
        this.perLocArr[i].x = this.perLocArr[i].position.x
        this.perLocArr[i].y = this.perLocArr[i].position.y
        if (this.perLocArr[i].lastTime) {
          ry_drag.getPosition(this.perLocArr[i])
        } else {
          ry_drag.addEntity(this.perLocArr[i])
          this.mqttPoint['cfdrydw' + this.perLocArr[i].cardNo] = this.perLocArr[i].cardNo
        }
      }
    },
    timerCfdDingwei() {
      this.cfdDIngweiTimer = setInterval(() => {
        // this.localtionReload(1, 0)
        requestFN(
          '/map/getCurrentLocationOnline',
          {
            CORPINFO_ID: this.CORP_INFO_ID,
            TYPE: 'peoplePosition',
            AREA: this.area,
            GANGKOU: this.gangkouActive
          }
        ).then((data) => {
          const pindex = 1
          const index = 0
          const urlType = 'peoplePosition'
          const points = []
          const varList = this.filterNull(data.varList)
          for (let i = 0; i < varList.length; i++) {
            const point = {}
            point.id = pindex + '_' + index + '_' + i
            point.data_id = varList[i].id
            point.corpInfoId = varList[i].CORPINFO_ID
            point.name = varList[i].NAME
            point.point_type = '标记点' + urlType
            point.label = '人员定位'
            point.type = '标记点'
            point.icon_type = pindex + '_' + index
            point.position = {}
            point.position.x = +varList[i].LONGITUDE
            point.position.y = +varList[i].LATITUDE
            point.dialog_width = '1200px'
            point.MAP_POINT_NAME = varList[i].MAP_POINT_NAME
            // 曹妃甸使用
            point.gangkou = this.gangkouActive
            // 闸机名称
            point.gate_machine_name = varList[i].GATE_MACHINE_NAME
            // 摄像头编号
            point.code = varList[i].INDEXCODE || '' // 摄像头编号
            // 人员定位
            if (urlType === 'peoplePosition') {
              point.data_id = varList[i].empNo || ''
            }
            point.empNo = varList[i].empNo || '' // 工号
            point.cardNo = varList[i].cardNo || '' // 卡号
            if (pindex === 0) {
              point.infoname = varList[i].GATE_MACHINE_NAME
            } else {
              point.infoname = varList[i].NAME
            }
            points.push(point)
          }
          if (this.perLocArr.length === 0) {
            this.perLocArr = points
          } else {
            for (let i = 0; i < points.length; i++) {
              let isExist = false
              for (let j = 0; j < this.perLocArr.length; j++) {
                if (points[i].cardNo === this.perLocArr[j].cardNo) {
                  this.perLocArr[j].position = points[i].position
                  isExist = true
                  break
                }
              }
              if (!isExist) {
                this.perLocArr.push(points[i])
              }
            }
          }
          this.isItWithinTheArea()

          this.timerCfdDingweiPoint()
        })
      }, 30000)
    },
    timerCfdCarDingwei() {
      this.cfdCarDIngweiTimer = setInterval(() => {
        this.carLocaltionReload(1, 1)
        requestFN(
          '/map/getCurrentLocationOnline',
          {
            CORPINFO_ID: this.CORP_INFO_ID,
            TYPE: 'carPosition',
            AREA: this.area,
            GANGKOU: this.gangkouActive
          }
        ).then((data) => {
          const pindex = 1
          const index = 1
          const urlType = 'carPosition'
          const points = []
          const varList = this.filterNull(data.varList)
          for (let i = 0; i < varList.length; i++) {
            const point = {}
            point.id = pindex + '_' + index + '_' + i
            point.data_id = varList[i].id
            point.corpInfoId = varList[i].CORPINFO_ID
            point.name = varList[i].NAME
            point.point_type = '标记点' + urlType
            point.label = '车辆定位'
            point.type = '标记点'
            point.icon_type = pindex + '_' + index
            point.position = {}
            point.position.x = +varList[i].LONGITUDE
            point.position.y = +varList[i].LATITUDE
            point.dialog_width = '1200px'
            point.MAP_POINT_NAME = varList[i].MAP_POINT_NAME
            // 曹妃甸使用
            point.gangkou = this.gangkouActive
            // 闸机名称
            point.gate_machine_name = varList[i].GATE_MACHINE_NAME
            // 摄像头编号
            point.code = varList[i].INDEXCODE || '' // 摄像头编号
            // 人员定位
            if (urlType === 'peoplePosition') {
              point.data_id = varList[i].empNo || ''
            }
            point.empNo = varList[i].empNo || '' // 工号
            point.cardNo = varList[i].cardNo || '' // 卡号
            if (pindex === 0) {
              point.infoname = varList[i].GATE_MACHINE_NAME
            } else {
              point.infoname = varList[i].NAME
            }
            points.push(point)
          }
          this.carLocArr = points

          this.dragEntity(this.carLocArr, pindex, index)
        })
      }, 1800000)
    },
    // 曹妃甸人员定位相关方法-开始
    // 每五分钟加载一次八项作业与工单人员
    delayedAccessEightWorkers() {
      // eslint-disable-next-line no-implied-eval
      this.timer = setInterval(() => {
        this.initColorList()
        // this.localtionReload(1, 0)
      }, 300000)
    },
    // 获取各种颜色人员列表（八项作业与工单）
    async initColorList() {
      this.redList = []
      this.orangeList = []
      this.yellowList = []
      await this.getAllWorkUserCards()
      await this.getAllTickets()
    },

    // 查询当前点位是否在区域内
    isPointxyWithinTheArea(pointBox, x, y) {
      if (this.forEachIsPointInPolygon(pointBox.redList, x, y)) {
        return '_1'
      } else if (this.forEachIsPointInPolygon(pointBox.orangeList, x, y)) {
        return '_2'
      } else if (this.forEachIsPointInPolygon(pointBox.yellowList, x, y)) {
        return '_3'
      } else {
        return ''
      }
    },
    /* 一公司人员定位   mqtt务必使用4.2.1版本*/
    // 初始化Mqtt数据
    initMqttData() {
      this.client = {
        connected: false
      }
      this.retryTimes = 0
      this.connecting = false
      this.subscribeSuccess = false
    },
    // 创建连接
    createConnection(CORP_INFO_ID) {
      try {
        const { protocol, host, port, endpoint, ...options } = this.connection
        const connectUrl = `${protocol}://${host}:${port}${endpoint}`
        this.client = mqtt.connect(connectUrl, options)

        if (this.client.on) {
          this.client.on('connect', () => {
            this.connecting = true
            console.log('Connection succeeded!')

            this.doSubscribe()
          })
          this.client.on('reconnect', this.handleOnReConnect)
          this.client.on('error', error => {
            console.log('Connection failed', error)
          })
          this.mqttMessage(CORP_INFO_ID)
        }
      } catch (error) {
        this.connecting = false
        console.log('mqtt.connect error', error)
      }
    },
    mqttMessage(CORP_INFO_ID) {
      this.client.on('message', (topic, message) => {
        // console.info(message)
        // if(this.intOne === 0){
        // this.receiveNews = this.receiveNews.concat(message)
        // console.log(`Received message ${message} from topic ${topic}`)
        const item = JSON.parse(message)
        // 将地图上剩余的点与最新的定位人员点进行对比   更新地图上已存在的点    新增地图上之前没有的点
        const index = this.onePerLocArr.findIndex(item1 => {
          return item1.id.toString() === item.deviceCode.toString()
        })
        const x = item.properties[2].value
        const y = item.properties[3].value
        const pointColor = this.isPointxyWithinTheArea(this.pointBox, x, y)
        if (index !== -1) {
          this.onePerLocArr[index].x = x
          this.onePerLocArr[index].y = y
          this.onePerLocArr[index].icon_type = 'img4_0' + pointColor
          ry_drag.getPosition(this.onePerLocArr[index])
        } else {
          // const id = '4_0_' +item.deviceCode
          const perLoc = {
            id: item.deviceCode,
            // name: item.realName,
            x: x,
            y: y,
            icon_type: 'img4_0' + pointColor,
            // infoname: item.realName,
            data_id: item.deviceCode,
            point_type: '标记点peoplePositionOne',
            label: '人员定位',
            corpInfoId: CORP_INFO_ID
          }
          this.onePerLocArr.push(perLoc)
          ry_drag.addEntity(perLoc)
          this.mqttPoint[this.subscription.topic.substring(0, this.subscription.topic.lastIndexOf('+')) + item.deviceCode] = item.deviceCode
        }
        //   this.intOne++
        // } else if(this.intOne < 5){
        //   this.intOne++
        // } else {
        //   this.intOne = 0
        // }
      })
    },
    clearMqttPoint(prefix) {
      for (const mqttPointKey in this.mqttPoint) {
        const key = prefix ? prefix + this.mqttPoint[mqttPointKey] : mqttPointKey
        viewer.entities.removeById(this.mqttPoint[key])
        this.onePerLocArr = this.onePerLocArr.filter(item => item.data_id !== this.mqttPoint[key])
        delete this.mqttPoint[key]
      }
    },
    // 订阅
    doSubscribe() {
      const { topic, qos } = this.subscription
      this.client.subscribe(topic, { qos }, (error, res) => {
        if (error) {
          console.log('Subscribe to topics error', error)
          return
        }
        this.subscribeSuccess = true
        console.log('Subscribe to topics res', res)
      })
    },
    // 取消订阅
    doUnSubscribe() {
      const { topic } = this.subscription
      this.client.unsubscribe(topic, error => {
        if (error) {
          console.log('Subscribe to topics error', error)
        }
      })
    },

    handleOnReConnect() {
      this.retryTimes += 1
      if (this.retryTimes > 5) {
        try {
          this.client.end()
          this.initData()
          this.$message.error('Connection maxReconnectTimes limit, stop retry')
        } catch (error) {
          this.$message.error(error.toString())
        }
      }
    },
    // 断开连接
    destroyConnection() {
      if (this.client.connected) {
        try {
          this.client.end(false, () => {
            this.initMqttData()
            console.log('Successfully disconnected!')
          })
        } catch (error) {
          console.log('Disconnect failed', error.toString())
        }
      }
    },
    /* 一公司人员定位   mqtt务必使用4.2.1版本*/
    // 九公司人员定位websocket
    initNinePerLocWebsocket() {
      const _this = this
      if (window.WebSocket) {
        const wsUrl = 'ws://dev.rydw.trinitytech.com.cn/gateway-service/websocket/ws'
        this.fwebsocket = new WebSocket(encodeURI(wsUrl + '/XR_' + new Date().getTime() + '_98')) // oladress在main.jsp页面定义
        console.info(wsUrl + '/XR_' + new Date().getTime() + '_98')
        this.fwebsocket.onopen = () => {
          setInterval(() => {
            if (this.fwebsocket.readyState === 1) {
              this.fwebsocket.send('ok')
            }
          }, 5000)
          this.fwebsocket.send('ok')
          // console.info(this.fwebsocket.readyState + '-----------------------------')
          console.info('链接成功')
        }
        this.fwebsocket.onerror = function() {
          console.info('连接失败')
          // 连接失败
        }
        this.fwebsocket.onclose = function() {
          console.info('onclose')
        }
        this.fwebsocket.onmessage = function(message) {
          console.info(_this.ninePerLocArr)
          console.info('接收消息')
          // const mockData = JSON.parse(message.data)
          const mockData = {
            msgType: 'currentPersonLocation',
            total: 11,
            data: [
              {
                acceptTime: '2023-09-24 10:42:05',
                beaconId: -1,
                cardId: 3842875088,
                cardPower: 80,
                cardStatus: '-1',
                cardType: null,
                cardTypeName: null,
                contractorId: null,
                contractorName: null,
                createTime: null,
                deptId: '137300840373161984',
                deptName: '研发部',
                distance: 2.0,
                id: null,
                idNumber: null,
                inRailScope: null,
                jobNumber: '7788',
                latitude: 39.90143150097692,
                layerHeight: 5,
                layerId: '沧州港',
                layerMoveSpeed: null,
                layerName: null,
                longitude: 116.55726529738824,
                personAttribute: '/init/蓝帽.png',
                personCategory: '员工',
                personId: 3,
                personPhoto: null,
                personType: 'staff',
                personTypeName: '员工',
                phone: null,
                positionId: 7855,
                postId: null,
                postName: null,
                realName: '孔七',
                staffType: null,
                stillStatus: 0,
                undisposedAlarmCount: 0
              }
            ]
          }
          _this.radomPer(mockData)
          if (mockData.msgType === 'currentPersonLocation') {
            // 将地图上的点与最新的定位人员点进行对比    删除地图上多的点
            const ninePerLoc = _this.ninePerLocArr.filter(item => {
              const index = mockData.data.findIndex(item1 => {
                return item.id.toString() === item1.cardId.toString()
              })
              return index !== -1
            })
            // 将地图上剩余的点与最新的定位人员点进行对比   更新地图上已存在的点    新增地图上之前没有的点
            for (const item of mockData.data) {
              const index = ninePerLoc.findIndex(item1 => {
                return item1.id.toString() === item.cardId.toString()
              })
              this.isPointWithinTheArea(this.pointBox, )
              if (index !== -1) {
                ninePerLoc[index].x = item.longitude
                ninePerLoc[index].y = item.latitude
                ninePerLoc[index].icon_type = 'img4_0_2'
                ry_drag.getPosition(ninePerLoc[index])
              } else {
                const perLoc = {
                  id: item.cardId,
                  name: item.realName,
                  x: item.longitude,
                  y: item.latitude,
                  icon_type: 'img4_0_1',
                  infoname: item.realName,
                  data_id: item.cardId,
                  point_type: '标记点peoplePositionNine',
                  label: item.realName
                }
                ninePerLoc.push(perLoc)
                ry_drag.addEntity(perLoc)
              }
            }
            // 最后更新ninePerLocArr
            _this.ninePerLocArr = ninePerLoc
          }
        }
      }
    },
    radomPer(mockData) {
      for (const item of mockData.data) {
        item.longitude += 0.0003 * Math.random()
        item.latitude += 0.0001 * Math.random()
      }
    },
    initPerLocWebsocket() {
      var _this = this
      if (window.WebSocket) {
        this.fwebsocket = new WebSocket(encodeURI('ws://' + config.perRealTimeLocUrl + '?u=' + new Date().getTime())) // oladress在main.jsp页面定义
        this.fwebsocket.onopen = () => {
          console.info('链接成功')
        }
        this.fwebsocket.onerror = function() {
          console.info('连接失败')
          // 连接失败
        }
        this.fwebsocket.onclose = function() {
          console.info('连接断开')
          // 连接断开
        }
        // 消息接收
        this.fwebsocket.onmessage = function(message) {
          console.info(_this.i)
          if (_this.i === 0) {
            // console.info('消息接收')
            var msg = _this.unzip(message.data)
            // const decodedStr = decodeURIComponent(msg) // 进行解码
            // console.info(decodedStr)
            if (decodedStr) {
              // const perTrack = JSON.parse(decodedStr)
              const perTrack = { 'msg': '000', 'data': [
                '8905,118.50022313549867,38.92716921306408,-88.96163116878053,0.15,8905,测试工单',
                '8001,118.5044033058593,38.926660124965956,-88.96163116878053,0.15,8001,张悦',
                '8002,118.48886198164132,38.916885738277635,-88.96163116878053,0.15,8002,齐津铖',
                '8003,118.50289308906841,38.92012841170512,-88.96163116878053,0.15,8003,白伟',
                '8004,118.48820877892216,38.91690951376236,-88.96163116878053,0.15,8004,孙海官'
              ] }
              if (perTrack.msg === '000' && perTrack.data && perTrack.data.length > 0) {
                perTrack.data.forEach(item => {
                  const newPos = item.split(',')
                  const index = _this.perLocArr.findIndex(item1 => {
                    return item1.cardNo.toString() === newPos[0].toString()
                  })
                  // 如果有就替换，没有就添加
                  if (index !== -1) {
                    const pos = {
                      x: parseFloat(newPos[1]),
                      y: parseFloat(newPos[2])
                    }
                    _this.$set(_this.perLocArr[index], 'position', pos)
                  } else {
                    const data = {
                      NAME: newPos[6],
                      LONGITUDE: parseFloat(newPos[1]),
                      LATITUDE: parseFloat(newPos[2]),
                      empNo: newPos[5],
                      cardNo: newPos[0].toString()
                    }
                    const newPoint = _this.initpoint(4, 0, '人员定位', 'peoplePosition', data, _this.perLocArr.length, 'blue')
                    _this.perLocArr.push(newPoint)
                  }
                })
                _this.isItWithinTheArea()
                _this.clearPoint(4, 0)
                _this.dragEntity(_this.perLocArr, 4, 0)
              }
            }
            _this.i++
          } else if (_this.i < 2) {
            _this.i++
          } else {
            _this.i = 0
          }
        }
      }
    },

    unzip: function(b64Data) {
      var strData = atob(b64Data)

      // Convert binary string to character-number array

      var charData = strData.split('').map(function(x) { return x.charCodeAt(0) })

      // Turn number array into byte-array

      var binData = new Uint8Array(charData)

      // // unzip

      var data = pako.inflate(binData)

      // Convert gunzipped byteArray back to ascii string:

      strData = String.fromCharCode.apply(null, new Uint16Array(data))

      return strData
    },
    /**
     * 某个点是否在某个区域
     */
    isPointInPolygon(polygon, lng, lat) {
      var numberOfPoints = polygon.length
      var polygonLats = []
      var polygonLngs = []
      for (var i = 0; i < numberOfPoints; i++) {
        polygonLats.push(polygon[i]['y'])
        polygonLngs.push(polygon[i]['x'])
      }
      var polygonContainsPoint = false
      for (var node = 0, altNode = (numberOfPoints - 1); node < numberOfPoints; altNode = node++) {
        if ((polygonLngs[node] > lng != (polygonLngs[altNode] > lng)) &&
          (lat < (polygonLats[altNode] - polygonLats[node]) *
            (lng - polygonLngs[node]) /
            (polygonLngs[altNode] - polygonLngs[node]) +
            polygonLats[node]
          )
        ) {
          polygonContainsPoint = !polygonContainsPoint
        }
      }
      return polygonContainsPoint
    },
    // 获取八项作业作业人员列表并比较
    getAllWorkUserCards() {
      console.log('开始执行调用作业人员列表方法' + this.cfdBottomOptionsList[1].list[0].check)

      return new Promise(resolve => {
        if (this.cfdBottomOptionsList[1].list[0].check === true) {
          requestFN(
            '/map/Eight/getAllWorkUserCards',
            {}
          ).then((res) => {
            this.redList = res.userCardsList.concat(this.redList)
            resolve()
          }).catch((e) => {
          })
          // _this.clearPoint(4, 0)
          // _this.dragEntity(_this.perLocArr, 4, 0)
        }
      })
    },
    // 获取工单作业作业人员列表
    getAllTickets() {
      return new Promise(resolve => {
        if (this.cfdBottomOptionsList[1].list[0].check === true) {
          requestFN(
            '/map/Eight/getAllTickets',
            {}
          ).then((res) => {
            this.redList = res.redList.concat(this.redList)
            this.orangeList = res.orangeList.concat(this.orangeList)
            this.yellowList = res.yellowList.concat(this.yellowList)
            resolve()
          }).catch((e) => {
          })
        }
      })
      // _this.clearPoint(4, 0)
      // _this.dragEntity(_this.perLocArr, 4, 0)
    },
    initpoint(pindex, index, label, type, data, i, color) {
      const point = {}
      point.id = pindex + '_' + index + '_' + i
      point.point_type = '标记点' + type
      if (type === 'peoplePosition') {
        point.data_id = data.empNo || ''
      } else {
        point.data_id = data.id || ''
      }
      point.name = data.NAME
      point.label = label
      point.type = '标记点'
      point.icon_type = pindex + '_' + index
      point.corpInfoId = data.CORPINFO_ID
      point.LONGITUDE = parseFloat(data.LONGITUDE)
      point.LATITUDE = parseFloat(data.LATITUDE)
      point.position = {}
      point.position.x = parseFloat(data.LONGITUDE)
      point.position.y = parseFloat(data.LATITUDE)
      if (pindex === 0) {
        point.infoname = data.GATE_MACHINE_NAME
      } else {
        point.infoname = data.NAME
      }
      // 摄像头使用
      point.code = data.INDEXCODE || '' // 摄像头编号
      // 人员定位使用
      point.empNo = data.empNo || '' // 工号
      point.cardNo = data.cardNo || '' // 卡号
      point.gangkou = this.gangkouActive
      return point
    },
    // 查询当前所有点位是否在区域内
    isItWithinTheArea() {
      var _this = this
      _this.perLocArr.forEach((item, index) => {
        // 判断是否存在于四色区域内
        const redFiled = []
        _this.pointBoxCfd.redList.forEach(item => { redFiled.push(...item['position']) })
        const orangeFiled = []
        _this.pointBoxCfd.orangeList.forEach(item => { orangeFiled.push(...item['position']) })
        const yellowFiled = []
        _this.pointBoxCfd.yellowList.forEach(item => { yellowFiled.push(...item['position']) })
        if (this.redList.indexOf(item.cardNo) > -1) {
          _this.$set(_this.perLocArr[index], 'color', 'red')
        } else if (redFiled !== [] && _this.forEachIsPointInPolygon(_this.pointBoxCfd.redList, item.position.x, item.position.y)) {
          _this.$set(_this.perLocArr[index], 'color', 'red')
        } else if (this.orangeList.indexOf(item.cardNo) > -1) {
          _this.$set(_this.perLocArr[index], 'color', 'orange')
        } else if (orangeFiled !== [] && _this.forEachIsPointInPolygon(_this.pointBoxCfd.orangeList, item.position.x, item.position.y)) {
          _this.$set(_this.perLocArr[index], 'color', 'orange')
        } else if (this.yellowList.indexOf(item.cardNo) > -1) {
          _this.$set(_this.perLocArr[index], 'color', 'yellow')
        } else if (yellowFiled !== [] && _this.forEachIsPointInPolygon(_this.pointBoxCfd.yellowList, item.position.x, item.position.y)) {
          _this.$set(_this.perLocArr[index], 'color', 'yellow')
        } else {
          _this.$set(_this.perLocArr[index], 'color', 'blue')
        }
      })
    },
    // 查询当前点位是否在区域内
    isPointWithinTheArea(pointBox, point) {
      if (this.forEachIsPointInPolygon(pointBox.redList, point.x, point.y)) {
        point.color = 'red'
      } else if (this.forEachIsPointInPolygon(pointBox.orangeList, point.x, point.y)) {
        point.color = 'orange'
      } else if (this.forEachIsPointInPolygon(pointBox.yellowList, point.x, point.y)) {
        point.color = 'yellow'
      } else {
        point.color = 'blue'
      }
    },

    //  循环判断某个点是否在某些区域内。只要在任意一个区域内。则返回true
    forEachIsPointInPolygon(polygonList, lng, lat) {
      return polygonList.some(item => {
        return this.isPointInPolygon(item.position, lng, lat)
      })
    },
    clearPoint(pindex, index) {
      // 清除随机坐标点位
      viewer.dataSources.remove(this.myEntityCollection[pindex + '_' + index])
      const keys = Object.keys(this.poinEntity)
      keys.filter(key => {
        if (this.poinEntity[key].id.indexOf(pindex + '_' + index) > -1) {
          delete this.poinEntity[key]
        }
      })
    },

    // 重新加载人员定位点位信息
    localtionReload(pindex, index) {
      var _this = this
      _this.clearPoint(pindex, index)
      // _this.dragEntity(_this.perLocArr, 4, 0)
      this.perLocArr = []
    },
    // 重新加载车辆定位点位信息
    carLocaltionReload(pindex, index) {
      var _this = this
      _this.clearPoint(pindex, index)
      // _this.dragEntity(_this.perLocArr, 4, 0)
      this.carLocArr = []
    },
    // 曹妃甸人员定位相关方法-结束
    clickBranch({ CORP_INFO_ID, longitude, latitude, height }) {
      this.parentCenter = cloneDeep(this.center)
      this.CORP_INFO_ID = CORP_INFO_ID
      this.clearAllBottomOptionsItemsCheck()
      viewer.dataSources.removeAll()
      this.poinEntity = {}
      for (let i = 0; i < this.branchPoint.length; i++) {
        if (this.branchPoint[i].data_id === CORP_INFO_ID) {
          this.dragAreaEntity([this.branchPoint[i]])
          break
        }
      }
      this.toCenter({ longitude, latitude, height })
      this.componentKey = Math.random()
      this.bottomOptionsKey = Math.random()
      this.bottomOptionsAnimationComplex = false
      this.bottomOptionsIndex = ''
      this.collapse = false
    },
    containAuthorizationShow({ containAuthorization }) {
      const CORP_INFO_ID = this.CORP_INFO_ID
      if (containAuthorization.length === 0) return true
      if (containAuthorization.includes(CORP_INFO_ID)) {
        return true
      } else {
        return false
      }
    },
    eliminateAuthorizationShow({ eliminateAuthorization }) {
      const CORP_INFO_ID = this.CORP_INFO_ID
      if (eliminateAuthorization.length === 0) return true
      if (eliminateAuthorization.includes(CORP_INFO_ID)) {
        return false
      } else {
        return true
      }
    },
    async bottomOptionsEnter(el, done) {
      if (!this.bottomOptionsAnimationComplex) {
        // 默认应用简单动画，只有点击时使用复杂动画，否则元素结构不同，无法处理
        await animate(el, {
          translateY: -100,
          opacity: 0
        }, { duration: 0 }).finished
        await animate(el, {
          translateY: 0,
          opacity: 1
        }, { duration: 1 }).finished
        done()
        return
      }
      const duration = 0.2
      if (this.bottomOptionsIndex !== '') {
        const activeDom = el.querySelector('.active')
        const itemDom = activeDom.querySelector('.item')
        // 将当前的二级图标收起，以便下一步展开
        await animate(itemDom, {
          scaleX: 0,
          opacity: 0
        }, { duration: 0 }).finished
        // 展开当前的二级图标
        await animate(itemDom, {
          scaleX: 1,
          opacity: 1
        }, { duration }).finished
      } else {
        const optionDom = el.querySelectorAll('.option')
        for (let i = 0; i < optionDom.length; i++) {
          // 将每个一级图标隐藏，以便下一步顺序显示
          await animate(optionDom[i], {
            translateY: 30,
            opacity: 0
          }, { duration: 0 }).finished
        }
        for (let i = 0; i < optionDom.length; i++) {
          // 将每个一级图标顺序显示
          await animate(optionDom[i], {
            translateY: 0,
            opacity: 1
          }, { duration }).finished
        }
      }
      done()
    },
    async bottomOptionsLeave(el, done) {
      if (!this.bottomOptionsAnimationComplex) {
        // 默认应用简单动画，只有点击时使用复杂动画，否则元素结构不同，无法处理
        await animate(el, {
          translateY: -100,
          opacity: 0
        }, { duration: 1 }).finished
        done()
        return
      }
      const duration = 0.2
      if (this.bottomOptionsIndex !== '') {
        const optionDom = el.querySelectorAll('.option')
        for (let i = 0; i < optionDom.length; i++) {
          // 将每个一级图标顺序隐藏
          await animate(optionDom[i], {
            translateY: 30,
            opacity: 0
          }, { duration }).finished
        }
        // 将点击的那个一级图标显示回来
        await animate(optionDom[this.bottomOptionsIndex], {
          translateY: 0,
          opacity: 1
        }, { duration }).finished
        // 将点击的那个一级图标移动到最左边
        await animate(optionDom[this.bottomOptionsIndex], {
          translateX: -optionDom[this.bottomOptionsIndex].offsetLeft
        }, { duration }).finished
      } else {
        const activeDom = el.querySelector('.active')
        const itemDom = activeDom.querySelector('.item')
        // 收起当前的二级图标
        await animate(itemDom, {
          scaleX: 0,
          opacity: 0
        }, { duration }).finished
        // 将点击的那个一级图标隐藏
        await animate(activeDom, {
          translateY: 30,
          opacity: 0
        }, { duration }).finished
      }
      done()
    }
  }
}
</script>

<style lang="scss" scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;

  header {
    background-image: url("../../assets/map/index/top.png");
    width: 100vw;
    height: 70px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    font-size: 40px;
    color: #fff;
    text-align: center;
    padding-top: 10px;
    font-weight: bold;
    position: absolute;
    z-index: 99;

    .back {
      background-image: url("../../assets/map/gangkou_index/back.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      width: 100px;
      height:30px;
      position: absolute;
      top: 0;
      left: 0;
      cursor: pointer;
    }

    .title {
      background-image: linear-gradient(bottom, #5bb4f7, #ffffff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-size: 34px;
    }

    .guang {
      background-image: url("../../assets/map/index/guang.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      width: 707px;
      height: 85px;
      position: absolute;
      top: 25px;
      left: 50%;
      animation: scale 2s infinite;

      @keyframes scale {
        0% {
          transform: translateX(-50%) scale(1);
        }
        50% {
          transform: translateX(-50%) scale(0.5);
        }
        100% {
          transform: translateX(-50%) scale(1);
        }
      }
    }
  }

  .center_options {
    width: 408px;
    position: absolute;
    z-index: 99;
    top: 135px;
    left: calc(50% - 204px);
    display: flex;

    .guang {
      background-image: url("../../assets/map/gangkou_index/tabguang.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      width: 348px;
      height: 32px;
      position: absolute;
      top: -23px;
      left: 50%;
      transform: translateX(-50%);
    }

    .option {
      background-size: 100% 100%;
      background-repeat: no-repeat;
      cursor: pointer;
      font-size: 14px;
      color: #fff;
      font-weight: bold;
      text-align: center;
      line-height: 40px;

      &.option0 {
        background-image: url("../../assets/map/gangkou_index/tableft.png");
        width: 139px;
        height: 42px;

        &.active {
          background-image: url("../../assets/map/gangkou_index/tableft_on.png");
        }
      }

      &.option1 {
        background-image: url("../../assets/map/gangkou_index/tabmid.png");
        width: 130px;
        height: 40px;

        &.active {
          background-image: url("../../assets/map/gangkou_index/tabmid_on.png");
        }
      }

      &.option2 {
        background-image: url("../../assets/map/gangkou_index/tabright.png");
        width: 139px;
        height: 42px;

        &.active {
          background-image: url("../../assets/map/gangkou_index/tabright_on.png");
        }
      }
    }
  }

  .bottom_options {
    width: 1000px;
    height: 168px;
    position: absolute;
    z-index: 99;
    bottom: 30px;
    left: calc(50% - 350px);
    display: flex;
    justify-content: space-between;

    .option {
      position: relative;
      cursor: pointer;

      .img {
        width: 100px;
        height: 100px;

        &:hover {
          animation: slideY 0.5s;
        }
      }

      .label {
        background-image: url("../../assets/map/gangkou_index/title.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        width: 100px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        color: #fff;
        font-size: 14px;

        &.active {
          background-image: url("../../assets/map/gangkou_index/title_on.png");
        }
      }

      .item {
        transform-origin: left;
        display: flex;
        position: absolute;
        z-index: -1;
        top: 8px;
        left: 40px;
        background-image: linear-gradient(to right, rgba(31, 62, 129, 0) 0%, rgba(31, 62, 129, 0.4) 50%, rgba(31, 62, 129, 0) 100%);
        border: 1px solid;
        border-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%) 1;
        border-left: none;
        border-right: none;
        padding: 6px 50px;

        .items {
          padding: 0 20px;
          text-align: center;

          .suspension_img {
            width:60px;
            height: 60px;
            cursor: pointer;

            &:hover {
              animation: slideY 0.5s;
            }
          }

          .suspension_label {
            margin-top: -10px;
            font-size: 12px;
            width: 80px;
            color: rgba(255, 255, 255, 0.8);
          }
        }
      }
    }
  }

  .right_options {
    width: 80px;
    position: absolute;
    top: 170px;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: end;
    z-index: 99;

    .option {
      cursor: pointer;
      position: relative;

      &:hover {
        animation: slideX 0.5s;

        .tooltip {
          opacity: 1;
          right: 80px;
        }
      }

      .tooltip {
        transition: 0.5s;
        opacity: 0;
        background-image: url("../../assets/map/index/tooltip.png");
        width: 100px;
        height: 40px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        color: #fff;
        font-size: 12px;
        text-align: center;
        line-height: 36px;
        position: absolute;
        right: 20px;
        top: 20px;
      }

      img {
        width: 80px;
        height: 72px;
      }
    }
  }

  .content_index {
    position: absolute;
    z-index: 99;
    left: 35px;
    top: 75px;
    max-height: calc(100vh - 75px);
  }
}

@keyframes slideX {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-5px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes slideY {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0);
  }
}
</style>
<style>
.cesium-viewer-toolbar, .cesium-viewer-fullscreenContainer, .cesium-infoBox-visible {
  display: none !important;
}
</style>
