diff --git a/src/api/map.js b/src/api/map.js
index e0753aa..d43fd17 100644
--- a/src/api/map.js
+++ b/src/api/map.js
@@ -25,6 +25,7 @@
 
 export function fetchFeatureInfo (code, key) {
   return request({
+    // baseURL: config.mockUrl,
     baseURL: config.jingyiService,
     url: 'services/resource/singleSearch/' + code,
     params: {

diff --git a/src/api/map.js b/src/api/map.js
index e0753aa..d43fd17 100644
--- a/src/api/map.js
+++ b/src/api/map.js
@@ -25,6 +25,7 @@
 
 export function fetchFeatureInfo (code, key) {
   return request({
+    // baseURL: config.mockUrl,
     baseURL: config.jingyiService,
     url: 'services/resource/singleSearch/' + code,
     params: {
diff --git a/src/views/mapViews/mars3dMap-bak.vue b/src/views/mapViews/mars3dMap-bak.vue
new file mode 100644
index 0000000..929b517
--- /dev/null
+++ b/src/views/mapViews/mars3dMap-bak.vue
@@ -0,0 +1,1021 @@
+<template>
+  <div style="width: 100%; height:100%">
+    <div style="width:100%; height:100%;position:relative">
+      <div style="position:absolute;top:40px;left:50px;z-index:100000">
+        <div style="margin-left: 1em">
+          <img :src="require('@/assets/images/button/up.png')" style="width: 250px"/>
+        </div>
+        <div v-for="(value,key,index) in labels" :key="index">
+          <button2 v-model="layersShow[key]" @click.native="clickLabel(key)" :data="labels[key]"  @fetchData="fetchData">{{value.name}}</button2><br/>
+        </div>
+        <img :src="require('@/assets/images/button/down.png')" style="margin-left: 1em;padding-bottom: 1em;width: 250px"/>
+      </div>
+
+      <div style="position:absolute;top:40px;right:50px;z-index:100000">
+        <div style="margin-left: 1em">
+          <img :src="require('@/assets/images/button/up1.png')" style="width: 250px"/>
+        </div>
+        <div v-for="(value,key,index) in labelsRight" :key="index">
+          <button3 v-model="layersShowRight[key]" @click.native="clickLabelRight(key)" :data="labelsRight[key]"  @fetchData="fetchData">{{value.name}}</button3><br/>
+        </div>
+        <img :src="require('@/assets/images/button/down1.png')" style="margin-left: 1em;padding-bottom: 1em;width: 250px"/>
+      </div>
+
+      <div class="btn_bottom">
+        <div class="bottom_inner" :style="{width:bottom_btn.length*10+'em'}">
+          <div v-for="(value,index) in bottom_btn" class="bottom-btn" :class="bottom_choose[index]?'bottom-select':'bottom-no-select'" @click="bottom_click(index)">
+            <span style="line-height: 2.5em">{{value}}</span>
+          </div>
+        </div>
+      </div>
+      <div id="mars3dContainer" class="mars3d-container"/>
+      <map-frame v-show="showFrame"  ref="mapframe" class="map-frame" @watchChild="closeFrame"/>
+      <div v-show="videoShow" class="videoBox">
+        <div class="videoBox-subBox" v-show="videoShow">
+          <span class="videoClose" @click="videoShow = false;videoUrl = '';">关闭</span>
+          <div class="prism-player" id="player-con"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// 在需要用到mars3d的vue等页面直接引入并使用
+import * as mars3d from 'mars3d'
+import 'mars3d/dist/mars3d.css'
+import 'mars3d-heatmap/dist/mars3d-heatmap.js'
+
+import Button2 from '@/components/button/button2'
+import Button3 from '@/components/button/button3'
+import {fetchCarInfo, fetchFeatureInfo, fetchCarPostion} from '@/api/map'
+import {fetchBlockPoints, fetchEventPoints} from '@/api/smartTraffic'
+import { dateToString, getLastWeek } from '@/utils/formatDate'
+import 'cesium/Source/Widgets/widgets.css'
+import MapFrame from './mapFrame'
+import {fetchVideoToken, fetchFlushVideoToken, fetchVideo} from '@/api/camera'
+
+// 导入必须的样式表
+var Cesium = require('../../../node_modules/cesium/Source/Cesium')
+export default {
+  name: 'Mars3dMap',
+  components: {MapFrame, Button2, Button3},
+  data () {
+    return {
+      top: '250px',
+      showFrame: false,
+      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],
+      layersShowRight: [false, false],
+      labels: [
+        {
+          index: '01',
+          name: '地理信息',
+          children: [
+            {index: '11', name: '智慧社区', children: []},
+            {index: '12', name: '智慧教育', children: []},
+            {index: '13', name: '停车云', children: []},
+            {index: '14', name: '智慧工地', children: []},
+            {index: '15', name: '智慧园林', children: []}],
+          layersShow: [false, false, false, false, false]},
+        {
+          index: '02',
+          name: '物联网',
+          children: [
+            {index: '21', name: '智慧管网', children: ['电子标识器', '液位监测仪', '消防栓防盗水监测仪', '有害气体监测仪', '井盖状态监测仪', '噪声记录仪', '燃气智能监测终端', '数据集中器']},
+            {index: '22', name: '智慧工地', children: []},
+            {index: '23', name: '一卡通', children: []},
+            // {index: '24', name: '智慧社区', children: []},
+            {index: '25', name: '智慧园林', children: ['温湿度传感器', '水位检测器', 'PM2.5/PM10传感器']},
+            {index: '26', name: '智慧城管', children: []},
+            {index: '27', name: '智慧交通', children: []}],
+          layersShow: [false, false, false, false, false, false]},
+        {
+          index: '03',
+          name: '视频云',
+          children: [
+            {index: '31', name: '智慧交通', children: ['卡口', '电警', 'AR鹰眼']},
+            {index: '32', name: '智慧工地', children: []},
+            {index: '33', name: '智慧社区', children: []},
+            {index: '34', name: '智慧园林', children: []},
+            {index: '35', name: '智慧公安', children: []},
+            {index: '36', name: '智慧教育', children: []}],
+          layersShow: [false, false, false, false, false, false]
+        },
+        {
+          index: '04',
+          name: '一卡通',
+          children: [
+            {index: '41', name: '注册人数', children: []},
+            {index: '42', name: '使用人数', children: []},
+            {index: '43', name: '在线人数', children: []}],
+          layersShow: [false, false, false]
+        },
+        {
+          index: '05',
+          name: '共享交换',
+          children: [],
+          layersShow: []
+        }
+      ],
+      labelsRight: [
+        {
+          index: '',
+          name: '市域社会治理',
+          children: [
+            {index: '61', name: '人口', children: ['区域人口统计', '网格人口统计', '楼栋人口统计']},
+            {index: '62', name: '网格', children: ['综治网格', '疫情网格']},
+            {index: '63', name: '事件', children: ['社会治理事件', '城管执法事件']},
+            {index: '64', name: '交通', children: ['拥堵点分布', '交通事件分布', '高发事故点分布']}],
+          layersShowRight: [false, false, false, false]},
+        {
+          index: '',
+          name: '应急指挥调度',
+          children: [],
+          layersShowRight: []}
+      ],
+      data: {
+        feature: [],
+        polygon: []
+      },
+      layers: {
+        heatLayer: null,
+        feature: '',
+        polygon: ''
+      },
+      map: '',
+      cartimer: null
+    }
+  },
+  mounted () {
+    let _this = this
+    window.trail = _this.trail
+    window.getVideo = _this.getVideo
+    this.getVideoToken()
+    this.initmap()
+  },
+  methods: {
+    // 获取视频相关参数
+    getVideoToken () {
+      fetchVideoToken().then(res => {
+        if (res.code === 1) {
+          this.videoToken = res.data
+          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
+        }
+      })
+    },
+    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.layersShowRight = [false, false]
+      this.showFrame = false
+    },
+    clickLabel (val) {
+      this.layersShow = [false, false, false, false, false, false, false, false]
+      this.layersShowRight = [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
+          }
+        }
+      }
+      for (let i = 0; i < this.labelsRight.length; i++) {
+        for (let j = 0; j < this.labelsRight[i].layersShowRight.length; j++) {
+          this.labelsRight[i].layersShowRight[j] = false
+        }
+      }
+    },
+    clickLabelRight (val) {
+      this.layersShow = [false, false, false, false, false, false, false, false]
+      this.layersShowRight = [false, false]
+      this.layersShowRight[val] = true
+      for (let i = 0; i < this.labels.length; i++) {
+        for (let j = 0; j < this.labels[i].layersShow.length; j++) {
+          this.labels[i].layersShow[j] = false
+        }
+      }
+      for (let i = 0; i < this.labelsRight.length; i++) {
+        if (i !== val) {
+          for (let j = 0; j < this.labelsRight[i].layersShowRight.length; j++) {
+            this.labelsRight[i].layersShowRight[j] = false
+          }
+        }
+      }
+      if (val === 1) {
+        console.log(this.$refs.mapframe)
+        this.showFrame = true
+        this.$refs.mapframe.reloadUrl()
+      }
+    },
+    initmap () {
+      var mapOptions = {
+        scene: {
+          // 默认视角参数
+          center: { lat: 25.823284, lng: 114.907684, alt: 2008, heading: 360, pitch: -31 },
+          // 以下是Cesium.Globe对象相关参数
+          globe: {
+            depthTestAgainstTerrain: false, // 是否启用深度监测
+            baseColor: '#00192f', // 地球默认背景色
+            showGroundAtmosphere: true, // 是否在地球上绘制的地面大气
+            enableLighting: false // 是否显示昼夜区域
+          }
+          // 以下是Cesium.ScreenSpaceCameraController对象相关参数
+          // cameraController: {
+          //   zoomFactor: 3.0, // 鼠标滚轮放大的步长参数
+          //   minimumZoomDistance: 1, // 地球放大的最小值（以米为单位）
+          //   maximumZoomDistance: 50000000, // 地球缩小的最大值（以米为单位）
+          //   enableRotate: true, // 2D和3D视图下，是否允许用户旋转相机
+          //   enableTranslate: true, // 2D和哥伦布视图下，是否允许用户平移地图
+          //   enableTilt: true, // 3D和哥伦布视图下，是否允许用户倾斜相机
+          //   enableZoom: true, // 是否允许 用户放大和缩小视图
+          //   enableCollisionDetection: true // 是否允许 地形相机的碰撞检测
+          // }
+        },
+        basemaps: [
+          // {
+          //   id: 10,
+          //   name: "地图底图",
+          //   type: "group",
+          // },
+          {
+            crs: 'gcj',
+            enablePickFeatures: false,
+            icon: 'http://mars3d.cn/example/img/basemaps/bd-c-midnight.png',
+            id: 2017,
+            name: '蓝色底图(GCJ02偏移)',
+            type: 'arcgis',
+            url: 'http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer'
+          }
+
+          // {
+          //   id: 2017,
+          //   pid: 10,
+          //   name: "蓝色底图",
+          //   icon: "//data.mars3d.cn/img/thumbnail/basemap/bd-c-midnight.png",
+          //   type: "arcgis",
+          //   layer: "vec",
+          //   chinaCRS: "GCJ02",
+          //   invertColor: false,
+          //   filterColor: "#0a5cad", // 选用更纯的蓝色滤镜
+          //   brightness: 0.95,       // 保持适中亮度
+          //   contrast: 1.1,          // 适度增强对比度
+          //   gamma: 1.0,             // 正常gamma值，避免画面过暗
+          //   hue: 0.67,              // 精确设置到蓝色色调区间
+          //   saturation: 1.2         // 增强蓝色饱和度
+          // },
+          // {
+          //   pid: 10,
+          //   name: "微软影像",
+          //   icon: "//data.mars3d.cn/img/thumbnail/basemap/bingAerial.png",
+          //   type: "bing",
+          //   layer: "Aerial",
+          // },
+          // {
+          //   pid: 10,
+          //   name: "黑色底图",
+          //   icon: "//data.mars3d.cn/img/thumbnail/basemap/bd-c-dark.png",
+          //   type: "gaode",
+          //   layer: "vec",
+          //   chinaCRS: "GCJ02",
+          //   invertColor: true,
+          //   filterColor: "#909090",
+          //   brightness: 0.6,
+          //   contrast: 1.8,
+          //   gamma: 0.3,
+          //   hue: 1,
+          //   saturation: 0,
+          // },
+          // {
+          //   pid: 10,
+          //   name: '天地图影像',
+          //   icon: '//data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
+          //   type: 'group',
+          //   layers: [
+          //     {
+          //       name: '底图',
+          //       type: 'tdt',
+          //       layer: 'img_d'
+          //     },
+          //     {
+          //       name: '注记',
+          //       type: 'tdt',
+          //       layer: 'img_z'
+          //     }
+          //   ],
+          //   show: true
+          // }
+        ],
+        layers: [
+          {
+            name: '行政区划界线',
+            type: 'xyz',
+            url: 'https://t{s}.tianditu.gov.cn/DataServer?T=ibo_w&x={x}&y={y}&l={z}&tk=9ae78c51a0a28f06444d541148496e36',
+            subdomains: '01234567',
+            maximumLevel: 10,
+            show: true,
+            id: 1,
+            templateValues: {
+              dataServer: 'http://data.marsgis.cn'
+            },
+            zIndex: 0
+          },
+          // {
+          //   name: '天地图注记',
+          //   type: 'tdt',
+          //   // img_d img_z  vec_d   vec_z
+          //   layer: 'img_d',
+          //   key: [
+          //     // '9ae78c51a0a28f06444d541148496e36'
+          //     '216ee92889e17ab1b083fae665d522b8'
+          //   ],
+          //   show: true,
+          //   // id: 2,
+          //   // templateValues: {
+          //   //   dataServer: 'http://data.marsgis.cn'
+          //   // }
+          // },
+          {
+            name: '天地图注记',
+            type: 'tdt',
+            // img_d img_z  vec_d   vec_z
+            layer: 'img_d',
+            key: [
+              // '9ae78c51a0a28f06444d541148496e36'
+              '216ee92889e17ab1b083fae665d522b8'
+            ],
+            show: true,
+            // id: 2,
+            // templateValues: {
+            //   dataServer: 'http://data.marsgis.cn'
+            // },
+            zIndex: 2
+          },
+          // {
+          //   name: '天地图注记',
+          //   type: 'tdt',
+          //   // img_d img_z  vec_d   vec_z
+          //   layer: 'img_z',
+          //   key: [
+          //     // '9ae78c51a0a28f06444d541148496e36'
+          //     '216ee92889e17ab1b083fae665d522b8'
+          //   ],
+          //   show: true,
+          //   // id: 2,
+          //   // templateValues: {
+          //   //   dataServer: 'http://data.marsgis.cn'
+          //   // },
+          //   zIndex: 3
+          // }
+        ]
+      }
+      // 创建三维地球场景
+      var map = new mars3d.Map('mars3dContainer', mapOptions)
+      map.basemap = 2017
+      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]
+      this.map = map
+      // 加动态图层
+      this.layers.feature = new mars3d.layer.GraphicLayer()
+      this.layers.polygon = new mars3d.layer.GraphicLayer()
+      map.addLayer(this.layers.feature)
+      map.addLayer(this.layers.polygon)
+    },
+    async getCar () {
+      this.layers.polygon.clear()
+      fetchCarInfo().then(response => {
+        if (response.code === 200) {
+          this.data.feature = response.data
+          this.layers.feature.clear()
+          for (let i = 0; i < this.data.feature.length; i++) {
+            var graphic = new mars3d.graphic.ModelEntity({
+              name: this.data.feature[i].simcardnum,
+              position: [Number(this.data.feature[i].coordinatex), Number(this.data.feature[i].coordinatey)],
+              style: {
+                url: '../static/model/zhatuchelvse.gltf',
+                scale: 10,
+                minimumPixelSize: 40,
+                label: {
+                  text: this.data.feature[i].vehiclenum,
+                  font_size: 18,
+                  color: '#ffffff',
+                  pixelOffsetY: -50,
+                  distanceDisplayCondition: true,
+                  distanceDisplayCondition_far: 500000,
+                  distanceDisplayCondition_near: 1000
+                }
+              }
+            })
+            var items = [{name: '车牌号', value: 'vehiclenum'}, {name: '公司', value: 'name'}]
+            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: #00b3eb">渣土车分布</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>`
+            }
+            var simcardnum = '\'' + this.data.feature[i].simcardnum + '!' + this.data.feature[i].vehiclenum + '\''
+            // var vehiclenum = this.data.feature[i].vehiclenum
+            str += `<button style="background-color: #e6a23c;border-color: #e6a23c;color: white;padding: 5px 15px;border-radius: 4px;margin-left: 25em"
+                    id="btntrail" onclick="trail(${simcardnum})">轨 迹</button>`
+            str += `</div>`
+            graphic.bindPopup(str)
+            this.layers.feature.addGraphic(graphic)
+          }
+        }
+      })
+    },
+    trail: function (str) {
+      var val = str.split('!')
+      console.log(val)
+      this.map.closePopup()
+      const now = dateToString(new Date(), 'y-m-d-h-m-s')
+      const cthour = new Date()
+      cthour.setTime(cthour.getTime() - 3599 * 1000)
+      const hour = dateToString(cthour, 'y-m-d-h-m-s')
+      const params = { params: [val[0], hour, now] }
+      // const params = { params: [val[0], '2021-05-16 16:00:11', '2021-05-16 16:59:11'] }
+      fetchCarPostion(params).then(response => {
+        if (response.code === 200) {
+          if (response.data.length !== 0) {
+            var data = response.data.map(item => { return [item.coordinateX, item.coordinateY, 0] })
+            var flydata = {
+              name: '贴地表表面漫游',
+              speed: 300,
+              positions: data,
+              model: {
+                url: '../static/model/zhatuchelvse.gltf',
+                heading: 180,
+                minimumPixelSize: 50,
+                show: true
+              },
+              label: {
+                text: val[1],
+                font_size: 18,
+                color: '#ffffff',
+                pixelOffsetY: -50,
+                show: true
+              },
+              path: {
+                color: '#32c3ff',
+                width: 3,
+                show: true
+              },
+              camera: {
+                type: 'gs',
+                pitch: -30,
+                radius: 5000
+              },
+              interpolation: true, // 是否setInterpolationOptions插值
+              clockLoop: false // 是否循环播放
+            }
+            var roamLine = new mars3d.graphic.RoamLine(flydata)
+            this.layers.feature.addGraphic(roamLine)
+            roamLine.start()
+          }
+        }
+      })
+    },
+    fetchData ({value}) {
+      this.layers.feature.clear()
+      this.layers.polygon.clear()
+      if (this.layers.heatLayer) {
+        this.map.removeLayer(this.layers.heatLayer, true)
+      }
+      clearInterval(this.cartimer)
+      if (typeof (value) !== 'string') {
+        if (value.children.length !== 0) {
+          this.bottom_btn = value.children
+          this.bottom_choose = this.bottom_btn.map(item => { return false })
+          return
+        }
+        this.bottom_btn = []
+        this.bottom_choose = []
+      }
+      if (value.index === '27') {
+        var that = this
+        this.getCar()
+        this.cartimer = setInterval(function () { that.getCar() }, 100000)
+      } else if (value === '电子标识器') {
+        this.singleSearch(value, 'B-ZH-0101', '3KNOXR30E6', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '标识器ID号', value: 'SJBH'}, {name: '标识器型号', value: 'SBXH'}, {name: '所属道路', value: 'SSSJFW'} ], false)
+      } else if (value === '液位监测仪') {
+        this.singleSearch(value, 'B-ZH-0104', 'M1KOD38358', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'} ], false)
+      } else if (value === '消防栓防盗水监测仪') {
+        this.singleSearch(value, 'B-ZH-0107', 'IVU59JC84I', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'} ], false)
+      } else if (value === '有害气体监测仪') {
+        this.singleSearch(value, 'B-ZH-0109', 'VB5P0VER2I', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'} ], false)
+      } else if (value === '井盖状态监测仪') {
+        this.singleSearch(value, 'B-ZH-0103', 'A376X56055', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'} ], false)
+      } else if (value === '噪声记录仪') {
+        this.singleSearch(value, 'B-ZH-0106', '1Y059A446T', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'} ], false)
+      } else if (value === '燃气智能监测终端') {
+        this.singleSearch(value, 'B-ZH-0108', '556018Q5T0', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'} ], false)
+      } else if (value === '数据集中器') {
+        this.singleSearch(value, 'B-ZH-0110', 'RGW6U23D5A', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'} ], false)
+      } else if (value === '温湿度传感器') {
+        this.singleSearch(value, 'B-ZH-0918', '6439YG6E08', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], false)
+      } else if (value === '水位检测器') {
+        this.singleSearch(value, 'B-ZH-0919', '3EA9LY478S', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], false)
+      } else if (value === 'PM2.5/PM10传感器') {
+        this.singleSearch(value, 'B-ZH-0922', 'Q3I1MZ82OR', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], false)
+      } else if (value.index === '23') {
+        this.singleSearch('一卡通门禁', 'B-ZH-1301', '6Z6214RC1P', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '门禁名称', value: 'YSMC'}, {name: '门禁地点', value: 'S_DZQC'}, {name: '所属企业', value: 'SJYSMC'}, {name: '设备类型', value: 'XXDLXMC'} ], false)
+      } else if (value.index === '26') {
+        this.singleSearch(value.index, 'B-ZH-0403', 'G2YQEM396G', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '路灯编号', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'} ], false)
+      } else if (value.index === '22') {
+        this.singleSearch('环境监测', 'B-ZH-0706', 'JFK37I1F45', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'} ], false)
+      } else if (value === '城管执法事件') {
+        this.singleSearch(value, 'B-ZH-0402', '4X137UY07J', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '案件名称', value: 'YSMC'}, {name: '案件分类', value: 'XXDLXMC'}, {name: '案件详情', value: 'S_DZQC'} ], false)
+      } else if (value.index === '11') {
+        this.singleSearch('社区分布', 'B-ZH-1001', 'J765870KFV', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '社区名称', value: 'name'}, {name: '社区地址', value: 'S_DZQC'} ], false)
+        // [ {name: '社区名称', value: 'SSSJFW'}, {name: '社区地址', value: 'S_DZQC'} ], false)
+        this.drawPolygon('B-ZH-1004', 'VM0V81395N')
+      } else if (value.index === '12') {
+        this.singleSearch('智慧教育', 'B-ZH-jy', 'J765870KFV', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '学校名称', value: 'name'}, {name: '学校地址', value: 'S_DZQC'} ], false)
+        this.drawPolygon('B-ZH-1004', 'VM0V81395N')
+      } else if (value.index === '13') {
+        this.singleSearch('停车场分布', 'B-ZH-1701', '521355523B', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '停车场名称', value: 'name'}, {name: '停车场地址', value: 'location'} ], false)
+        this.drawPolygon('B-ZH-1702', 'VM0V81395N')
+      } else if (value.index === '14') {
+        this.singleSearch('工地分布', 'B-ZH-0801', '05VA87X3PX', require('@/assets/images/icon-camera-blu.png'),
+          [{name: '工地名称', value: 'name'}, {name: '工程类别', value: 'typename'}, {name: '工程状态', value: 'statusname'}], false)
+        this.drawPolygon('B-ZH-0702', '2V026Q9MNX')
+      } else if (value.index === '15') {
+        // this.singleSearch('公园分布', 'B-ZH-0901', '604NVD1231', require('@/assets/images/icon-camera-blu.png'),
+        //   [ {name: '公园名称', value: 'SSSJFW'}, {name: '公园地址', value: 'S_DZQC'} ], false)
+        // this.drawPolygon('B-ZH-0928', '5CAQF6UY5V')
+        this.singleSearch('智慧园林', 'B-ZH-0901', '604NVD1231', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '名称', value: 'name'}, {name: '等级', value: 'levelname'}, {name: '地址', value: 'location'} ], false)
+        this.drawPolygon('B-ZH-0928', '5CAQF6UY5V')
+      } else if (value === '疫情网格') {
+        this.drawGeoServer()
+      } else if (value === '拥堵点分布') {
+        this.getBlockPoints()
+      } else if (value === '交通事件分布') {
+        this.getEventPoints()
+      } else if (value === '卡口') {
+        this.singleSearch(value, 'B-ZH-0203', 'A0QT21OBL5', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '设备名称', value: 'YSMC'}, {name: '路口名称', value: 'SSSJFW'}, {name: '设备地点', value: 'S_DZQC'} ], false)
+      } else if (value === '电警') {
+        this.singleSearch(value, 'B-ZH-0202', '6R7A01XHQ0', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '设备名称', value: 'YSMC'}, {name: '路口名称', value: 'SSSJFW'}, {name: '设备地点', value: 'S_DZQC'} ], false)
+      } else if (value === 'AR鹰眼') {
+        this.singleSearch(value, 'B-ZH-0216', 'G818P6U95C', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '设备名称', value: 'YSMC'}, {name: '路口名称', value: 'SSSJFW'}, {name: '设备地点', value: 'S_DZQC'} ], false)
+      } else if (value.index === '32') { // 工地
+        this.singleSearch('摄像头', 'B-ZH-0403', 'G2YQEM396G', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], false)
+      } else if (value.index === '33') { // 社区
+        this.singleSearch('摄像头', 'B-ZH-1502', '76L47133KX', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], true)
+      } else if (value.index === '34') { // 园林
+        this.singleSearch('摄像头', 'B-ZH-1504', '3LKWWUIX97', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'}], true)
+      } else if (value.index === '35') { // 公安
+        this.singleSearch('公安视频', 'B-ZH-0301', 'P5SM5LIPDU', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'}], false)
+      } else if (value.index === '36') { // 教育
+        this.singleSearch('摄像头', 'B-ZH-1503', '82TO11RNVO', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], true)
+      }
+    },
+    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++) {
+          if (!this.data.feature[i].X || !this.data.feature[i].Y) {
+            continue
+          }
+          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;">
+          <div style="font-size: 0.085rem;font-weight: bold;padding-bottom: 10px;color: #00b3eb">${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)
+          this.layers.feature.addGraphic(graphic)
+          if (i === 0) {
+            this.map.setCameraView({ lat: Number(this.data.feature[i].Y), lng: Number(this.data.feature[i].X), alt: 20000})
+          }
+        }
+      })
+    },
+    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 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 => {
+              return item.substr(1).split(' ')
+            })
+            let graphic = new mars3d.graphic.PolygonEntity({
+              positions: items,
+              style: {
+                color: '#bebebe',
+                opacity: 0.5,
+                outline: true,
+                outlineWidth: 2,
+                outlineColor: '#46617b'
+              }
+            })
+            this.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 => {
+                return item.substr(1).split(' ')
+              })
+              let graphic = new mars3d.graphic.PolygonEntity({
+                positions: items,
+                style: {
+                  color: '#bebebe',
+                  opacity: 0.5,
+                  outline: true,
+                  outlineWidth: 2,
+                  outlineColor: '#46617b'
+                }
+              })
+              this.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) }
+          })
+          this.layers.heatLayer = new mars3d.layer.HeatLayer({
+            positions: list,
+            heatStyle: {
+              radius: 170,
+              blur: 0.85
+            },
+            style: {
+              opacity: 1.0,
+              clampToGround: true
+            },
+            redrawZoom: true,
+            flyTo: true
+          })
+          this.map.addLayer(this.layers.heatLayer)
+        }
+      })
+    },
+    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
+            this.layers.feature.addGraphic(graphic)
+          }
+        }
+      })
+    }
+    // async drawGeoServer(){
+    //   var 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=gz-shp:YJFKWK2021&F-Auth-Key=YEF6D3NF1M',
+    //     // url: 'http://11.100.6.5:8084/services/geoserver/gz-shp/ows?service=WFS&request=GetFeature&maxFeatures=20&outputFormat=application/json&typeName=gz-shp:A_JJYZQ_XZJXZQ_PG_1000&F-Auth-Key=46EBBN247N',
+    //   })
+    //
+    //   this.map.addLayer(tileLayer)
+    // }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+   /deep/ .mars3d-popup-close-button {
+    top: 2em;
+    right: 3em;
+  }
+  /deep/ .mars3d-popup{
+    position: absolute;
+    /*top: 13.3em;*/
+    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/info-bg.png") no-repeat;
+    background-size: 100% 100%
+  }
+  /deep/.mars3d-popup-close-button{
+    top: 10px;
+  }
+  .button {
+    float: left;
+    min-width: 300px;
+    min-height: 100px;
+    line-height: 100px;
+    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;
+  }
+  button--saqui {
+    border-color: #ECEFF1;
+    overflow: hidden;
+    color: #fff;
+    background: #37474f;
+    -webkit-transition: background-color 0.3s ease-in, color 0.3s ease-in;
+    transition: background-color 0.3s ease-in, color 0.3s ease-in;
+    .button--inverted {
+      background: #fff;
+      color: #37474f;
+    }
+    button--inverted::after {
+      color: #fff;
+    }
+  }
+  .button--saqui::after {
+    content: attr(data-text);
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 1em 2em;
+    color: #37474f;
+    -webkit-transform-origin: -25% 50%;
+    transform-origin: -25% 50%;
+    -webkit-transform: rotate3d(0, 0, 1, 45deg);
+    transform: rotate3d(0, 0, 1, 45deg);
+    -webkit-transition: -webkit-transform 0.3s ease-in;
+    transition: transform 0.3s ease-in;
+  }
+  .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;
+  }
+   .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;
+   }
+  .map-frame{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0%;
+    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;
+   }
+</style>

diff --git a/src/api/map.js b/src/api/map.js
index e0753aa..d43fd17 100644
--- a/src/api/map.js
+++ b/src/api/map.js
@@ -25,6 +25,7 @@
 
 export function fetchFeatureInfo (code, key) {
   return request({
+    // baseURL: config.mockUrl,
     baseURL: config.jingyiService,
     url: 'services/resource/singleSearch/' + code,
     params: {
diff --git a/src/views/mapViews/mars3dMap-bak.vue b/src/views/mapViews/mars3dMap-bak.vue
new file mode 100644
index 0000000..929b517
--- /dev/null
+++ b/src/views/mapViews/mars3dMap-bak.vue
@@ -0,0 +1,1021 @@
+<template>
+  <div style="width: 100%; height:100%">
+    <div style="width:100%; height:100%;position:relative">
+      <div style="position:absolute;top:40px;left:50px;z-index:100000">
+        <div style="margin-left: 1em">
+          <img :src="require('@/assets/images/button/up.png')" style="width: 250px"/>
+        </div>
+        <div v-for="(value,key,index) in labels" :key="index">
+          <button2 v-model="layersShow[key]" @click.native="clickLabel(key)" :data="labels[key]"  @fetchData="fetchData">{{value.name}}</button2><br/>
+        </div>
+        <img :src="require('@/assets/images/button/down.png')" style="margin-left: 1em;padding-bottom: 1em;width: 250px"/>
+      </div>
+
+      <div style="position:absolute;top:40px;right:50px;z-index:100000">
+        <div style="margin-left: 1em">
+          <img :src="require('@/assets/images/button/up1.png')" style="width: 250px"/>
+        </div>
+        <div v-for="(value,key,index) in labelsRight" :key="index">
+          <button3 v-model="layersShowRight[key]" @click.native="clickLabelRight(key)" :data="labelsRight[key]"  @fetchData="fetchData">{{value.name}}</button3><br/>
+        </div>
+        <img :src="require('@/assets/images/button/down1.png')" style="margin-left: 1em;padding-bottom: 1em;width: 250px"/>
+      </div>
+
+      <div class="btn_bottom">
+        <div class="bottom_inner" :style="{width:bottom_btn.length*10+'em'}">
+          <div v-for="(value,index) in bottom_btn" class="bottom-btn" :class="bottom_choose[index]?'bottom-select':'bottom-no-select'" @click="bottom_click(index)">
+            <span style="line-height: 2.5em">{{value}}</span>
+          </div>
+        </div>
+      </div>
+      <div id="mars3dContainer" class="mars3d-container"/>
+      <map-frame v-show="showFrame"  ref="mapframe" class="map-frame" @watchChild="closeFrame"/>
+      <div v-show="videoShow" class="videoBox">
+        <div class="videoBox-subBox" v-show="videoShow">
+          <span class="videoClose" @click="videoShow = false;videoUrl = '';">关闭</span>
+          <div class="prism-player" id="player-con"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// 在需要用到mars3d的vue等页面直接引入并使用
+import * as mars3d from 'mars3d'
+import 'mars3d/dist/mars3d.css'
+import 'mars3d-heatmap/dist/mars3d-heatmap.js'
+
+import Button2 from '@/components/button/button2'
+import Button3 from '@/components/button/button3'
+import {fetchCarInfo, fetchFeatureInfo, fetchCarPostion} from '@/api/map'
+import {fetchBlockPoints, fetchEventPoints} from '@/api/smartTraffic'
+import { dateToString, getLastWeek } from '@/utils/formatDate'
+import 'cesium/Source/Widgets/widgets.css'
+import MapFrame from './mapFrame'
+import {fetchVideoToken, fetchFlushVideoToken, fetchVideo} from '@/api/camera'
+
+// 导入必须的样式表
+var Cesium = require('../../../node_modules/cesium/Source/Cesium')
+export default {
+  name: 'Mars3dMap',
+  components: {MapFrame, Button2, Button3},
+  data () {
+    return {
+      top: '250px',
+      showFrame: false,
+      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],
+      layersShowRight: [false, false],
+      labels: [
+        {
+          index: '01',
+          name: '地理信息',
+          children: [
+            {index: '11', name: '智慧社区', children: []},
+            {index: '12', name: '智慧教育', children: []},
+            {index: '13', name: '停车云', children: []},
+            {index: '14', name: '智慧工地', children: []},
+            {index: '15', name: '智慧园林', children: []}],
+          layersShow: [false, false, false, false, false]},
+        {
+          index: '02',
+          name: '物联网',
+          children: [
+            {index: '21', name: '智慧管网', children: ['电子标识器', '液位监测仪', '消防栓防盗水监测仪', '有害气体监测仪', '井盖状态监测仪', '噪声记录仪', '燃气智能监测终端', '数据集中器']},
+            {index: '22', name: '智慧工地', children: []},
+            {index: '23', name: '一卡通', children: []},
+            // {index: '24', name: '智慧社区', children: []},
+            {index: '25', name: '智慧园林', children: ['温湿度传感器', '水位检测器', 'PM2.5/PM10传感器']},
+            {index: '26', name: '智慧城管', children: []},
+            {index: '27', name: '智慧交通', children: []}],
+          layersShow: [false, false, false, false, false, false]},
+        {
+          index: '03',
+          name: '视频云',
+          children: [
+            {index: '31', name: '智慧交通', children: ['卡口', '电警', 'AR鹰眼']},
+            {index: '32', name: '智慧工地', children: []},
+            {index: '33', name: '智慧社区', children: []},
+            {index: '34', name: '智慧园林', children: []},
+            {index: '35', name: '智慧公安', children: []},
+            {index: '36', name: '智慧教育', children: []}],
+          layersShow: [false, false, false, false, false, false]
+        },
+        {
+          index: '04',
+          name: '一卡通',
+          children: [
+            {index: '41', name: '注册人数', children: []},
+            {index: '42', name: '使用人数', children: []},
+            {index: '43', name: '在线人数', children: []}],
+          layersShow: [false, false, false]
+        },
+        {
+          index: '05',
+          name: '共享交换',
+          children: [],
+          layersShow: []
+        }
+      ],
+      labelsRight: [
+        {
+          index: '',
+          name: '市域社会治理',
+          children: [
+            {index: '61', name: '人口', children: ['区域人口统计', '网格人口统计', '楼栋人口统计']},
+            {index: '62', name: '网格', children: ['综治网格', '疫情网格']},
+            {index: '63', name: '事件', children: ['社会治理事件', '城管执法事件']},
+            {index: '64', name: '交通', children: ['拥堵点分布', '交通事件分布', '高发事故点分布']}],
+          layersShowRight: [false, false, false, false]},
+        {
+          index: '',
+          name: '应急指挥调度',
+          children: [],
+          layersShowRight: []}
+      ],
+      data: {
+        feature: [],
+        polygon: []
+      },
+      layers: {
+        heatLayer: null,
+        feature: '',
+        polygon: ''
+      },
+      map: '',
+      cartimer: null
+    }
+  },
+  mounted () {
+    let _this = this
+    window.trail = _this.trail
+    window.getVideo = _this.getVideo
+    this.getVideoToken()
+    this.initmap()
+  },
+  methods: {
+    // 获取视频相关参数
+    getVideoToken () {
+      fetchVideoToken().then(res => {
+        if (res.code === 1) {
+          this.videoToken = res.data
+          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
+        }
+      })
+    },
+    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.layersShowRight = [false, false]
+      this.showFrame = false
+    },
+    clickLabel (val) {
+      this.layersShow = [false, false, false, false, false, false, false, false]
+      this.layersShowRight = [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
+          }
+        }
+      }
+      for (let i = 0; i < this.labelsRight.length; i++) {
+        for (let j = 0; j < this.labelsRight[i].layersShowRight.length; j++) {
+          this.labelsRight[i].layersShowRight[j] = false
+        }
+      }
+    },
+    clickLabelRight (val) {
+      this.layersShow = [false, false, false, false, false, false, false, false]
+      this.layersShowRight = [false, false]
+      this.layersShowRight[val] = true
+      for (let i = 0; i < this.labels.length; i++) {
+        for (let j = 0; j < this.labels[i].layersShow.length; j++) {
+          this.labels[i].layersShow[j] = false
+        }
+      }
+      for (let i = 0; i < this.labelsRight.length; i++) {
+        if (i !== val) {
+          for (let j = 0; j < this.labelsRight[i].layersShowRight.length; j++) {
+            this.labelsRight[i].layersShowRight[j] = false
+          }
+        }
+      }
+      if (val === 1) {
+        console.log(this.$refs.mapframe)
+        this.showFrame = true
+        this.$refs.mapframe.reloadUrl()
+      }
+    },
+    initmap () {
+      var mapOptions = {
+        scene: {
+          // 默认视角参数
+          center: { lat: 25.823284, lng: 114.907684, alt: 2008, heading: 360, pitch: -31 },
+          // 以下是Cesium.Globe对象相关参数
+          globe: {
+            depthTestAgainstTerrain: false, // 是否启用深度监测
+            baseColor: '#00192f', // 地球默认背景色
+            showGroundAtmosphere: true, // 是否在地球上绘制的地面大气
+            enableLighting: false // 是否显示昼夜区域
+          }
+          // 以下是Cesium.ScreenSpaceCameraController对象相关参数
+          // cameraController: {
+          //   zoomFactor: 3.0, // 鼠标滚轮放大的步长参数
+          //   minimumZoomDistance: 1, // 地球放大的最小值（以米为单位）
+          //   maximumZoomDistance: 50000000, // 地球缩小的最大值（以米为单位）
+          //   enableRotate: true, // 2D和3D视图下，是否允许用户旋转相机
+          //   enableTranslate: true, // 2D和哥伦布视图下，是否允许用户平移地图
+          //   enableTilt: true, // 3D和哥伦布视图下，是否允许用户倾斜相机
+          //   enableZoom: true, // 是否允许 用户放大和缩小视图
+          //   enableCollisionDetection: true // 是否允许 地形相机的碰撞检测
+          // }
+        },
+        basemaps: [
+          // {
+          //   id: 10,
+          //   name: "地图底图",
+          //   type: "group",
+          // },
+          {
+            crs: 'gcj',
+            enablePickFeatures: false,
+            icon: 'http://mars3d.cn/example/img/basemaps/bd-c-midnight.png',
+            id: 2017,
+            name: '蓝色底图(GCJ02偏移)',
+            type: 'arcgis',
+            url: 'http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer'
+          }
+
+          // {
+          //   id: 2017,
+          //   pid: 10,
+          //   name: "蓝色底图",
+          //   icon: "//data.mars3d.cn/img/thumbnail/basemap/bd-c-midnight.png",
+          //   type: "arcgis",
+          //   layer: "vec",
+          //   chinaCRS: "GCJ02",
+          //   invertColor: false,
+          //   filterColor: "#0a5cad", // 选用更纯的蓝色滤镜
+          //   brightness: 0.95,       // 保持适中亮度
+          //   contrast: 1.1,          // 适度增强对比度
+          //   gamma: 1.0,             // 正常gamma值，避免画面过暗
+          //   hue: 0.67,              // 精确设置到蓝色色调区间
+          //   saturation: 1.2         // 增强蓝色饱和度
+          // },
+          // {
+          //   pid: 10,
+          //   name: "微软影像",
+          //   icon: "//data.mars3d.cn/img/thumbnail/basemap/bingAerial.png",
+          //   type: "bing",
+          //   layer: "Aerial",
+          // },
+          // {
+          //   pid: 10,
+          //   name: "黑色底图",
+          //   icon: "//data.mars3d.cn/img/thumbnail/basemap/bd-c-dark.png",
+          //   type: "gaode",
+          //   layer: "vec",
+          //   chinaCRS: "GCJ02",
+          //   invertColor: true,
+          //   filterColor: "#909090",
+          //   brightness: 0.6,
+          //   contrast: 1.8,
+          //   gamma: 0.3,
+          //   hue: 1,
+          //   saturation: 0,
+          // },
+          // {
+          //   pid: 10,
+          //   name: '天地图影像',
+          //   icon: '//data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
+          //   type: 'group',
+          //   layers: [
+          //     {
+          //       name: '底图',
+          //       type: 'tdt',
+          //       layer: 'img_d'
+          //     },
+          //     {
+          //       name: '注记',
+          //       type: 'tdt',
+          //       layer: 'img_z'
+          //     }
+          //   ],
+          //   show: true
+          // }
+        ],
+        layers: [
+          {
+            name: '行政区划界线',
+            type: 'xyz',
+            url: 'https://t{s}.tianditu.gov.cn/DataServer?T=ibo_w&x={x}&y={y}&l={z}&tk=9ae78c51a0a28f06444d541148496e36',
+            subdomains: '01234567',
+            maximumLevel: 10,
+            show: true,
+            id: 1,
+            templateValues: {
+              dataServer: 'http://data.marsgis.cn'
+            },
+            zIndex: 0
+          },
+          // {
+          //   name: '天地图注记',
+          //   type: 'tdt',
+          //   // img_d img_z  vec_d   vec_z
+          //   layer: 'img_d',
+          //   key: [
+          //     // '9ae78c51a0a28f06444d541148496e36'
+          //     '216ee92889e17ab1b083fae665d522b8'
+          //   ],
+          //   show: true,
+          //   // id: 2,
+          //   // templateValues: {
+          //   //   dataServer: 'http://data.marsgis.cn'
+          //   // }
+          // },
+          {
+            name: '天地图注记',
+            type: 'tdt',
+            // img_d img_z  vec_d   vec_z
+            layer: 'img_d',
+            key: [
+              // '9ae78c51a0a28f06444d541148496e36'
+              '216ee92889e17ab1b083fae665d522b8'
+            ],
+            show: true,
+            // id: 2,
+            // templateValues: {
+            //   dataServer: 'http://data.marsgis.cn'
+            // },
+            zIndex: 2
+          },
+          // {
+          //   name: '天地图注记',
+          //   type: 'tdt',
+          //   // img_d img_z  vec_d   vec_z
+          //   layer: 'img_z',
+          //   key: [
+          //     // '9ae78c51a0a28f06444d541148496e36'
+          //     '216ee92889e17ab1b083fae665d522b8'
+          //   ],
+          //   show: true,
+          //   // id: 2,
+          //   // templateValues: {
+          //   //   dataServer: 'http://data.marsgis.cn'
+          //   // },
+          //   zIndex: 3
+          // }
+        ]
+      }
+      // 创建三维地球场景
+      var map = new mars3d.Map('mars3dContainer', mapOptions)
+      map.basemap = 2017
+      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]
+      this.map = map
+      // 加动态图层
+      this.layers.feature = new mars3d.layer.GraphicLayer()
+      this.layers.polygon = new mars3d.layer.GraphicLayer()
+      map.addLayer(this.layers.feature)
+      map.addLayer(this.layers.polygon)
+    },
+    async getCar () {
+      this.layers.polygon.clear()
+      fetchCarInfo().then(response => {
+        if (response.code === 200) {
+          this.data.feature = response.data
+          this.layers.feature.clear()
+          for (let i = 0; i < this.data.feature.length; i++) {
+            var graphic = new mars3d.graphic.ModelEntity({
+              name: this.data.feature[i].simcardnum,
+              position: [Number(this.data.feature[i].coordinatex), Number(this.data.feature[i].coordinatey)],
+              style: {
+                url: '../static/model/zhatuchelvse.gltf',
+                scale: 10,
+                minimumPixelSize: 40,
+                label: {
+                  text: this.data.feature[i].vehiclenum,
+                  font_size: 18,
+                  color: '#ffffff',
+                  pixelOffsetY: -50,
+                  distanceDisplayCondition: true,
+                  distanceDisplayCondition_far: 500000,
+                  distanceDisplayCondition_near: 1000
+                }
+              }
+            })
+            var items = [{name: '车牌号', value: 'vehiclenum'}, {name: '公司', value: 'name'}]
+            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: #00b3eb">渣土车分布</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>`
+            }
+            var simcardnum = '\'' + this.data.feature[i].simcardnum + '!' + this.data.feature[i].vehiclenum + '\''
+            // var vehiclenum = this.data.feature[i].vehiclenum
+            str += `<button style="background-color: #e6a23c;border-color: #e6a23c;color: white;padding: 5px 15px;border-radius: 4px;margin-left: 25em"
+                    id="btntrail" onclick="trail(${simcardnum})">轨 迹</button>`
+            str += `</div>`
+            graphic.bindPopup(str)
+            this.layers.feature.addGraphic(graphic)
+          }
+        }
+      })
+    },
+    trail: function (str) {
+      var val = str.split('!')
+      console.log(val)
+      this.map.closePopup()
+      const now = dateToString(new Date(), 'y-m-d-h-m-s')
+      const cthour = new Date()
+      cthour.setTime(cthour.getTime() - 3599 * 1000)
+      const hour = dateToString(cthour, 'y-m-d-h-m-s')
+      const params = { params: [val[0], hour, now] }
+      // const params = { params: [val[0], '2021-05-16 16:00:11', '2021-05-16 16:59:11'] }
+      fetchCarPostion(params).then(response => {
+        if (response.code === 200) {
+          if (response.data.length !== 0) {
+            var data = response.data.map(item => { return [item.coordinateX, item.coordinateY, 0] })
+            var flydata = {
+              name: '贴地表表面漫游',
+              speed: 300,
+              positions: data,
+              model: {
+                url: '../static/model/zhatuchelvse.gltf',
+                heading: 180,
+                minimumPixelSize: 50,
+                show: true
+              },
+              label: {
+                text: val[1],
+                font_size: 18,
+                color: '#ffffff',
+                pixelOffsetY: -50,
+                show: true
+              },
+              path: {
+                color: '#32c3ff',
+                width: 3,
+                show: true
+              },
+              camera: {
+                type: 'gs',
+                pitch: -30,
+                radius: 5000
+              },
+              interpolation: true, // 是否setInterpolationOptions插值
+              clockLoop: false // 是否循环播放
+            }
+            var roamLine = new mars3d.graphic.RoamLine(flydata)
+            this.layers.feature.addGraphic(roamLine)
+            roamLine.start()
+          }
+        }
+      })
+    },
+    fetchData ({value}) {
+      this.layers.feature.clear()
+      this.layers.polygon.clear()
+      if (this.layers.heatLayer) {
+        this.map.removeLayer(this.layers.heatLayer, true)
+      }
+      clearInterval(this.cartimer)
+      if (typeof (value) !== 'string') {
+        if (value.children.length !== 0) {
+          this.bottom_btn = value.children
+          this.bottom_choose = this.bottom_btn.map(item => { return false })
+          return
+        }
+        this.bottom_btn = []
+        this.bottom_choose = []
+      }
+      if (value.index === '27') {
+        var that = this
+        this.getCar()
+        this.cartimer = setInterval(function () { that.getCar() }, 100000)
+      } else if (value === '电子标识器') {
+        this.singleSearch(value, 'B-ZH-0101', '3KNOXR30E6', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '标识器ID号', value: 'SJBH'}, {name: '标识器型号', value: 'SBXH'}, {name: '所属道路', value: 'SSSJFW'} ], false)
+      } else if (value === '液位监测仪') {
+        this.singleSearch(value, 'B-ZH-0104', 'M1KOD38358', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'} ], false)
+      } else if (value === '消防栓防盗水监测仪') {
+        this.singleSearch(value, 'B-ZH-0107', 'IVU59JC84I', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'} ], false)
+      } else if (value === '有害气体监测仪') {
+        this.singleSearch(value, 'B-ZH-0109', 'VB5P0VER2I', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'} ], false)
+      } else if (value === '井盖状态监测仪') {
+        this.singleSearch(value, 'B-ZH-0103', 'A376X56055', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'} ], false)
+      } else if (value === '噪声记录仪') {
+        this.singleSearch(value, 'B-ZH-0106', '1Y059A446T', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'} ], false)
+      } else if (value === '燃气智能监测终端') {
+        this.singleSearch(value, 'B-ZH-0108', '556018Q5T0', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'} ], false)
+      } else if (value === '数据集中器') {
+        this.singleSearch(value, 'B-ZH-0110', 'RGW6U23D5A', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'} ], false)
+      } else if (value === '温湿度传感器') {
+        this.singleSearch(value, 'B-ZH-0918', '6439YG6E08', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], false)
+      } else if (value === '水位检测器') {
+        this.singleSearch(value, 'B-ZH-0919', '3EA9LY478S', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], false)
+      } else if (value === 'PM2.5/PM10传感器') {
+        this.singleSearch(value, 'B-ZH-0922', 'Q3I1MZ82OR', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], false)
+      } else if (value.index === '23') {
+        this.singleSearch('一卡通门禁', 'B-ZH-1301', '6Z6214RC1P', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '门禁名称', value: 'YSMC'}, {name: '门禁地点', value: 'S_DZQC'}, {name: '所属企业', value: 'SJYSMC'}, {name: '设备类型', value: 'XXDLXMC'} ], false)
+      } else if (value.index === '26') {
+        this.singleSearch(value.index, 'B-ZH-0403', 'G2YQEM396G', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '路灯编号', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'} ], false)
+      } else if (value.index === '22') {
+        this.singleSearch('环境监测', 'B-ZH-0706', 'JFK37I1F45', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'} ], false)
+      } else if (value === '城管执法事件') {
+        this.singleSearch(value, 'B-ZH-0402', '4X137UY07J', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '案件名称', value: 'YSMC'}, {name: '案件分类', value: 'XXDLXMC'}, {name: '案件详情', value: 'S_DZQC'} ], false)
+      } else if (value.index === '11') {
+        this.singleSearch('社区分布', 'B-ZH-1001', 'J765870KFV', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '社区名称', value: 'name'}, {name: '社区地址', value: 'S_DZQC'} ], false)
+        // [ {name: '社区名称', value: 'SSSJFW'}, {name: '社区地址', value: 'S_DZQC'} ], false)
+        this.drawPolygon('B-ZH-1004', 'VM0V81395N')
+      } else if (value.index === '12') {
+        this.singleSearch('智慧教育', 'B-ZH-jy', 'J765870KFV', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '学校名称', value: 'name'}, {name: '学校地址', value: 'S_DZQC'} ], false)
+        this.drawPolygon('B-ZH-1004', 'VM0V81395N')
+      } else if (value.index === '13') {
+        this.singleSearch('停车场分布', 'B-ZH-1701', '521355523B', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '停车场名称', value: 'name'}, {name: '停车场地址', value: 'location'} ], false)
+        this.drawPolygon('B-ZH-1702', 'VM0V81395N')
+      } else if (value.index === '14') {
+        this.singleSearch('工地分布', 'B-ZH-0801', '05VA87X3PX', require('@/assets/images/icon-camera-blu.png'),
+          [{name: '工地名称', value: 'name'}, {name: '工程类别', value: 'typename'}, {name: '工程状态', value: 'statusname'}], false)
+        this.drawPolygon('B-ZH-0702', '2V026Q9MNX')
+      } else if (value.index === '15') {
+        // this.singleSearch('公园分布', 'B-ZH-0901', '604NVD1231', require('@/assets/images/icon-camera-blu.png'),
+        //   [ {name: '公园名称', value: 'SSSJFW'}, {name: '公园地址', value: 'S_DZQC'} ], false)
+        // this.drawPolygon('B-ZH-0928', '5CAQF6UY5V')
+        this.singleSearch('智慧园林', 'B-ZH-0901', '604NVD1231', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '名称', value: 'name'}, {name: '等级', value: 'levelname'}, {name: '地址', value: 'location'} ], false)
+        this.drawPolygon('B-ZH-0928', '5CAQF6UY5V')
+      } else if (value === '疫情网格') {
+        this.drawGeoServer()
+      } else if (value === '拥堵点分布') {
+        this.getBlockPoints()
+      } else if (value === '交通事件分布') {
+        this.getEventPoints()
+      } else if (value === '卡口') {
+        this.singleSearch(value, 'B-ZH-0203', 'A0QT21OBL5', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '设备名称', value: 'YSMC'}, {name: '路口名称', value: 'SSSJFW'}, {name: '设备地点', value: 'S_DZQC'} ], false)
+      } else if (value === '电警') {
+        this.singleSearch(value, 'B-ZH-0202', '6R7A01XHQ0', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '设备名称', value: 'YSMC'}, {name: '路口名称', value: 'SSSJFW'}, {name: '设备地点', value: 'S_DZQC'} ], false)
+      } else if (value === 'AR鹰眼') {
+        this.singleSearch(value, 'B-ZH-0216', 'G818P6U95C', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '设备名称', value: 'YSMC'}, {name: '路口名称', value: 'SSSJFW'}, {name: '设备地点', value: 'S_DZQC'} ], false)
+      } else if (value.index === '32') { // 工地
+        this.singleSearch('摄像头', 'B-ZH-0403', 'G2YQEM396G', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], false)
+      } else if (value.index === '33') { // 社区
+        this.singleSearch('摄像头', 'B-ZH-1502', '76L47133KX', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], true)
+      } else if (value.index === '34') { // 园林
+        this.singleSearch('摄像头', 'B-ZH-1504', '3LKWWUIX97', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'}], true)
+      } else if (value.index === '35') { // 公安
+        this.singleSearch('公安视频', 'B-ZH-0301', 'P5SM5LIPDU', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'}], false)
+      } else if (value.index === '36') { // 教育
+        this.singleSearch('摄像头', 'B-ZH-1503', '82TO11RNVO', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], true)
+      }
+    },
+    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++) {
+          if (!this.data.feature[i].X || !this.data.feature[i].Y) {
+            continue
+          }
+          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;">
+          <div style="font-size: 0.085rem;font-weight: bold;padding-bottom: 10px;color: #00b3eb">${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)
+          this.layers.feature.addGraphic(graphic)
+          if (i === 0) {
+            this.map.setCameraView({ lat: Number(this.data.feature[i].Y), lng: Number(this.data.feature[i].X), alt: 20000})
+          }
+        }
+      })
+    },
+    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 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 => {
+              return item.substr(1).split(' ')
+            })
+            let graphic = new mars3d.graphic.PolygonEntity({
+              positions: items,
+              style: {
+                color: '#bebebe',
+                opacity: 0.5,
+                outline: true,
+                outlineWidth: 2,
+                outlineColor: '#46617b'
+              }
+            })
+            this.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 => {
+                return item.substr(1).split(' ')
+              })
+              let graphic = new mars3d.graphic.PolygonEntity({
+                positions: items,
+                style: {
+                  color: '#bebebe',
+                  opacity: 0.5,
+                  outline: true,
+                  outlineWidth: 2,
+                  outlineColor: '#46617b'
+                }
+              })
+              this.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) }
+          })
+          this.layers.heatLayer = new mars3d.layer.HeatLayer({
+            positions: list,
+            heatStyle: {
+              radius: 170,
+              blur: 0.85
+            },
+            style: {
+              opacity: 1.0,
+              clampToGround: true
+            },
+            redrawZoom: true,
+            flyTo: true
+          })
+          this.map.addLayer(this.layers.heatLayer)
+        }
+      })
+    },
+    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
+            this.layers.feature.addGraphic(graphic)
+          }
+        }
+      })
+    }
+    // async drawGeoServer(){
+    //   var 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=gz-shp:YJFKWK2021&F-Auth-Key=YEF6D3NF1M',
+    //     // url: 'http://11.100.6.5:8084/services/geoserver/gz-shp/ows?service=WFS&request=GetFeature&maxFeatures=20&outputFormat=application/json&typeName=gz-shp:A_JJYZQ_XZJXZQ_PG_1000&F-Auth-Key=46EBBN247N',
+    //   })
+    //
+    //   this.map.addLayer(tileLayer)
+    // }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+   /deep/ .mars3d-popup-close-button {
+    top: 2em;
+    right: 3em;
+  }
+  /deep/ .mars3d-popup{
+    position: absolute;
+    /*top: 13.3em;*/
+    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/info-bg.png") no-repeat;
+    background-size: 100% 100%
+  }
+  /deep/.mars3d-popup-close-button{
+    top: 10px;
+  }
+  .button {
+    float: left;
+    min-width: 300px;
+    min-height: 100px;
+    line-height: 100px;
+    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;
+  }
+  button--saqui {
+    border-color: #ECEFF1;
+    overflow: hidden;
+    color: #fff;
+    background: #37474f;
+    -webkit-transition: background-color 0.3s ease-in, color 0.3s ease-in;
+    transition: background-color 0.3s ease-in, color 0.3s ease-in;
+    .button--inverted {
+      background: #fff;
+      color: #37474f;
+    }
+    button--inverted::after {
+      color: #fff;
+    }
+  }
+  .button--saqui::after {
+    content: attr(data-text);
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 1em 2em;
+    color: #37474f;
+    -webkit-transform-origin: -25% 50%;
+    transform-origin: -25% 50%;
+    -webkit-transform: rotate3d(0, 0, 1, 45deg);
+    transform: rotate3d(0, 0, 1, 45deg);
+    -webkit-transition: -webkit-transform 0.3s ease-in;
+    transition: transform 0.3s ease-in;
+  }
+  .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;
+  }
+   .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;
+   }
+  .map-frame{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0%;
+    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;
+   }
+</style>
diff --git a/src/views/mapViews/mars3dMap.vue b/src/views/mapViews/mars3dMap.vue
index abfe74b..c66132c 100644
--- a/src/views/mapViews/mars3dMap.vue
+++ b/src/views/mapViews/mars3dMap.vue
@@ -271,7 +271,23 @@
             name: '蓝色底图(GCJ02偏移)',
             type: 'arcgis',
             url: 'http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer'
-          }
+          },
+          {
+            id: 2017,
+            pid: 10,
+            name: "蓝色底图",
+            icon: "//data.mars3d.cn/img/thumbnail/basemap/bd-c-midnight.png",
+            type: "gaode",
+            layer: "vec",
+            chinaCRS: "GCJ02",
+            invertColor: true,
+            filterColor: "#4e70a6",
+            brightness: 0.8,
+            // contrast: 1.8,
+            // gamma: 1,
+            // hue: 1,
+            saturation: 4.4
+          },
         ],
         layers: [
           {
@@ -287,22 +303,38 @@
             },
             zIndex: 0
           },
-          {
-            name: '天地图注记',
-            type: 'tdt',
-            // img_d img_z  vec_d   vec_z
-            layer: 'img_z',
-            key: [
-              // '9ae78c51a0a28f06444d541148496e36'
-              '216ee92889e17ab1b083fae665d522b8'
-            ],
-            show: true,
-            id: 2,
-            templateValues: {
-              dataServer: 'http://data.marsgis.cn'
-            },
-            zIndex: 1
-          }
+          // {
+          //   name: '天地图注记',
+          //   type: 'tdt',
+          //   // img_d img_z  vec_d   vec_z
+          //   layer: 'img_d',
+          //   key: [
+          //     // '9ae78c51a0a28f06444d541148496e36'
+          //     '216ee92889e17ab1b083fae665d522b8'
+          //   ],
+          //   show: true,
+          //   id: 2,
+          //   templateValues: {
+          //     dataServer: 'http://data.marsgis.cn'
+          //   },
+          //   zIndex: 1
+          // },
+          // {
+          //   name: '天地图注记',
+          //   type: 'tdt',
+          //   // img_d img_z  vec_d   vec_z
+          //   layer: 'img_z',
+          //   key: [
+          //     // '9ae78c51a0a28f06444d541148496e36'
+          //     '216ee92889e17ab1b083fae665d522b8'
+          //   ],
+          //   show: true,
+          //   id: 2,
+          //   templateValues: {
+          //     dataServer: 'http://data.marsgis.cn'
+          //   },
+          //   zIndex: 1
+          // }
         ]
       }
       // 创建三维地球场景
@@ -487,9 +519,13 @@
         this.singleSearch('社区分布', 'B-ZH-1001', 'J765870KFV', require('@/assets/images/icon-camera-blu.png'),
           [ {name: '社区名称', value: 'SSSJFW'}, {name: '社区地址', value: 'S_DZQC'} ], false)
         this.drawPolygon('B-ZH-1004', 'VM0V81395N')
+      } else if (value.index === '12') {
+        this.singleSearch('智慧教育', 'B-ZH-jy', 'J765870KFV', require('@/assets/images/icon-camera-blu.png'),
+          [ {name: '学校名称', value: 'SSSJFW'}, {name: '学校地址', value: 'S_DZQC'} ], false)
+        this.drawPolygon('B-ZH-1004', 'VM0V81395N')
       } else if (value.index === '13') {
         this.singleSearch('停车场分布', 'B-ZH-1701', '521355523B', require('@/assets/images/icon-camera-blu.png'),
-          [ {name: '停车场名称', value: 'SSSJFW'}, {name: '停车场地址', value: 'S_DZQC'} ], false)
+          [ {name: '停车场名称', value: 'SSSJFW'}, {name: '停车场地址', value: 'location'} ], false)
         this.drawPolygon('B-ZH-1702', 'VM0V81395N')
       } else if (value.index === '14') {
         this.singleSearch('工地分布', 'B-ZH-0801', '05VA87X3PX', require('@/assets/images/icon-camera-blu.png'),
@@ -623,6 +659,7 @@
         if (this.player) this.player.pause()
       }
     },
+    // 多边形
     async drawPolygon (code, key) {
       fetchFeatureInfo(code, key).then(response => {
         this.data.polygon = response.data.data[0].data
@@ -730,15 +767,14 @@
           }
         }
       })
+    },
+    async drawGeoServer(){
+      var 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=gz-shp:YJFKWK2021&F-Auth-Key=YEF6D3NF1M',
+        // url: 'http://11.100.6.5:8084/services/geoserver/gz-shp/ows?service=WFS&request=GetFeature&maxFeatures=20&outputFormat=application/json&typeName=gz-shp:A_JJYZQ_XZJXZQ_PG_1000&F-Auth-Key=46EBBN247N',
+      })
+      this.map.addLayer(tileLayer)
     }
-    // async drawGeoServer(){
-    //   var 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=gz-shp:YJFKWK2021&F-Auth-Key=YEF6D3NF1M',
-    //     // url: 'http://11.100.6.5:8084/services/geoserver/gz-shp/ows?service=WFS&request=GetFeature&maxFeatures=20&outputFormat=application/json&typeName=gz-shp:A_JJYZQ_XZJXZQ_PG_1000&F-Auth-Key=46EBBN247N',
-    //   })
-    //
-    //   this.map.addLayer(tileLayer)
-    // }
   }
 }
 </script>