NanTong-police/src/views/map.vue

<template>
  <div class="map-container">
    <navigationBar></navigationBar>
    <mars-map :options="options"></mars-map>
    <!-- 搜索 -->
    <div class="search-container" id="box">
      <div class="search-input flex-container">
        <div class="input-title">点位搜索:</div>
        <div class="input-box">
          <el-input
            v-model="queryParams.name"
            placeholder="请输入点位名称"
            clearable
          />
          <div class="result-popup" v-show="popupShow">
            <div class="list" v-if="list.length > 0">
              <div
                class="list-item"
                v-for="item in list"
                :key="item.id"
                @click="addMarker(item.id, item.lonLat, item.pointName)"
              >
                <div class="enterprise-name">{{ item.pointName }}</div>
                <div class="loaction-icon"></div>
              </div>
            </div>
            <div class="no-data" v-else>暂无搜索结果</div>
          </div>
        </div>
        <div class="search-bnt input-title" @click="getList()">搜索</div>
        <div
          class="search-bnt input-title"
          style="margin-left: 10px; padding: 5px 10px"
          @click="handlePointSelect()"
        >
          选择点位
        </div>
      </div>
    </div>

    <!-- 树形结构 -->
    <el-drawer v-model="drawer" title="点位选择">
      <el-tree
        node-key="id"
        :props="props"
        :load="loadNode"
        lazy
        accordion
        @node-click="handleNodeClick"
      />
      <template #footer>
        <el-button type="primary" @click="finishTree">确定</el-button>
      </template>
    </el-drawer>
    <!-- 地图图层 -->
    <div class="map-layer">
      <div class="model flex-container">
        <div
          class="model-item"
          :class="currentModelIndex == index ? 'activeBtn' : ''"
          v-for="(item, index) in mapModel"
          :key="index"
        >
          {{ item }}
        </div>
      </div>
      <div class="point flex-container">
        <div
          class="point-item"
          :class="currentIndex == index ? 'activeBtn' : ''"
          v-for="(item, index) in pointLayer"
          :key="index"
          @click="handlePointLayer(index, item.value)"
        >
          {{ item.name }}
        </div>
      </div>
    </div>

    <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="500"
    :before-close="handleClose"
  >
   
    
  </el-dialog>
  </div>
</template>

<script setup name="Map">
import NavigationBar from "@/components/NavigationBar";
import marsMap from "@/components/marsMap";
const { proxy } = getCurrentInstance();
import {
  getPointListByType,
  getPointList,
  getPointinfo,
  getdicts,
  getbusinessById,
  getEnterpriseTree,
} from "@/api/mapApi";
import { ref, reactive, onMounted, onUnmounted } from "vue";
let options = reactive({
  scene: {
    center: {
      lat: 32.006053,
      lng: 120.899041,
      alt: 45187,
      heading: 0,
      pitch: -45,
    },
    showSun: false,
    showMoon: false,
    showSkyBox: false,
    showSkyAtmosphere: false,
    fog: false,
    backgroundColor: "#363635", // 天空背景色
    globe: {
      baseColor: "#363635", // 地球地面背景色
      showGroundAtmosphere: false,
      enableLighting: false,
    },
    clock: {
      currentTime: "2023-11-01 12:00:00", // 固定光照时间
    },
    cameraController: {
      zoomFactor: 1.5,
      minimumZoomDistance: 0.1,
      maximumZoomDistance: 200000,
      enableCollisionDetection: false, // 允许进入地下
    },
  },
  terrain: {
    show: false,
  },
  basemaps: [
    {
      id: 2017,
      pid: 10,
      name: "蓝色底图",
      icon: "https://data.mars3d.cn/img/thumbnail/basemap/my_blue.png",
      type: "gaode",
      layer: "vec",
      chinaCRS: "GCJ02",
      invertColor: true,
      filterColor: "#015CB3",
      brightness: 0.6,
      contrast: 1.8,
      gamma: 0.3,
      hue: 1,
      saturation: 0,
      show: true,
    },
  ],
});
//地图图层
const mapModel = reactive(["二维地图", "三维地图"]);
//图标类型图层
const pointLayer = reactive([
  { name: "服务点位", value: undefined },
  { name: "轨道交通警务站", value: "13" },
  { name: "巡防警务站", value: "04" },
]);

//查询条件
let queryParams = reactive({
  name: "",
  type: 0,
  lonLat: undefined,
});

let list = reactive([]);
let popupShow = ref(false);
let dictList = reactive([]);

const dialogVisible = ref(true)

let map = null;
let currentIndex = ref(null);
let currentModelIndex = ref(0);
//树形结构配置
let drawer = ref(false);
const props = {
  label: "simpleName",
  children: "zones",
  isLeaf: (data, node) => {
    return data.isLeaf == 1 ? false : true;
  },
};
let currentNodeKey = reactive({});

onMounted(() => {
  
  //字典
  getdictList();
  document.addEventListener("click", handleOutsideClick);
});
onUnmounted(() => {
  document.removeEventListener("click", handleOutsideClick);
});

/**
 * 监听搜索结果弹出层
 * @param event
 */
const handleOutsideClick = (event) => {
  const box = document.getElementById("box");
  if (popupShow.value && box && !box.contains(event.target)) {
    popupShow.value = false;
  }
};
/**
 * 地图渲染完成
 * @param mapInstance
 */
const onload = (mapInstance) => {
  map = mapInstance;
};

/**
 * 点图层切换
 * @param index
 * @param value
 */
const handlePointLayer = (index, value) => {
  if (currentIndex.value != index) {
    currentIndex.value = index;
  }
};
/**
 * 点位选择
 */
const handlePointSelect = () => {
  drawer.value = true;
};
/**
 * 懒加载树形结构
 * @param node
 * @param resolve
 */
const loadNode = async (node, resolve) => {
  if (node.level === 0) {
    // 获取第一层数据
    const res = await getEnterpriseTree();
    return resolve(res.data);
  }
  if (node.level > 0 && node.data.isLeaf == 0) return resolve([]);
  //其他层
  const treeItem = await getEnterpriseTree(node.level + 1, {
    parent: node.data.parent,
    child: node.data.child,
  });
  return resolve(treeItem.data);
};

/**
 * 树被单击
 * @param data
 */
const handleNodeClick = (data) => {
  currentNodeKey = data;
};
/**
 * 树结构选择完毕
 */
const finishTree = () => {
  drawer.value = false;
};

const laoding3d = () => {
  const tiles3dLayer = new mars3d.layer.TilesetLayer({
    name: "模型名称",
    url: "http://192.168.0.108:9090/B3dmqlh06/tileset.json",
    maximumScreenSpaceError: 16,
    maxMemory: 1024, // 最大缓存内存大小(MB)
    matrixMove: {
      hasMiddle: false,
    },
    flyTo: true,

    // maximumScreenSpaceError: 16, // 【重要】数值加大，能让最终成像变模糊
    // cacheBytes: 1073741824, // 1024MB = 1024*1024*1024 【重要】额定显存大小(以字节为单位)，允许在这个值上下波动。
    // maximumCacheOverflowBytes: 2147483648, // 2048MB = 2048*1024*1024 【重要】最大显存大小(以字节为单位)。
    // maximumMemoryUsage: 512, //【cesium 1.107+弃用】内存建议显存大小的50%左右，内存分配变小有利于倾斜摄影数据回收，提升性能体验

    // skipLevelOfDetail: true, //是Cesium在1.5x 引入的一个优化参数，这个参数在金字塔数据加载中，可以跳过一些级别，这样整体的效率会高一些，数据占用也会小一些。但是带来的异常是：1） 加载过程中闪烁，看起来像是透过去了，数据载入完成后正常。2，有些异常的面片，这个还是因为两级LOD之间数据差异较大，导致的。当这个参数设置false，两级之间的变化更平滑，不会跳跃穿透，但是清晰的数据需要更长，而且还有个致命问题，一旦某一个tile数据无法请求到或者失败，导致一直不清晰。所以我们建议：对于网络条件好，并且数据总量较小的情况下，可以设置false，提升数据显示质量。
    // loadSiblings: true, // 如果为true则不会在已加载完模型后，自动从中心开始超清化模型
    // cullRequestsWhileMoving: true,
    // cullRequestsWhileMovingMultiplier: 10, //【重要】 值越小能够更快的剔除
    // preferLeaves: true, //【重要】这个参数默认是false，同等条件下，叶子节点会优先加载。但是Cesium的tile加载优先级有很多考虑条件，这个只是其中之一，如果skipLevelOfDetail=false，这个参数几乎无意义。所以要配合skipLevelOfDetail=true来使用，此时设置preferLeaves=true。这样我们就能最快的看见符合当前视觉精度的块，对于提升大数据以及网络环境不好的前提下有一点点改善意义。
    // progressiveResolutionHeightFraction: 0.5, //【重要】 数值偏于0能够让初始加载变得模糊
    // dynamicScreenSpaceError: true, // true时会在真正的全屏加载完之后才清晰化模型
    // preloadWhenHidden: true, //tileset.show是false时，也去预加载数据
  });
  map.addLayer(tiles3dLayer);
};

/**
 * 根据关键字搜索
 */
const getList = async () => {
  if (!queryParams.name) {
    proxy.$modal.msgError("请先输入点位名称");
    return;
  }
  let res = await getPointList(queryParams);
  list = res.data;
  popupShow.value = true;
};

/**
 * 字典
 */
const getdictList = async () => {
  let res = await getdicts();
  dictList = res.result;
};
</script>
<style scoped lang="scss">
.map-container {
  position: relative;
  height: 100%;

  background: #0059a2;
  .search-container {
    position: absolute;
    top: 180px;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    background: rgba(15, 42, 79, 0.9);
    border: 1px solid #094edb;
    z-index: 100;
    padding: 13px 18px;
    .input-title {
      font-size: 16px;
      color: #fff;
    }
    .search-bnt {
      cursor: pointer;
      background: url("@/assets/images/btn_bg.png");
      padding: 5px 16px;
      background-size: 100% 100%;
    }
    .input-box {
      position: relative;
      flex: 1;
      margin: 0 10px;

      .result-popup {
        position: absolute;
        top: 55px;
        width: 100%;
        height: 500px;
        border: 1px solid 094edb;
        background-color: rgba(15, 42, 79, 0.9);
        border: 1px solid #094edb;
        border-radius: 4px;
        box-sizing: border-box;
        padding: 6px 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        .list {
          width: 100%;
          height: 100%;
          overflow-y: auto;
        }
        .no-data {
          font-size: 16px;
          color: #fff;
          letter-spacing: 1px;
        }
        .list-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          cursor: pointer;
          font-size: 16px;
          color: #fff;
          padding: 13px 6px;
          border-bottom: 1px solid rgba(3, 91, 178, 0.5);
          .loaction-icon {
            display: none;
            height: 25px;
            width: 25px;
            background: url("@/assets/images/loaction.png");
            background-size: 100% 100%;
          }
        }
        .list-item:hover {
          border-radius: 4px;
          background-color: #409eff;
          .loaction-icon {
            display: block;
          }
        }
      }
    }
  }

  .map-layer {
    position: absolute;
    right: 30px;
    bottom: 30px;
    .model {
      width: 55%;
      margin-left: auto;
      margin-bottom: 15px;
    }
    & > div {
      background: rgba(15, 42, 79, 0.9);
      border: 1px solid #094edb;
      & > div {
        position: relative;
        cursor: pointer;
        padding: 6px 15px;
        font-size: 16px;
        color: #fff;
      }
      & > div:not(:last-child)::after {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        content: "|";
        font-size: 14px;
        color: #409eff;
      }
      .activeBtn {
        background: #409eff;
      }
    }
  }
}

.flex-container {
  display: flex;
  align-items: center;
}
::v-deep .el-drawer {
  // width: 20% !important;
  background: rgba(15, 42, 79, 1);
  border: 1px solid #094edb;
  .el-drawer__header {
    color: #fff !important;
    font-weight: bold;
    font-size: 22px;
  }
  .drawer-btn {
    position: absolute;
    right: 20px;
    bottom: 20px;
  }
}
::v-deep .el-tree {
  background: transparent;
  color: #fff;
  font-size: 16px;
}
::v-deep .el-tree-node__content {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}
::v-deep .el-tree-node__content:hover {
  background: #409eff !important;
}
::v-deep .el-tree-node:focus > .el-tree-node__content {
  background: #409eff !important;
}

// 滚动条
/* 设置滚动条整体样式 */
::-webkit-scrollbar {
  width: 8px; /* 滚动条宽度 */
}

/* 设置滚动条轨道 */
::-webkit-scrollbar-track {
  background: transparent; /* 轨道背景颜色 */
}

/* 设置滚动条滑块 */
::-webkit-scrollbar-thumb {
  background: #094edb; /* 滑块背景颜色 */
  border-radius: 5px; /* 滑块圆角 */
}

/* 鼠标悬停在滑块上时的样式 */
::-webkit-scrollbar-thumb:hover {
  background: #02a1cb; /* 悬停时滑块背景颜色 */
}
</style>