定位app首次提交

王飞

2025-03-07 c5e49c10499435802a6551b98772f95660c6f85a

 pages/index/ditu.vue

@@ -10,8 +10,9 @@
      <u-button @click="zoom" icon="../../static/zoom.png"
         style=" border-color: #5b5b5b;background-color: rgba(115, 115, 115, 0.5); width: 31px;height: 31px; position:absolute;top: 70%; left:15px;z-index: 999999999999999;"></u-button>

      <u-modal style="position: absolute;z-index: 99999999999999;" buttonReverse confirmText="开始" :cancelText="cancelText" :show="guijishow" @cancel="stopguiji"
         @confirm="startguiji" ref="uModal" :showCancelButton="true" :closeOnClickOverlay="true">
      <u-modal style="position: absolute;z-index: 99999999999999;" buttonReverse confirmText="开始"
         :cancelText="cancelText" :show="guijishow" @cancel="stopguiji" @confirm="startguiji" ref="uModal"
         :showCancelButton="true" :closeOnClickOverlay="true">
         <u-icon name="close" style="position: absolute;right: 10px;top:10px" @click="closemodal"></u-icon>
         <u--form style="" labelPosition="left" :model="model" :rules="rules2" ref="uForm">
            <u-form-item required label="设备名称:" prop="name" borderBottom ref="item1" labelWidth="80px">
@@ -38,16 +39,72 @@
            </u-form-item>
         </u--form>
      </u-modal>
      <div id="mars3dContainer" class="mars3d-container" :amapPoints='amapPoints' :change:amapPoints="mars3d.getData"
         :threeortwo='threeortwo' :change:threeortwo="mars3d.get3wei" :amapBasePoints='amapBasePoints'
      <!-- <tn-popup v-model="lockguiji" :mask="false" mode="bottom" closeBtn :maskCloseable="false"> -->


      <view v-show="lockguiji"
         style="z-index: 99999999999999; position: absolute;bottom: 0; padding: 30rpx;width: 100%; background-color: #5b5b5b;">
         <u-icon name="close" color="#ffffff"
            style=" position: absolute;z-index: 999999999999999;right: 10px;top:10px" @click="closesudu"></u-icon>
         <view style="display: flex;">

            <span style="margin-right: 10px;">当前：{{dqnum}}</span>
            <span style="margin-right: 10px;">{{plackTime}}</span>
         </view>
         <view style="display: flex;">
            <span>速度：</span>
            <!-- <uni-data-select style="width: 40%;" placeholder="选择速度" v-model="model.sudu" :localdata="range"
                  @change="change"></uni-data-select> -->

            <u-button :style="{'background-color':color1,'border-radius': '10px',width: '40px',height: '20px'}"
               @click="sudu1" text="1x"></u-button>
            <u-button :style="{'background-color':color2,'border-radius': '10px',width: '40px',height: '20px'}"
               @click="sudu2" text="2x"></u-button>
            <u-button :style="{'background-color':color5,'border-radius': '10px',width: '40px',height: '20px'}"
               @click="sudu5" text="5x"></u-button>
            <u-button :style="{'background-color':color10,'border-radius': '10px',width: '40px',height: '20px'}"
               @click="sudu10" text="10x"></u-button>
            <u-button :style="{'background-color':color20,'border-radius': '10px',width: '40px',height: '20px'}"
               @click="sudu20" text="20x"></u-button>
            <u-button :style="{'background-color':color50,'border-radius': '10px',width: '40px',height: '20px'}"
               @click="sudu50" text="50x"></u-button>
            <u-button :style="{'background-color':color100,'border-radius': '10px',width: '40px',height: '20px'}"
               @click="sudu100" text="100x"></u-button>
         </view>
         <!--    <tn-form>
               <tn-form-item label="IP地址:" labelWidth='100rpx'>
                  <tn-input v-model="form.url" inputAlign="right" placeholder="请输入IP地址"></tn-input>
               </tn-form-item>
               <tn-form-item label="端口:" labelWidth='100rpx'>
                  <tn-input v-model="form.port" inputAlign="right" placeholder="请输入端口"></tn-input>
               </tn-form-item>
            </tn-form> -->
         <!-- <button style="margin-top: 20px;" type="primary" @click="submitForm">提交</button> -->
      </view>
      <!-- </tn-popup> -->
      <!-- <view v-show="lockguiji"
         style=" position: absolute;z-index: 99999999999999;background-color: #cad1fd;bottom: 80px;width: 80%;left: 15%;">
         <view style="display: flex;">

            <span style="margin-right: 10px;">当前：{{dqnum}}</span>
            <span style="margin-right: 10px;">{{plackTime}}</span>
         </view>
         <view style="display: flex;">
            <span>速度：</span>
            <uni-data-select style="width: 40%;" placeholder="选择速度" v-model="model.sudu" :localdata="range"
               @change="change"></uni-data-select>
         </view>
      </view> -->
      <div id="mars3dContainer" class="mars3d-container" :marsset='marsset' :change:marsset="mars3d.getmarsData"
         :amapPoints='amapPoints' :change:amapPoints="mars3d.getData" :threeortwo='threeortwo'
         :change:threeortwo="mars3d.get3wei" :amapBasePoints='amapBasePoints'
         :change:amapBasePoints="mars3d.getBaseData" :amapFencePoints='amapFencePoints'
         :change:amapFencePoints="mars3d.getFenceData" :amapPersonPoints='amapPersonPoints'
         :change:amapPersonPoints="mars3d.getPersonData" :amapendGuijiPoints='amapendGuijiPoints'
         :change:amapendGuijiPoints="mars3d.getendGuijiData" :amapsuduPoints='amapsuduPoints'
         :change:amapsuduPoints="mars3d.getSuduData" :amapGuijiPoints='amapGuijiPoints'
         :change:amapGuijiPoints="mars3d.getGuijiData" :amapGPSPoints='amapGPSPoints'
         :change:amapGPSPoints="mars3d.getgpsData" :marsset='marsset' :change:marsset="mars3d.getmarsData"
         :point='point' :change:point="mars3d.getmarsPoint"></div>
         :change:amapGPSPoints="mars3d.getgpsData" :point='point' :change:point="mars3d.getmarsPoint"></div>
      <!-- #endif -->
      <!-- #ifndef APP-PLUS || H5 -->
      <web-view :src="url"></web-view>
@@ -75,6 +132,17 @@
      },
      data() {
         return {
            color1: '#e2e2e2',
            color2: '#8b8b8b',
            color5: '#8b8b8b',
            color10: '#8b8b8b',
            color20: '#8b8b8b',
            color50: '#8b8b8b',
            color100: '#8b8b8b',
            sudu: 'x1',
            plackTime: '',
            dqnum: '',
            lockguiji: false,
            shownotify: true,
            cancelText: '暂停',
            isRunning: true,
@@ -183,23 +251,33 @@
         }
      },
      mounted() {

         this.initMap();
         this.threeortwo.push(this.is3wei)
         this.amapPoints = []
         this.amapBasePoints = []
         this.amapFencePoints = []
         // this.amapPoints = []
         // this.amapBasePoints = []
         // this.amapFencePoints = []

         // this.amapGuijiPoints = []
         // this.amapPersonPoints = []
         this.amapendGuijiPoints = ''
         // this.amapendGuijiPoints = ''
         this.topheight = this.vuex_custom_bar_height + 15
         this.initMap();
         this.fetchPersonsList();
         this.fetchBasesList();
         this.fetchFenceList();




      },
      methods: {
         closemodal(){
            this.guijishow=false
         initlock() {
            this.fetchPersonsList();
            this.fetchBasesList();
            this.fetchFenceList();
         },
         closemodal() {
            this.guijishow = false
         },
         closesudu() {
            this.lockguiji = false
         },
         stopguiji() {
            this.guijishow = false
@@ -241,7 +319,7 @@
            return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
         },
         startguiji() {
            this.amapPersonPoints = []
            this.amapGuijiPoints = []
            this.$refs.uForm.validate().then(res => {
               // uni.$u.toast('校验通过')
               // let tagid = $("#tagid").val();
@@ -326,58 +404,62 @@
                  });
                  return false;
               }
               this.$refs.refSuccess.showBox({
                  type: 'success',
                  txt: '轨迹正在查询中.....'
               });
               // uni.showToast({
               //    title: '轨迹正在查询中.....',
               //    icon: 'success'
               // });
               // notify.success("轨迹正在查询中.....")
               // var layer = $("#maps").val();
               var params = {
                  tagid: this.model.name,
                  start: this.model.start,
                  end: this.model.stop,
                  layer: '默认地图'
               }
               // setTimeout(function() {
               findBaiDuGuiJi(params).then((res) => {
                  if (res.code == 0) {
                     if (Object.keys(res.data).length === 0) {
                        // uni.showToast({
                        //    title: '该时间段不存在此设备轨迹信息',
                        //    icon: 'error'
                        // });

               if (this.vuex_is_login) {
                  this.$refs.refSuccess.showBox({
                     type: 'success',
                     txt: '轨迹正在查询中.....'
                  });
                  // uni.showToast({
                  //    title: '轨迹正在查询中.....',
                  //    icon: 'success'
                  // });
                  // notify.success("轨迹正在查询中.....")
                  // var layer = $("#maps").val();
                  var params = {
                     tagid: this.model.name,
                     start: this.model.start,
                     end: this.model.stop,
                     layer: '默认地图'
                  }
                  // setTimeout(function() {
                  findBaiDuGuiJi(params).then((res) => {
                     if (res.code == 0) {
                        if (Object.keys(res.data).length === 0) {
                           // uni.showToast({
                           //    title: '该时间段不存在此设备轨迹信息',
                           //    icon: 'error'
                           // });
                           this.$refs.refSuccess.showBox({
                              type: 'error',
                              txt: '该时间段不存在此设备轨迹信息'
                           });
                           // notify.error("该时间段不存在此设备轨迹信息")
                           return false;
                        } else {
                           this.amapGuijiPoints = res.data
                           this.amapsuduPoints = this.model.sudu
                           const params1 = {
                              id: res.data[0][0].tagid,
                              // company: this.company,
                           }
                           findtagIdPerson(params1).then((res) => {

                              if (res.code == 0) {
                                 this.amapPersonPoints = res.data.pimage.split(',')
                                 this.lockguiji = true
                              }

                           })
                        }
                     } else {
                        this.$refs.refSuccess.showBox({
                           type: 'error',
                           txt: '该时间段不存在此设备轨迹信息'
                           txt: "该设备不存在！"
                        });
                        // notify.error("该时间段不存在此设备轨迹信息")
                        return false;
                     } else {
                        this.amapGuijiPoints = res.data
                        this.amapsuduPoints = this.model.sudu
                        const params1 = {
                           id: res.data[0][0].tagid,
                           // company: this.company,
                        }
                        findtagIdPerson(params1).then((res) => {
                           if (res.code == 0) {
                              this.amapPersonPoints = res.data.pimage.split(',')
                           }

                        })
                     }
                  } else {
                     this.$refs.refSuccess.showBox({
                        type: 'error',
                        txt: "该设备不存在！"
                     });
                  }
               })

                  })
               }
               // }, 500)

            }).catch(errors => {
@@ -385,7 +467,79 @@
            })

         },

         change(e) {
            this.amapsuduPoints = e
         },
         sudu1() {
            this.amapsuduPoints = 1000
            this.color1 = '#e2e2e2'
            this.color2 = '#8b8b8b'
            this.color5 = '#8b8b8b'
            this.color10 = '#8b8b8b'
            this.color20 = '#8b8b8b'
            this.color50 = '#8b8b8b'
            this.color100 = '#8b8b8b'
         },
         sudu2() {
            this.amapsuduPoints = 500
            this.color1 = '#8b8b8b'
            this.color2 = '#e2e2e2'
            this.color5 = '#8b8b8b'
            this.color10 = '#8b8b8b'
            this.color20 = '#8b8b8b'
            this.color50 = '#8b8b8b'
            this.color100 = '#8b8b8b'
         },
         sudu5() {
            this.amapsuduPoints = 200
            this.color1 = '#8b8b8b'
            this.color2 = '#8b8b8b'
            this.color5 = '#e2e2e2'
            this.color10 = '#8b8b8b'
            this.color20 = '#8b8b8b'
            this.color50 = '#8b8b8b'
            this.color100 = '#8b8b8b'
         },
         sudu10() {
            this.amapsuduPoints = 100
            this.color1 = '#8b8b8b'
            this.color2 = '#8b8b8b'
            this.color5 = '#8b8b8b'
            this.color10 = '#e2e2e2'
            this.color20 = '#8b8b8b'
            this.color50 = '#8b8b8b'
            this.color100 = '#8b8b8b'
         },
         sudu20() {
            this.amapsuduPoints = 50
            this.color1 = '#8b8b8b'
            this.color2 = '#8b8b8b'
            this.color5 = '#8b8b8b'
            this.color10 = '#8b8b8b'
            this.color20 = '#e2e2e2'
            this.color50 = '#8b8b8b'
            this.color100 = '#8b8b8b'
         },
         sudu50() {
            this.amapsuduPoints = 10
            this.color1 = '#8b8b8b'
            this.color2 = '#8b8b8b'
            this.color5 = '#8b8b8b'
            this.color10 = '#8b8b8b'
            this.color20 = '#8b8b8b'
            this.color50 = '#e2e2e2'
            this.color100 = '#8b8b8b'
         },
         sudu100() {
            this.amapsuduPoints = 1
            this.color1 = '#8b8b8b'
            this.color2 = '#8b8b8b'
            this.color5 = '#8b8b8b'
            this.color10 = '#8b8b8b'
            this.color20 = '#8b8b8b'
            this.color50 = '#8b8b8b'
            this.color100 = '#e2e2e2'
         },
         radioChange(n) {
            const currentDate = new Date();
            var halfAnHourAgo = new Date(); // 当前时间减去 30 分钟
@@ -414,97 +568,115 @@
               name: this.keyword,
               company: this.company,
            }
            findPerson(params).then((res) => {
               if (res.code == 0) {
                  var targetPoint = {}
                  targetPoint.lat = res.data.baoliu3
                  targetPoint.lon = res.data.baoliu2
                  this.point = targetPoint
               } else {
                  this.$refs.refSuccess.showBox({
                     type: 'error',
                     txt: res.msg
                  });
               }
            })

            if (this.vuex_is_login) {
               findPerson(params).then((res) => {
                  if (res.code == 0) {
                     var targetPoint = {}
                     targetPoint.lat = res.data.baoliu3
                     targetPoint.lon = res.data.baoliu2
                     this.point = targetPoint
                  } else {
                     this.$refs.refSuccess.showBox({
                        type: 'error',
                        txt: res.msg
                     });
                  }
               })
            }
         },
         handleMapClick(e) {
            console.log('handleMapClick逻辑层接收到触发', e)
            this.$emit('mars3dc', e)
         },

         guijiClick(e) {
            this.dqnum = e.dqnum
            this.plackTime = e.plackTime
         },
         initMap() {
            // if (this.vuex_is_login) { 
            MarsHome().then((res) => {
               console.log(res);
               this.marsset = res.data[0]
            })
            // }
         },
         fetchFenceList() {
            const params = {
               company: this.company,
            }

            if (uni.getStorageSync('isfence') == true) {
               findAllFence(params).then((res) => {
                  if (res.data != null) {
                     this.amapFencePoints = res.data
                  }
               })
            } else {
               this.amapFencePoints = []
            if (this.vuex_is_login) {
               if (uni.getStorageSync('isfence') == true) {
                  findAllFence(params).then((res) => {
                     console.log(res);
                     if (res.data != null) {
                        this.amapFencePoints = res.data
                     }
                  })
               } else {
                  this.amapFencePoints = []
               }
            }
            setTimeout(() => {
               //5秒播放一次
               this.fetchFenceList();
            }, 1000);
            // setTimeout(() => {
            //    //5秒播放一次
            //    this.fetchFenceList();
            // }, 1000);
         },

         fetchBasesList() {
            const params = {
               company: this.company,
            }
            if (uni.getStorageSync('isbase') == true) {
               getBaseGPSCesium(params).then((res) => {
                  if (res.data != null) {
                     this.amapBasePoints = res.data
                  }
               })
            } else {
               this.amapBasePoints = []
            if (this.vuex_is_login) {
               if (uni.getStorageSync('isbase') == true) {
                  getBaseGPSCesium(params).then((res) => {
                     if (res.data != null) {
                        this.amapBasePoints = res.data
                     }
                  })
               } else {
                  this.amapBasePoints = []
               }
            }
            setTimeout(() => {
               //5秒播放一次
               this.fetchBasesList();
            }, 1000);
            // setTimeout(() => {
            //    //5秒播放一次
            //    this.fetchBasesList();
            // }, 5000);
         },

         fetchPersonsList() {
            this.amapPoints = []
            const params = {
               company: this.company,
            }
            getGPSCesium(params).then((res) => {
               if (res.data != null) {
                  this.amapPoints = res.data
               }
            })
            if (this.vuex_is_login) {
               getGPSCesium(params).then((res) => {
                  if (res.data != null) {
                     this.amapPoints = res.data
                  }
               })
            }

            setTimeout(() => {
               //5秒播放一次
               this.fetchPersonsList();
            }, 1000);
            }, 5000);
         },

         updateTrajectories() {
            const params = {
               company: this.company,
            }
            getGPS(params).then((res) => {
               if (res.data != null) {
                  this.amapGPSPoints = res.data
               }
            })
            if (this.vuex_is_login) {
               getGPS(params).then((res) => {
                  if (res.data != null) {
                     this.amapGPSPoints = res.data
                  }
               })
            }
            setTimeout(() => {
               //5秒播放一次
               this.updateTrajectories();
            }, 500);
            }, 1000);
         },
      }
   }
@@ -527,6 +699,7 @@
   var isPlack = true;
   var car;
   var num = 0;

   import {
      mapOptions
   } from './config.js'
@@ -644,326 +817,313 @@
         },
         getmarsData(newValue) {
            this.list = newValue

            console.log(this.list);
         },
         get3wei(newValue) {
            this.is2d = newValue[0]
				
         },
         //创建地图
         createMap() {
            let mapPositionlat;
            let mapPositionlng;
            let mapPositionalt;
            let mapPositionheading;
            let mapPositionpitch;
            mapPositionlat = this.list.mapposition.split(',')[1];
            mapPositionlng = this.list.mapposition.split(',')[0];
            mapPositionalt = this.list.alt;
            mapPositionheading = this.list.heading;
            mapPositionpitch = this.list.pitch;
            const Cesium = mars3d.Cesium;
            map = new mars3d.Map('mars3dContainer', {
               scene: {
                  center: {
                     // lat: 38.443729,
                     // lng: 38.443729,
                     // alt: 200,
                     // heading: 0,
                     // pitch: 0,

                     lat: mapPositionlat,
                     lng: mapPositionlng,
                     alt: mapPositionalt,
                     heading: 0,
                     pitch: 0
                  },
                  // center: { lat: mapPosition[1], lng: mapPosition[0], alt: HomeSetting.alt, heading: HomeSetting.heading, pitch: HomeSetting.pitch },
                  showSkyAtmosphere: false, // 关闭球周边的白色轮廓 map.scene.skyAtmosphere = false
                  fog: true,
                  fxaa: true,
                  globe: {
                     showGroundAtmosphere: false, // 关闭大气（球表面白蒙蒙的效果）
                     depthTestAgainstTerrain: false,
                     baseColor: "#546a53"
                  },
                  // terrain: {
                  //     url: "http://data.mars3d.cn/terrain",
                  //     show: true
                  // },
                  cameraController: {
                     zoomFactor: 3.0,
                     minimumZoomDistance: 1,
                     maximumZoomDistance: 50000000,
                     enableRotate: true,
                     enableZoom: true
                  },
                  mapProjection: mars3d.CRS.EPSG3857, // 2D下展示墨卡托投影
                  mapMode2D: Cesium.MapMode2D.INFINITE_SCROLL, // 2D下左右一直可以滚动重复世界地图
                  skyBox: {
                     sources: {
                        positiveX: "static/img/skybox_near/qingtian/rightav9.jpg",
                        negativeX: "static/img/skybox_near/qingtian/leftav9.jpg",
                        positiveY: "static/img/skybox_near/qingtian/frontav9.jpg",
                        negativeY: "static/img/skybox_near/qingtian/backav9.jpg",
                        positiveZ: "static/img/skybox_near/qingtian/topav9.jpg",
                        negativeZ: "static/img/skybox_near/qingtian/bottomav9.jpg"
                     },
                     sources2: {
                        positiveX: "static/img/skybox_near/wanxia/SunSetRight.png",
                        negativeX: "static/img/skybox_near/wanxia/SunSetLeft.png",
                        positiveY: "static/img/skybox_near/wanxia/SunSetFront.png",
                        negativeY: "static/img/skybox_near/wanxia/SunSetBack.png",
                        positiveZ: "static/img/skybox_near/wanxia/SunSetUp.png",
                        negativeZ: "static/img/skybox_near/wanxia/SunSetDown.png"
                     },
                     sources3: {
                        negativeX: "static/img/skybox/2/tycho2t3_80_mx.jpg",
                        negativeY: "static/img/skybox/2/tycho2t3_80_my.jpg",
                        negativeZ: "static/img/skybox/2/tycho2t3_80_mz.jpg",
                        positiveX: "static/img/skybox/2/tycho2t3_80_px.jpg",
                        positiveY: "static/img/skybox/2/tycho2t3_80_py.jpg",
                        positiveZ: "static/img/skybox/2/tycho2t3_80_pz.jpg"
                     }
                  },
                  // sceneMode: this.is2d // 设置初始场景模式为2D
               },
               terrain: false, // 关闭地形空间
               // terrain: {
               //    url: "http://data.mars3d.cn/terrain",
               //    show: true
               // },
               control: {
                  // geocoder:true,
                  mouseDownView: true,
                  clockAnimate: false,
                  timeline: false,
                  compass: false,
                  navigationHelpButton: false,
                  fullscreenButton: false,
                  homeButton: true,
                  locationBar: false,
                  zoom: true,
                  sceneModePicker: false,
                  baseLayerPicker: true, // 是否显示图层选择控件
                  terrainProviderViewModels: this
                     .getTerrainProviderViewModelsArr() // 自baseLayerPicker面板的地形可选数组
               },

               basemaps: [{
                     name: "天地图影像",
                     icon: "static/img/basemaps/tdt_img.png",
                     type: "tdt",
                     layer: "img_d",
                     key: mars3d.Token.tiandituArr,
                     show: false, // 关闭天地图影像
                     credit: creditHtml
                  },
                  {
                     name: "天地图电子",
                     icon: "static/img/basemaps/tdt_vec.png",
                     type: "group",
                     layers: [{
                           name: "底图",
                           type: "tdt",
                           layer: "vec_d",
                           key: mars3d.Token.tiandituArr
                        },
                        {
                           name: "注记",
                           type: "tdt",
                           layer: "vec_z",
                           key: mars3d.Token.tiandituArr
                        }
                     ],
                     show: false, // 关闭天地图电子
                     credit: creditHtml
                  },
                  {
                     name: "高德影像",
                     icon: "static/img/basemaps/gaode_img.png",
                     type: "group",
                     layers: [{
                           name: "底图",
                           type: "gaode",
                           layer: "img_d"
                        },
                        {
                           name: "注记",
                           type: "gaode",
                           layer: "img_z"
                        }
                     ],
                     show: false, // 关闭高德影像
                     credit: creditHtml
                  },
                  {
                     name: "高德电子",
                     icon: "static/img/basemaps/gaode_vec.png",
                     type: "gaode",
                     layer: "vec",
                     show: true, // 默认显示高德电子地图
                     credit: creditHtml
                  },
                  {
                     name: "百度影像",
                     icon: "static/img/basemaps/gaode_img.png",
                     type: "group",
                     layers: [{
                           name: "底图",
                           type: "baidu",
                           layer: "img_d"
                        },
                        {
                           name: "注记",
                           type: "baidu",
                           layer: "img_z"
                        }
                     ],
                     show: false, // 关闭百度影像
                     credit: creditHtml
                  },
                  {
                     name: "百度电子",
                     icon: "static/img/basemaps/gaode_vec.png",
                     type: "baidu",
                     layer: "vec",
                     show: false, // 关闭百度电子
                     credit: creditHtml
                  },
                  {
                     name: "谷歌影像",
                     icon: "static/img/basemaps/google_img.png",
                     type: "google",
                     layer: "img_d",
                     chinaCRS: mars3d.ChinaCRS.GCJ02,
                     show: false // 关闭谷歌影像
                  },
                  {
                     name: "谷歌电子",
                     icon: "static/img/basemaps/google_vec.png",
                     type: "google",
                     layer: "vec",
                     chinaCRS: mars3d.ChinaCRS.GCJ02,
                     show: false // 关闭谷歌电子
                  },
                  {
                     name: "ArcGIS影像",
                     icon: "static/img/basemaps/esriWorldImagery.png",
                     type: "arcgis",
                     layer: "img_d",
                     enablePickFeatures: false,
                     show: false // 关闭 ArcGIS 影像
                  }
               ]
            });
            // const toolbar = new mars3d.control.geocoder({
            //     position: { top: "10px", left: "10px" }, // 按钮位置
            //     items: [
            //       {
            //         type: "button",
            //         text: "搜索",
            //         icon: "fa fa-search", // 使用 Font Awesome 图标
            //         action: () => {
            //          console.log(22222222);
            //           // this.$refs.searchBox.show(); // 调用搜索框的显示方法
            //         }
            //       }
            //     ]
            //   });
            //   map.addControl(toolbar);
            this.showQxShequDemo()
            if (this.is2d == true) {
               map.scene.morphTo3D(0);
         createMap() { 
            if (Object.keys(this.list).length == 0) { //切换页面有时会因为getmarsData（）在createMap()之后执行，导致此方法没有原始定位数据报错
               setTimeout(() => {
                  console.log(111);
                  //5秒播放一次
                  this.createMap()
               }, 100);
            } else {
               map.scene.morphTo2D(0);
               let mapPositionlat;
               let mapPositionlng;
               let mapPositionalt;
               let mapPositionheading;
               let mapPositionpitch;
               mapPositionlat = this.list.mapposition.split(',')[1];
               mapPositionlng = this.list.mapposition.split(',')[0];
               mapPositionalt = this.list.alt;
               mapPositionheading = this.list.heading;
               mapPositionpitch = this.list.pitch;
               const Cesium = mars3d.Cesium;
               map = new mars3d.Map('mars3dContainer', {
                  scene: {
                     center: {
                        // lat: 38.443729,
                        // lng: 38.443729,
                        // alt: 200,
                        // heading: 0,
                        // pitch: 0,

                        lat: mapPositionlat,
                        lng: mapPositionlng,
                        alt: mapPositionalt,
                        heading: 0,
                        pitch: 0
                     },
                     // center: { lat: mapPosition[1], lng: mapPosition[0], alt: HomeSetting.alt, heading: HomeSetting.heading, pitch: HomeSetting.pitch },
                     showSkyAtmosphere: false, // 关闭球周边的白色轮廓 map.scene.skyAtmosphere = false
                     fog: true,
                     fxaa: true,
                     globe: {
                        showGroundAtmosphere: false, // 关闭大气（球表面白蒙蒙的效果）
                        depthTestAgainstTerrain: false,
                        baseColor: "#546a53"
                     },
                     // terrain: {
                     //     url: "http://data.mars3d.cn/terrain",
                     //     show: true
                     // },
                     cameraController: {
                        zoomFactor: 3.0,
                        minimumZoomDistance: 1,
                        maximumZoomDistance: 50000000,
                        enableRotate: true,
                        enableZoom: true
                     },
                     mapProjection: mars3d.CRS.EPSG3857, // 2D下展示墨卡托投影
                     mapMode2D: Cesium.MapMode2D.INFINITE_SCROLL, // 2D下左右一直可以滚动重复世界地图
                     skyBox: {
                        sources: {
                           positiveX: "static/img/skybox_near/qingtian/rightav9.jpg",
                           negativeX: "static/img/skybox_near/qingtian/leftav9.jpg",
                           positiveY: "static/img/skybox_near/qingtian/frontav9.jpg",
                           negativeY: "static/img/skybox_near/qingtian/backav9.jpg",
                           positiveZ: "static/img/skybox_near/qingtian/topav9.jpg",
                           negativeZ: "static/img/skybox_near/qingtian/bottomav9.jpg"
                        },
                        sources2: {
                           positiveX: "static/img/skybox_near/wanxia/SunSetRight.png",
                           negativeX: "static/img/skybox_near/wanxia/SunSetLeft.png",
                           positiveY: "static/img/skybox_near/wanxia/SunSetFront.png",
                           negativeY: "static/img/skybox_near/wanxia/SunSetBack.png",
                           positiveZ: "static/img/skybox_near/wanxia/SunSetUp.png",
                           negativeZ: "static/img/skybox_near/wanxia/SunSetDown.png"
                        },
                        sources3: {
                           negativeX: "static/img/skybox/2/tycho2t3_80_mx.jpg",
                           negativeY: "static/img/skybox/2/tycho2t3_80_my.jpg",
                           negativeZ: "static/img/skybox/2/tycho2t3_80_mz.jpg",
                           positiveX: "static/img/skybox/2/tycho2t3_80_px.jpg",
                           positiveY: "static/img/skybox/2/tycho2t3_80_py.jpg",
                           positiveZ: "static/img/skybox/2/tycho2t3_80_pz.jpg"
                        }
                     },
                     // sceneMode: this.is2d // 设置初始场景模式为2D
                  },
                  terrain: false, // 关闭地形空间
                  // terrain: {
                  //    url: "http://data.mars3d.cn/terrain",
                  //    show: true
                  // },
                  control: {
                     // geocoder:true,
                     mouseDownView: true,
                     clockAnimate: false,
                     timeline: false,
                     compass: false,
                     navigationHelpButton: false,
                     fullscreenButton: false,
                     homeButton: true,
                     locationBar: false,
                     zoom: true,
                     sceneModePicker: false,
                     baseLayerPicker: true, // 是否显示图层选择控件
                     terrainProviderViewModels: this
                        .getTerrainProviderViewModelsArr() // 自baseLayerPicker面板的地形可选数组
                  },

                  basemaps: [{
                        name: "天地图影像",
                        icon: "static/img/basemaps/tdt_img.png",
                        type: "tdt",
                        layer: "img_d",
                        key: mars3d.Token.tiandituArr,
                        show: false, // 关闭天地图影像
                        credit: creditHtml
                     },
                     {
                        name: "天地图电子",
                        icon: "static/img/basemaps/tdt_vec.png",
                        type: "group",
                        layers: [{
                              name: "底图",
                              type: "tdt",
                              layer: "vec_d",
                              key: mars3d.Token.tiandituArr
                           },
                           {
                              name: "注记",
                              type: "tdt",
                              layer: "vec_z",
                              key: mars3d.Token.tiandituArr
                           }
                        ],
                        show: false, // 关闭天地图电子
                        credit: creditHtml
                     },
                     {
                        name: "高德影像",
                        icon: "static/img/basemaps/gaode_img.png",
                        type: "group",
                        layers: [{
                              name: "底图",
                              type: "gaode",
                              layer: "img_d"
                           },
                           {
                              name: "注记",
                              type: "gaode",
                              layer: "img_z"
                           }
                        ],
                        show: false, // 关闭高德影像
                        credit: creditHtml
                     },
                     {
                        name: "高德电子",
                        icon: "static/img/basemaps/gaode_vec.png",
                        type: "gaode",
                        layer: "vec",
                        show: true, // 默认显示高德电子地图
                        credit: creditHtml
                     },
                     {
                        name: "百度影像",
                        icon: "static/img/basemaps/gaode_img.png",
                        type: "group",
                        layers: [{
                              name: "底图",
                              type: "baidu",
                              layer: "img_d"
                           },
                           {
                              name: "注记",
                              type: "baidu",
                              layer: "img_z"
                           }
                        ],
                        show: false, // 关闭百度影像
                        credit: creditHtml
                     },
                     {
                        name: "百度电子",
                        icon: "static/img/basemaps/gaode_vec.png",
                        type: "baidu",
                        layer: "vec",
                        show: false, // 关闭百度电子
                        credit: creditHtml
                     },
                     {
                        name: "谷歌影像",
                        icon: "static/img/basemaps/google_img.png",
                        type: "google",
                        layer: "img_d",
                        chinaCRS: mars3d.ChinaCRS.GCJ02,
                        show: false // 关闭谷歌影像
                     },
                     {
                        name: "谷歌电子",
                        icon: "static/img/basemaps/google_vec.png",
                        type: "google",
                        layer: "vec",
                        chinaCRS: mars3d.ChinaCRS.GCJ02,
                        show: false // 关闭谷歌电子
                     },
                     {
                        name: "ArcGIS影像",
                        icon: "static/img/basemaps/esriWorldImagery.png",
                        type: "arcgis",
                        layer: "img_d",
                        enablePickFeatures: false,
                        show: false // 关闭 ArcGIS 影像
                     }
                  ]
               });
               // const toolbar = new mars3d.control.geocoder({
               //     position: { top: "10px", left: "10px" }, // 按钮位置
               //     items: [
               //       {
               //         type: "button",
               //         text: "搜索",
               //         icon: "fa fa-search", // 使用 Font Awesome 图标
               //         action: () => {
               //           // this.$refs.searchBox.show(); // 调用搜索框的显示方法
               //         }
               //       }
               //     ]
               //   });
               //   map.addControl(toolbar);
               this.showQxShequDemo()
               if (this.is2d == true) {
                  map.scene.morphTo3D(0);
               } else {
                  map.scene.morphTo2D(0);
               }
               // 创建矢量数据图层
               graphicLayer = new mars3d.layer.GraphicLayer({
                  allowDrillPick: true // 如果存在坐标完全相同的图标点，可以打开该属性，click事件通过graphics判断
               })
               map.addLayer(graphicLayer)
               // 绑定点击事件
               graphicLayer.on(mars3d.EventType.click, (event, position) => {
                  var car = event.graphic
                  // var list = []
                  var json = {}

                  // var message = "姓名: " + name + "<br>编号: " + number;
                  // // 使用Mars3D的提示框组件显示信息
                  //     this.graphicLayer.bindPopup(new mars3d.Tooltip({
                  //         content: message,
                  //         position: position, // 指定提示框的位置为点击的位置
                  //         className: "custom-tooltip", // 可以添加自定义样式类
                  //         closeButton: true, // 是否显示关闭按钮
                  //     }));
                  // 打开提示框
                  // this.graphicLayer.openPopup();


                  json.ponline = car.attr.ponline
                  json.baoliu2 = car.attr.baoliu2
                  json.baoliu3 = car.attr.baoliu3
                  json.ptagid = car.attr.ptagid
                  json.pname = car.attr.pname
                  json.ppower = car.attr.ppower
                  json.baoliu4 = car.attr.baoliu4
                  json.pdepartment = car.attr.pdepartment
                  json.baoliu13 = car.attr.baoliu13
                  this.perlist = json
                  this.$ownerInstance.callMethod('handleMapClick', this.perlist);


               })

               //测试本地图片 
               // const graphic = new mars3d.graphic.BillboardEntity({
               //    position: [117.229619, 31.686288, 1000],
               //    style: {
               //       image: "static/img/mark-red.png",
               //       horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
               //       verticalOrigin: Cesium.VerticalOrigin.BOTTOM
               //    },
               //    attr: {
               //       remark: "示例1"
               //    }
               // })
               // graphicLayer.addGraphic(graphic)
               // this.fetchPersonsList()
               // this.updateTrajectories()

               // this.getGPSCesium();
               this.$ownerInstance.callMethod('receiveRenderData', this.dot)
            }

            console.log("map构造完成", map)
            // 创建矢量数据图层
            graphicLayer = new mars3d.layer.GraphicLayer({
               allowDrillPick: true // 如果存在坐标完全相同的图标点，可以打开该属性，click事件通过graphics判断
            })
            map.addLayer(graphicLayer)
            // 绑定点击事件
            graphicLayer.on(mars3d.EventType.click, (event, position) => {
               var car = event.graphic
               // var list = []
               var json = {}

               // var message = "姓名: " + name + "<br>编号: " + number;
               // // 使用Mars3D的提示框组件显示信息
               //     this.graphicLayer.bindPopup(new mars3d.Tooltip({
               //         content: message,
               //         position: position, // 指定提示框的位置为点击的位置
               //         className: "custom-tooltip", // 可以添加自定义样式类
               //         closeButton: true, // 是否显示关闭按钮
               //     }));
               // 打开提示框
               // this.graphicLayer.openPopup();


               json.ponline = car.attr.ponline
               json.baoliu2 = car.attr.baoliu2
               json.ptagid = car.attr.ptagid
               json.pname = car.attr.pname
               json.ppower = car.attr.ppower
               json.baoliu4 = car.attr.baoliu4
               json.pdepartment = car.attr.pdepartment
               this.perlist = json
               this.$ownerInstance.callMethod('handleMapClick', this.perlist);


            })

            //测试本地图片
            // const graphic = new mars3d.graphic.BillboardEntity({
            //    position: [117.229619, 31.686288, 1000],
            //    style: {
            //       image: "static/img/mark-red.png",
            //       horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            //       verticalOrigin: Cesium.VerticalOrigin.BOTTOM
            //    },
            //    attr: {
            //       remark: "示例1"
            //    }
            // })
            // graphicLayer.addGraphic(graphic)
            // this.fetchPersonsList()
            // this.updateTrajectories()

            // this.getGPSCesium();
            this.$ownerInstance.callMethod('receiveRenderData', this.dot)
            this.$ownerInstance.callMethod('initlock');
         },
         getmarsPoint(newValue) {
            console.log("搜索===========》》》》》》》");
            // Object.keys(perlist).length
            if (Object.keys(newValue).length != 0) {
               map.camera.flyTo({
                  destination: Cesium.Cartesian3.fromDegrees(newValue.lon, newValue.lat, 500), // 目标点经纬度和视角高度
                  duration: 3 // 动画持续时间（秒）
               });
            }
            // this.list=newValue

         },
         // 获取GPS Cesium数据
         // getGPSCesium() {
         //     fetch('http://39.106.210.13:8081/api/wx/earlyWarning', {
         //       method: 'POST', 
         //       headers: {
         //         // 'Authorization': access_token 
         //       }
         //     })
         //     // .then(response => response.json())
         //     .then(data => {
         //       console.log(data);
         // console.log(data.data);
         //       // 处理获取到的GPS Cesium数据
         //     })
         //     .catch(error => {
         //       console.error('Error:', error);
         //     }); 
         //   },
         showQxShequDemo() {
            var tiles3dLayer = null
            tiles3dLayer = new mars3d.layer.TilesetLayer({
@@ -997,19 +1157,13 @@


            tiles3dLayer.readyPromise.then(function(layer) {
               console.log("load完成", layer)
               console.log("URL:", tiles3dLayer);
               // tiles3dLayer.tileset 是 Cesium3DTileset，支持绑定所有Cesium原生事件
               // 参考API http://mars3d.cn/api/cesium/Cesium3DTileset.html
               tiles3dLayer.tileset.loadProgress.addEventListener(function(numberOfPendingRequests,
                  numberOfTilesProcessing) {
                  if (numberOfPendingRequests === 0 && numberOfTilesProcessing === 0) {
                     console.log("Loading: 停止加载")
                     return
                  }
                  console.log(
                     `Loading: 待处理请求数: ${numberOfPendingRequests}, 处理数: ${numberOfTilesProcessing}`
                  )
               })


@@ -1019,6 +1173,7 @@
            this.sudus = newValue
         },
         getGuijiData(newValue) {
            countNum = 0;
            LocusData = []
            if (!isPlack) {
               // plackControl.shutDown()
@@ -1028,9 +1183,14 @@
            }
            // graphicLayer = null
            // graphicLayer = new mars3d.layer.GraphicLayer()
				

            map.addLayer(graphicLayer)
            LocusData = newValue //轨迹数据
            for (let key in LocusData) {
               for (let i = 0; i < LocusData[key].length; i++) {
                  countNum++;
               }
            }
            map.clock.currentTime = Cesium.JulianDate.fromDate(new Date(LocusData[0][0].addtime))
         },
         getendGuijiData(newValue) {
@@ -1051,6 +1211,7 @@
            }];
            map.setCameraViewList(viewPoints);
            params = newValue
            console.log(params);
            var dqNum = 0;
            var DqLocusData = [];
            for (let key in LocusData) {
@@ -1149,8 +1310,11 @@
            });
            // 将 car 添加到 graphicLayer
            graphicLayer.addGraphic(car);

            this.iterate(); // 开始第一次迭代
            setTimeout(() => {
               //5秒播放一次
               this.iterate();
            }, this.sudus); // 继续迭代
            // this.iterate(); // 开始第一次迭代
            return {
               start: function() {
                  if (!isRunning) {
@@ -1198,9 +1362,6 @@
                     pitch: 0,
                     roll: 0,
                  };

                  console.log(LocuData[num + 1]);
                  // if (LocuData[num+1]!=undefined) {
                  car = new mars3d.graphic.Route({
                     id: LocuData[num - 1].tagid + num,
                     name: LocuData[num - 1].name + num,
@@ -1230,7 +1391,6 @@
                     },
                     attr: LocuData[num - 1],
                  });
                  // console.log(12345678);
                  // 将 car 添加到 graphicLayer
                  graphicLayer.addGraphic(car);
                  // }
@@ -1238,11 +1398,23 @@

               } else {
                  let currentData = LocuData[num];
                  let currentDataTime = {
                     addtime: currentData.addtime // 示例时间
                  };
                  let dateString = currentDataTime.addtime.replace(/(\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}):/, "$1.");
                  let date = new Date(dateString);
                  let currentTime = Cesium.JulianDate.fromDate(date);
                  let adjustedTime = Cesium.JulianDate.addSeconds(currentTime, -1, new Cesium.JulianDate());
                  map.clock.currentTime = Cesium.JulianDate.fromDate(new Date(adjustedTime))
                  var point = new mars3d.LngLatPoint(currentData.gspJingdu, currentData.gpsWeidu, 0);
                  car.addDynamicPosition(point, currentData.addtime);
                  var json = {}
                  json.dqnum = num + "/" + countNum
                  json.plackTime = currentData.addtime
                  // this.perlist = json
                  this.$ownerInstance.callMethod('guijiClick', json);
                  num + "/" + countNum
               }


               num++;
               setTimeout(() => {
                  //5秒播放一次
@@ -1253,16 +1425,14 @@
         },

         getFenceData(newValue) {
            // const fenceData = []
            console.log(newValue);
            if (Object.keys(newValue).length != 0) {
               newValue.forEach((e, i) => {

                  // console.log('打印数据=================');
                  // let iconStyle = e.online === '1' ? {} : { image: "static/img/person2.png" };
                  // console.log(e);
                  // let parts = e.image.split(',');
                  if (e.baoliu7 === '1') {
                     if (!addedFenceIds.has(e.id)) {
                        // setTimeout(() => {
                        //5秒播放一次
                        // }, 1000);
                        let parts = e.baoliu8.split(';');
                        var part = []
                        var fence = []
@@ -1270,82 +1440,207 @@
                           part = parts[i].split(',');
                           // fence.push(part[0])
                           // fence.push(part[1])
                           part.push('0')
                           // part.push('0')
                           fence.push(part)
                        }
                        // 创建围栏图形
                        const fenceGraphic = new mars3d.graphic.PolygonEntity({
                           positions: fence,
                           style: {
                              color: Cesium.Color.RED.withAlpha(0.3), // 围栏颜色，半透明
                              outline: true, // 是否显示边框
                              outlineColor: "#5BFF1A" // 边框颜色
                           }
                        });
                        graphicLayer.addGraphic(fenceGraphic);
                        addedFenceIds.add(e.id);
                     }
                  } else {
                     if (addedFenceIds.has(e.id)) {
                        // const {
                        //    graphic,
                        //    label
                        // } = this.graphicLabels[e.anchorid];
                        // const graphic1 = new mars3d.graphic.BillboardEntity({
                        //    position: [e.baoliu6, e.baoliu7, 0],
                        //    id: e.anchorid,
                        //    // style: {
                        //    //             ...iconStyle,
                        //    //             image: iconStyle.image || "static/img/person3.png", // 默认图标
                        //    //             horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                        //    //             verticalOrigin: Cesium.VerticalOrigin.BOTTOM
                        //    //           },
                        //    style: {
                        //       image: "static/img/base2.png",
                        //       horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                        //       verticalOrigin: Cesium.VerticalOrigin.BOTTOM
                        //    },
                        //    attr: { 
                        //       anchormode: e.anchormode,
                        //       baoliu6: e.baoliu6,
                        //       baoliu7: e.baoliu7,
                        //       // ppower: e.ppower,
                        //       baoliu13: e.baoliu13,
                        //       // pdepartment: e.pdepartment,
                        //       // pname: e.name,
                        //       anchorid: e.anchorid,
                        //    }
                        // })
                        // graphicLayer.addGraphic(graphic1)
                        // graphicLayer.removeGraphic(label);
                        graphicLayer.removeGraphic(graphic);
                        delete this.graphicLabels[e.id]; // 删除引用
                        // delete this.labels[e.id];
                        addedFenceIds.delete(e.id);
                        // this.graphicLabels[e.anchorid] = {
                        //    graphic: graphic1
                        // };
                        let colorFence = ""
                        let JuXingcolorFence = ""
                        if (e.color == "红色") {
                           colorFence = "#C70708"
                           JuXingcolorFence = "rgba(227,60,47,0.5)"
                        }
                        if (e.color == "蓝色") {
                           colorFence = "#0D3DC1"
                           JuXingcolorFence = "rgba(13,130,125,0.5)"

                        }
                        if (e.color == "绿色") {
                           colorFence = "#20D85C"
                           JuXingcolorFence = "rgba(54,150,80,0.5)"
                        }
                        if (e.color == "黑色") {
                           colorFence = "#1E1E1E"
                           JuXingcolorFence = "rgba(0,0,0,0.5)"
                        }
                        if (e.color == "白色") {
                           colorFence = "#FFFFFF"
                           JuXingcolorFence = "rgba(255,255,255,0.5)"
                        }
                        if (e.shape == '圆形') {
                           const fenceGraphic = new mars3d.graphic.CirclePrimitive({
                              position: fence[0],
                              style: {
                                 radius: fence[1][0], // 半径
                                 color: JuXingcolorFence,
                                 diffHeight: parseInt(e.baoliu1) / 100,
                                 label: {
                                    text: e.name,
                                    font_size: 18,
                                    color: "#FFFFFF",
                                    distanceDisplayCondition: true,
                                    distanceDisplayCondition_far: 500000,
                                    distanceDisplayCondition_near: 0
                                 }
                              },
                           });
                           graphicLayer.addGraphic(fenceGraphic);
                           addedFenceIds.add(e.id);
                        } else if (e.shape == '多边形') {
                           console.log(fence);
                           const fenceGraphic = new mars3d.graphic.WallPrimitive({
                              positions: fence,
                              style: {
                                 closure: true,
                                 diffHeight: e.baoliu1 == null ? 0 : parseInt(e
                                    .baoliu1) / 100,
                                 materialType: mars3d.MaterialType.LineFlow,
                                 materialOptions: {
                                    // 动画线材质
                                    image: "static/img/textures/fence.png",
                                    axisY: true,
                                    color: colorFence,
                                    speed: 10 // 速度，建议取值范围1-100
                                 },
                                 label: {
                                    text: e.name,
                                    font_size: 18,
                                    outline: true,
                                    outlineColor: colorFence,
                                    color: "#ffffff",
                                    distanceDisplayCondition: true,
                                    distanceDisplayCondition_far: 500000,
                                    distanceDisplayCondition_near: 0
                                 }
                              },

                           })
                           // var fenceGraphic = new mars3d.graphic.RectanglePrimitive({
                           //    positions: [
                           //       fence[0],
                           //       fence[1]
                           //    ],
                           //    style: {
                           //       color: JuXingcolorFence,
                           //       diffHeight: e.baoliu1 == null ? 0 : parseInt(e
                           //          .baoliu1) / 100,
                           //       label: {
                           //          text: e.name,
                           //          font_size: 18,
                           //          color: "#FFFFFF",
                           //          distanceDisplayCondition: true,
                           //          distanceDisplayCondition_far: 500000,
                           //          distanceDisplayCondition_near: 0
                           //       }
                           //    },

                           // })
                           graphicLayer.addGraphic(fenceGraphic);
                           addedFenceIds.add(e.id);
                        // }else if (e.shape == '矩形') {
                        //    console.log(fence);
                        //    // const fenceGraphic = new mars3d.graphic.WallPrimitive({
                        //    //    positions: fence,
                        //    //    style: {
                        //    //       closure: true,
                        //    //       diffHeight: e.baoliu1 == null ? 0 : parseInt(e
                        //    //          .baoliu1) / 100,
                        //    //       materialType: mars3d.MaterialType.LineFlow,
                        //    //       materialOptions: {
                        //    //          // 动画线材质
                        //    //          image: "static/img/textures/fence.png",
                        //    //          axisY: true,
                        //    //          color: colorFence,
                        //    //          speed: 10 // 速度，建议取值范围1-100
                        //    //       },
                        //    //       label: {
                        //    //          text: e.name,
                        //    //          font_size: 18,
                        //    //          outline: true,
                        //    //          outlineColor: colorFence,
                        //    //          color: "#ffffff",
                        //    //          distanceDisplayCondition: true,
                        //    //          distanceDisplayCondition_far: 500000,
                        //    //          distanceDisplayCondition_near: 0
                        //    //       }
                        //    //    },

                        //    // })
                        //    var fenceGraphic = new mars3d.graphic.RectanglePrimitive({
                        //       positions: [
                        //          fence[0],
                        //          fence[1]
                        //       ],
                        //       style: {
                        //          color: JuXingcolorFence,
                        //          diffHeight: e.baoliu1 == null ? 0 : parseInt(e
                        //             .baoliu1) / 100,
                        //          label: {
                        //             text: e.name,
                        //             font_size: 18,
                        //             color: "#FFFFFF",
                        //             distanceDisplayCondition: true,
                        //             distanceDisplayCondition_far: 500000,
                        //             distanceDisplayCondition_near: 0
                        //          }
                        //       },

                        //    })
                        //    graphicLayer.addGraphic(fenceGraphic);
                        //    addedFenceIds.add(e.id);
                        }
                     } else {
                        if (addedFenceIds.has(e.id)) {
                           // const {
                           //    graphic,
                           //    label
                           // } = this.graphicLabels[e.anchorid];
                           // const graphic1 = new mars3d.graphic.BillboardEntity({
                           //    position: [e.baoliu6, e.baoliu7, 0],
                           //    id: e.anchorid,
                           //    // style: {
                           //    //             ...iconStyle,
                           //    //             image: iconStyle.image || "static/img/person3.png", // 默认图标
                           //    //             horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                           //    //             verticalOrigin: Cesium.VerticalOrigin.BOTTOM
                           //    //           },
                           //    style: {
                           //       image: "static/img/base2.png",
                           //       horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                           //       verticalOrigin: Cesium.VerticalOrigin.BOTTOM
                           //    },
                           //    attr: { 
                           //       anchormode: e.anchormode,
                           //       baoliu6: e.baoliu6,
                           //       baoliu7: e.baoliu7,
                           //       // ppower: e.ppower,
                           //       baoliu13: e.baoliu13,
                           //       // pdepartment: e.pdepartment,
                           //       // pname: e.name,
                           //       anchorid: e.anchorid,
                           //    }
                           // })
                           // graphicLayer.addGraphic(graphic1)
                           // graphicLayer.removeGraphic(label);
                           graphicLayer.removeGraphic(graphic);
                           delete this.graphicLabels[e.id]; // 删除引用
                           // delete this.labels[e.id];
                           addedFenceIds.delete(e.id);
                           // this.graphicLabels[e.anchorid] = {
                           //    graphic: graphic1
                           // };
                        }
                     }
                  }
               }) // 将传递过来的值赋值给points，这样就可以在视图层中使用
            } else {
               addedFenceIds = new Set();
            }


         },
         getBaseData(newValue) {
            if (Object.keys(newValue).length != 0) {
               newValue.forEach((e, i) => {

                  // console.log('打印数据=================');
                  // let iconStyle = e.online === '1' ? {} : { image: "static/img/person2.png" };
                  // console.log(e);
                  // let parts = e.image.split(',');
                  if (e.anchormode === '1') {
                     if (!addedBaseIds.has(e.anchorid)) {
                        // console.log(e.anchorid);
                        // console.log('打印base数据===================》》》》》》》》》》》》》》');
                        //测试本地图片
                        const graphic = new mars3d.graphic.BillboardEntity({
                           position: [e.baoliu6, e.baoliu7, 0],
@@ -1383,7 +1678,8 @@
                              outlineWidth: 2, // 描边宽度
                              style: Cesium.LabelStyle.FILL_AND_OUTLINE, // 风格：填充和描边
                              verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 文字在垂直方向的原点
                              pixelOffset: new Cesium.Cartesian2(0, -30) // 文字偏移量，向下偏移10像素
                              pixelOffset: new Cesium.Cartesian2(0, -
                                 30) // 文字偏移量，向下偏移10像素
                           }
                        });
                        if (this.graphicLabels[e.anchorid]) {
@@ -1450,14 +1746,24 @@
            }
         },
         getData(newValue) {
            let modelParam = {
               scale: 2,
               url: "http://39.106.210.13:8888/hxzkuwb/view/Home/model/model/walk.gltf",
               pitch: 0,
               roll: 0,
            };
            if (Object.keys(newValue).length != 0) {
               newValue.forEach((e, i) => {
                  if (e.online === '1') {
                     if (!addedCarIds.has(e.id)) {
                        //测试本地图片
                        const graphic = new mars3d.graphic.BillboardEntity({

                           position: [e.baoliu2, e.baoliu3, 0],
                           id: e.id,
                           // model: {
                           //    ...modelParam,
                           // },
                           style: {
                              image: "static/img/person5.png",
                              // scale:0.2,
@@ -1470,6 +1776,7 @@
                              baoliu3: e.baoliu3,
                              ppower: e.ppower,
                              baoliu4: e.baoliu4,
                              baoliu13: e.baoliu13,
                              pdepartment: e.pdepartment,
                              pname: e.name,
                              ptagid: e.id,
@@ -1485,7 +1792,8 @@
                              outlineWidth: 2, // 描边宽度
                              style: Cesium.LabelStyle.FILL_AND_OUTLINE, // 风格：填充和描边
                              verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 文字在垂直方向的原点
                              pixelOffset: new Cesium.Cartesian2(0, -30) // 文字偏移量，向下偏移10像素
                              pixelOffset: new Cesium.Cartesian2(0, -
                                 30) // 文字偏移量，向下偏移10像素
                           }
                        });
                        if (this.graphicLabels[e.id]) {
@@ -1524,6 +1832,7 @@
                                 baoliu3: e.baoliu3,
                                 ppower: e.ppower,
                                 baoliu4: e.baoliu4,
                                 baoliu13: e.baoliu13,
                                 pdepartment: e.pdepartment,
                                 pname: e.name,
                                 ptagid: e.ptagid,
@@ -1535,6 +1844,10 @@
                           this.graphicLabels[e.id] = {
                              graphic: graphic1,
                           };
                        } else {
                           graphicLayer.removeGraphic(this.graphicLabels[e.id].graphic);
                           graphicLayer.removeGraphic(this.graphicLabels[e.id].label);
                           delete this.graphicLabels[e.id];
                        }
                        addedCarIds.delete(e.id);
                     }
@@ -1543,6 +1856,12 @@
            }
         },
         getgpsData(newValue) {
            let modelParam = {
               scale: 2,
               url: "http://39.106.210.13:8888/hxzkuwb/view/Home/model/model/walk.gltf",
               pitch: 0,
               roll: 0,
            };
            if (Object.keys(newValue).length != 0) {
               var listALL = newValue;
               if (graphicLayer != null) {
@@ -1589,6 +1908,9 @@
                           graphicLayer.removeGraphic(car);
                           graphicLayer.removeGraphic(label);
                        }
                        // model: {
                        //    ...modelParam,
                        // },
                        if (item.ponline === '1') {
                           // 创建新的图标实体
                           const newGraphic = new mars3d.graphic.BillboardEntity({
@@ -1597,7 +1919,8 @@
                              style: {
                                 image: iconSrc,
                                 scale: scaleSrc,
                                 horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                                 horizontalOrigin: Cesium.HorizontalOrigin
                                    .CENTER,

                                 verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                                 // pixelOffset: new Cesium.Cartesian2(0, 10), // 向下偏移50像素
@@ -1608,6 +1931,7 @@
                                 baoliu3: item.baoliu3,
                                 ppower: item.ppower,
                                 baoliu4: item.baoliu4,
                                 baoliu13: item.baoliu13,
                                 pdepartment: item.pdepartment,
                                 pname: item.pname,
                                 ptagid: item.ptagid,
@@ -1730,6 +2054,7 @@
      z-index: 99999999;
   }


   .content {
      display: flex;
      flex-direction: column;