<!--suppress ALL -->
<template>
  <!--<div style="width: 100%; height:100%">-->
  <div class="single-map-container">
    <div id="cover" style="position:absolute;bottom:0px;left:0px;z-index:100000;background-color: #021c33;width:0.8rem;height: 0.2rem;"/>
    <div id="mars3dContainer" class="mars3d-container" @click="showTab=false"/>
  </div>
</template>

<script>
// 在需要用到mars3d的vue等页面直接引入并使用
import * as Cesium from "mars3d-cesium";
//导入mars3d主库
import "mars3d/dist/mars3d.css";
import * as mars3d from "mars3d";
import {mapState} from 'vuex'
var layers = {
  heatLayer: null,
  feature: '',
  tileLayer: null,
  polygon: ''
}
var labelsOption = [
  {
    index: '01',
    name: '基础资源',
    children: [
      {index: '011', name: '线状管线(线)', children: []},
      // {index: '012', name: '规划路网', children: []},
      // {index: '013', name: '居村委区域(面)', children: []},
      {index: '014', name: '乡镇级行政区(面)', children: []},
      // {index: '015', name: '公共服务及设施(面)', children: []},
      // {index: '016', name: '居民地(面)', children: []},//
      {index: '017', name: '城际公路(线)', children: []},
      {index: '018', name: '城市道路(线)', children: []},
      // {index: '019', name: '铁路(线)', children: []},
      // {index: '0110', name: '乡村道路(线)', children: []},//
      {index: '0111', name: '沟渠', children: []},
      {index: '0112', name: '河流', children: []},
      // {index: '0113', name: '湖泊', children: []},//
      // {index: '0114', name: '其他水系要素(线)', children: []},
      // {index: '0115', name: '水库', children: []},
      // {index: '0116', name: '水利及附属设施(线)', children: []},
      {index: '0117', name: '城市绿地(面)', children: []}
      // {index: '0118', name: '农林用地(面)', children: []}//
      // {index: '0119', name: '公共交通总图', children: []}
    ],
    layersShow: [ false, false, false, false, false, false, false, false]
  },
  {
    index: '02',
    name: '智慧管网',
    children: [
      {index: '021', name: '电子标识器', children: []},
      {index: '022', name: '液位监测仪', children: []},
      {index: '023', name: '消防栓防盗水监测仪', children: []},
      {index: '024', name: '有害气体监测仪', children: []},
      {index: '025', name: '井盖状态监测仪', children: []},
      {index: '026', name: '噪声记录仪', children: []},
      {index: '027', name: '燃气智能监测终端', children: []},
      {index: '028', name: '数据集中器', children: []},
      {index: '029', name: '管线', children: []},
      {index: '0210', name: '管线附属物', children: []},
      {index: '0211', name: '管线特征管点', children: []}],
    layersShow: [false, false, false, false, false, false, false, false, false, false, false]},
  {
    index: '03',
    name: '智慧工地',
    children: [
      {index: '031', name: '在建工地', children: []},
      {index: '032', name: '塔吊', children: []},
      {index: '033', name: '摄像头', children: []},
      {index: '034', name: '环监', children: []}
      // {index: '035', name: '工地平面图', children: []}
    ],
    layersShow: [false, false, false, false, false]
  },
  {
    index: '10',
    name: '智慧交通',
    children: [
      {index: '101', name: '路口数据', children: []},
      {index: '102', name: '摄像机(电警)', children: []},
      {index: '103', name: '摄像机(卡口)', children: []},
      {index: '104', name: '雷达', children: []},
      {index: '105', name: '终端', children: []},
      {index: '106', name: '信号机', children: []},
      {index: '107', name: '行人闯红灯', children: []},
      {index: '108', name: '信息发布盒', children: []},
      {index: '109', name: '信息发布主机', children: []},
      {index: '1010', name: 'AR鹰眼', children: []},
      // {index: '1011', name: '交通标线', children: []},
      {index: '1012', name: '公交车站', children: []}
      // {index: '1013', name: '公交线路', children: []}
    ],
    layersShow: [false, false, false, false, false, false, false, false, false, false, false, false, false]
  },
  {
    index: '04',
    name: '智慧项管',
    children: [
      {index: '041', name: '在建/已建项目', children: []},
      {index: '042', name: '2020年城建项目', children: []},
      {index: '043', name: '2021年城建项目', children: []}
    ],
    layersShow: [false, false, false]
  },
  {
    index: '05',
    name: '智慧社区',
    children: [
      {index: '051', name: '社区总览', children: []},
      {index: '052', name: '楼栋', children: []},
      {index: '053', name: '摄像头', children: []},
      {index: '054', name: '水施井', children: []},
      {index: '055', name: '消防栓', children: []},
      {index: '056', name: '灭火器', children: []},
      {index: '057', name: '强弱电井', children: []}
      // {index: '058', name: '总平面图', children: []},
      // {index: '059', name: '电梯', children: []},
      // {index: '0510', name: '楼梯', children: []}
    ],
    layersShow: [false, false, false, false, false, false, false, false, false, false]
  },
  {
    index: '07',
    name: '物联网',
    children: [
      // {index: '071', name: '公共门禁(大华)', children: []},
      // {index: '072', name: '公共门禁(ZUOLIN_V3)', children: []},
      // {index: '073', name: '公共门禁(凯帕斯)', children: []},
      {index: '074', name: '公共门禁', children: []}
    ],
    layersShow: [false]
  },
  {
    index: '08',
    name: '视频云',
    children: [
      {index: '081', name: '摄像头(智慧交通)', children: []},
      {index: '082', name: '摄像头(智慧社区)', children: []},
      {index: '083', name: '摄像头(智慧教育)', children: []},
      {index: '084', name: '摄像头(智慧园林)', children: []}
    ],
    layersShow: [false, false, false, false]
  },
  {
    index: '09',
    name: '智慧一卡通 ',
    children: [
      // {index: '091', name: '公共门禁(大华)', children: []},
      // {index: '092', name: '公共门禁(ZUOLIN_V3)', children: []},
      // {index: '093', name: '公共门禁(凯帕斯)', children: []},
      {index: '094', name: '公共门禁', children: []}
    ],
    layersShow: [false, false, false, false]
  },
  {
    index: '11',
    name: '停车云',
    children: [
      {index: '111', name: '停车云总览', children: []},
      // {index: '112', name: '停车位', children: []},
      {index: '113', name: '车辆道闸', children: []}
    ],
    layersShow: [false, false, false]
  },
  {
    index: '06',
    name: '智慧园林',
    children: [
      {index: '061', name: '公园总览', children: []},
      {index: '062', name: '广播', children: []},
      {index: '063', name: '公共厕所', children: []},
      {index: '064', name: '摄像机', children: []},
      {index: '065', name: '路灯', children: []},
      {index: '066', name: '楼房', children: []},
      {index: '067', name: '紧急求助', children: []},
      // {index: '068', name: '停车场', children: []},
      {index: '069', name: '垃圾桶', children: []},
      {index: '0610', name: '商店', children: []},
      {index: '0611', name: '户外屏', children: []},
      {index: '0612', name: '灌溉机器', children: []},
      {index: '0613', name: '消防设施', children: []},
      {index: '0614', name: '车辆道闸', children: []},
      {index: '0615', name: '无线AP(WiFi)', children: []},
      {index: '0616', name: '温湿度传感器', children: []},
      {index: '0617', name: '水位检测器', children: []},
      {index: '0618', name: '弱电检', children: []},
      {index: '0619', name: '巡更信息扭', children: []},
      {index: '0620', name: 'pm2.5/pm10传感器', children: []},
      {index: '0621', name: '售卖亭', children: []},
      // {index: '0622', name: '管道线路', children: []},
      {index: '0623', name: '夜景照明配电箱', children: []},
      {index: '0624', name: '智能弱电井', children: []}
    ],
    layersShow: [false, false, false, false, false, false, false, false,
      false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false]
  },
  {
    index: '12',
    name: '智慧政务',
    children: [
      {index: '121', name: '蓉江新区基础设施建设投资管理有限公司', children: []},
      {index: '122', name: '蓉江新区住房和城乡建设局', children: []},
      {index: '123', name: '锦源置业', children: []}
    ],
    layersShow: [false, false, false]
  },
  {
    index: '13',
    name: '智慧教育',
    children: [
      // {index: '131', name: '教育总览', children: []},
      {index: '132', name: '紧急按钮', children: []},
      {index: '133', name: '摄像头', children: []},
      {index: '134', name: '网络红外枪式摄像机', children: []},
      {index: '135', name: '音响', children: []},
      {index: '136', name: '音柱', children: []},
      {index: '137', name: 'IC卡门禁读头', children: []},
      {index: '138', name: '车牌识别一体机', children: []},
      {index: '139', name: '红外对射器', children: []},
      {index: '1310', name: '一键报警', children: []},
      {index: '1311', name: '无线吸顶AP', children: []},
      {index: '1312', name: '液晶显示屏', children: []},
      {index: '1313', name: '门禁控制器', children: []},
      {index: '1314', name: '食堂电视机', children: []},
      {index: '1315', name: '班级信息', children: []}
    ],
    layersShow: [false, false, false, false, false, false, false, false, false, false, false, false, false, false, false]
  },
  {
    index: '14',
    name: '智慧城管',
    children: [
      {index: '141', name: '城管执法案件', children: []},
      {index: '142', name: '路灯', children: []}
    ],
    layersShow: [false, false]
  },
  {
    index: '15',
    name: '智慧公安',
    children: [
      {index: '151', name: '公安一期视频点位', children: []}
    ],
    layersShow: [false]
  },
  {
    index: '16',
    name: '社会治理',
    children: [
      {index: '161', name: '2021疫情防控网格', children: []},
      {index: '162', name: '精细化管理平台', children: []}
    ],
    layersShow: [false]
  },
  {
    index: '17',
    name: '企业',
    children: [
      {index: '171', name: '企业', children: []},
      {index: '172', name: '建筑业企业', children: []},
      {index: '173', name: '个体户', children: []}
    ],
    layersShow: [false, false, false]
  },
  {
    index: '18',
    name: '城市规划',
    children: [
      {index: '181', name: '道路规划', children: []},
      // {index: '182', name: '土地使用规划图', children: []},
      {index: '183', name: '道路责任网格', children: []}
    ],
    layersShow: [false, false, false]
  },
  // {
  //   index: '19',
  //   name: '辖区',
  //   children: [
  //     {index: '191', name: ' 行政辖区', children: []}
  //   ],
  //   layersShow: [false]
  // },
  {
    index: '20',
    name: '应急指挥调度',
    children: [],
    layersShow: []
  }
]
export default {
  name: 'Mars3dMap2',
  data () {
    return {
      title5: [true, false, false, false],
      tabList: [
        { name: 'B-XXD-07', desc: '单位', key: '6629U607Z3', img: require('@/assets/images/banner/B-ZH-08.png') },
        { name: 'B-XXD-10', desc: '地名', key: '45F6S2H013', img: require('@/assets/images/banner/icon_dz.png') },
        { name: 'B-XXD-03', desc: '场所', key: '5W27676C4D', img: require('@/assets/images/banner/B-ZH-06.png') },
        { name: 'B-XXD-09', desc: '基础设施', key: '738I0T03S8', img: require('@/assets/images/banner/B-ZH-01.png') },
        { name: 'B-XXD-04', desc: '道路交通', key: '1874XP0U62', img: require('@/assets/images/banner/B-ZH-02.png') }
      ],
      top: '250px',
      showTab: false,
      totalPage: 0,
      params: {
        key: '',
        keyword: '',
        code: ''
      },
      screenList: [
        {
          fullName: '智慧社区',
          url: 'http://11.100.6.135:18080/rjzhsq/operationMonitor'
        }, {
          fullName: '智慧工地',
          url: 'http://113.194.84.171:9706/inspect_platform/web/index.html#/screen1'
        },
        // {
        //   fullName: '社会治理',
        //   url: 'http://11.100.6.231:9999/bigScreen/#/grid?areaCode%3D360783%26ticket%3D'
        // },
        {
          fullName: '智慧项管',
          url: 'http://113.194.84.171:60900/pmg-web/count/situation/situation-view'
        }, {
          fullName: '智慧园林',
          url: 'http://113.194.84.171:61104/IBMS/static/gismap/showDrawing/index.html'
        }, {
          fullName: '物联网',
          url: 'http://11.100.6.171:8011/dmsiotadmin/system/main'
        }
      ], // 大屏列表
      title: [
        {
          name: '资源环境',
          index: [0, 1, 17, 6, 3, 2, 4, 7]
        },
        {
          name: '城市治理',
          index: [13, 14, 15, 18]
        },
        {
          name: '社会民生',
          index: [10, 5, 12, 8, 9]
        },
        {
          name: '产业经济',
          index: [16, 11]
        }
      ],
      items: [],
      disable: false,
      showFrame: false,
      gongdi: false,
      shequ: false,
      tingche: false,
      leftScreen: true,
      videoChannels: [],
      trafficChannels: [],
      parkChannels: [],
      bottom_btn: [],
      bottom_choose: [],
      videoToken: '', // 视频云token
      videoUrl: '', // 视频地址
      videoTimer: null, // 视频定时器
      videoCount: 60, // 倒计时
      videoShow: false, // 视频的显示
      player: null, // 播放器1
      currentPlayer: 'player', // 当前切换palyer
      layersShow: [false, false, false, false, false, false, false, false, false, false],
      labels: [],
      data: {
        feature: [],
        polygon: []
      },
      cartimer: null
    }
  },
  computed: {
    ...mapState(['addMarker'])
  },
  mounted () {
    let _this = this
    // window.trail = _this.trail
    // window.getVideo = _this.getVideo
    // this.getVideoToken()
    this.clickTitle(0)
    this.initmap()
  },
  watch: {
    addMarker (val) {
      this.fly2Marker(val.lat, val.lng, val.pop, val.icon)
    }
  },
  methods: {
    // 获取所有通道
    getChannels () {
      let params = {
        'token': this.videoToken
      }
      fetchChannels(params).then(res => {
        if (res.code === 1) {
          this.videoChannels = res.data
          // todo: 过滤摄像头
          this.trafficChannels = res.data.filter((item) => {
            return item.channelSn.startsWith('3607013407')
          })
          this.parkChannels = res.data.filter((item) => {
            return item.channelSn.startsWith('3607013404')
          })

          // this.videoChannels = res.data.filter((item) => {
          //   return item.online === '1'
          // })
          // this.offlineVideoChannels = res.data.filter((item) => {
          //   return item.online !== '1'
          // })
        }
      })
    },
    // 获取视频相关参数
    getVideoToken () {
      fetchVideoToken().then(res => {
        if (res.code === 1) {
          this.videoToken = res.data
          this.getChannels()
          this.videoTimer = setInterval(() => {
            if (this.videoCount > 1) {
              this.videoCount--
            } else {
              this.getFlushVideoToken()
            }
          }, 1000)
        }
      })
    },
    // 刷新token
    getFlushVideoToken () {
      this.videoCount = 60
      let params = {
        'token': this.videoToken
      }
      fetchFlushVideoToken(params).then(res => {
        if (res.code === 1) {
          this.videoToken = res.data
        }
      })
    },
    // changePage (val) {
    //   if (this.disable) return
    //   if (val === 1) {
    //     if (this.params.page !== this.totalPage) {
    //       this.params.page++
    //       this.search()
    //     }
    //   } else {
    //     if (this.params.page !== 1) {
    //       this.params.page--
    //       this.search()
    //     }
    //   }
    // },
    bottom_click (val) {
      this.bottom_choose = this.bottom_choose.map(item => { return false })
      this.bottom_choose[val] = true
      this.fetchData({value: this.bottom_btn[val]})
    },
    closeFrame () {
      this.showFrame = false
    },
    clickLabel (val) {
      this.layersShow = [false, false, false, false, false, false, false, false, false, false]
      this.layersShow[val] = true
      for (let i = 0; i < this.labels.length; i++) {
        if (i !== val) {
          for (let j = 0; j < this.labels[i].layersShow.length; j++) {
            this.labels[i].layersShow[j] = false
          }
        }
      }
      if (this.labels[val].name === '应急指挥调度') {
        // console.log(this.$refs.mapframe)
        this.showFrame = true
        this.$refs.mapframe.reloadUrl(document.location.toString(), 'http://11.100.6.143:13007/EnvironmentMonitor?ticket%3D')
      } else if (this.labels[val].index === '04') {
        this.clearAll()
        this.singleSearch('在建/已建项目', 'B-ZH-0801', '05VA87X3PX', require('@/assets/images/symbol/B-ZH-08010000.png'),
          [
            {name: '项目名称', value: 'YSMC'},
            {name: '项目类型', value: 'YSDM'},
            {name: '项目状态', value: 'JSJD'},
            {name: '项目详情', value: 'S_DZQC'},
            {name: '开工时间', value: 'GXSJ'} ], false)
        this.drawPolygon('B-ZH-0802', '9C7MXQ1IF2')
      } else if (this.labels[val].index === '14') {
        this.clearAll()
        this.drawGeoServer('gz-shp:A_JT_CJGL_PL_1000', 'R5YWG57UC9', '#2ee141', 'line')
      } else if (this.labels[val].index === '06') {
        this.clearAll()
        this.singleSearch('公园分布', 'B-ZH-0901', '604NVD1231', require('@/assets/images/symbol/B-ZH-09010000.png'),
          [ {name: '公园名称', value: 'SSSJFW'}, {name: '公园地址', value: 'S_DZQC'} ], false)
        this.drawPolygon('B-ZH-0928', '5CAQF6UY5V')
      } else if (this.labels[val].index === '03') {
        this.clearAll()
        this.searchGongdi()
      } else if (this.labels[val].index === '05') {
        this.clearAll()
        this.searchShequ()
        this.drawPolygon('B-ZH-1004', 'VM0V81395N')
      } else if (this.labels[val].index === '11') {
        this.clearAll()
        this.searchTingche()
        this.drawPolygon('B-ZH-1702', 'VM0V81395N')
      }
    },
    // 取区域内的随机图标；用于线对象的合并渲染
    randomPoint () {
      const jd = this.random(114.869 * 1000, 114.889 * 1000) / 1000
      const wd = this.random(25.68 * 1000, 25.70 * 1000) / 1000
      return new mars3d.LatLngPoint(jd, wd, 50)
    },

    // 取随机数字
    random (min, max) {
      return Math.floor(Math.random() * (max - min + 1) + min)
    },

    async initmap () {
      let mapOptions = {
        scene: {
          // 默认视角参数
          center: {"lat":25.550814,"lng":114.875148,"alt":13731,"heading":0,"pitch":-30},
          // center: { lat: 31.215956, lng: 121.508605, alt: 887, heading: 5, pitch: -26 },
          // 以下是Cesium.Globe对象相关参数
          globe: {
            depthTestAgainstTerrain: false, // 是否启用深度监测
            // baseColor: 'rgba(0,0,0,0.78)', // 地球默认背景色
            showGroundAtmosphere: true, // 是否在地球上绘制的地面大气
            enableLighting: false // 是否显示昼夜区域
          }
        },
        control: {
          homeBtn: true,
          infoBox: false,
          baseLayerPicker: true, // basemaps底图切换按钮
          contextmenu: { hasDefault: true, preventDefault: false },
        },
        basemaps:[
          {
            name: "腾讯深蓝色",
            icon: "img/basemaps/bd-c-midnight.png",
            type: "tencent",
            layer: "custom",
            style: "4",
            show: true
          },
          {
            name: "百度黑色",
            icon: "img/basemaps/bd-c-dark.png",
            type: "baidu",
            layer: "custom",
            style: "dark",
            show: false
          },
        ],
        layers: [
          {
            type: "3dtiles",
            name: "赣州建筑物",
            // url: "http://192.168.8.111:9003/model/taT0ftXcS/tileset.json",
            // url: "http://localhost:9003/model/tvf7DBpYs/tileset.json",
            url: "http://111.198.10.15:11404/3d/tileset.json",
            maximumScreenSpaceError: 1,
            maximumMemoryUsage: 2048,
            style: {
              color: "rgb(52,125,246)"
            },
            marsJzwStyle: true,
            show: true
          },
          {
            type: "geojson",
            name: "市区一级道路",
            url: "http://111.198.10.15:11404/3d/rj_zygd.json",
            symbol: {
              styleOptions: {
                width: 4.0,
                materialType: mars3d.MaterialType.ODLine,
                materialOptions: {
                  bgColor: new Cesium.Color(0.1, 0.7, 0.5, 0.4),
                  color: new Cesium.Color(Math.random() * 0.5 + 0.5, Math.random() * 0.8 + 0.2, 0.0, 1.0),
                  speed: 5 + 1.0 * Math.random(),
                  startTime: Math.random()
                }
              }
            },
            popup: "{Name}",
            show: true
          }
        ]
      }
      // 创建三维地球场景
      let map = new mars3d.Map('mars3dContainer', mapOptions)
      map.scene.screenSpaceCameraController.enableCollisionDetection = false
      // 设置鼠标
      map.scene.screenSpaceCameraController.tiltEventTypes = [ Cesium.CameraEventType.RIGHT_DRAG ]
      // 缩放设置 重新设置缩放成员
      map.scene.screenSpaceCameraController.zoomEventTypes = [Cesium.CameraEventType.MIDDLE_DRAG, Cesium.CameraEventType.WHEEL, Cesium.CameraEventType.PINCH]
      // 鼠标左键平移
      map.scene.screenSpaceCameraController.rotateEventTypes = [Cesium.CameraEventType.LEFT_DRAG]
      window.map = map
      // 加动态图层
      layers.feature = new mars3d.layer.GraphicLayer()
      layers.polygon = new mars3d.layer.GraphicLayer()
      map.addLayer(layers.feature)
      map.addLayer(layers.polygon)
      // this.showAreaMask()
      this.showAreaBoundaryWall()
      this.initlight()
      this.addCicleScan()
      // let loadBuilding = await this.loadBuilding()
    },
    // 显示区域遮罩-可用s
    showAreaMask(){
      const geoJsonLayer = new mars3d.layer.GeoJsonLayer({
        url: "http://111.198.10.15:11404/3d/rj_bj.json",
        mask: false, // 标识为遮罩层【重点参数】
        symbol: {
          styleOptions: {
            fill: true,
            color: "rgb(33,35,42)",
            opacity: 0.0,
            outline: true,
            outlineColor: "#4886ce",
            outlineWidth: 8,
            outlineOpacity: 0.8,
            arcType: Cesium.ArcType.GEODESIC,
            clampToGround: true
          }
        }
        // flyTo: true
      })
      window.map.addLayer(geoJsonLayer)
    },
    // 显示行政区划墙-效果不好，废除
    showAreaBoundaryWall(){
      // map.setCameraView({ lat: 30.561661, lng: 117.663884, alt: 113078, heading: 346, pitch: -43 })
      const graphicLayer = new mars3d.layer.GeoJsonLayer({
        name: "蓉江新区",
        url: "http://111.198.10.15:11404/3d/rj_bj.json",
        symbol: {
          type: "wall",
          styleOptions: {
            diffHeight: 100, // 墙高
            materialType: mars3d.MaterialType.LineFlow,
            materialOptions: {
              color: "#4886ce", // 颜色
              opacity: 0.6, // 透明度
              image: "http://mars3d.cn/img/textures/fence.png", // 图片
              repeatX: 3, // 重复数量
              axisY: true, // 竖直方向
              speed: 10 // 速度
            },
            // 高亮时的样式
            highlight: {
              type: "click",
              color: "#ffff00"
            }
          }
        },
        popup: "{name}"
      })
      window.map.addLayer(graphicLayer)
    },
    // 初始化灯光
    initlight(){
      // 初始化灯光
      window.map.scene.light = new Cesium.DirectionalLight({
        direction: map.scene.camera.direction
      })
      window.map.on(mars3d.EventType.cameraMoveEnd, function (event) {
        map.scene.light.direction = map.scene.camera.direction
      })
      let bloomEffect = new mars3d.effect.BloomEffect({
        enabled: true
      })
      window.map.addEffect(bloomEffect)

      const graphicLayer = new mars3d.layer.GraphicLayer()
      window.map.addLayer(graphicLayer)

      // 模型的中心点
      const position = [114.882505, 25.778006, 0] // 用于围绕旋转 + 中心点扩散 + 旋转的图片
      const center = Cesium.Cartesian3.fromDegrees(position[0], position[1], 140) // 用于div标注和远眺的线

      // 中心扩散点
      const circleDiffuseWallGlow = new mars3d.graphic.DiffuseWall({
        name: "中心扩散点",
        position: position,
        style: {
          diffHeight: 200, // 高度
          radius: 1500, // 半径
          color: "#7ffeff",
          speed: 15 // 速度
        }
      })
      graphicLayer.addGraphic(circleDiffuseWallGlow)

      // 旋转的图片 -- 底部
      let rotation = Cesium.Math.toRadians(50)
      function getRotationValue() {
        rotation -= 0.007
        return rotation
      }
      const rotatCicleImage = new mars3d.graphic.CircleEntity({
        position: position,
        style: {
          radius: 500,
          height: 50,
          materialType: mars3d.MaterialType.Image2,
          materialOptions: {
            image: "img/textures/circle_bg.png"
          },
          rotation: new Cesium.CallbackProperty(getRotationValue, false),
          stRotation: new Cesium.CallbackProperty(getRotationValue, false)
        }
      })
      graphicLayer.addGraphic(rotatCicleImage)

      // 扫描圆形
      const scanCircle = new mars3d.graphic.CircleEntity({
        position: Cesium.Cartesian3.fromDegrees(114.87527, 25.78311, 15),
        style: {
          radius: 480.0,
          materialType: mars3d.MaterialType.CircleScan,
          materialOptions: {
            image: "/img/textures/circle-scan.png",
            color: "#ffffff"
          },
          stRotation: new Cesium.CallbackProperty(getRotationValue, false),
          classificationType: Cesium.ClassificationType.BOTH,
          clampToGround: true
        }
      })
      graphicLayer.addGraphic(scanCircle)
    },
    addCicleScan(){
      const graphicLayer = new mars3d.layer.GraphicLayer()
      window.map.addLayer(graphicLayer)

    },
    // 楼宇模型-3dtiles
    loadBuilding() {
      return new Promise(resolve => {
        setTimeout(() => {
          // 添加参考三维模型;
          const tiles3dLayer = new mars3d.layer.TilesetLayer({
            name: "赣州市建筑物",
            url: "http://111.198.10.15:11404/3d/tileset.json",
            // url: "http://192.168.8.111:9003/model/taT0ftXcS/tileset.json",
            // url: "http://data1.mars3d.cn/3dtiles/jzw-shanghai/tileset.json",
            maximumScreenSpaceError: 1,
            maximumMemoryUsage: 1024,
            style: {
              color: "rgb(0, 99, 255)"
            },
            // highlight:{
            //   type:'click',
            //   color:'#FFFF00',
            //   outlineEffect: true
            // },
            marsJzwStyle: false
          })
          window.map.addLayer(tiles3dLayer)
        },200)

        //   setTimeout(() => {
        //     let geoJsonLayer = new mars3d.layer.GeoJsonLayer({
        //       name: '建筑物',
        //       url: '../static/build.json',
        //       // url: '//11.100.6.5:8084/services/geoserver/gz-shp/ows?service=WFS&request=GetFeature&maxFeatures=5&outputFormat=application/json&typeName=gz-shp:A_JMDJSS_JMD_PG_1000&F-Auth-Key=7Q55K891Z7',
        //       // flyTo: true,
        //       enablePickFeatures: false,
        //       symbol: {
        //         type: 'polygonCombine', // 大数据面类型，效率高
        //         styleOptions: {
        //           color: '#0098cc',
        //           opacity: 0.7,
        //           outline: false
        //         },
        //         callback: function (attr, styleOpt) {
        //           return { height: 0, diffHeight: 20 }
        //         }
        //       },
        //       distanceDisplayCondition: true,
        //       distanceDisplayCondition_far: 400,
        //       distanceDisplayCondition_near: 0
        //     })
        //     window.map.addLayer(geoJsonLayer)
        //   }, 2000)
      })
    },
    // 楼宇多边形-大数据面
    loadBuildingBak() {
      return new Promise(resolve => {
        setTimeout(() => {
          let geoJsonLayer = new mars3d.layer.GeoJsonLayer({
            name: '建筑物',
            url: '../static/build.json',
            // url: '//11.100.6.5:8084/services/geoserver/gz-shp/ows?service=WFS&request=GetFeature&maxFeatures=5&outputFormat=application/json&typeName=gz-shp:A_JMDJSS_JMD_PG_1000&F-Auth-Key=7Q55K891Z7',
            // flyTo: true,
            enablePickFeatures: false,
            symbol: {
              type: 'polygonCombine', // 大数据面类型，效率高
              styleOptions: {
                color: '#0098cc',
                opacity: 0.7,
                outline: false
              },
              callback: function (attr, styleOpt) {
                return { height: 0, diffHeight: 20 }
              }
            },
            distanceDisplayCondition: true,
            distanceDisplayCondition_far: 400,
            distanceDisplayCondition_near: 0
          })
          window.map.addLayer(geoJsonLayer)
        }, 2000)
      })
    },

    fetchData ({value}) {
      this.clearAll()
      // clearInterval(this.cartimer)
      switch (value.index) {
        case '011':
          this.drawGeoServer('gz-shp:A_GX_XZGX_PL_1000', 'N750F19RI8', '#f47219', 'line')
          break
        case '014':
          this.drawGeoServer('gz-shp:A_JJYZQ_XZJXZQ_PG_1000', 'PJ2170Q99G', '{MC}', 'polygon')
          break
        // case '015':
        //   this.drawGeoServer('gz-shp:A_JMDJSS_GGFWJQSS_PT_1000', 'E2R8A0IGDV', '', 'polygon')
        //   break
        case '016':
          this.drawGeoServer('gz-shp:A_JMDJSS_JMD_PG_1000', '7Q55K891Z7', '', 'none')
          break
        case '017':
          this.drawGeoServer('gz-shp:A_JT_CJGL_PL_1000', 'R5YWG57UC9', '#2ee141', 'line')
          break
        case '018':
          this.drawGeoServer('gz-shp:A_JT_CSDL_PL_1000', 'SR2T32355X', '#2ee141', 'line')
          break
        case '019':
          this.drawGeoServer('gz-shp:A_JT_TL_PL_1000', 'KVQXR71E72', '{}', 'line')
          break
        case '0110':
          this.drawGeoServer('gz-shp:A_JT_XCDL_PL_1000', 'T28S8B7P8B', '#2ee141', 'line')
          break
        case '0111':
          this.drawGeoServer('gz-shp:A_SX_GQ_PG_1000', '41NN75H8Q2', '', 'none')
          break
        case '0112':
          this.drawGeoServer('gz-shp:A_SX_HL_PG_1000', 'LJ5V4R642E', '', 'none')
          break
        case '0113':
          this.drawGeoServer('gz-shp:A_SX_HP_PG_1000', '3FY387EC32', '', 'none')
          break
        case '0114':
          this.drawGeoServer('gz-shp:A_SX_QTSXYS_PG_1000', '0U851BKU4S', '#00e5ef', 'line')
          break
        case '0116':
          this.drawGeoServer('gz-shp:A_SX_SLJFFSS_PT_1000', '46X2J13B8K', '#00e5ef', 'line')
          break
        case '0117':
          this.drawGeoServer('gz-shp:A_ZBYTZ_CSLD_PG_1000', '4MNM5J1E41', '', 'none')
          break
        case '0118':
          this.drawGeoServer('gz-shp:A_ZBYTZ_NLYD_PG_1000', 'MMXC70RC9S', '', 'none')
          break
        case '021':
          this.singleSearch(value.name, 'B-ZH-0101', '3KNOXR30E6', require('@/assets/images/symbol/B-ZH-01010000.png'),
            [ {name: '标识器ID号', value: 'SJBH'}, {name: '标识器型号', value: 'SBXH'}, {name: '所属道路', value: 'SSSJFW'} ], false)
          break
        case '022':
          this.singleSearch(value.name, 'B-ZH-0104', 'M1KOD38358', require('@/assets/images/symbol/B-ZH-01040000.png'),
            [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'} ], false)
          break
        case '023':
          this.singleSearch(value.name, 'B-ZH-0107', 'IVU59JC84I', require('@/assets/images/symbol/B-ZH-01070000.png'),
            [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'} ], false)
          break
        case '024':
          this.singleSearch(value.name, 'B-ZH-0109', 'VB5P0VER2I', require('@/assets/images/symbol/B-ZH-01090000.png'),
            [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'} ], false)
          break
        case '025':
          this.singleSearch(value.name, 'B-ZH-0103', 'A376X56055', require('@/assets/images/symbol/B-ZH-01030000.png'),
            [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'} ], false)
          break
        case '026':
          this.singleSearch(value.name, 'B-ZH-0106', '1Y059A446T', require('@/assets/images/symbol/B-ZH-01060000.png'),
            [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'} ], false)
          break
        case '027':
          this.singleSearch(value.name, 'B-ZH-0108', '556018Q5T0', require('@/assets/images/symbol/B-ZH-01080000.png'),
            [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'} ], false)
          break
        case '028':
          this.singleSearch(value.name, 'B-ZH-0110', 'RGW6U23D5A', require('@/assets/images/symbol/B-ZH-01100000.png'),
            [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'} ], false)
          break
        case '029':
          this.drawGeoServer('gz-shp:A_GX_XZGX_PL_1000', 'N750F19RI8', '#f47219', 'line')
          break
        case '0210':
          this.singleSearch(value.name, 'B-ZH-0113', 'MPMN9UW39J', require('@/assets/images/symbol/B-ZH-01130000.png'),
            [{name: '项目名称', value: 'SSSJFW'}, {name: '名称', value: 'YSMC'}, {name: '地址', value: 'S_DZQC'}], false)
          break
        case '0211':
          this.singleSearch(value.name, 'B-ZH-0114', 'W66135IR61', require('@/assets/images/symbol/B-ZH-01140000.png'),
            [{name: '项目名称', value: 'SSSJFW'}, {name: '名称', value: 'YSMC'}, {name: '地址', value: 'S_DZQC'}], false)
          break
        case '031':
          // this.singleSearch('工地分布', 'B-ZH-0801', '05VA87X3PX', require('@/assets/images/symbol/B-ZH-08010000.png'),
          //   [{name: '工地名称', value: 'SSSJFW'}, {name: '工程类别', value: 'GCLB'}, {name: '工程状态', value: 'JSJD'}, {name: '开工日期', value: 'GXSJ'}, {name: '项目地址', value: 'S_DZQC'}], false)
          this.searchGongdi()
          // this.drawPolygon('B-ZH-0702', '2V026Q9MNX')
          break
        case '032':
          this.singleSearch(value.name, 'B-ZH-0703', 'M02CK748UD', require('@/assets/images/symbol/B-ZH-07030000.png'),
            [{name: '名称', value: 'SSSJFW'}, {name: '编码', value: 'SJDZBM'}, {name: '经度', value: 'X'}, {name: '纬度', value: 'Y'}, {name: '地址', value: 'S_DZQC'}], false)
          break
        case '033':
          this.singleSearch(value.name, 'B-ZH-0705', 'PA6562EOO6', require('@/assets/images/symbol/B-ZH-07050000.png'),
            [{name: '名称', value: 'XXDLXMC'}, {name: '设备状态', value: 'BJZT'}, {name: '地址', value: 'S_DZQC'}], false)
          break
        case '034':
          this.singleSearch(value.name, 'B-ZH-0706', 'O8ZG1T27O9', require('@/assets/images/symbol/B-ZH-07060000.png'),
            [{name: '名称', value: 'YSMC'}, {name: '设备状态', value: 'BJZT'}, {name: '地址', value: 'S_DZQC'}], false)
          break
        case '035':
          this.drawPolygon('B-ZH-0707', '105VKI9J63')
          break
        case '101':
          this.singleSearch(value.name, 'B-ZH-0201', 'E09Q6382SI', require('@/assets/images/symbol/B-ZH-02010000.png'),
            [{name: '路口地址', value: 'S_DZQC'}], false)
          break
        case '102':
          this.singleSearch(value.name, 'B-ZH-0202', 'MM3KXI4H7I', require('@/assets/images/symbol/B-ZH-02020000.png'),
            [ {name: '设备名称', value: 'YSMC'}, {name: '路口名称', value: 'SSSJFW'}, {name: '设备地点', value: 'S_DZQC'} ], false)
          break
        case '103':
          this.singleSearch(value.name, 'B-ZH-0203', '5EL6NP1129', require('@/assets/images/symbol/B-ZH-02030000.png'),
            [ {name: '设备名称', value: 'YSMC'}, {name: '业务类型', value: 'SBLX'}, {name: '路口名称', value: 'SSSJFW'}, {name: '设备地点', value: 'S_DZQC'} ], false)
          break
        case '104':
          this.singleSearch(value.name, 'B-ZH-0208', '6FS433Q5AS', require('@/assets/images/symbol/B-ZH-02080000.png'),
            [ {name: '设备名称', value: 'YSMC'}, {name: '路口名称', value: 'SSSJFW'}, {name: '设备地点', value: 'S_DZQC'} ], false)
          break
        case '105':
          this.singleSearch(value.name, 'B-ZH-0209', '7Q4EG69EA8', require('@/assets/images/symbol/B-ZH-02090000.png'),
            [ {name: '设备名称', value: 'YSMC'}, {name: '路口名称', value: 'SSSJFW'}, {name: '设备地点', value: 'S_DZQC'} ], false)
          break
        case '106':
          this.singleSearch(value.name, 'B-ZH-0210', '22SO741S57', require('@/assets/images/symbol/B-ZH-02100000.png'),
            [ {name: '设备名称', value: 'YSMC'}, {name: '路口名称', value: 'SSSJFW'}, {name: '设备地点', value: 'S_DZQC'} ], false)
          break
        case '107':
          this.singleSearch(value.name, 'B-ZH-0211', '59OMX7SUJR', require('@/assets/images/symbol/B-ZH-02110000.png'),
            [ {name: '设备名称', value: 'YSMC'}, {name: '路口名称', value: 'SJYSMC'}, {name: '设备地点', value: 'S_DZQC'} ], false)
          break
        case '108':
          this.singleSearch(value.name, 'B-ZH-0214', '52S5ENI62G', require('@/assets/images/symbol/B-ZH-02140000.png'),
            [ {name: '设备名称', value: 'YSMC'}, {name: '路口名称', value: 'SSSJFW'}, {name: '设备地点', value: 'S_DZQC'} ], false)
          break
        case '109':
          this.singleSearch(value.name, 'B-ZH-0215', 'D7BH2I7J6K', require('@/assets/images/symbol/B-ZH-02150000.png'),
            [ {name: '设备名称', value: 'YSMC'}, {name: '路口名称', value: 'SSSJFW'}, {name: '设备地点', value: 'S_DZQC'} ], false)
          break
        case '1010':
          this.singleSearch(value.name, 'B-ZH-0216', '88K00B18G8', require('@/assets/images/symbol/B-ZH-02160000.png'),
            [ {name: '设备名称', value: 'YSMC'}, {name: '业务类型', value: 'SBLX'}, {name: '设备地点', value: 'S_DZQC'} ], false)
          break
        case '1012':
          this.singleSearch(value.name, 'B-ZH-1801', 'L791G1IK50', require('@/assets/images/symbol/location_3.png'),
            [ {name: '设备名称', value: 'YSMC'}, {name: '路口名称', value: 'SSSJFW'}, {name: '设备地点', value: 'S_DZQC'} ], false)
          break
        case '041':
          this.singleSearch(value.name, 'B-ZH-0801', '05VA87X3PX', require('@/assets/images/symbol/B-ZH-08010000.png'),
            [
              {name: '项目名称', value: 'YSMC'},
              {name: '项目类型', value: 'YSDM'},
              {name: '项目状态', value: 'JSJD'},
              {name: '项目详情', value: 'S_DZQC'},
              {name: '开工时间', value: 'GXSJ'} ], false)
          this.drawPolygon('B-ZH-0802', '9C7MXQ1IF2')
          break
        case '042':
          this.drawGeoPolygon('JTXMGHT_2020_PG', '1M0051Y63N')
          break
        case '043':
          this.drawGeoPolygon('JTXMGHT_2021_PG', '5BNSBCN80G')
          break
        case '051':
          // this.singleSearch('社区分布', 'B-ZH-1001', 'J765870KFV', require('@/assets/images/symbol/B-ZH-10010000.png'),
          //   [ {name: '社区名称', value: 'SSSJFW'}, {name: '社区地址', value: 'S_DZQC'} ], false)
          this.searchShequ()
          this.drawPolygon('B-ZH-1004', 'VM0V81395N')
          break
        case '052':
          this.singleSearch('楼栋分布', 'B-ZH-1002', '9949SDP18V', require('@/assets/images/symbol/B-ZH-10020000.png'),
            [ {name: '社区名称', value: 'SSSJFW'}, {name: '楼栋地址', value: 'S_DZQC'} ], false)
          this.drawPolygon('B-ZH-1005', 'N74B0SINZE')
          break
        case '053':
          this.singleSearch(value.name, 'B-ZH-1017', '7WC6JL1Q5Q', require('@/assets/images/symbol/video.png'),
            [ {name: '社区名称', value: 'SSSJFW'}, {name: '设备地址', value: 'S_DZQC'} ], false)
          break
        case '054':
          this.singleSearch(value.name, 'B-ZH-1018', 'L2XT08A363', require('@/assets/images/symbol/location_3.png'),
            [ {name: '社区名称', value: 'SSSJFW'}, {name: '设备地址', value: 'S_DZQC'} ], false)
          break
        case '055':
          this.singleSearch(value.name, 'B-ZH-1011', 'E9RM56Z1AO', require('@/assets/images/symbol/location_3.png'),
            [ {name: '社区名称', value: 'SSSJFW'}, {name: '设备地址', value: 'S_DZQC'} ], false)
          break
        case '056':
          this.singleSearch(value.name, 'B-ZH-1019', 'I0T108CU9D', require('@/assets/images/symbol/B-ZH-09150000.png'),
            [ {name: '社区名称', value: 'SSSJFW'}, {name: '设备地址', value: 'S_DZQC'} ], false)
          break
        case '057':
          this.singleSearch(value.name, 'B-ZH-1016', '44756D0402', require('@/assets/images/symbol/B-ZH-01030000.png'),
            [ {name: '社区名称', value: 'SSSJFW'}, {name: '设备地址', value: 'S_DZQC'} ], false)
          break
        case '058':
          this.drawGeoServer('gz-shp:ZHSQ_ZPMT_PG', 'A3WS247545', '', 'none')
          break
        case '059':
          this.singleSearch(value.name, 'B-ZH-0908', 'VQ1A4LJ5T7', require('@/assets/images/symbol/B-ZH-09080000.png'),
            [ {name: '社区名称', value: 'SSSJFW'}, {name: '设备地址', value: 'S_DZQC'} ], false)
          break
        case '0510':
          this.singleSearch(value.name, 'B-ZH-1010', 'YUP093V3SF', require('@/assets/images/symbol/location_3.png'),
            [ {name: '社区名称', value: 'SSSJFW'}, {name: '设备地址', value: 'S_DZQC'} ], false)
          break
        case '074':
          this.singleSearch(value.name, 'B-ZH-1401', 'HFR7BGDK6I', require('@/assets/images/symbol/location_3.png'),
            [ {name: '设备名称', value: 'YSMC'}, {name: '设备状态', value: 'BJZT'}, {name: '设备地点', value: 'S_DZQC'} ], false)
          break
        case '081':
          this.videoSearch(this.trafficChannels, require('@/assets/images/symbol/video.png'),
            [ {name: '设备名称', value: 'name'}, {name: '设备状态', value: 'online'} ])
          break
        case '082':
          this.singleSearch('摄像头', 'B-ZH-1502', '76L47133KX', require('@/assets/images/symbol/video.png'),
            [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], true)
          break
        case '083':
          this.singleSearch('摄像头', 'B-ZH-1503', '82TO11RNVO', require('@/assets/images/symbol/video.png'),
            [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], true)
          break
        case '084':
          this.videoSearch(this.parkChannels, require('@/assets/images/symbol/video.png'),
            [ {name: '设备名称', value: 'name'}, {name: '设备状态', value: 'online'} ])
          break
        case '094':
          this.singleSearch(value.name, 'B-ZH-1301', '6Z6214RC1P', require('@/assets/images/symbol/B-ZH-13010100.png'),
            [ {name: '门禁名称', value: 'YSMC'}, {name: '设备类型', value: 'XXDLXMC'}, {name: '所属企业', value: 'SSSJFW'}, {name: '门禁地点', value: 'S_DZQC'} ], false)
          break
        case '111':
          this.searchTingche()
          // this.singleSearch('停车场分布', 'B-ZH-1701', '521355523B', require('@/assets/images/symbol/B-ZH-02070000.png'),
          //   [ {name: '停车场名称', value: 'SSSJFW'}, {name: '停车场地址', value: 'S_DZQC'} ], false)

          break
        case '112':
          this.singleSearch(value.name, 'B-ZH-1703', 'P875Q65765', require('@/assets/images/symbol/location_3.png'),
            [ {name: '停车场名称', value: 'SSSJFW'}, {name: '停车位地点', value: 'S_DZQC'} ], false)
          break
        case '113':
          this.singleSearch(value.name, 'B-ZH-1705', 'T2K9QK67RH', require('@/assets/images/symbol/B-ZH-13010200.png'),
            [ {name: '闸口名称', value: 'YSMC'}, {name: '闸口地点', value: 'S_DZQC'} ], false)
          break
        case '061':
          this.singleSearch('公园分布', 'B-ZH-0901', '604NVD1231', require('@/assets/images/symbol/B-ZH-09010000.png'),
            [ {name: '公园名称', value: 'SSSJFW'}, {name: '公园地址', value: 'S_DZQC'} ], false)
          this.drawPolygon('B-ZH-0928', '5CAQF6UY5V')
          break
        case '062':
          this.singleSearch(value.name, 'B-ZH-0902', 'Q196FIJ3GM', require('@/assets/images/symbol/B-ZH-09020000.png'),
            [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], false)
          break
        case '063':
          this.singleSearch(value.name, 'B-ZH-0903', 'HT30LE6JQ8', require('@/assets/images/symbol/B-ZH-09030000.png'),
            [ {name: '所属公园', value: 'SSSJFW'}, {name: '地址', value: 'S_DZQC'} ], false)
          break
        case '064':
          this.singleSearch(value.name, 'B-ZH-0904', 'M799VAN6RH', require('@/assets/images/symbol/B-ZH-09040000.png'),
            [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], false)
          break
        case '065':
          this.singleSearch(value.name, 'B-ZH-0905', 'UD3M638O89', require('@/assets/images/symbol/B-ZH-09050000.png'),
            [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], false)
          break
        case '066':
          this.singleSearch(value.name, 'B-ZH-0906', 'B75BA1CE49', require('@/assets/images/symbol/B-ZH-09060000.png'),
            [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], false)
          break
        case '067':
          this.singleSearch(value.name, 'B-ZH-0907', 'G63N47O3UN', require('@/assets/images/symbol/B-ZH-09070000.png'),
            [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], false)
          break
        case '069':
          this.singleSearch(value.name, 'B-ZH-0910', '1IY801490F', require('@/assets/images/symbol/B-ZH-09100000.png'),
            [ {name: '所属公园', value: 'SSSJFW'}, {name: '地址', value: 'S_DZQC'} ], false)
          break
        case '0610':
          this.singleSearch(value.name, 'B-ZH-0912', '050495K7IG', require('@/assets/images/symbol/B-ZH-09120000.png'),
            [ {name: '商店名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'} ], false)
          break
        case '0611':
          this.singleSearch(value.name, 'B-ZH-0913', '9I7838ONHK', require('@/assets/images/symbol/B-ZH-09130000.png'),
            [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], false)
          break
        case '0612':
          this.singleSearch(value.name, 'B-ZH-0914', 'Y3H5C05Z8L', require('@/assets/images/symbol/B-ZH-09140000.png'),
            [ {name: '设备名称', value: 'YSMC'}, {name: '设备编码', value: 'YSDM'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], false)
          break
        case '0613':
          this.singleSearch(value.name, 'B-ZH-0915', 'B47Y83S3QP', require('@/assets/images/symbol/B-ZH-09150000.png'),
            [ {name: '设备名称', value: 'YSMC'}, {name: '设备编码', value: 'YSDM'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], false)
          break
        case '0614':
          this.singleSearch(value.name, 'B-ZH-0916', 'NK060J19Y0', require('@/assets/images/symbol/B-ZH-09160000.png'),
            [ {name: '设备名称', value: 'YSMC'}, {name: '设备编码', value: 'YSDM'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], false)
          break
        case '0615':
          this.singleSearch(value.name, 'B-ZH-0917', 'M2X0R53244', require('@/assets/images/symbol/B-ZH-09170000.png'),
            [ {name: '设备名称', value: 'YSMC'}, {name: '设备编码', value: 'YSDM'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], false)
          break
        case '0616':
          this.singleSearch(value.name, 'B-ZH-0918', '6439YG6E08', require('@/assets/images/symbol/B-ZH-09180000.png'),
            [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], false)
          break
        case '0617':
          this.singleSearch(value.name, 'B-ZH-0919', '3EA9LY478S', require('@/assets/images/symbol/B-ZH-09190000.png'),
            [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], false)
          break
        case '0618':
          this.singleSearch(value.name, 'B-ZH-0920', 'PVHKG06H53', require('@/assets/images/symbol/B-ZH-09200000.png'),
            [ {name: '设备名称', value: 'YSMC'}, {name: '设备编码', value: 'YSDM'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], false)
          break
        case '0619':
          this.singleSearch(value.name, 'B-ZH-0921', '99VA52VULD', require('@/assets/images/symbol/B-ZH-09210000.png'),
            [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], false)
          break
        case '0620':
          this.singleSearch(value.name, 'B-ZH-0922', 'Q3I1MZ82OR', require('@/assets/images/symbol/B-ZH-09220000.png'),
            [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], false)
          break
        case '0621':
          this.singleSearch(value.name, 'B-ZH-0923', 'N9MPL26835', require('@/assets/images/symbol/B-ZH-09230000.png'),
            [ {name: '设备名称', value: 'YSMC'}, {name: '地址', value: 'S_DZQC'} ], false)
          break
        case '0623':
          this.singleSearch(value.name, 'B-ZH-0925', 'IWQX15B46C', require('@/assets/images/symbol/B-ZH-09250000.png'),
            [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], false)
          break
        case '0624':
          this.singleSearch(value.name, 'B-ZH-0926', '3ZO01765YW', require('@/assets/images/symbol/B-ZH-09260000.png'),
            [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], false)
          break
        case '121':
          this.singleSearch(value.name, 'B-ZH-0601', '0UTH8ITN8V', require('@/assets/images/symbol/B-ZH-06010000.png'),
            [ {name: 'id', value: 'DZBM'}, {name: '资产名称', value: 'YSMC'}, {name: '地址', value: 'S_DZQC'}], false)
          break
        case '122':
          this.singleSearch(value.name, 'B-ZH-0602', 'NKDXH59N95', require('@/assets/images/symbol/B-ZH-06020000.png'),
            [ {name: 'id', value: 'DZBM'}, {name: '资产名称', value: 'YSMC'}, {name: '地址', value: 'S_DZQC'}], false)
          break
        case '123':
          this.singleSearch(value.name, 'B-ZH-0603', '6M8513Z6EL', require('@/assets/images/symbol/B-ZH-06030000.png'),
            [ {name: 'id', value: 'DZBM'}, {name: '资产名称', value: 'YSMC'}, {name: '地址', value: 'S_DZQC'}], false)
          break
        case '131':
          this.singleSearch(value.name, 'B-ZH-0520', '988C6OY8T3', require('@/assets/images/symbol/location_6.png'),
            [ {name: '学校名称', value: 'SSSJFW'}, {name: '学校地址', value: 'S_DZQC'} ])
          this.drawPolygon('B-ZH-0516', '2TFD2VO00Q')
          break
        case '132':
          this.singleSearch(value.name, 'B-ZH-0501', 'PL00E6B7VQ', require('@/assets/images/symbol/B-ZH-05010000.png'),
            [ {name: '学校名称', value: 'SSSJFW'}, {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备位置', value: 'JSGK'} ], false)
          break
        case '133':
          this.singleSearch('摄像头', 'B-ZH-1503', '82TO11RNVO', require('@/assets/images/symbol/video.png'),
            [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], false)
          break
        case '134':
          this.singleSearch(value.name, 'B-ZH-0502', '7YVI169735', require('@/assets/images/symbol/B-ZH-05020000.png'),
            [ {name: '学校名称', value: 'SSSJFW'}, {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备位置', value: 'JSGK'} ], false)
          break
        case '135':
          this.singleSearch(value.name, 'B-ZH-0504', '61M353CXL7', require('@/assets/images/symbol/location_6.png'),
            [ {name: '学校名称', value: 'SSSJFW'}, {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备位置', value: 'JSGK'} ], false)
          break
        case '136':
          this.singleSearch(value.name, 'B-ZH-0505', 'MIQV72SZ9E', require('@/assets/images/symbol/location_6.png'),
            [ {name: '学校名称', value: 'SSSJFW'}, {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备位置', value: 'JSGK'} ], false)
          break
        case '137':
          this.singleSearch(value.name, 'B-ZH-0506', '0RN7GKV7FN', require('@/assets/images/symbol/location_6.png'),
            [ {name: '学校名称', value: 'SSSJFW'}, {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备位置', value: 'JSGK'} ], false)
          break
        case '138':
          this.singleSearch(value.name, 'B-ZH-0507', 'UB8G0SCHXF', require('@/assets/images/symbol/location_6.png'),
            [ {name: '学校名称', value: 'SSSJFW'}, {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备位置', value: 'JSGK'} ], false)
          break
        case '139':
          this.singleSearch(value.name, 'B-ZH-0508', '23Z6AATV47', require('@/assets/images/symbol/location_6.png'),
            [ {name: '学校名称', value: 'SSSJFW'}, {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备位置', value: 'JSGK'} ], false)
          break
        case '1310':
          this.singleSearch(value.name, 'B-ZH-0509', '3W92ZFE2TG', require('@/assets/images/symbol/location_6.png'),
            [ {name: '学校名称', value: 'SSSJFW'}, {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备位置', value: 'JSGK'} ], false)
          break
        case '1311':
          this.singleSearch(value.name, 'B-ZH-0510', '6QXRX23SB4', require('@/assets/images/symbol/location_6.png'),
            [ {name: '学校名称', value: 'SSSJFW'}, {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备位置', value: 'JSGK'} ], false)
          break
        case '1312':
          this.singleSearch(value.name, 'B-ZH-0511', '6FZF8AZ97A', require('@/assets/images/symbol/location_6.png'),
            [ {name: '学校名称', value: 'SSSJFW'}, {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备位置', value: 'JSGK'} ], false)
          break
        case '1313':
          this.singleSearch(value.name, 'B-ZH-0512', '9154EQ9M46', require('@/assets/images/symbol/location_6.png'),
            [ {name: '学校名称', value: 'SSSJFW'}, {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备位置', value: 'JSGK'} ], false)
          break
        case '1314':
          this.singleSearch(value.name, 'B-ZH-0513', 'IX9D7T6BXX', require('@/assets/images/symbol/location_6.png'),
            [ {name: '学校名称', value: 'SSSJFW'}, {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备位置', value: 'JSGK'} ], false)
          break
        case '1315':
          this.singleSearch(value.name, 'B-ZH-0514', '963P93R9FU', require('@/assets/images/symbol/location_6.png'),
            [ {name: '学校名称', value: 'SSSJFW'}, {name: '班级名称', value: 'YSMC'}, {name: '班级地点', value: 'S_DZQC'} ], false)
          break
        case '141':
          this.singleSearch(value.name, 'B-ZH-0402', '4X137UY07J', require('@/assets/images/symbol/B-ZH-04020000.png'),
            [ {name: '案件名称', value: 'YSMC'}, {name: '案件分类', value: 'XXDLXMC'}, {name: '案件详情', value: 'S_DZQC'} ], false)
          break
        case '142':
          this.singleSearch(value.name, 'B-ZH-0403', 'G2YQEM396G', require('@/assets/images/symbol/B-ZH-04030000.png'),
            [ {name: '路灯编号', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'} ], false)
          break
        case '151':
          this.singleSearch(value.name, 'B-ZH-0301', 'I7PP584AYC', require('@/assets/images/symbol/B-ZH-03010000.png'),
            [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], false)
          break
        case '161':
          this.drawGeoServer('gz-shp:YJFKWK2021', 'YEF6D3NF1M', '{CJDMC}', 'polygon')
          break
        case '162':
          this.showFrame = true
          this.$refs.mapframe.reloadUrl(document.location.toString(), 'http://11.100.6.231:9999/bigScreen/#/grid?areaCode%3D360783%26ticket%3D')
          break
        case '171':
          this.singleSearch(value.name, 'C-QY-001', '4E31K4B9MP', require('@/assets/images/symbol/C-QY-001.png'),
            [
              {name: '企业名称', value: 'QYMC'},
              {name: '企业类型', value: 'QYLX'},
              {name: '行业门类', value: 'XYML'},
              {name: '企业状态', value: 'QYZT'},
              {name: '成立日期', value: 'CLRQ'},
              {name: '联系电话', value: 'YDDH'},
              {name: '法定代表人', value: 'FDDBR'},
              {name: '法定联系电话', value: 'FDDBRLXDH'},
              {name: '经营场所', value: 'ZS'},
              {name: '统一社会信用代码', value: 'TYSHXYDM'},
              {name: '一般经营项目', value: 'YBJYXM'}
            ], false)
          break
        case '172':
          this.singleSearch(value.name, 'C-QY-002', '5ZW9421ZVZ', require('@/assets/images/symbol/C-QY-002.png'),
            [
              {name: '企业名称', value: 'QYMC'}, {name: '所属行业', value: 'SSHY'},
              {name: '备注施工单位/监理单位', value: 'BZSGDWHSJLDW'}, {name: '建设项目名称', value: 'JSXMMC'},
              {name: '法定代表人', value: 'SSSJFW'}, {name: '法定联系电话', value: 'FDDBRLXDH'},
              {name: '企业地址', value: 'ZS'}, {name: '统一社会信用代码', value: 'TYSHXYDM'}
            ], false)
          break
        case '173':
          this.singleSearch(value.name, 'C-GT-001', '3A11W9ONRM', require('@/assets/images/symbol/C-GT-001.png'),
            [ {name: '字号名称', value: 'ZHMC'},
              {name: '行业门类', value: 'XYML'},
              {name: '个体状态', value: 'QYZT'},
              {name: '成立日期', value: 'CLRQ'},
              {name: '法定代表人', value: 'FDDBR'},
              {name: '法定联系电话', value: 'FDDBRLXDH'},
              {name: '经营者证件名称', value: 'JYZZJMC'},
              {name: '经营者证件号码', value: 'JYZZJHM'},
              {name: '经营场所', value: 'ZS'},
              {name: '许可经营项目', value: 'XKJYXM'}
            ], false)
          break
        case '181':
          this.drawGeoServer('gz-shp:DLGH_PL', '7T1D8DN23G', '', 'none')
          break
        case '183':
          this.drawGeoServer('gz-shp:A_DLZRWG', '22AK6I71B6', '', 'none')
          break
        default:
          break
      }
    },
    async videoSearch (data, icon, items) {
      for (let i = 0; i < data.length; i++) {
        var graphic = new mars3d.graphic.BillboardEntity({
          name: '摄像头',
          position: [Number(data[i].gpsX), Number(data[i].gpsY)],
          style: {
            image: icon,
            scale: 1,
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            clampToGround: true
          }
        })
        var str = `
        <div style="font-size: 0.082rem;width:30em;padding: 2em;">
          <div style="font-size: 0.085rem;font-weight: bold;padding-bottom: 10px;color: #01fbf6">摄像头</div>`
        for (let j in items) {
          var item = data[i][items[j].value]
          if (typeof item === 'undefined') item = ''
          if (item === '1') item = '在线'
          if (item === '0') item = '离线'
          str += ` <div style="padding-bottom: 2px"><label style="padding-right: 5px">${items[j].name}：</label>${item}</div>`
        }
        // 通道
        var channelId = '\'' + data[i].channelId + '\''
        str += `<button style="background-color: #e6a23c;border-color: #e6a23c;color: white;padding: 5px 5px;width: 6em;border-radius: 4px;margin-left: 25em"
                    id="video" onclick="getVideo(${channelId})">查看视频</button>`

        str += `</div>`
        graphic.bindPopup(str)
        layers.feature.addGraphic(graphic)
        if (i === 0) {
          window.map.setCameraView({ lat: Number(data[i].gpsY), lng: Number(data[i].gpsX), alt: 20000})
        }
      }
    },
    search () {
      this.clearAll()
      if (this.params.keyword === '' || this.params.key === '' || this.params.code === '') return
      let img = require('@/assets/images/symbol/location_3.png')
      fetchFeatureInfByKeyword(this.params.code, this.params.key, this.params.keyword).then(response => {
        this.data.feature = response.data.data[0].data
        for (let i = 0; i < this.data.feature.length; i++) {
          var graphic = new mars3d.graphic.BillboardEntity({
            position: [Number(this.data.feature[i].x), Number(this.data.feature[i].y)],
            style: {
              image: img,
              scale: 1,
              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
              clampToGround: true
            }
          })
          let str = `
        <div style="font-size: 0.082rem;width:30em;padding: 2em;margin-bottom:2em">
          <div style="font-size: 0.085rem;font-weight: bold;padding-bottom: 10px;color: #01fbf6">${this.data.feature[i].ysmc}</div>`
          str += ` <div style="padding-bottom: 2px"><label style="padding-right: 5px">名称：</label>${this.data.feature[i].ysmc}</div>`
          // str += ` <div style="padding-bottom: 2px"><label style="padding-right: 5px">状态：</label>${this.data.feature[i].resCode}</div>`
          str += ` <div style="padding-bottom: 2px"><label style="padding-right: 5px">地址：</label>${this.data.feature[i].dzqc}</div>`
          str += `</div>`
          graphic.bindPopup(str)
          layers.feature.addGraphic(graphic)
          if (i === 0) {
            window.map.setCameraView({ lat: Number(this.data.feature[i].y), lng: Number(this.data.feature[i].x), alt: 20000})
          }
        }
      })
    },
    clickTitle (index) {
      this.title5 = [false, false, false, false]
      this.title5[index] = true
      this.labels = []
      this.layersShow = [false, false, false, false, false, false, false, false, false, false]
      for (const val of this.title[index].index) {
        this.labels.push(labelsOption[val])
      }
    },
    clearAll () {
      layers.feature.clear()
      layers.polygon.clear()
      if (layers.heatLayer) {
        window.map.removeLayer(layers.heatLayer, true)
        layers.heatLayer = null
      }
      if (layers.tileLayer) {
        window.map.removeLayer(layers.tileLayer, true)
        layers.tileLayer = null
      }
      this.showFrame = false
      this.gongdi = false
    },
    async searchShequ () {
      let that = this
      let icon = require('@/assets/images/symbol/B-ZH-10010000.png')
      searchSheQu().then(response => {
        this.data.feature = response.data
        for (let i = 0; i < this.data.feature.length; i++) {
          if (this.data.feature[i].lat === '' || this.data.feature[i].lon === '' || this.data.feature[i].lat === '0' || this.data.feature[i].lat === 0) continue
          let graphic = new mars3d.graphic.BillboardEntity({
            name: this.data.feature[i].id,
            position: [Number(this.data.feature[i].lon), Number(this.data.feature[i].lat)],
            style: {
              image: icon,
              scale: 1,
              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
              clampToGround: true
            }
          })
          graphic.on('click', function (e) {
            that.shequ = true
            that.$nextTick(() => {
              that.$refs.shequ.init(e.target.options.name)
            })
          })
          layers.feature.addGraphic(graphic)
          if (i === 0) {
            window.map.setCameraView({ lat: Number(this.data.feature[i].lat), lng: Number(this.data.feature[i].lon), alt: 20000})
          }
        }
      })
    },
    async searchGongdi () {
      let that = this
      let icon = require('@/assets/images/symbol/B-ZH-08010000.png')
      // let list = []
      fetchConstructionDetail().then(response => {
        this.data.feature = response.data
        for (let i = 0; i < this.data.feature.length; i++) {
          if (this.data.feature[i].latitude === '' || this.data.feature[i].longitude === '' || this.data.feature[i].latitude === '0' || this.data.feature[i].latitude === 0) continue
          let graphic = new mars3d.graphic.BillboardEntity({
            name: this.data.feature[i].projectNum,
            position: [Number(this.data.feature[i].longitude), Number(this.data.feature[i].latitude)],
            style: {
              image: icon,
              scale: 1,
              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
              clampToGround: true
            }
          })
          graphic.on('click', function (e) {
            that.gongdi = true
            that.$nextTick(() => {
              that.$refs.gongdi.init(e.target.options.name)
            })
          })
          // list.push([Number(this.data.feature[i].latitude), Number(this.data.feature[i].longitude)])
          layers.feature.addGraphic(graphic)
          if (i === 0) {
            window.map.setCameraView({ lat: Number(this.data.feature[i].latitude), lng: Number(this.data.feature[i].longitude), alt: 120000})
          }
        }
        // this.setZoom(list)
      })
    },
    async searchTingche () {
      let that = this
      let icon = require('@/assets/images/symbol/B-ZH-02070000.png')
      searchTingChe().then(response => {
        this.data.feature = response.data
        for (let i = 0; i < this.data.feature.length; i++) {
          if (this.data.feature[i].lat === '' || this.data.feature[i].lng === '' || this.data.feature[i].lng === '0' || this.data.feature[i].lat === 0) continue
          let graphic = new mars3d.graphic.BillboardEntity({
            name: this.data.feature[i],
            position: [Number(this.data.feature[i].lng), Number(this.data.feature[i].lat)],
            style: {
              image: icon,
              scale: 1,
              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
              clampToGround: true
            }
          })
          graphic.on('click', function (e) {
            that.tingche = true
            that.$nextTick(() => {
              that.$refs.tingche.init(e.target.options.name)
            })
          })
          layers.feature.addGraphic(graphic)
          if (i === 0) {
            window.map.setCameraView({ lat: Number(this.data.feature[i].lat), lng: Number(this.data.feature[i].lng), alt: 120000})
          }
        }
      })
    },
    async singleSearch (value, code, key, icon, items, showbtn = false) {
      fetchFeatureInfo(code, key).then(response => {
        this.data.feature = response.data.data[0].data
        for (let i = 0; i < this.data.feature.length; i++) {
          var graphic = new mars3d.graphic.BillboardEntity({
            name: value,
            position: [Number(this.data.feature[i].X), Number(this.data.feature[i].Y)],
            style: {
              image: icon,
              scale: 1,
              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
              clampToGround: true
            }
          })
          var str = `
        <div style="font-size: 0.082rem;width:30em;padding: 2em;margin-bottom:2em">
          <div style="font-size: 0.085rem;font-weight: bold;padding-bottom: 10px;color: #01fbf6">${value}</div>`
          for (let j in items) {
            var item = this.data.feature[i][items[j].value]
            if (typeof item === 'undefined') item = ''
            str += ` <div style="padding-bottom: 2px"><label style="padding-right: 5px">${items[j].name}：</label>${item}</div>`
          }
          if (showbtn) {
            var SSKZQBH = '\'' + this.data.feature[i].SSKZQBH + '\''
            str += `<button style="background-color: #e6a23c;border-color: #e6a23c;color: white;padding: 5px 15px;border-radius: 4px;margin-left: 25em"
                    id="video" onclick="getVideo(${SSKZQBH})">查看视频</button>`
          }
          str += `</div>`
          graphic.bindPopup(str)
          layers.feature.addGraphic(graphic)
          if (i === 0) {
            window.map.setCameraView({ lat: Number(this.data.feature[i].Y), lng: Number(this.data.feature[i].X), alt: 100000})
          }
        }
      })
    },
    async fly2Marker (lat, lng, str, icon) {
      var graphic = new mars3d.graphic.BillboardEntity({
        // name: value,
        position: [Number(lng), Number(lat)],
        style: {
          image: icon,
          scale: 1,
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          clampToGround: true
        }
      })
      if (str.startsWith('gongdi')) {
        let that = this
        graphic.on('click', function (e) {
          that.gongdi = true
          that.$nextTick(() => {
            that.$refs.gongdi.init(str.split(':')[1])
          })
        })
      } else if (str.startsWith('shequ')) {
        let that = this
        graphic.on('click', function (e) {
          that.shequ = true
          that.$nextTick(() => {
            that.$refs.shequ.init(str.split(':')[1])
          })
        })
      } else {
        graphic.bindPopup(str)
      }
      layers.feature.addGraphic(graphic)
      window.map.setCameraView({ lat: Number(lat), lng: Number(lng), alt: 10000})
    },
    getVideo: function (channelId) {
      let params = {
        'token': this.videoToken,
        'channelId': channelId
      }
      fetchVideo(params).then(res => {
        if (res.code === 1) {
          const videoUrl = res.data.url
          if (videoUrl) {
            if (this.currentPlayer === 'player') {
              this.videoUrl = videoUrl
              this.videoShow = true
              this.videoPlay1(videoUrl)
              this.currentPlayer = 'player'
            }
          } else {
            alert('no videoUrl')
          }
        }
      })
    },
    // 视频播放1
    videoPlay1 (videoUrl) {
      let id = 'player-con'
      !this.player && (this.player = new Aliplayer({
        id: id,
        width: '100%',
        height: '100%',
        autoplay: true, // 自动播放
        isLive: true,
        // rePlay: true,  // 重复播放
        // 支持播放地址播放,此播放优先级最高
        source: videoUrl
      }, function (player) {
        console.log('播放器创建好了。')
      }))
      // 切换视频地址
      this.player && this.player.loadByUrl(this.videoUrl)
      // 播放器暂停/播放
      var _video = document.querySelector('video')
      this.player.on('play', function (e) {
        _video.removeEventListener('click', play)
        _video.addEventListener('click', pause)
      })
      this.player.on('pause', function (e) {
        _video.removeEventListener('click', pause)
        _video.addEventListener('click', play)
      })
      function play () {
        if (this.player) this.player.play()
      }
      function pause () {
        if (this.player) this.player.pause()
      }
    },
    async drawGeoPolygon (code, key) {
      fetchGeoInfo(code, key).then(response => {
        this.data.polygon = response.features
        for (let i = 0; i < this.data.polygon.length; i++) { // this.data.polygon.length
          var items = this.data.polygon[i].geometry.coordinates[0][0]
          let graphic = new mars3d.graphic.PolygonEntity({
            positions: items,
            style: {
              color: '#bebebe',
              opacity: 0.5,
              outline: true,
              outlineWidth: 2,
              outlineColor: '#46617b'
            }
          })
          layers.polygon.addGraphic(graphic)
        }
      })
    },
    async drawPolygon (code, key) {
      fetchFeatureInfo(code, key).then(response => {
        this.data.polygon = response.data.data[0].data
        for (let i = 0; i < this.data.polygon.length; i++) { // this.data.polygon.length
          var items = []
          var str = this.data.polygon[i].GEO
          if (str.startsWith('POLYGON')) {
            str = str.substr(str.indexOf('(') + 2)
            str = str.substr(0, str.length - 2)
            items = str.split(',')
            items = items.map(item => {
              var arr = item.substr(1).split(' ')
              if (arr.length === 3) {
                arr.splice(0, 1)
              }
              if (arr[1].endsWith(')')) {
                arr[1] = arr[1].substr(0, arr[1].length - 1)
              }
              return arr
            })
            let graphic = new mars3d.graphic.PolygonEntity({
              positions: items,
              style: {
                color: '#bebebe',
                opacity: 0.5,
                outline: true,
                outlineWidth: 2,
                outlineColor: '#46617b'
              }
            })
            layers.polygon.addGraphic(graphic)
          } else if (str.startsWith('MULTIPOLYGON')) {
            str = str.substr(str.indexOf('(') + 2)
            str = str.substr(0, str.length - 2)
            var list = str.split('),(')
            for (let j = 0; j < list.length; j++) {
              list[j] = list[j].substr(1, list[j].length - 2)
              items = list[j].split(',')
              items = items.map(item => {
                var arr = item.substr(1).split(' ')
                if (arr.length === 3) {
                  arr.splice(0, 1)
                }
                if (arr[1].endsWith(')')) {
                  arr[1] = arr[1].substr(0, arr[1].length - 1)
                }
                return arr
              })
              let graphic = new mars3d.graphic.PolygonEntity({
                positions: items,
                style: {
                  color: '#bebebe',
                  opacity: 0.5,
                  outline: true,
                  outlineWidth: 2,
                  outlineColor: '#46617b'
                }
              })
              layers.polygon.addGraphic(graphic)
            }
          }
        }
      })
    },
    async getBlockPoints () {
      const today = dateToString(new Date(), 'y-m-d')
      const sevenday = dateToString(getLastWeek(), 'y-m-d')
      const params = {params: [sevenday, today]}
      fetchBlockPoints(params).then(response => {
        if (response.code === 200) {
          this.data.feature = response.data
          var list = this.data.feature.map(item => {
            let str = item.point.substr(item.point.indexOf('(') + 1)
            str = str.substr(0, str.length - 1)
            var items = str.split(' ')
            return { lng: parseFloat(items[0]), lat: parseFloat(items[1]), value: Number(item.speed) }
          })
          layers.heatLayer = new mars3d.layer.HeatLayer({
            positions: list,
            heatStyle: {
              radius: 170,
              blur: 0.85
            },
            style: {
              opacity: 1.0,
              clampToGround: true
            },
            redrawZoom: true,
            flyTo: true
          })
          window.map.addLayer(layers.heatLayer)
        }
      })
    },
    changeScreen (val) {
      if (val.fullName === '社会治理') {
        this.showFrame = true
        this.$refs.mapframe.reloadUrl(document.location.toString(), 'http://11.100.6.231:9999/bigScreen/#/grid?areaCode%3D360783%26ticket%3D')
      } else {
        this.showFrame = true
        this.$refs.mapframe.reloadUrlBase(val.url)
      }
    },
    async getEventPoints () {
      var style = {
        width: 15,
        material: mars3d.MaterialUtil.createMaterialProperty(mars3d.MaterialType.LineFlow, {
          color: '#ff3426',
          repeat: new Cesium.Cartesian2(20, 1),
          image: '../static/image/line.png',
          speed: 25
        })
      }
      fetchEventPoints().then(response => {
        if (response.code === 200) {
          this.data.feature = response.data
          for (let i = 0; i < this.data.feature.length; i++) {
            let items = this.data.feature[i].lines.split(';')
            items = items.map(item => {
              return item.split(',')
            })
            var graphic = new mars3d.graphic.PolylineEntity({
              positions: items,
              style: style
            })
            if (graphic.distance < 100) continue
            layers.feature.addGraphic(graphic)
          }
        }
      })
    },
    async drawGeoServer (typename, key, value, style) {
      if (style === 'none') {
        layers.tileLayer = new mars3d.layer.GeoJsonLayer({
          url: 'http://11.100.6.5:8084/services/geoserver/gz-shp/ows?service=WFS&request=GetFeature&maxFeatures=20&outputFormat=application/json&' +
            'typeName=' + typename +
            '&F-Auth-Key=' + key,
          symbol: {
            type: 'polygonP', // 大数据面类型，效率高
            styleOptions: {
              color: '#bebebe',
              opacity: 0.5,
              outline: true,
              outlineWidth: 2,
              outlineColor: '#46617b'
            }
          },
          flyTo: true
        })
      } else if (style === 'line') {
        layers.tileLayer = new mars3d.layer.GeoJsonLayer({
          url: 'http://11.100.6.5:8084/services/geoserver/gz-shp/ows?service=WFS&request=GetFeature&maxFeatures=20&outputFormat=application/json&' +
            'typeName=' + typename +
            '&F-Auth-Key=' + key,
          symbol: {
            type: 'polylineP', // 大数据面类型，效率高
            styleOptions: {
              color: value,
              opacity: 1,
              width: 2
            }
          },
          flyTo: true
        })
      } else if (style === 'line1') {
        layers.tileLayer = new mars3d.layer.GeoJsonLayer({
          url: 'http://11.100.6.5:8084/services/resource/singleSearch/' +
            typename + '?F-Auth-Key=' + key,
          symbol: {
            type: 'polylineP', // 大数据面类型，效率高
            styleOptions: {
              color: value,
              opacity: 1,
              width: 2
            }
          },
          flyTo: true
        })
      } else if (style === 'polygon') {
        layers.tileLayer = new mars3d.layer.GeoJsonLayer({
          url: 'http://11.100.6.5:8084/services/geoserver/gz-shp/ows?service=WFS&request=GetFeature&maxFeatures=20&outputFormat=application/json&' +
            'typeName=' + typename +
            '&F-Auth-Key=' + key,
          symbol: {
            styleOptions: {
              fill: true,
              color: '#bebebe',
              opacity: 0.5,
              outline: true,
              outlineWidth: 2,
              outlineColor: '#46617b',
              label: {
                // 面中心点，显示文字的配置
                text: value, // 对应的属性名称
                opacity: 1,
                font_size: 18,
                font_family: '宋体',
                color: '#00f5ff',
                font_weight: 'bold',
                font_style: 'normal',
                scaleByDistance: true,
                scaleByDistance_far: 20000000,
                scaleByDistance_farValue: 0.1,
                scaleByDistance_near: 1000,
                scaleByDistance_nearValue: 1,
                visibleDepth: false
              }
            }
          },
          flyTo: true
        })
      }
      window.map.addLayer(layers.tileLayer)
    }
  }
}
</script>

<style rel="stylesheet/css" scoped>
.single-map-container{
  //height: 1080px;
  //width:7680px;
  width:100%;
  height:100%;
  position:relative
}
/deep/ .mars3d-popup-close-button {
  top: 2em;
  right: 3em;
}
/deep/ .mars3d-popup{
  position: absolute;
  left: 12.6em;
}
/deep/ .mars3d-popup-content-wrapper {
  box-shadow: 0 0px 0px rgba(0,0,0,0);
  max-height: 1000px;
}
/deep/ .mars3d-popup-background {
  background-color: #00000000;
  background: url("@/assets/images/map/info-bg.png") no-repeat;
  background-size: 100% 100%
}
/deep/.mars3d-popup-close-button{
  top: 10px;
}
.left{
  position:absolute;left:30.3%;z-index:100000;
}
.button {
  float: left;
  min-width: 250px;
  min-height: 80px;
  line-height: 80px;
  vertical-align: middle;
  position: relative;
  z-index: 10000;
  -webkit-backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}
.button--round-s {
  border-radius: 5px;
}
.button--border-thin {
  border: 1px solid;
}
.left-screen{
  width:3072px !important;
  height:960px !important;
  z-index:999999999;
  position: absolute;
  top: 0 !important;
  left: 30% !important;
}
.gongdi{
  width:1500px !important;
  height:900px !important;
  z-index:999999999;
  position: absolute;
  top: -20px !important;
  left: 34% !important;
}
.videoBox{
  position:absolute;
  bottom:0;
  right: 33.3% !important;
  z-index:999999999;
  width:3rem;
  height:2rem;
  background:#000000;
  display:flex;
  align-items: start;
  flex-wrap: wrap;
  .videoBox-subBox{
    width: 100%;
    height:100%;
    position:relative;
  }
}
.videoClose{
  position: absolute;
  right: .05rem;
  top: .06rem;
  display: inline-block;
  color:#fff;
  font-size: .09rem;
  z-index:999;
  cursor: pointer;
}
.btn_bottom{
  position: absolute !important;
  text-align:center;
  width: 100%;
  height:70px;
  z-index: 1000;
  position: fixed; bottom: 0; left: 0;right:0;
  .bottom_inner{
    height: 2.5em;
    position: relative;
    margin: 0px auto;
    text-align: center
  }
}
.button{
  cursor: pointer;
  color: #fff;
  background-size: 100% 100%;
  text-align: center;
}
.bottom-btn{
  width: 10em;
  height: 2.5em;
  float: left;
  margin-left: 1em;
  font-size: 0.088rem;
}
.bottom-select{
  background: url("@/assets/images/button/bottom_choose.png") no-repeat;
  background-size: 100% 100%;
  color: white;
  transform-origin: center bottom;
}
.bottom-no-select{
  background: url("@/assets/images/button/bottom_normal.png") no-repeat;
  background-size: 100% 100%;
  color: #FFFFFF;
  transform-origin: center bottom;
}
.btn-group-map{
  width:10%;
  position:absolute;
  bottom:8%;
  left:46%;
  z-index: 1000000;
  /*p{*/
  /*display: none;*/
  /*}*/
}
.btn-group-map:hover{
  /*p{*/
  /*display: block;*/
  /*}*/
}
.map-frame{
  position: absolute;
  width: 28.5% !important;
  height: 95% !important;
  /*height: 100%;*/
  top: 0%;
  left: 35.9%;
  z-index: 10000000;
}
.videoBox{
  position:absolute;
  bottom:0;
  right:0;
  z-index:999;
  width:3.8rem;
  height:2.55rem;
  background:#000000;
  display:flex;
  align-items: start;
  flex-wrap: wrap;
  .videoBox-subBox{
    width: 100%;
    height:100%;
    position:relative;
  }
}
.videoClose{
  position: absolute;
  right: .05rem;
  top: .06rem;
  display: inline-block;
  color:#fff;
  font-size: .09rem;
  z-index:999;
  cursor: pointer;
}
ul {
  margin: 0;
  padding: 0;

}

.clearfloat::after {
  display: block;
  clear: both;
  content: "";
  visibility: hidden;
  height: 0;
}

.tab-list {
  position: relative;
}

.tab-list .tab-itom {
  float: left;
  list-style: none;
  margin-right: 4px;
}

.tab-itom .test-label {
  position: relative;
  display: block;
  width: 85px;
  height: 27px;
  border: 1px solid transparent;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  line-height: 27px;
  text-align: center;
  background: #e7e8eb;
}

.tab-itom .tab-box {
  /* 设置绝对定位方便定位相对于tab-list栏的位置，同时为了可以使用z-index属性 */
  position: absolute;
  left: 0;
  top: 28px;
  width: 488px;
  height: 248px;
  border: 1px solid #cbcccc;
  border-radius: 5px;
  border-top-left-radius: 0px;
  background: #fff;
  /* 设置层级最低方便选中状态遮挡 */
  z-index: 0;
}
/* 用绝对定位使按钮脱离文档流，透明度设置为0将其隐藏 */
input[type="radio"] {
  position: absolute;
  opacity: 0;
}
/* 利用选择器实现  tab切换 */

/* 当radio为选中状态时设置它的test-label兄弟元素的属性 */
input[type="radio"]:checked + .test-label {
  /* 为了修饰存在的边框背景属性 */
  border-color: #cbcccc;
  border-bottom-color: #fff;
  background: #fff;
  /* 为了修饰存在的层级使下边框遮挡下方div的上边框 */
  z-index: 10;
}
/* 当radio为选中状态时设置与它同级的tab-box元素的显示层级 */
input[type="radio"]:checked ~ .tab-box {
  /* 选中时提升层级，遮挡其他tab页达到选中切换的效果 */
  z-index: 5;
}
.triangle-up {
  width: 0;
  height: 0;
  border-left: 0.04rem solid transparent;
  border-right: 0.04rem solid transparent;
  border-bottom: 0.08rem solid #2c8aea;
  margin: 0rem 0.05rem;
  cursor: pointer
}
.triangle-down {
  width: 0;
  height: 0;
  border-left: 0.04rem solid transparent;
  border-right: 0.04rem solid transparent;
  border-top: 0.08rem solid #2c8aea;
  margin: 0rem 0.05rem;
  cursor: pointer
}
.deletebtn{
  position:absolute;top:1em;right:31%;z-index:100000;width: 0.485rem;height:0.2rem;
}
.top-title{
  position:absolute;
  top:0.5em;
  left:43%;
  z-index:100000;
  width: 14%;
  height:3em;
  justify-content: center;align-items: center;
  display: flex;
  .block{
    width: 25%;
    text-align: center;
    cursor: pointer;
    justify-content: center;align-items: center;
  }
}
.search-content{
  width: 300px;height: 200px;
  background-color: #00192e;border: 1px solid #2c8aea;
  display: flex;flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;align-content: center;
}
</style>
