Fork: 0
root / urbanLifeline_YanAn
Transfer to URL with SHA Find file
Newer
Older
urbanLifeline_YanAn / src / views / oneMap / index.vue
@jimengfei jimengfei on 22 Oct 78 KB updata
Raw Blame History 
<template>
  <div id="oneMapIndex">
    <!-- 内容 -->
    <div id="oneMapBody">
      <!-- 顶部 -->
      <div
        id="oneMapHeader"
        :class="['oneMapHeader', 'animate__animated', showPanel2 ? 'animate__fadeOutUp' : 'animate__fadeInDown']"
      >
        <!-- 标题 -->
        <!-- <img id="titleFont" src="@/assets/images/Sponge_screen/oneMapTitleFont.png" /> -->
        <div id="titleFont">延安市城市生命线安全运行监测系统</div>
        <!-- 标题左侧展示组件 -->
        <div class="Location">
          <el-icon size="18" style="margin-right: 5px; vertical-align: bottom"><LocationFilled /></el-icon>
          延安
        </div>
        <div class="Timer">
          <span class="date">{{ dates }}</span>
          <span class="time">{{ times }}</span>
          <span class="date week">{{ weeks }}</span>
        </div>
        <div class="Wather"></div>
        <!-- 标题右侧功能组件 -->
        <router-link to="/index?type=FullScreen">
          <div class="goHome header_icon"></div>
        </router-link>
        <div class="goUser_com header_icon" @click="toRYBox"></div>
        <router-link to="/user/profile">
          <div class="goClose_com header_icon"></div>
        </router-link>
      </div>
      <!-- 地图组件 -->
      <OneMap @map-click="mapClick" v-if="AllData.MapShowBol" :loadCallback="mapLoad"></OneMap>
      <!-- 桥梁BIM -->
      <WangJiaPingBIM v-if="!AllData.MapShowBol && AllData.ComShowID == 4"></WangJiaPingBIM>
      <!-- 隧道BIM -->
      <Tunnel v-if="!AllData.MapShowBol && AllData.ComShowID == 5"></Tunnel>
      <!-- 降雨效果 -->
      <CanvasRain v-if="showRainFlow"></CanvasRain>
      <!-- 地图标注点弹窗popup -->
      <PopupInfo></PopupInfo>
      <!-- 动态信息 -->
      <dynamicInformation
        v-show="
          AllData.ComShowID != 4 &&
          AllData.ComShowID != 5 &&
          AllData.ComShowID != 6 &&
          AllData.ComShowID != 61 &&
          AllData.ComShowID != 62 &&
          AllData.ComShowID != 1 &&
          AllData.ComShowID != 7
        "
        :showPanel="showPanel"
      ></dynamicInformation>
      <!-- 左右面板展示隐藏-->
      <el-tooltip effect="dark" content="显隐面板" placement="top">
        <img
          id="ShowComVs"
          :class="[showPanel ? 'ShowComVsTrue' : 'ShowComVsFalse']"
          @click="showPanel = !showPanel"
          :src="showPanel ? ZuoYou2 : ZuoYou1"
        />
      </el-tooltip>

      <!-- 图例 -->
      <img
        id="TuChengImg"
        src="@/assets/images/Sponge_screen/TuCheng.png"
        alt=""
        @click="ShowTuCheng = !ShowTuCheng"
        :class="[showPanel ? 'TuChengImgTrue' : 'TuChengImgFalse']"
        v-if="AllData.MapShowBol"
      />
      <LayerControl v-if="AllData.MapShowBol" :ShowTuCheng="ShowTuCheng" :showPanel="showPanel"></LayerControl>
      <!-- 四色图图例 -->
      <img
        id="SiSeTu"
        src="@/assets/images/Sponge_screen/SiSeTu.png"
        :class="[showPanel ? 'SiSeTuTrue' : 'SiSeTuFalse']"
        v-if="AllData.SiSeTuBol"
      />
      <!-- 1:总体概览 -->
      <ComZTGL v-if="AllData.ComShowID == 1" :isActive="AllData.ComShowID == 1 ? true : false" :showPanel="showPanel"></ComZTGL>
      <!-- 2:智慧燃气 -->
      <ComZHRQ v-if="AllData.ComShowID == 2" :isActive="AllData.ComShowID == 2 ? true : false" :showPanel="showPanel"></ComZHRQ>
      <!-- 3:智慧排水 -->
      <ComZHPS v-if="AllData.ComShowID == 3" :isActive="AllData.ComShowID == 3 ? true : false" :showPanel="showPanel"></ComZHPS>
      <!-- 4:智慧桥梁 -->
      <ComZHQL v-if="AllData.ComShowID == 4" :isActive="AllData.ComShowID == 4 ? true : false" :showPanel="showPanel"> </ComZHQL>
      <!-- 5:智慧隧道 -->
      <ComZHSD v-if="AllData.ComShowID == 5" :isActive="AllData.ComShowID == 5 ? true : false" :showPanel="showPanel"></ComZHSD>
      <!-- 6:智慧海绵 -->
      <ComZHHM v-if="AllData.ComShowID == 6" :isActive="AllData.ComShowID == 6 ? true : false" :showPanel="showPanel"></ComZHHM>
      <!-- 智慧海绵-监测分析 -->
      <ZHHMJCFX
        v-if="AllData.ComShowID == 61"
        :isActive="AllData.ComShowID == 61 ? true : false"
        :showPanel="showPanel"
      ></ZHHMJCFX>
      <!-- 智慧海绵-建设评估 -->
      <ZHHMJSPG
        v-if="AllData.ComShowID == 62"
        :isActive="AllData.ComShowID == 62 ? true : false"
        :showPanel="showPanel"
      ></ZHHMJSPG>
      <!-- 7:防洪排涝 -->
      <ComFHPL v-if="AllData.ComShowID == 7" :isActive="AllData.ComShowID == 7 ? true : false" :showPanel="showPanel"></ComFHPL>
    </div>
    <!-- 底部菜单 -->
    <div id="BottomMenuBox">
      <Transition name="slide-fade">
        <div v-show="AllData.BottmBackGroundShow" class="BottmBackGround"></div>
      </Transition>
      <!-- 菜单List -->
      <div
        class="MenuList"
        :class="['MenuList' + index, 'animate__animated', showPanel2 ? 'animate__bounceInUp' : 'animate__bounceInUp']"
        v-for="(item, index) in AllData.MenuListData"
        @click="MenuClick(item, index)"
        v-if="BottomshowPanel"
        @mouseenter="handleMouseEnter(item)"
        @mouseleave="handleMouseLeave(item)"
      >
        <img class="MenuImg" v-if="AllData.AC_MenuIndex == item.id" :src="item.AC_icon" />
        <img class="MenuImg" v-else :src="item.iocn" />
        <div class="MenuFont" :class="AllData.AC_MenuIndex == item.id ? 'AC_Font' : ''">
          {{ item.name }}

          <!-- 二级菜单 -->
          <!-- <Transition name="slide-fade2"> -->
          <div v-show="AllData.ErJiMenuShowID == item.id && !!item.children" class="ErJiMenuBox">
            <span
              class="ErJiMenuList"
              :class="AllData.ErJiMenuCheckID == item2.id ? 'ErJiMenuCheck' : ''"
              v-for="item2 in item.children"
              @click.stop="ErJiMenuClick(item, item2)"
            >
              {{ item2.name }}
            </span>
          </div>
          <!-- </Transition> -->
        </div>
      </div>
    </div>

    <!-- 语音组件 -->
    <Voice></Voice>
  </div>
  <!-- 融云弹窗 -->
  <ModelRongYun :RYdialogShow="AllData.RYDialog" :ZhuDongBoHao="AllData.ZhuDongBoHao" @OneDialogHide="dialogHide"></ModelRongYun>
  <!-- 前端组件公共弹窗 -->
  <el-dialog
    modal-class="publicDialogVisible"
    v-model="dialogConfig.visible"
    :title="dialogConfig.title"
    width="1400px"
    :append-to-body="true"
    :destroy-on-close="true"
    :draggable="true"
    @closed="handleClosed"
  >
    <DialogTabs
      :dataID="dialogConfig.getSiteId"
      :SiteNo="dialogConfig.SiteNo"
      :comIDs="dialogConfig.comIDs"
      :customComponents="dialogConfig.customData"
      :RefName="dialogConfig.RefName"
    ></DialogTabs>
  </el-dialog>
</template>

<script setup name="oneMapIndex">
import bus from '@/bus';
import request from '@/utils/request';
import { fullscreenToggel } from '@/utils/util';
import { ref, reactive, toRefs, onMounted } from 'vue';

import useUserStore from '@/store/modules/user';
const userStore = useUserStore();
// 菜单的图片资源
import ZTGL from '@/assets/images/Sponge_screen/menu/ZTGL.png';
import AC_ZTGL from '@/assets/images/Sponge_screen/menu/AC_ZTGL.png';
import ZHRQ from '@/assets/images/Sponge_screen/menu/ZHRQ.png';
import AC_ZHRQ from '@/assets/images/Sponge_screen/menu/AC_ZHRQ.png';
import ZHPS from '@/assets/images/Sponge_screen/menu/ZHPS.png';
import AC_ZHPS from '@/assets/images/Sponge_screen/menu/AC_ZHPS.png';
import ZHQL from '@/assets/images/Sponge_screen/menu/ZHQL.png';
import AC_ZHQL from '@/assets/images/Sponge_screen/menu/AC_ZHQL.png';
import ZHSD from '@/assets/images/Sponge_screen/menu/ZHSD.png';
import AC_ZHSD from '@/assets/images/Sponge_screen/menu/AC_ZHSD.png';
import ZHHM from '@/assets/images/Sponge_screen/menu/ZHHM.png';
import AC_ZHHM from '@/assets/images/Sponge_screen/menu/AC_ZHHM.png';
import JSPG from '@/assets/images/Sponge_screen/menu/JSPG.png';
import AC_JSPG from '@/assets/images/Sponge_screen/menu/AC_JSPG.png';
import JCFX from '@/assets/images/Sponge_screen/menu/JCFX.png';
import AC_JCFX from '@/assets/images/Sponge_screen/menu/AC_JCFX.png';
// 引用地图
import OneMap from './map/newfiberMapBox.vue';

// 引用王家坪大桥BIm
import WangJiaPingBIM from './BIM/WangJiaPIng.vue';
// 引用隧道BIm
import Tunnel from './BIM/Tunnel.vue';
// 引用语音识别
import Voice from './../voice/recordPage/index.vue';
// 引入融云通讯录
import ModelRongYun from '@/views/RongyunCommunication/ModelRongYun/index.vue'; //融云调用
// 子系统引入
import ComZTGL from './components/ZTGL.vue'; //总体概览
import ComZHRQ from './components/ZHRQ.vue'; //智慧燃气
import ComZHPS from './components/ZHPS.vue'; //智慧排水
import ComZHQL from './components/ZHQL.vue'; //智慧桥梁
import ComZHSD from './components/ZHSD.vue'; //智慧隧道
import ComZHHM from './components/ZHHM.vue'; //智慧海绵
import ComFHPL from './components/FHPL.vue'; //防洪排涝
import ZHHMJCFX from './components/ZHHM_JCFX.vue'; //智慧海绵-监测分析
import ZHHMJSPG from './components/ZHHM_JSPG.vue'; //智慧海绵-建设评估
import PopupInfo from '@/views/oneMap/components/mapboxPopup.vue'; //地图标注点弹窗
import dynamicInformation from '@/views/oneMap/components/dynamicInformation.vue'; //地图标注点弹窗
// 降雨效果
import CanvasRain from '@/views/oneMap/cityGK/canvasRain.vue'; //降雨效果
// 图层控制面板
import LayerControl from '@/views/oneMap/LayerControl/LayerControl.vue'; //图层控制面板
// 前端共同弹窗
import DialogTabs from '@/views/DialogTabs/dialogTabs.vue';
// 左右滑动
import ZuoYou1 from '@/assets/images/Sponge_screen/ZuoYou1.png';
import ZuoYou2 from '@/assets/images/Sponge_screen/ZuoYou2.png';
import xtb_img from '@/assets/newImgs/selectedLocation.png';
import mapBoxVectorLayer from '@/utils/GISdocument/mapboxVectorLayer.js';
// 公共弹窗保存的数据
import dialogTabsStore from '@/store/modules/dialogTabs';

const useDialogTabs = dialogTabsStore();

// 时间以及天气
const timer = ref(null);
const dates = ref(null);
const weeks = ref(null);
const times = ref(null);
const weather = ref({
  temperature: null,
  imgNum: '',
  text: '',
});
const showPanel = ref(false);
const showPanel2 = ref(false);
const ShowTuCheng = ref(false); //图层面板显隐
const AllData = reactive({
  SiSeTuBol: false, //四色图图例
  MapShowBol: true, //是否展示中心地图
  MenuListData: [
    // {
    //   name: "总体概览",
    //   iocn: ZTGL,
    //   AC_icon: AC_ZTGL,
    //   id: 1,
    //   Layers: ["路网", "河流水系"],
    // },
    // {
    //   name: "智慧燃气",
    //   iocn: ZHRQ,
    //   AC_icon: AC_ZHRQ,
    //   id: 2,
    //   Layers: ["干管", "主管", "干管流向", "主管流向"],
    // },
    // {
    //   name: "智慧排水",
    //   iocn: ZHPS,
    //   AC_icon: AC_ZHPS,
    //   id: 3,
    //   Layers: ["雨水管网", "污水管网"],
    // },
    // {
    //   name: "智慧海绵",
    //   iocn: ZHHM,
    //   AC_icon: AC_ZHHM,
    //   id: 6,
    //   children: [
    //     {
    //       name: "城市概览",
    //       id: 6,
    //       Layers: [],
    //     },
    //     {
    //       name: "监测分析",
    //       id: 61,
    //       Layers: [],
    //     },
    //     {
    //       name: "建设评估",
    //       id: 62,
    //       Layers: [],
    //     },
    //   ],
    // },
    // {
    //   name: "智慧桥梁",
    //   iocn: ZHQL,
    //   AC_icon: AC_ZHQL,
    //   id: 4,
    //   Layers: [],
    // },
    // {
    //   name: "智慧隧道",
    //   iocn: ZHSD,
    //   AC_icon: AC_ZHSD,
    //   id: 5,
    //   Layers: [],
    // },
    // {
    //   name: "防汛排涝",
    //   iocn: FXPL,
    //   AC_icon: AC_FXPL,
    //   id: 7,
    //   Layers: [],
    // },
  ],
  AC_MenuIndex: 1, //一级菜单选中的ID
  BottmBackGroundShow: false,
  RYDialog: false,
  ZhuDongBoHao: false,
  ErJiMenuShowID: null,
  ErJiMenuCheckID: null, //二级菜单选中的ID
  ComShowID: 1, //最终展示组件的ID
});
// 降雨效果
const showRainFlow = ref(false);
const BottomshowPanel = ref(true);
// 公共弹窗
const dialogConfig = reactive({
  visible: false,
  getSiteId: '',
  SiteNo: '',
  data: {},
  comIDs: ['spjk'],
  customData: [],
  RefName: '',
  title: '详情',
});
onBeforeMount(() => {
  console.log('ZhuanTiType', userStore.ZhuanTiType);
  if (userStore.ZhuanTiType == 1) {
    // 城市生命线
    AllData.MenuListData = [
      {
        name: '总体概览',
        iocn: ZTGL,
        AC_icon: AC_ZTGL,
        id: 1,
        Layers: ['路网', '河流水系'],
      },
      {
        name: '燃气安全',
        iocn: ZHRQ,
        AC_icon: AC_ZHRQ,
        id: 2,
        Layers: ['干管', '主管', '干管流向', '主管流向'],
      },
      {
        name: '排水安全',
        iocn: ZHPS,
        AC_icon: AC_ZHPS,
        id: 3,
        Layers: ['雨水管网流向'],
        children: [
          {
            name: '排水安全',
            id: 3,
            Layers: ['雨水管网流向'],
          },
          {
            name: '防汛排涝',
            id: 7,
            Layers: ['雨水管网流向'],
          },
        ],
      },
      {
        name: '桥梁安全',
        iocn: ZHQL,
        AC_icon: AC_ZHQL,
        id: 4,
        Layers: [],
      },
      {
        name: '隧道安全',
        iocn: ZHSD,
        AC_icon: AC_ZHSD,
        id: 5,
        Layers: [],
      },
    ];
  } else if (userStore.ZhuanTiType == 2) {
    // 海绵
    AllData.MenuListData = [
      {
        name: '城市概览',
        iocn: ZHHM,
        AC_icon: AC_ZHHM,
        id: 6,
      },
      {
        name: '监测分析',
        iocn: JCFX,
        AC_icon: AC_JCFX,
        id: 61,
      },
      {
        name: '建设评估',
        iocn: JSPG,
        AC_icon: AC_JSPG,
        id: 62,
      },
    ];
  }
  // 默认选中展示第一个菜单
  AllData.AC_MenuIndex = AllData.MenuListData[0].id;
  AllData.ComShowID = AllData.MenuListData[0].id;
});
onMounted(() => {
  fullscreenToggel();
  AllData.BottmBackGroundShow = true;
  console.log(AllData.BottmBackGroundShow, 'AllData.BottmBackGroundShow');
  bus.emit('BottomHidden', AllData.BottmBackGroundShow);
  // 降雨特征点击
  bus.on('checkRainL', params => {
    if (params == 1) {
      showRainFlow.value = false;
    } else {
      showRainFlow.value = true;
    }
  });
  // 底部隐藏
  bus.on('checkBottom', params => {
    if (params == 1) {
      BottomshowPanel.value = false;
    } else {
      BottomshowPanel.value = true;
    }
  });
  // 共同弹窗触发事件
  bus.on('publicDialog', params => {
    dialogConfig.getSiteId = params.getSiteId;
    dialogConfig.SiteNo = params.SiteNo;
    dialogConfig.RefName = params.RefName;
    dialogConfig.title = params.title ?? '详情';
    dialogConfig.comIDs = params.comIDs ?? dialogConfig.comIDs;
    // 打开弹窗
    dialogConfig.visible = true;
  });
  // 共同弹窗触发事件
  bus.on('publicDialog_Close', params => {
    // 打开弹窗
    dialogConfig.visible = false;
  });
  // 获取天气
  getWeather();
  // 获取时间
  currentTime();
  //initRainImage();
  // 打开融云通讯录主动拨号
  bus.on('OpenRY', params => {
    AllData.ZhuDongBoHao = true;
    AllData.RYDialog = true;
    bus.emit('showRy');
  });

  // 切换专题图
  bus.on('ChangeZhuanTiTu', params => {
    if (params.num == 1) {
      // 一级
      MenuClick(params.MenuData1);
    } else if (params.num == 2) {
      // 二级
      ErJiMenuClick(params.MenuData1, params.MenuData2);
    }
  });
  // 切换面板显示隐藏
  bus.on('changeShowPanel', params => {
    showPanel.value = params;
  });
  // 四色图图例显示隐藏
  bus.on('SiSeTuBol', params => {
    AllData.SiSeTuBol = params;
  });
});
onBeforeUnmount(() => {
  bus.off('BottomHidden');
  bus.off('publicDialog');
  bus.off('publicDialog_Close');
  bus.off('OpenRY');
  bus.off('ChangeZhuanTiTu');
  bus.off('checkRainL');
  bus.off('changeShowPanel');
  bus.off('SiSeTuBol');
});
// 菜单点击
const MenuClick = (item, index) => {
  ShowTuCheng.value = false;
  showRainFlow.value = false;
  showPanel.value = false;
  AllData.SiSeTuBol = false;
  // 改变菜单选中索引
  AllData.AC_MenuIndex = item.id;
  // 二级也选中一级菜单默认展示的那个
  AllData.ErJiMenuCheckID = item.id;
  // 最终展示的组件ID
  AllData.ComShowID = item.id;
  // 当选择的是智慧桥梁时 将隐藏地图展示BIM
  if (AllData.ComShowID == 4 || AllData.ComShowID == 5) {
    AllData.MapShowBol = false;
  } else {
    AllData.MapShowBol = true;
    // 点击菜单时隐藏所有图层
    bus.emit('clearAllLayer');
    // 打开默认的菜单
    bus.emit('SetLayerShow', item.Layers);
  }
};
// 二级菜单点击
const ErJiMenuClick = (item, item2) => {
  ShowTuCheng.value = false;
  showRainFlow.value = false;
  AllData.SiSeTuBol = false;
  console.log(22);
  // 改变菜单选中索引
  AllData.AC_MenuIndex = item.id;
  // 二级也选中点击的那个
  AllData.ErJiMenuCheckID = item2.id;
  // 最终展示的组件ID
  AllData.ComShowID = item2.id;
};
// 打开融云通讯录
const toRYBox = () => {
  AllData.RYDialog = true;
  AllData.ZhuDongBoHao = false;
  bus.emit('showRy');
};
// 关闭融云通讯录弹窗
const dialogHide = val => {
  if (!val) {
    AllData.RYDialog = false;
    AllData.ZhuDongBoHao = false;
  }
};
//地图点击事件
const mapClick = async (point, properties, feature) => {
  console.log('point', point);
  console.log('properties', properties);
  console.log('feature---', feature);
  if (!feature) {
    let currentZoom = newfiberMapbox.map.getZoom();
    console.log('currentZoom--', currentZoom);
    if (currentZoom >= 18) {
      let clickPoint = turf.point(point);
      let positionAddress = '';
      gcoord.transform(clickPoint, gcoord.WGS84, gcoord.BD09);
      console.log('clickPoint---', clickPoint, clickPoint.geometry.coordinates);
      let data = await request({
        url: `/bdApi//baiduservice/panorama`,
        method: 'GET',
        params: {
          location: `${clickPoint.geometry.coordinates[0]},${clickPoint.geometry.coordinates[1]}`,
          fov: 180,
          height: 256,
          width: 512,
        },
      });
      if (data && data.data) {
        data.data.base64 = 'data:image/jpeg;base64,' + data.data.base64;
      }
      console.log('data----', data);
      gcoord.transform(clickPoint, gcoord.BD09, gcoord.WGS84);
      gcoord.transform(clickPoint, gcoord.WGS84, gcoord.GCJ02);
      let regeodata = await request({
        url: `/amap/v3/geocode/regeo`,
        method: 'GET',
        params: {
          location: `${clickPoint.geometry.coordinates[0]},${clickPoint.geometry.coordinates[1]}`,
          key: '76eac14980622704ba95c1bf080f3b4c',
          radius: 100,
          extensions: 'all',
          output: 'json',
        },
      });
      if (regeodata.info === 'OK') {
        console.log('坐标返地名data----', data);
        positionAddress = regeodata.regeocode.formatted_address;
      }
      gcoord.transform(clickPoint, gcoord.GCJ02, gcoord.WGS84);
      mapBoxVectorLayer.removeByIds(['clickPoint']);
      mapBoxVectorLayer.addGeojsonSymbol('clickPoint', turf.featureCollection([clickPoint]), xtb_img, 0.8);
      data.roadName = positionAddress;
      bus.emit('popupcontent', {
        popupShow: true,
        point: point,
        popupInfo: data,
      });
    } else {
      mapBoxVectorLayer.removeByIds(['clickPoint']);
      bus.emit('closeCesiumPopup');
    }
  }
  if (properties) {
    if (feature == 'rq_pipeline_info') {
      if (!!newfiberMapbox.getLayerByName('rqLine')) {
        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('rqLine'));
      }
      let rqLine = turf.featureCollection([turf.feature(Terraformer.WKT.parse(properties.geometry))]);
      let layer = new mapboxL7.LineLayer({
        name: 'rqLine',
      })
        .source(rqLine)
        .size(4)
        .shape('line')
        .texture('arrow')
        .color('rgb(241, 159, 27)')
        .animate({
          interval: 2, // 间隔
          duration: 2, // 持续时间，延时
          trailLength: 3, // 流线长度
        })
        .style({
          opacity: 1,
          lineTexture: true, // 开启线的贴图功能
          iconStep: 50, // 设置贴图纹理的间距
          borderWidth: 0, // 默认文 0，最大有效值为 0.5
          borderColor: '#fff', // 默认为 #ccc
        });
      newfiberMapbox.addLayer(layer);
    }
    bus.emit('popupcontent', {
      popupShow: true,
      point: point,
      popupInfo: properties,
    });
  }
};

// 获取当前时间
const formatTime = () => {
  let date = new Date();
  let year = date.getFullYear(); // 年
  let month = date.getMonth() + 1; // 月
  let day = date.getDate(); // 日
  let hour = date.getHours(); // 时
  hour = hour < 10 ? '0' + hour : hour; // 如果只有一位，则前面补零
  let minute = date.getMinutes(); // 分
  minute = minute < 10 ? '0' + minute : minute; // 如果只有一位，则前面补零
  let second = date.getSeconds(); // 秒
  second = second < 10 ? '0' + second : second; // 如果只有一位，则前面补零
  let weekAry = new Array('星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六');
  weeks.value = weekAry[date.getDay()];
  dates.value = `${year}-${month}-${day}`;
  times.value = `${hour}:${minute}:${second}`;
};
const currentTime = () => {
  clearInterval(timer.value);
  timer.value = setInterval(() => {
    formatTime();
  }, 500);
};
// 获取天气
const getWeather = async () => {
  // let res = await getAppService();
  // if (res.code == 200) {
  //   weather.value.temperature = res.data.tempFc;
  //   weather.value.imgNum = new URL(
  //     `/src/assets/images/weather_icon/icon__${res.data.code}.png`,
  //     import.meta.url
  //   ).href;
  // }
};
// 二级菜单展示
const handleMouseEnter = item => {
  AllData.ErJiMenuShowID = item.id;
};
// 二级菜单展示
const handleMouseLeave = item => {
  AllData.ErJiMenuShowID = null;
};

const mapLoad = () => {
  //mapBoxVectorLayer.load3DTiles();
  addRanQiHeatMap();
  addPaiShuiHeatMap();
};
//添加燃气四色图
const addRanQiHeatMap = () => {
  let heatMapList = [
    { lonlat: [109.4583517767791, 36.64045660187989], value: 2 },
    { lonlat: [109.45915900059231, 36.639564923076406], value: 1 },
    { lonlat: [109.46064074624108, 36.63888888248738], value: 3 },
    { lonlat: [109.46175090337006, 36.63763347376713], value: 4 },
    { lonlat: [109.46233801013652, 36.63722780459428], value: 5 },
    { lonlat: [109.46275737211255, 36.63718265184453], value: 3 },
    { lonlat: [109.46340039380915, 36.63601087211503], value: 2 },
    { lonlat: [109.4634842662043, 36.639796184662536], value: 3 },
    { lonlat: [109.46681120454784, 36.635965630684304], value: 2 },
    { lonlat: [109.46751014117459, 36.63303623297878], value: 3 },
    { lonlat: [109.46764992849988, 36.63236013419859], value: 4 },
    { lonlat: [109.46801337554575, 36.63082773329404], value: 5 },
    { lonlat: [109.4677058434299, 36.629971339150515], value: 6 },
    { lonlat: [109.46790154568534, 36.62897972679855], value: 4 },
    { lonlat: [109.46820907780108, 36.62758246914724], value: 5 },
    { lonlat: [109.46846069498666, 36.625914758136716], value: 3 },
    { lonlat: [109.46435094762097, 36.63127797375913], value: 3 },
    { lonlat: [109.46493805438743, 36.62726670999692], value: 3 },
    { lonlat: [109.46518967157303, 36.625959563646546], value: 3 },
    { lonlat: [109.45336366384743, 36.6337564188794], value: 3 },
    { lonlat: [109.45450991991531, 36.63114241494354], value: 3 },
    { lonlat: [109.4557680058435, 36.6292043657803], value: 3 },
    { lonlat: [109.4545099199152, 36.62609442354592], value: 3 },
    { lonlat: [109.45330774891703, 36.62532758190564], value: 3 },
    { lonlat: [109.45825622023474, 36.62505706236186], value: 3 },
    { lonlat: [109.46314877662232, 36.62532740431396], value: 3 },
    { lonlat: [109.44662591476458, 36.62744565667445], value: 3 },
    { lonlat: [109.44139786879603, 36.62974412708136], value: 3 },
    { lonlat: [109.43645036088442, 36.63126842378145], value: 3 },
    { lonlat: [109.43211670920196, 36.63081469982216], value: 3 },
    { lonlat: [109.42868355657039, 36.632810587611026], value: 3 },
    { lonlat: [109.41793384915036, 36.634987868433505], value: 3 },
    { lonlat: [109.40921026459482, 36.63444344378062], value: 3 },
    { lonlat: [109.46858692076272, 36.62110590039618], value: 3 },
    { lonlat: [109.47035661856971, 36.61995354263662], value: 3 },
    { lonlat: [109.47258171472353, 36.61892777347618], value: 3 },
    { lonlat: [109.47334332481641, 36.6208153097412], value: 35 },
    { lonlat: [109.47401900156899, 36.620127962636424], value: 45 },
    { lonlat: [109.47436575670645, 36.61957709339732], value: 43 },
    { lonlat: [109.47556013551343, 36.61923328226432], value: 4 },
    { lonlat: [109.47708842667508, 36.61754354976672], value: 5 },
    { lonlat: [109.47910474358588, 36.61661993861554], value: 6 },
    { lonlat: [109.47944089622014, 36.616364726231225], value: 6 },
    { lonlat: [109.47757869270369, 36.615731001159105], value: 6 },
    { lonlat: [109.47590065021183, 36.61525895943912], value: 7 },
    { lonlat: [109.47548213080846, 36.614904203510264], value: 6 },
    { lonlat: [109.47457696093612, 36.61451805927941], value: 6 },
    { lonlat: [109.47548213080833, 36.61421038003272], value: 6 },
    { lonlat: [109.476835019112, 36.613808538791], value: 4 },
    { lonlat: [109.47752606277787, 36.61309282379784], value: 4 },
    { lonlat: [109.478197640425, 36.61383660779872], value: 5 },
    { lonlat: [109.47888868409086, 36.61442345137025], value: 6 },
    { lonlat: [109.47862589283756, 36.61518291568912], value: 4 },
    { lonlat: [109.47945319863473, 36.61438874695218], value: 4 },
    { lonlat: [109.48037783452571, 36.61392413291535], value: 4 },
    { lonlat: [109.48066009179765, 36.613381048298066], value: 33 },
    { lonlat: [109.47880108700613, 36.613057670788265], value: 33 },
    { lonlat: [109.47672795600828, 36.61215362328269], value: 3 },
    { lonlat: [109.47235706714471, 36.608714319110575], value: 33 },
    { lonlat: [109.47095953066176, 36.60900989208619], value: 33 },
    { lonlat: [109.47242414889578, 36.60820574067667], value: 33 },
    { lonlat: [109.47080300657555, 36.60720326624053], value: 44 },
    { lonlat: [109.46960671534613, 36.60677769970712], value: 4 },
    { lonlat: [109.4667110197535, 36.60586535117448], value: 54 },
    { lonlat: [109.46634207012195, 36.60571021211726], value: 65 },
    { lonlat: [109.48124809033756, 36.61305208261769], value: 4 },
    { lonlat: [109.48183684833916, 36.61249083700314], value: 4 },
    { lonlat: [109.48355078829951, 36.611592045362464], value: 4 },
    { lonlat: [109.4836162058552, 36.611030788941534], value: 4 },
    { lonlat: [109.48472830430275, 36.6098155271458], value: 4 },
    { lonlat: [109.4848983899476, 36.60950742186193], value: 4 },
    { lonlat: [109.48548714794921, 36.61046512927026], value: 4 },
    { lonlat: [109.48597123786165, 36.60922876138633], value: 4 },
    { lonlat: [109.48645532777408, 36.60856200129905], value: 4 },
    { lonlat: [109.48743659111014, 36.60781084557607], value: 4 },
    { lonlat: [109.48792068102257, 36.607355049157874], value: 5 },
    { lonlat: [109.48809076666744, 36.60711022678964], value: 5 },
    { lonlat: [109.48710950333127, 36.60684430590222], value: 5 },
    { lonlat: [109.48636374319577, 36.60624081857617], value: 5 },
    { lonlat: [109.48535859229459, 36.605997022060514], value: 28 },
    { lonlat: [109.48571114675235, 36.60507741447555], value: 26 },
    { lonlat: [109.4869629705518, 36.60486639408042], value: 32 },
    { lonlat: [109.48860822468815, 36.60652068303526], value: 43 },
    { lonlat: [109.48959435527298, 36.606639238856765], value: 33 },
    { lonlat: [109.49055507792285, 36.60707599046411], value: 23 },
    { lonlat: [109.49062150122646, 36.606453011511526], value: 43 },
    { lonlat: [109.4906824296868, 36.607181292824684], value: 23 },
    { lonlat: [109.49173098572089, 36.60668830758674], value: 43 },
    { lonlat: [109.49338196262373, 36.60598188730296], value: 56 },
    { lonlat: [109.49414496601992, 36.605639090280604], value: 55 },
    { lonlat: [109.49287133727367, 36.60487615143745], value: 55 },
    { lonlat: [109.49244041494259, 36.604467862285254], value: 55 },
    { lonlat: [109.49361186903214, 36.604247271956666], value: 55 },
    { lonlat: [109.49395592159959, 36.603945994095234], value: 55 },
    { lonlat: [109.49451061859614, 36.603633392114766], value: 55 },
    { lonlat: [109.49505127263073, 36.603150944228496], value: 66 },
    { lonlat: [109.49581661405635, 36.60443486991358], value: 55 },
    { lonlat: [109.49529000298357, 36.604994123879244], value: 66 },
    { lonlat: [109.49460891932945, 36.60451168465817], value: 66 },
    { lonlat: [109.4949529718969, 36.60387072220969], value: 5 },
    { lonlat: [109.4958166140561, 36.60367134909574], value: 5 },
    { lonlat: [109.49568320591762, 36.60269068866781], value: 5 },
    { lonlat: [109.49566916295554, 36.60080859328861], value: 6 },
    { lonlat: [109.49566214147451, 36.60014495272406], value: 6 },
    { lonlat: [109.494840628201, 36.599753070596016], value: 6 },
    { lonlat: [109.4965608910385, 36.60014250723452], value: 6 },
    { lonlat: [109.49708750211117, 36.60052061853767], value: 6 },
    { lonlat: [109.49651876215258, 36.60062696783045], value: 6 },
    { lonlat: [109.49725601765434, 36.60026905844781], value: 6 },
    { lonlat: [109.49813370277548, 36.601100102081844], value: 6 },
    { lonlat: [109.49785284353655, 36.60242247026715], value: 6 },
    { lonlat: [109.49832328276145, 36.60081901303621], value: 6 },
    { lonlat: [109.49783880057448, 36.59967978702087], value: 6 },
    { lonlat: [109.49802838056061, 36.599299226039754], value: 6 },
    { lonlat: [109.49848477682357, 36.59905454638016], value: 6 },
    { lonlat: [109.49689090064342, 36.59891177851914], value: 6 },
    { lonlat: [109.4978247576123, 36.59752340035382], value: 6 },
    { lonlat: [109.49701728730074, 36.596542660729575], value: 6 },
    { lonlat: [109.49685645137883, 36.595212452415], value: 6 },
    { lonlat: [109.49616132476278, 36.59372208751017], value: 6 },
    { lonlat: [109.497713072057, 36.59436068924544], value: 6 },
    { lonlat: [109.49829530434499, 36.59627757677923], value: 7 },
    { lonlat: [109.49801374925752, 36.593942855465386], value: 7 },
    { lonlat: [109.49621402796436, 36.59244561043963], value: 7 },
    { lonlat: [109.49611930579097, 36.591341185842126], value: 7 },
    { lonlat: [109.49618696448614, 36.58984388974645], value: 7 },
    { lonlat: [109.49579789965442, 36.589368310214226], value: 7 },
    { lonlat: [109.4920496079386, 36.58885313566361], value: 7 },
    { lonlat: [109.48960036317119, 36.588970902925006], value: 7 },
    { lonlat: [109.48761119753136, 36.58913232115246], value: 7 },
    { lonlat: [109.48470187363641, 36.58831158443507], value: 7 },
    { lonlat: [109.48200905756617, 36.589389680113165], value: 56 },
    { lonlat: [109.48023639975108, 36.58902015763719], value: 7 },
    { lonlat: [109.47394414109459, 36.58837402615219], value: 80 },
    { lonlat: [109.4728480702318, 36.59023783394082], value: 78 },
    { lonlat: [109.46961398459973, 36.588434956116345], value: 77 },
    { lonlat: [109.46908624677688, 36.587439603702165], value: 55 },
    { lonlat: [109.4652161694096, 36.58760966434236], value: 7 },
    { lonlat: [109.46463430463056, 36.58702899938492], value: 55 },
    { lonlat: [109.46321347203066, 36.585073258863616], value: 7 },
    { lonlat: [109.46482374897708, 36.583968727419084], value: 7 },
    { lonlat: [109.46692116852915, 36.58347534338372], value: 55 },
    { lonlat: [109.4688020802565, 36.58344032845259], value: 55 },
    { lonlat: [109.47236092762554, 36.58305607754432], value: 66 },
    { lonlat: [109.47351112544439, 36.58086012847229], value: 55 },
    { lonlat: [109.47357878413955, 36.58486317336802], value: 5 },
    { lonlat: [109.46054812145172, 36.592050037038575], value: 55 },
    { lonlat: [109.45958516192611, 36.59014334083254], value: 45 },
    { lonlat: [109.441690631703, 36.574861874203556], value: 45 },
    { lonlat: [109.44624550826747, 36.57378190194129], value: 7 },
    { lonlat: [109.4509010450875, 36.57331087985171], value: 7 },
    { lonlat: [109.45600955305757, 36.573692403602315], value: 7 },
    { lonlat: [109.45623603863253, 36.573058990448956], value: 7 },
    { lonlat: [109.46174718762488, 36.57201959088281], value: 7 },
    { lonlat: [109.46564777252813, 36.57459338262966], value: 7 },
    { lonlat: [109.47100793113714, 36.57481251327233], value: 7 },
    { lonlat: [109.47073111543428, 36.57287999199309], value: 7 },
    { lonlat: [109.47181321318158, 36.57139400720595], value: 7 },
    { lonlat: [109.47722370191836, 36.57685016603991], value: 7 },
    { lonlat: [109.48097329643825, 36.57962676684916], value: 7 },
    { lonlat: [109.49076250629228, 36.580657760474004], value: 7 },
    { lonlat: [109.4908883316117, 36.57815705967815], value: 7 },
    { lonlat: [109.48588048389708, 36.575696873317725], value: 7 },
    { lonlat: [109.48555333806642, 36.57234345586721], value: 7 },
    { lonlat: [109.48462223070236, 36.57114165197099], value: 7 },
    { lonlat: [109.48494937653292, 36.569168438097215], value: 7 },
    { lonlat: [109.48789368900827, 36.568575587318655], value: 7 },
    { lonlat: [109.48701291177198, 36.56741432474017], value: 77 },
    { lonlat: [109.48668576594132, 36.565197403953434], value: 77 },
    { lonlat: [109.48661027074958, 36.56200594032002], value: 77 },
    { lonlat: [109.48643411530227, 36.55950462918852], value: 7 },
    { lonlat: [109.47872714141864, 36.55363535583412], value: 7 },
    { lonlat: [109.47752130169793, 36.55237880798815], value: 7 },
    { lonlat: [109.47659108248483, 36.550399478960415], value: 7 },
    { lonlat: [109.47531633763725, 36.54680772057538], value: 7 },
    { lonlat: [109.47714232349988, 36.538378228993835], value: 7 },
    { lonlat: [109.47628100941364, 36.53678778825302], value: 7 },
    { lonlat: [109.49119798128915, 36.57421937037934], value: 7 },
    { lonlat: [109.49316811330803, 36.5763548006588], value: 7 },
    { lonlat: [109.49201320833134, 36.5772533638739], value: 7 },
    { lonlat: [109.49206173375048, 36.57869986536457], value: 7 },
    { lonlat: [109.49288666587658, 36.57962971205523], value: 7 },
    { lonlat: [109.4948373877278, 36.579792436760556], value: 7 },
    { lonlat: [109.49405127593694, 36.581677232061956], value: 7 },
    { lonlat: [109.49497325890142, 36.582200016243696], value: 7 },
    { lonlat: [109.49599229270427, 36.581908742939454], value: 7 },
    { lonlat: [109.49642902147689, 36.583276883316856], value: 56 },
    { lonlat: [109.49692398075254, 36.58497374115537], value: 4 },
    { lonlat: [109.49697250617166, 36.58646705928871], value: 4 },
    { lonlat: [109.49781684846545, 36.58750638888238], value: 4 },
    { lonlat: [109.49951870129331, 36.59430380170364], value: 3 },
    { lonlat: [109.49965804385573, 36.59486501809594], value: 65 },
    { lonlat: [109.49988842408676, 36.59649457072071], value: 76 },
    { lonlat: [109.50008437575242, 36.59732109333835], value: 64 },
    { lonlat: [109.49935516493218, 36.59831527959685], value: 43 },
    { lonlat: [109.50060236752009, 36.60104441193055], value: 45 },
    { lonlat: [109.50126321265897, 36.60358057739102], value: 23 },
    { lonlat: [109.49942472380532, 36.604173438687546], value: 34 },
    { lonlat: [109.5007026398301, 36.60501144006829], value: 6 },
    { lonlat: [109.49901617072663, 36.605443415517875], value: 5 },
    { lonlat: [109.50014206700124, 36.6054693718935], value: 5 },
    { lonlat: [109.50184753857336, 36.6066137836571], value: 6 },
    { lonlat: [109.50264089164449, 36.606042210978295], value: 6 },
    { lonlat: [109.50362426940333, 36.606627392739135], value: 6 },
    { lonlat: [109.5029639336135, 36.60551750543657], value: 6 },
    { lonlat: [109.50313970644957, 36.60497656754981], value: 6 },
    { lonlat: [109.50333489978382, 36.60424830824475], value: 6 },
    { lonlat: [109.50498336394963, 36.60554595245176], value: 6 },
    { lonlat: [109.5062137738025, 36.60733384990011], value: 6 },
    { lonlat: [109.50681710218589, 36.607903700917404], value: 6 },
    { lonlat: [109.5058527268957, 36.60992901196387], value: 6 },
    { lonlat: [109.50458431210518, 36.61083589220665], value: 6 },
    { lonlat: [109.5035629294087, 36.61163552050199], value: 6 },
    { lonlat: [109.50728675442862, 36.60816923300994], value: 6 },
    { lonlat: [109.50862770454853, 36.60957898993155], value: 6 },
    { lonlat: [109.50900738849452, 36.611329111002924], value: 6 },
    { lonlat: [109.5087728725542, 36.61263215550033], value: 6 },
    { lonlat: [109.51196589727925, 36.61287834022912], value: 6 },
    { lonlat: [109.51194785759148, 36.614481923277204], value: 6 },
    { lonlat: [109.5131805695851, 36.614291799340485], value: 6 },
    { lonlat: [109.51506271033638, 36.61535240611497], value: 6 },
    { lonlat: [109.51550167607066, 36.616878374906946], value: 6 },
    { lonlat: [109.5174078697389, 36.6167755151019], value: 6 },
    { lonlat: [109.51728159192487, 36.61817541867955], value: 6 },
    { lonlat: [109.51805729849644, 36.61931353190943], value: 6 },
    { lonlat: [109.52015591550028, 36.61910403021254], value: 6 },
    { lonlat: [109.52326378422758, 36.618323942249155], value: 6 },
    { lonlat: [109.52535504124248, 36.621157617292155], value: 6 },
    { lonlat: [109.52708365253223, 36.622782899894624], value: 6 },
    { lonlat: [109.53062549244765, 36.62553845807305], value: 6 },
    { lonlat: [109.53329698262276, 36.62472766573882], value: 6 },
    { lonlat: [109.53529153411093, 36.62401430655811], value: 6 },
    { lonlat: [109.53622232480538, 36.62273577119326], value: 6 },
    { lonlat: [109.53555747430924, 36.62184699338395], value: 6 },
    { lonlat: [109.5376787067582, 36.627153166827114], value: 6 },
    { lonlat: [109.53979414015477, 36.62881729653026], value: 6 },
    { lonlat: [109.54130516400943, 36.63016960226274], value: 6 },
    { lonlat: [109.54008425673476, 36.63148291126323], value: 6 },
    { lonlat: [109.53755782484959, 36.63369255351504], value: 6 },
    { lonlat: [109.53614579982442, 36.6360575522797], value: 6 },
    { lonlat: [109.53343812543821, 36.62040741435609], value: 6 },
    { lonlat: [109.53580803843838, 36.62277137411824], value: 6 },
    { lonlat: [109.54168042409255, 36.62849933558428], value: 6 },
    { lonlat: [109.54288050769686, 36.63006645029258], value: 6 },
    { lonlat: [109.54573448803326, 36.63312914358253], value: 6 },
    { lonlat: [109.54725728319507, 36.636077923401025], value: 6 },
    { lonlat: [109.54490753966712, 36.63712470479035], value: 6 },
    { lonlat: [109.54219474563702, 36.63804142854716], value: 6 },
    { lonlat: [109.53998618841547, 36.636568584052085], value: 6 },
    { lonlat: [109.53464796833235, 36.63649472525616], value: 6 },
    { lonlat: [109.53531650653413, 36.633497267658136], value: 6 },
    { lonlat: [109.52895761991671, 36.63899560790742], value: 6 },
    { lonlat: [109.52561492890752, 36.6410855206062], value: 6 },
    { lonlat: [109.52130829909568, 36.6436264356986], value: 6 },
    { lonlat: [109.51955144289083, 36.64125575007403], value: 6 },
    { lonlat: [109.51807443988673, 36.63976209758932], value: 6 },
    { lonlat: [109.51690838488348, 36.64107514503131], value: 6 },
    { lonlat: [109.51689283748337, 36.643941824018825], value: 6 },
    { lonlat: [109.51588225648054, 36.646106775610676], value: 6 },
    { lonlat: [109.51409430547558, 36.64724431137258], value: 6 },
    { lonlat: [109.51174664806909, 36.646327110237564], value: 6 },
    { lonlat: [109.51070497226618, 36.648567165872755], value: 6 },
    { lonlat: [109.50978767566362, 36.64972972191704], value: 6 },
    { lonlat: [109.51067387746598, 36.650967429494266], value: 6 },
    { lonlat: [109.51146679486808, 36.652280284952866], value: 6 },
    { lonlat: [109.51191766946926, 36.65361817342491], value: 6 },
    { lonlat: [109.51199540646942, 36.65525669873434], value: 6 },
    { lonlat: [109.51428087427561, 36.655191468743396], value: 6 },
    { lonlat: [109.51460736967644, 36.65357281224559], value: 6 },
    { lonlat: [109.51353459907345, 36.65593792955656], value: 6 },
    { lonlat: [109.50664710085456, 36.64933312632619], value: 6 },
    { lonlat: [109.50327331504526, 36.64723825232908], value: 6 },
    { lonlat: [109.50558987765153, 36.64807508399961], value: 28 },
    { lonlat: [109.50703578585542, 36.64720800813199], value: 29 },
    { lonlat: [109.50596301525242, 36.6462406907215], value: 28 },
    { lonlat: [109.50380192664646, 36.647478454644535], value: 6 },
    { lonlat: [109.50293172446254, 36.64689822474207], value: 6 },
    { lonlat: [109.49977744553338, 36.648514140036085], value: 6 },
    { lonlat: [109.49841675260586, 36.64788286957943], value: 5 },
    { lonlat: [109.49667830356817, 36.64754979371535], value: 5 },
    { lonlat: [109.49480514097309, 36.64623412909707], value: 5 },
    { lonlat: [109.49194575265034, 36.64800589561177], value: 5 },
    { lonlat: [109.48774678808107, 36.64818660580967], value: 5 },
    { lonlat: [109.48778573951488, 36.65030081450137], value: 23 },
    { lonlat: [109.49052013017122, 36.65182489248657], value: 34 },
    { lonlat: [109.49386216319564, 36.653097849178344], value: 23 },
    { lonlat: [109.49541243026289, 36.655375126863646], value: 34 },
    { lonlat: [109.49376867975428, 36.65881983304358], value: 5 },
    { lonlat: [109.49594216976315, 36.66097140773642], value: 5 },
    { lonlat: [109.49674456930045, 36.662419955163955], value: 5 },
    { lonlat: [109.49257676587825, 36.66373039429423], value: 5 },
    { lonlat: [109.48954634432454, 36.66561822861078], value: 5 },
    { lonlat: [109.48265911535468, 36.654995428105366], value: 5 },
    { lonlat: [109.47853819629543, 36.65495490425706], value: 5 },
    { lonlat: [109.47794031082658, 36.64600156969751], value: 5 },
    { lonlat: [109.47947610116441, 36.638089580666374], value: 5 },
    { lonlat: [109.48196313342223, 36.63989201277776], value: 5 },
    { lonlat: [109.48007581107044, 36.63626409608854], value: 5 },
    { lonlat: [109.48312727618112, 36.63616165277856], value: 6 },
    { lonlat: [109.48487349031957, 36.63719648127574], value: 5 },
    { lonlat: [109.48806606364347, 36.640221454017194], value: 5 },
    { lonlat: [109.48968880809531, 36.64396832101501], value: 5 },
    { lonlat: [109.49199945508674, 36.64370117513442], value: 5 },
    { lonlat: [109.4886481350228, 36.64628232413764], value: 5 },
    { lonlat: [109.48693719793754, 36.6481698459415], value: 5 },
    { lonlat: [109.49295193552571, 36.64621960689284], value: 6 },
    { lonlat: [109.4960034006364, 36.647282727565546], value: 5 },
    { lonlat: [109.4991959739603, 36.64675388047846], value: 5 },
    { lonlat: [109.50401129173616, 36.64690730406689], value: 5 },
    { lonlat: [109.50575750587461, 36.64410416698772], value: 5 },
    { lonlat: [109.5035879670964, 36.64221068329797], value: 5 },
    { lonlat: [109.49916069690676, 36.63886718707988], value: 5 },
    { lonlat: [109.4955447989431, 36.639105918699926], value: 34 },
    { lonlat: [109.49207000919266, 36.63564855779099], value: 34 },
    { lonlat: [109.48792495542945, 36.63128116433782], value: 23 },
    { lonlat: [109.4824393736407, 36.62725474513087], value: 43 },
    { lonlat: [109.48350796628219, 36.6240399916917], value: 5 },
    { lonlat: [109.47904752109281, 36.617139346998826], value: 5 },
    { lonlat: [109.47973483856029, 36.6163530732266], value: 5 },
    { lonlat: [109.48169304493001, 36.61519041973535], value: 6 },
    { lonlat: [109.48128150577406, 36.61652725739157], value: 5 },
    { lonlat: [109.4856636114327, 36.61250054572504], value: 6 },
    { lonlat: [109.48669837172288, 36.61390464711184], value: 5 },
    { lonlat: [109.48778868961256, 36.61110958729933], value: 5 },
    { lonlat: [109.48832343150745, 36.61186423919422], value: 5 },
    { lonlat: [109.48855260660523, 36.61062565266084], value: 5 },
    { lonlat: [109.49005960649093, 36.60966700183684], value: 5 },
    { lonlat: [109.49101103038188, 36.608943504005595], value: 5 },
    { lonlat: [109.49269164776588, 36.607944427600174], value: 5 },
    { lonlat: [109.49137909947821, 36.60774724442752], value: 5 },
    { lonlat: [109.49426114995096, 36.60713571424016], value: 5 },
    { lonlat: [109.4965699550399, 36.6053070257893], value: 5 },
    { lonlat: [109.49771583052903, 36.60506504012202], value: 5 },
    { lonlat: [109.49879225901881, 36.60545019078856], value: 5 },
    { lonlat: [109.49911865991568, 36.6049954268223], value: 5 },
    { lonlat: [109.50854172185717, 36.60498562319275], value: 5 },
    { lonlat: [109.51044938269962, 36.60552218657323], value: 5 },
    { lonlat: [109.51212316173265, 36.60707867359568], value: 5 },
    { lonlat: [109.51372557809377, 36.60793013404142], value: 5 },
    { lonlat: [109.51465329282912, 36.60842590572189], value: 5 },
    { lonlat: [109.51604810869001, 36.60896351865908], value: 5 },
    { lonlat: [109.51735209933206, 36.609239601548374], value: 6 },
    { lonlat: [109.51869501506792, 36.61021656939483], value: 6 },
    { lonlat: [109.51997305564743, 36.61025204679149], value: 6 },
    { lonlat: [109.52078399510141, 36.610674577473965], value: 6 },
    { lonlat: [109.64885541010113, 36.68368750346818], value: 77 },
    { lonlat: [109.64418083988407, 36.684106217976854], value: 77 },
    { lonlat: [109.65730463327395, 36.68351820161691], value: 6 },
    { lonlat: [109.66382903341632, 36.683373146319866], value: 53 },
    { lonlat: [109.66365404950439, 36.68117431536967], value: 54 },
    { lonlat: [109.66952850940268, 36.687351497043785], value: 56 },
    { lonlat: [109.67765276245356, 36.68821312918963], value: 33 },
    { lonlat: [109.67907763145014, 36.68818888405842], value: 23 },
    { lonlat: [109.67620289575514, 36.68570831505293], value: 34 },
    { lonlat: [109.66992847262958, 36.6839122446761], value: 6 },
    { lonlat: [109.66315409547013, 36.68135099518023], value: 6 },
    { lonlat: [109.68433055291582, 36.68853913721367], value: 6 },
    { lonlat: [109.68255571609542, 36.69068926681356], value: 6 },
    { lonlat: [109.68633036905133, 36.69126900476532], value: 77 },
    { lonlat: [109.68605539433261, 36.69273456341231], value: 77 },
    { lonlat: [109.68383059888168, 36.693435078555396], value: 6 },
    { lonlat: [109.70500365221739, 36.69928917967537], value: 77 },
    { lonlat: [109.70692847524785, 36.69970780952815], value: 77 },
    { lonlat: [109.72405190090896, 36.70298488870231], value: 6 },
    { lonlat: [109.72712178240528, 36.70196817888451], value: 34 },
    { lonlat: [109.72395293859049, 36.701623796200366], value: 34 },
  ];
  let heatMapJeojson = {};
  let heatMapFeatures = [];
  heatMapList.forEach(element => {
    let heatmap = turf.point(element.lonlat);
    heatmap.properties.value = element.value;
    gcoord.transform(heatmap, gcoord.BD09, gcoord.WGS84);
    heatMapFeatures.push(heatmap);
  });
  heatMapJeojson = turf.featureCollection(heatMapFeatures);
  mapBoxVectorLayer.removeByIds(['ranQiheatMapLayer']);
  mapBoxVectorLayer.addHeatMapLayer('ranQiheatMapLayer', heatMapJeojson, 'value', false);
  heatMapJeojson.features.forEach(feature => {
    gcoord.transform(feature, gcoord.WGS84, gcoord.BD09);
  });
};
//添加排水四色图
const addPaiShuiHeatMap = () => {
  let heatMapList = [
    { lonlat: [109.4583517767791, 36.64045660187989], value: 2 },
    { lonlat: [109.45915900059231, 36.639564923076406], value: 1 },
    { lonlat: [109.46064074624108, 36.63888888248738], value: 3 },
    { lonlat: [109.46175090337006, 36.63763347376713], value: 4 },
    { lonlat: [109.46233801013652, 36.63722780459428], value: 5 },
    { lonlat: [109.46275737211255, 36.63718265184453], value: 3 },
    { lonlat: [109.46340039380915, 36.63601087211503], value: 2 },
    { lonlat: [109.4634842662043, 36.639796184662536], value: 3 },
    { lonlat: [109.46681120454784, 36.635965630684304], value: 2 },
    { lonlat: [109.46751014117459, 36.63303623297878], value: 3 },
    { lonlat: [109.46764992849988, 36.63236013419859], value: 4 },
    { lonlat: [109.46801337554575, 36.63082773329404], value: 5 },
    { lonlat: [109.4677058434299, 36.629971339150515], value: 6 },
    { lonlat: [109.46790154568534, 36.62897972679855], value: 4 },
    { lonlat: [109.46820907780108, 36.62758246914724], value: 5 },
    { lonlat: [109.46846069498666, 36.625914758136716], value: 3 },
    { lonlat: [109.46435094762097, 36.63127797375913], value: 3 },
    { lonlat: [109.46493805438743, 36.62726670999692], value: 3 },
    { lonlat: [109.46518967157303, 36.625959563646546], value: 3 },
    { lonlat: [109.45336366384743, 36.6337564188794], value: 3 },
    { lonlat: [109.45450991991531, 36.63114241494354], value: 3 },
    { lonlat: [109.4557680058435, 36.6292043657803], value: 3 },
    { lonlat: [109.4545099199152, 36.62609442354592], value: 3 },
    { lonlat: [109.45330774891703, 36.62532758190564], value: 3 },
    { lonlat: [109.45825622023474, 36.62505706236186], value: 3 },
    { lonlat: [109.46314877662232, 36.62532740431396], value: 3 },
    { lonlat: [109.44662591476458, 36.62744565667445], value: 3 },
    { lonlat: [109.44139786879603, 36.62974412708136], value: 3 },
    { lonlat: [109.43645036088442, 36.63126842378145], value: 3 },
    { lonlat: [109.43211670920196, 36.63081469982216], value: 3 },
    { lonlat: [109.42868355657039, 36.632810587611026], value: 3 },
    { lonlat: [109.41793384915036, 36.634987868433505], value: 3 },
    { lonlat: [109.40921026459482, 36.63444344378062], value: 3 },
    { lonlat: [109.46858692076272, 36.62110590039618], value: 3 },
    { lonlat: [109.47035661856971, 36.61995354263662], value: 3 },
    { lonlat: [109.47258171472353, 36.61892777347618], value: 3 },
    { lonlat: [109.47334332481641, 36.6208153097412], value: 35 },
    { lonlat: [109.47401900156899, 36.620127962636424], value: 45 },
    { lonlat: [109.47436575670645, 36.61957709339732], value: 43 },
    { lonlat: [109.47556013551343, 36.61923328226432], value: 4 },
    { lonlat: [109.47708842667508, 36.61754354976672], value: 5 },
    { lonlat: [109.47910474358588, 36.61661993861554], value: 6 },
    { lonlat: [109.47944089622014, 36.616364726231225], value: 6 },
    { lonlat: [109.47757869270369, 36.615731001159105], value: 6 },
    { lonlat: [109.47590065021183, 36.61525895943912], value: 7 },
    { lonlat: [109.47548213080846, 36.614904203510264], value: 54 },
    { lonlat: [109.47457696093612, 36.61451805927941], value: 34 },
    { lonlat: [109.47548213080833, 36.61421038003272], value: 25 },
    { lonlat: [109.476835019112, 36.613808538791], value: 34 },
    { lonlat: [109.47752606277787, 36.61309282379784], value: 4 },
    { lonlat: [109.478197640425, 36.61383660779872], value: 5 },
    { lonlat: [109.47888868409086, 36.61442345137025], value: 6 },
    { lonlat: [109.47862589283756, 36.61518291568912], value: 4 },
    { lonlat: [109.47945319863473, 36.61438874695218], value: 4 },
    { lonlat: [109.48037783452571, 36.61392413291535], value: 4 },
    { lonlat: [109.48066009179765, 36.613381048298066], value: 4 },
    { lonlat: [109.47880108700613, 36.613057670788265], value: 4 },
    { lonlat: [109.47672795600828, 36.61215362328269], value: 3 },
    { lonlat: [109.47235706714471, 36.608714319110575], value: 4 },
    { lonlat: [109.47095953066176, 36.60900989208619], value: 4 },
    { lonlat: [109.47242414889578, 36.60820574067667], value: 4 },
    { lonlat: [109.47080300657555, 36.60720326624053], value: 4 },
    { lonlat: [109.46960671534613, 36.60677769970712], value: 4 },
    { lonlat: [109.4667110197535, 36.60586535117448], value: 4 },
    { lonlat: [109.46634207012195, 36.60571021211726], value: 4 },
    { lonlat: [109.48124809033756, 36.61305208261769], value: 4 },
    { lonlat: [109.48183684833916, 36.61249083700314], value: 4 },
    { lonlat: [109.48355078829951, 36.611592045362464], value: 4 },
    { lonlat: [109.4836162058552, 36.611030788941534], value: 4 },
    { lonlat: [109.48472830430275, 36.6098155271458], value: 4 },
    { lonlat: [109.4848983899476, 36.60950742186193], value: 4 },
    { lonlat: [109.48548714794921, 36.61046512927026], value: 4 },
    { lonlat: [109.48597123786165, 36.60922876138633], value: 4 },
    { lonlat: [109.48645532777408, 36.60856200129905], value: 4 },
    { lonlat: [109.48743659111014, 36.60781084557607], value: 4 },
    { lonlat: [109.48792068102257, 36.607355049157874], value: 5 },
    { lonlat: [109.48809076666744, 36.60711022678964], value: 5 },
    { lonlat: [109.48710950333127, 36.60684430590222], value: 5 },
    { lonlat: [109.48636374319577, 36.60624081857617], value: 5 },
    { lonlat: [109.48535859229459, 36.605997022060514], value: 28 },
    { lonlat: [109.48571114675235, 36.60507741447555], value: 26 },
    { lonlat: [109.4869629705518, 36.60486639408042], value: 32 },
    { lonlat: [109.48860822468815, 36.60652068303526], value: 43 },
    { lonlat: [109.48959435527298, 36.606639238856765], value: 33 },
    { lonlat: [109.49055507792285, 36.60707599046411], value: 23 },
    { lonlat: [109.49062150122646, 36.606453011511526], value: 43 },
    { lonlat: [109.4906824296868, 36.607181292824684], value: 23 },
    { lonlat: [109.49173098572089, 36.60668830758674], value: 43 },
    { lonlat: [109.49338196262373, 36.60598188730296], value: 56 },
    { lonlat: [109.49414496601992, 36.605639090280604], value: 55 },
    { lonlat: [109.49287133727367, 36.60487615143745], value: 55 },
    { lonlat: [109.49244041494259, 36.604467862285254], value: 55 },
    { lonlat: [109.49361186903214, 36.604247271956666], value: 55 },
    { lonlat: [109.49395592159959, 36.603945994095234], value: 55 },
    { lonlat: [109.49451061859614, 36.603633392114766], value: 55 },
    { lonlat: [109.49505127263073, 36.603150944228496], value: 66 },
    { lonlat: [109.49581661405635, 36.60443486991358], value: 55 },
    { lonlat: [109.49529000298357, 36.604994123879244], value: 66 },
    { lonlat: [109.49460891932945, 36.60451168465817], value: 66 },
    { lonlat: [109.4949529718969, 36.60387072220969], value: 5 },
    { lonlat: [109.4958166140561, 36.60367134909574], value: 5 },
    { lonlat: [109.49568320591762, 36.60269068866781], value: 5 },
    { lonlat: [109.49566916295554, 36.60080859328861], value: 6 },
    { lonlat: [109.49566214147451, 36.60014495272406], value: 6 },
    { lonlat: [109.494840628201, 36.599753070596016], value: 6 },
    { lonlat: [109.4965608910385, 36.60014250723452], value: 6 },
    { lonlat: [109.49708750211117, 36.60052061853767], value: 6 },
    { lonlat: [109.49651876215258, 36.60062696783045], value: 6 },
    { lonlat: [109.49725601765434, 36.60026905844781], value: 6 },
    { lonlat: [109.49813370277548, 36.601100102081844], value: 6 },
    { lonlat: [109.49785284353655, 36.60242247026715], value: 6 },
    { lonlat: [109.49832328276145, 36.60081901303621], value: 6 },
    { lonlat: [109.49783880057448, 36.59967978702087], value: 6 },
    { lonlat: [109.49802838056061, 36.599299226039754], value: 6 },
    { lonlat: [109.49848477682357, 36.59905454638016], value: 6 },
    { lonlat: [109.49689090064342, 36.59891177851914], value: 6 },
    { lonlat: [109.4978247576123, 36.59752340035382], value: 6 },
    { lonlat: [109.49701728730074, 36.596542660729575], value: 6 },
    { lonlat: [109.49685645137883, 36.595212452415], value: 6 },
    { lonlat: [109.49616132476278, 36.59372208751017], value: 6 },
    { lonlat: [109.497713072057, 36.59436068924544], value: 6 },
    { lonlat: [109.49829530434499, 36.59627757677923], value: 7 },
    { lonlat: [109.49801374925752, 36.593942855465386], value: 7 },
    { lonlat: [109.49621402796436, 36.59244561043963], value: 7 },
    { lonlat: [109.49611930579097, 36.591341185842126], value: 7 },
    { lonlat: [109.49618696448614, 36.58984388974645], value: 7 },
    { lonlat: [109.49579789965442, 36.589368310214226], value: 7 },
    { lonlat: [109.4920496079386, 36.58885313566361], value: 7 },
    { lonlat: [109.48960036317119, 36.588970902925006], value: 7 },
    { lonlat: [109.48761119753136, 36.58913232115246], value: 7 },
    { lonlat: [109.48470187363641, 36.58831158443507], value: 7 },
    { lonlat: [109.48200905756617, 36.589389680113165], value: 56 },
    { lonlat: [109.48023639975108, 36.58902015763719], value: 7 },
    { lonlat: [109.47394414109459, 36.58837402615219], value: 80 },
    { lonlat: [109.4728480702318, 36.59023783394082], value: 78 },
    { lonlat: [109.46961398459973, 36.588434956116345], value: 77 },
    { lonlat: [109.46908624677688, 36.587439603702165], value: 55 },
    { lonlat: [109.4652161694096, 36.58760966434236], value: 7 },
    { lonlat: [109.46463430463056, 36.58702899938492], value: 55 },
    { lonlat: [109.46321347203066, 36.585073258863616], value: 7 },
    { lonlat: [109.46482374897708, 36.583968727419084], value: 7 },
    { lonlat: [109.46692116852915, 36.58347534338372], value: 55 },
    { lonlat: [109.4688020802565, 36.58344032845259], value: 55 },
    { lonlat: [109.47236092762554, 36.58305607754432], value: 66 },
    { lonlat: [109.47351112544439, 36.58086012847229], value: 55 },
    { lonlat: [109.47357878413955, 36.58486317336802], value: 5 },
    { lonlat: [109.46054812145172, 36.592050037038575], value: 55 },
    { lonlat: [109.45958516192611, 36.59014334083254], value: 45 },
    { lonlat: [109.441690631703, 36.574861874203556], value: 45 },
    { lonlat: [109.44624550826747, 36.57378190194129], value: 7 },
    { lonlat: [109.4509010450875, 36.57331087985171], value: 7 },
    { lonlat: [109.45600955305757, 36.573692403602315], value: 7 },
    { lonlat: [109.45623603863253, 36.573058990448956], value: 7 },
    { lonlat: [109.46174718762488, 36.57201959088281], value: 7 },
    { lonlat: [109.46564777252813, 36.57459338262966], value: 7 },
    { lonlat: [109.47100793113714, 36.57481251327233], value: 7 },
    { lonlat: [109.47073111543428, 36.57287999199309], value: 7 },
    { lonlat: [109.47181321318158, 36.57139400720595], value: 7 },
    { lonlat: [109.47722370191836, 36.57685016603991], value: 7 },
    { lonlat: [109.48097329643825, 36.57962676684916], value: 7 },
    { lonlat: [109.49076250629228, 36.580657760474004], value: 7 },
    { lonlat: [109.4908883316117, 36.57815705967815], value: 7 },
    { lonlat: [109.48588048389708, 36.575696873317725], value: 7 },
    { lonlat: [109.48555333806642, 36.57234345586721], value: 7 },
    { lonlat: [109.48462223070236, 36.57114165197099], value: 7 },
    { lonlat: [109.48494937653292, 36.569168438097215], value: 7 },
    { lonlat: [109.48789368900827, 36.568575587318655], value: 7 },
    { lonlat: [109.48701291177198, 36.56741432474017], value: 77 },
    { lonlat: [109.48668576594132, 36.565197403953434], value: 77 },
    { lonlat: [109.48661027074958, 36.56200594032002], value: 77 },
    { lonlat: [109.48643411530227, 36.55950462918852], value: 7 },
    { lonlat: [109.47872714141864, 36.55363535583412], value: 7 },
    { lonlat: [109.47752130169793, 36.55237880798815], value: 7 },
    { lonlat: [109.47659108248483, 36.550399478960415], value: 7 },
    { lonlat: [109.47531633763725, 36.54680772057538], value: 7 },
    { lonlat: [109.47714232349988, 36.538378228993835], value: 7 },
    { lonlat: [109.47628100941364, 36.53678778825302], value: 7 },
    { lonlat: [109.49119798128915, 36.57421937037934], value: 7 },
    { lonlat: [109.49316811330803, 36.5763548006588], value: 7 },
    { lonlat: [109.49201320833134, 36.5772533638739], value: 7 },
    { lonlat: [109.49206173375048, 36.57869986536457], value: 7 },
    { lonlat: [109.49288666587658, 36.57962971205523], value: 7 },
    { lonlat: [109.4948373877278, 36.579792436760556], value: 7 },
    { lonlat: [109.49405127593694, 36.581677232061956], value: 7 },
    { lonlat: [109.49497325890142, 36.582200016243696], value: 7 },
    { lonlat: [109.49599229270427, 36.581908742939454], value: 7 },
    { lonlat: [109.49642902147689, 36.583276883316856], value: 56 },
    { lonlat: [109.49692398075254, 36.58497374115537], value: 4 },
    { lonlat: [109.49697250617166, 36.58646705928871], value: 4 },
    { lonlat: [109.49781684846545, 36.58750638888238], value: 4 },
    { lonlat: [109.49951870129331, 36.59430380170364], value: 3 },
    { lonlat: [109.49965804385573, 36.59486501809594], value: 65 },
    { lonlat: [109.49988842408676, 36.59649457072071], value: 76 },
    { lonlat: [109.50008437575242, 36.59732109333835], value: 64 },
    { lonlat: [109.49935516493218, 36.59831527959685], value: 43 },
    { lonlat: [109.50060236752009, 36.60104441193055], value: 45 },
    { lonlat: [109.50126321265897, 36.60358057739102], value: 23 },
    { lonlat: [109.49942472380532, 36.604173438687546], value: 34 },
    { lonlat: [109.5007026398301, 36.60501144006829], value: 6 },
    { lonlat: [109.49901617072663, 36.605443415517875], value: 5 },
    { lonlat: [109.50014206700124, 36.6054693718935], value: 5 },
    { lonlat: [109.50184753857336, 36.6066137836571], value: 6 },
    { lonlat: [109.50264089164449, 36.606042210978295], value: 6 },
    { lonlat: [109.50362426940333, 36.606627392739135], value: 6 },
    { lonlat: [109.5029639336135, 36.60551750543657], value: 6 },
    { lonlat: [109.50313970644957, 36.60497656754981], value: 6 },
    { lonlat: [109.50333489978382, 36.60424830824475], value: 6 },
    { lonlat: [109.50498336394963, 36.60554595245176], value: 6 },
    { lonlat: [109.5062137738025, 36.60733384990011], value: 6 },
    { lonlat: [109.50681710218589, 36.607903700917404], value: 6 },
    { lonlat: [109.5058527268957, 36.60992901196387], value: 6 },
    { lonlat: [109.50458431210518, 36.61083589220665], value: 6 },
    { lonlat: [109.5035629294087, 36.61163552050199], value: 6 },
    { lonlat: [109.50728675442862, 36.60816923300994], value: 6 },
    { lonlat: [109.50862770454853, 36.60957898993155], value: 6 },
    { lonlat: [109.50900738849452, 36.611329111002924], value: 6 },
    { lonlat: [109.5087728725542, 36.61263215550033], value: 6 },
    { lonlat: [109.51196589727925, 36.61287834022912], value: 6 },
    { lonlat: [109.51194785759148, 36.614481923277204], value: 6 },
    { lonlat: [109.5131805695851, 36.614291799340485], value: 6 },
    { lonlat: [109.51506271033638, 36.61535240611497], value: 6 },
    { lonlat: [109.51550167607066, 36.616878374906946], value: 6 },
    { lonlat: [109.5174078697389, 36.6167755151019], value: 6 },
    { lonlat: [109.51728159192487, 36.61817541867955], value: 6 },
    { lonlat: [109.51805729849644, 36.61931353190943], value: 6 },
    { lonlat: [109.52015591550028, 36.61910403021254], value: 6 },
    { lonlat: [109.52326378422758, 36.618323942249155], value: 6 },
    { lonlat: [109.52535504124248, 36.621157617292155], value: 6 },
    { lonlat: [109.52708365253223, 36.622782899894624], value: 6 },
    { lonlat: [109.53062549244765, 36.62553845807305], value: 6 },
    { lonlat: [109.53329698262276, 36.62472766573882], value: 6 },
    { lonlat: [109.53529153411093, 36.62401430655811], value: 6 },
    { lonlat: [109.53622232480538, 36.62273577119326], value: 6 },
    { lonlat: [109.53555747430924, 36.62184699338395], value: 6 },
    { lonlat: [109.5376787067582, 36.627153166827114], value: 6 },
    { lonlat: [109.53979414015477, 36.62881729653026], value: 6 },
    { lonlat: [109.54130516400943, 36.63016960226274], value: 6 },
    { lonlat: [109.54008425673476, 36.63148291126323], value: 6 },
    { lonlat: [109.53755782484959, 36.63369255351504], value: 6 },
    { lonlat: [109.53614579982442, 36.6360575522797], value: 6 },
    { lonlat: [109.53343812543821, 36.62040741435609], value: 6 },
    { lonlat: [109.53580803843838, 36.62277137411824], value: 6 },
    { lonlat: [109.54168042409255, 36.62849933558428], value: 6 },
    { lonlat: [109.54288050769686, 36.63006645029258], value: 6 },
    { lonlat: [109.54573448803326, 36.63312914358253], value: 6 },
    { lonlat: [109.54725728319507, 36.636077923401025], value: 6 },
    { lonlat: [109.54490753966712, 36.63712470479035], value: 6 },
    { lonlat: [109.54219474563702, 36.63804142854716], value: 6 },
    { lonlat: [109.53998618841547, 36.636568584052085], value: 6 },
    { lonlat: [109.53464796833235, 36.63649472525616], value: 6 },
    { lonlat: [109.53531650653413, 36.633497267658136], value: 6 },
    { lonlat: [109.52895761991671, 36.63899560790742], value: 6 },
    { lonlat: [109.52561492890752, 36.6410855206062], value: 6 },
    { lonlat: [109.52130829909568, 36.6436264356986], value: 6 },
    { lonlat: [109.51955144289083, 36.64125575007403], value: 6 },
    { lonlat: [109.51807443988673, 36.63976209758932], value: 6 },
    { lonlat: [109.51690838488348, 36.64107514503131], value: 6 },
    { lonlat: [109.51689283748337, 36.643941824018825], value: 6 },
    { lonlat: [109.51588225648054, 36.646106775610676], value: 6 },
    { lonlat: [109.51409430547558, 36.64724431137258], value: 6 },
    { lonlat: [109.51174664806909, 36.646327110237564], value: 6 },
    { lonlat: [109.51070497226618, 36.648567165872755], value: 6 },
    { lonlat: [109.50978767566362, 36.64972972191704], value: 6 },
    { lonlat: [109.51067387746598, 36.650967429494266], value: 6 },
    { lonlat: [109.51146679486808, 36.652280284952866], value: 6 },
    { lonlat: [109.51191766946926, 36.65361817342491], value: 6 },
    { lonlat: [109.51199540646942, 36.65525669873434], value: 6 },
    { lonlat: [109.51428087427561, 36.655191468743396], value: 6 },
    { lonlat: [109.51460736967644, 36.65357281224559], value: 6 },
    { lonlat: [109.51353459907345, 36.65593792955656], value: 6 },
    { lonlat: [109.50664710085456, 36.64933312632619], value: 6 },
    { lonlat: [109.50327331504526, 36.64723825232908], value: 6 },
    { lonlat: [109.50558987765153, 36.64807508399961], value: 28 },
    { lonlat: [109.50703578585542, 36.64720800813199], value: 29 },
    { lonlat: [109.50596301525242, 36.6462406907215], value: 28 },
    { lonlat: [109.50380192664646, 36.647478454644535], value: 6 },
    { lonlat: [109.50293172446254, 36.64689822474207], value: 6 },
    { lonlat: [109.49977744553338, 36.648514140036085], value: 6 },
    { lonlat: [109.49841675260586, 36.64788286957943], value: 5 },
    { lonlat: [109.49667830356817, 36.64754979371535], value: 5 },
    { lonlat: [109.49480514097309, 36.64623412909707], value: 5 },
    { lonlat: [109.49194575265034, 36.64800589561177], value: 5 },
    { lonlat: [109.48774678808107, 36.64818660580967], value: 5 },
    { lonlat: [109.48778573951488, 36.65030081450137], value: 23 },
    { lonlat: [109.49052013017122, 36.65182489248657], value: 34 },
    { lonlat: [109.49386216319564, 36.653097849178344], value: 23 },
    { lonlat: [109.49541243026289, 36.655375126863646], value: 34 },
    { lonlat: [109.49376867975428, 36.65881983304358], value: 5 },
    { lonlat: [109.49594216976315, 36.66097140773642], value: 5 },
    { lonlat: [109.49674456930045, 36.662419955163955], value: 5 },
    { lonlat: [109.49257676587825, 36.66373039429423], value: 5 },
    { lonlat: [109.48954634432454, 36.66561822861078], value: 5 },
    { lonlat: [109.48265911535468, 36.654995428105366], value: 5 },
    { lonlat: [109.47853819629543, 36.65495490425706], value: 5 },
    { lonlat: [109.47794031082658, 36.64600156969751], value: 5 },
    { lonlat: [109.47947610116441, 36.638089580666374], value: 65 },
    { lonlat: [109.48196313342223, 36.63989201277776], value: 66 },
    { lonlat: [109.48007581107044, 36.63626409608854], value: 45 },
    { lonlat: [109.48312727618112, 36.63616165277856], value: 43 },
    { lonlat: [109.48487349031957, 36.63719648127574], value: 23 },
    { lonlat: [109.48806606364347, 36.640221454017194], value: 65 },
    { lonlat: [109.48968880809531, 36.64396832101501], value: 66 },
    { lonlat: [109.49199945508674, 36.64370117513442], value: 77 },
    { lonlat: [109.4886481350228, 36.64628232413764], value: 5 },
    { lonlat: [109.48693719793754, 36.6481698459415], value: 5 },
    { lonlat: [109.49295193552571, 36.64621960689284], value: 6 },
    { lonlat: [109.4960034006364, 36.647282727565546], value: 5 },
    { lonlat: [109.4991959739603, 36.64675388047846], value: 5 },
    { lonlat: [109.50401129173616, 36.64690730406689], value: 5 },
    { lonlat: [109.50575750587461, 36.64410416698772], value: 5 },
    { lonlat: [109.5035879670964, 36.64221068329797], value: 5 },
    { lonlat: [109.49916069690676, 36.63886718707988], value: 5 },
    { lonlat: [109.4955447989431, 36.639105918699926], value: 34 },
    { lonlat: [109.49207000919266, 36.63564855779099], value: 34 },
    { lonlat: [109.48792495542945, 36.63128116433782], value: 23 },
    { lonlat: [109.4824393736407, 36.62725474513087], value: 43 },
    { lonlat: [109.48350796628219, 36.6240399916917], value: 5 },
    { lonlat: [109.47904752109281, 36.617139346998826], value: 5 },
    { lonlat: [109.47973483856029, 36.6163530732266], value: 5 },
    { lonlat: [109.48169304493001, 36.61519041973535], value: 6 },
    { lonlat: [109.48128150577406, 36.61652725739157], value: 5 },
    { lonlat: [109.4856636114327, 36.61250054572504], value: 6 },
    { lonlat: [109.48669837172288, 36.61390464711184], value: 5 },
    { lonlat: [109.48778868961256, 36.61110958729933], value: 5 },
    { lonlat: [109.48832343150745, 36.61186423919422], value: 5 },
    { lonlat: [109.48855260660523, 36.61062565266084], value: 5 },
    { lonlat: [109.49005960649093, 36.60966700183684], value: 5 },
    { lonlat: [109.49101103038188, 36.608943504005595], value: 5 },
    { lonlat: [109.49269164776588, 36.607944427600174], value: 5 },
    { lonlat: [109.49137909947821, 36.60774724442752], value: 5 },
    { lonlat: [109.49426114995096, 36.60713571424016], value: 5 },
    { lonlat: [109.4965699550399, 36.6053070257893], value: 5 },
    { lonlat: [109.49771583052903, 36.60506504012202], value: 5 },
    { lonlat: [109.49879225901881, 36.60545019078856], value: 5 },
    { lonlat: [109.49911865991568, 36.6049954268223], value: 5 },
    { lonlat: [109.50854172185717, 36.60498562319275], value: 5 },
    { lonlat: [109.51044938269962, 36.60552218657323], value: 5 },
    { lonlat: [109.51212316173265, 36.60707867359568], value: 5 },
    { lonlat: [109.51372557809377, 36.60793013404142], value: 5 },
    { lonlat: [109.51465329282912, 36.60842590572189], value: 5 },
    { lonlat: [109.51604810869001, 36.60896351865908], value: 5 },
    { lonlat: [109.51735209933206, 36.609239601548374], value: 6 },
    { lonlat: [109.51869501506792, 36.61021656939483], value: 6 },
    { lonlat: [109.51997305564743, 36.61025204679149], value: 6 },
    { lonlat: [109.52078399510141, 36.610674577473965], value: 6 },
    { lonlat: [109.64885541010113, 36.68368750346818], value: 77 },
    { lonlat: [109.64418083988407, 36.684106217976854], value: 77 },
    { lonlat: [109.65730463327395, 36.68351820161691], value: 6 },
    { lonlat: [109.66382903341632, 36.683373146319866], value: 53 },
    { lonlat: [109.66365404950439, 36.68117431536967], value: 54 },
    { lonlat: [109.66952850940268, 36.687351497043785], value: 56 },
    { lonlat: [109.67765276245356, 36.68821312918963], value: 33 },
    { lonlat: [109.67907763145014, 36.68818888405842], value: 23 },
    { lonlat: [109.67620289575514, 36.68570831505293], value: 34 },
    { lonlat: [109.66992847262958, 36.6839122446761], value: 6 },
    { lonlat: [109.66315409547013, 36.68135099518023], value: 6 },
    { lonlat: [109.68433055291582, 36.68853913721367], value: 6 },
    { lonlat: [109.68255571609542, 36.69068926681356], value: 6 },
    { lonlat: [109.68633036905133, 36.69126900476532], value: 77 },
    { lonlat: [109.68605539433261, 36.69273456341231], value: 77 },
    { lonlat: [109.68383059888168, 36.693435078555396], value: 6 },
    { lonlat: [109.70500365221739, 36.69928917967537], value: 77 },
    { lonlat: [109.70692847524785, 36.69970780952815], value: 77 },
    { lonlat: [109.72405190090896, 36.70298488870231], value: 6 },
    { lonlat: [109.72712178240528, 36.70196817888451], value: 34 },
    { lonlat: [109.72395293859049, 36.701623796200366], value: 34 },
  ];
  let heatMapJeojson = {};
  let heatMapFeatures = [];
  heatMapList.forEach(element => {
    let heatmap = turf.point(element.lonlat);
    heatmap.properties.value = element.value;
    gcoord.transform(heatmap, gcoord.BD09, gcoord.WGS84);
    heatMapFeatures.push(heatmap);
  });
  heatMapJeojson = turf.featureCollection(heatMapFeatures);
  mapBoxVectorLayer.removeByIds(['paiShuiheatMapLayer']);
  mapBoxVectorLayer.addHeatMapLayer('paiShuiheatMapLayer', heatMapJeojson, 'value', false);
  heatMapJeojson.features.forEach(feature => {
    gcoord.transform(feature, gcoord.WGS84, gcoord.BD09);
  });
};

// 公共弹窗关闭后事件
const handleClosed = () => {
  console.log('clear all');

  useDialogTabs.clear();
};
</script>

<style lang="scss" scoped>
#oneMapIndex {
  width: 100%;
  height: 100vh;
  background: black;
  position: relative;

  #oneMapBody {
    width: 100%;
    height: 100vh;
    background: rgba(255, 192, 203, 0.304);
    // margin-top: -30px;
    z-index: 99;
    position: relative;

    #oneMapHeader {
      width: 100%;
      height: 100px;
      background: url('@/assets/images/Sponge_screen/db_img.png') no-repeat center;
      background-size: cover;
      z-index: 100;
      position: absolute;
      top: 0;
      left: 0;
      #titleFont {
        width: 634px;
        height: 47px;
        position: absolute;
        left: 50%;
        margin-left: -317px;
        top: 20px;
        font-family: PangMenZhengDao;
        font-weight: 400;
        font-size: 38px;
        color: #ffffff;
        line-height: 47px;
        // text-shadow: 0px 2px 8px rgba(0, 83, 95, 0.9);
        font-style: italic;

        background: linear-gradient(0deg, aqua 0%, #ffffff 80%, #ffffff 100%);

        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-align: center;
      }

      .Location {
        position: absolute;
        top: 15px;
        left: 20px;
        height: 15px;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        font-size: 16px;
        color: #ffffff;
        line-height: 13px;
        font-style: italic;
        height: 18px;
        line-height: 18px;
        display: inline-block;
      }
      .Timer {
        position: absolute;
        top: 15px;
        left: 90px;
        height: 18px;
        line-height: 18px;

        .time {
          display: inline-block;
          width: auto;
          font-family: Adobe Heiti Std;
          font-weight: normal;
          font-size: 16px;
          color: #ffffff;
          height: 18px;
          line-height: 18px;
          font-style: italic;
          margin: 0 10px;
        }

        .date {
          display: inline-block;
          width: auto;
          font-family: Adobe Heiti Std;
          font-weight: normal;
          font-size: 16px;
          color: #ffffff;
          height: 18px;
          line-height: 18px;
          font-style: italic;
        }
      }

      .header_icon {
        width: 22px;
        height: 22px;
        position: absolute;
        top: 10px;
        cursor: pointer;
      }
      .goHome {
        background: url('@/assets/images/Sponge_screen/gb_btn.png') no-repeat center;
        background-size: contain;
        right: 150px;
      }
      .goUser_com {
        background: url('@/assets/images/Sponge_screen/hs_btn.png') no-repeat center;
        background-size: contain;
        right: 100px;
      }
      .goClose_com {
        background: url('@/assets/images/Sponge_screen/sy_btn.png') no-repeat center;
        background-size: contain;
        right: 50px;
      }
    }

    #TuChengImg {
      width: 36px;
      height: 36px;
      position: absolute;
      right: 470px;
      top: 100px;
      cursor: pointer;
    }
    .TuChengImgTrue {
      transform: translateX(460px);
      transition: all 1s ease;
    }
    .TuChengImgFalse {
      transform: translateX(0px);
      transition: all 1s ease;
    }

    #SiSeTu {
      width: 37px;
      height: 126px;
      position: absolute;
      right: 490px;
      bottom: 100px;
    }
    .SiSeTuTrue {
      transform: translateX(490px);
      transition: all 1s ease;
    }
    .SiSeTuFalse {
      transform: translateX(10px);
      transition: all 1s ease;
    }
    #ShowComVs {
      position: absolute;
      left: 0px;
      top: 300px;
      width: 40px;
      height: 40px;
      // background: #00cee0;
      cursor: pointer;
    }

    .ShowComVsTrue {
      transform: translateX(10px);
      transition: all 1s ease;
    }
    .ShowComVsFalse {
      transform: translateX(460px);
      transition: all 0.8s ease;
    }
  }
  #BottomMenuBox {
    position: absolute;
    bottom: 0;
    width: 952px;
    height: 93px;
    left: 50%;
    margin-left: -476px;
    z-index: 999;

    .BottmBackGround {
      position: absolute;
      bottom: 0;
      width: 952px;
      height: 53px;
      background: url('@/assets/images/Sponge_screen/menu/DB_img.png') no-repeat center;
      background-size: cover;
    }
    // 图标菜单样式 从左到右按照顺序进行设定
    .MenuList {
      position: absolute;
      width: 156;
      height: 48px;
      text-align: center;
      cursor: pointer;
      .MenuImg {
        width: 156px;
        height: 48px;
        position: absolute;
      }
      .MenuFont {
        margin: 0;
        padding: 0;
        display: inline-block;
        width: 156px;
        height: 48px;
        line-height: 46px;
        font-family: PangMenZhengDao;
        font-weight: 400;
        font-size: 20px;
        color: #ffffff;
        text-shadow: 0px 0px 20px #00303c;
        position: relative;
        box-sizing: border-box;
        padding-left: 30px;
        .ErJiMenuBox {
          position: absolute;
          bottom: 50px;
          left: 4px;
          font-size: 0;
          line-height: 0;
          text-align: center;
          display: flex;
          align-items: center;
          width: 147px;
          height: auto;
          flex-direction: column;

          .ErJiMenuList {
            font-family: Source Han Sans CN;
            font-weight: bold;
            font-size: 14px;
            color: #ffffff;
            text-shadow: 0px 0px 20px #00303c;
            height: 40px;
            line-height: 40px;
            display: inline-block;
            margin: 5px 0;
            width: 147px;
            background: linear-gradient(0deg, rgba(1, 86, 126, 1) 0%, rgba(43, 123, 159, 0.8) 100%);
            border-radius: 20px;
            &:hover {
              color: #ffd97f;
            }
          }
          .ErJiMenuCheck {
            font-family: Source Han Sans CN;
            font-weight: bold;
            font-size: 14px;
            color: #ffd97f;
            background: linear-gradient(0deg, rgba(1, 86, 126, 1) 0%, rgba(43, 123, 159, 1) 100%);
          }

          .ErJiMenuJT {
            width: 28px;
            height: 21px;
            margin-bottom: 10px;
          }
        }
      }
      .AC_Font {
        color: #ffd97f;
      }
    }
    .MenuList3 {
      left: 38px;
      top: 26px;
    }
    .MenuList1 {
      left: 218px;
      top: 13px;
    }
    .MenuList0 {
      left: 398px;
      top: 0px;
    }
    .MenuList2 {
      left: 578px;
      top: 13px;
    }
    .MenuList4 {
      left: 758px;
      top: 26px;
    }
  }
}

/*
      进入和离开动画可以使用不同
      持续时间和速度曲线。
    */
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateY(80px);
  opacity: 0;
}
</style>

<style lang="scss">
.publicDialogVisible {
  .el-dialog {
    background: rgba(14, 69, 89, 0.9);
    height: 800px;
    border: 1px solid #15d2fd;
    .el-dialog__header {
      background: url('@/assets/images/Sponge_screen/DialogTitleBG.png') no-repeat center;
      background-size: cover;
      padding: 0;
      height: 60px;
      margin: 0;
      .el-dialog__title {
        font-family: PangMenZhengDao;
        font-weight: 400;
        font-size: 24px;
        color: #ebfeff;
        height: 60px;
        line-height: 60px;
        margin-left: 40px;
      }
    }

    .el-dialog__body {
      width: 100%;
      height: calc(100% - 60px);
    }
  }
}
</style>