xzlz_JczWeb/src/components/GdMap/index.vue

<template>
  <div :id="mapid" class="map"></div>
  <div class="changeMap_box" v-if="props.isShow">
    <el-switch v-model="conditionRoute" @change="handleSwitch" active-text="打开路况" inactive-text="关闭路况" style="--el-switch-color:#13ce66;--el-switch-off-color:#ff4949;" />
    <!-- <el-carousel type="card" height="75px" :autoplay="false" indicator-position="none" :initial-index="3"  @change="onMapImageChange">
      <el-carousel-item>
        <div class="mapImageItem">
          <img :src="require('@/assets/images/slt.jpg')" alt="" />
          <div>栅格浅色</div>
        </div>
      </el-carousel-item>
      <el-carousel-item>
        <div class="mapImageItem">
          <img :src="require('@/assets/images/yxt.jpg')" alt="" />
          <div>影像图</div>
        </div>
      </el-carousel-item>
      <el-carousel-item>
        <div class="mapImageItem">
          <img :src="require('@/assets/images/yst.jpg')" alt="" />
          <div>栅格深色</div>
        </div>
      </el-carousel-item>
      <el-carousel-item>
        <div class="mapImageItem">
          <img :src="require('@/assets/images/shy.png')" alt="" />
          <div>三合一</div>
        </div>
      </el-carousel-item>
    </el-carousel> -->
    <!-- 地图缩放 -->
    <div class="zoomTargetBox">
      <el-input-number :min="7" :max="18" v-model="zoomTarget" :step="1" step-strictly @change="handleZoom">
      </el-input-number>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, defineProps, nextTick } from "vue";
import { MapUtil } from "./mapUtil";
import emitter from "@/utils/eventBus.js";
import { getItem } from "@/utils/storage";
const conditionRoute = ref(true); //路况
const mMap = ref(null); //地图对象
const mapUtil = ref(null); //地图工具对象
const zoomTarget = ref(6);

const props = defineProps({
  mapid: {
    type: String,
    default: "mapDiv"
  },
  //是否显示可以切换地图底图
  isShow: {
    type: Boolean,
    default: false
  },
  //是否显示实时路况
  isShowMvt: {
    type: Boolean,
    default: false
  },
  //是否显示地图层级
  isShowZoom: {
    type: Boolean,
    default: false
  },
  //是否显示绘制控件
  isShowDraw: {
    type: Boolean,
    default: false
  }
});
try {
  const userInfo = getItem("deptId")[0].deptCode;
} catch (error) {}
let map;
let mapLayer;
let mapLayer1;
onMounted(() => {
  emitter.on("followUp", (res) => {
    let box = document.getElementsByClassName("changeMap_box");
    if (!box) return;
    box[0].style.right = !res ? "4px" : "398px";
    box[0].style.transition = "0.5s";
  });

  map = new EliMap({
    id: props.mapid,
    crs: "EPSG:3857",
    style: {
      glyphs: "./fonts/{fontstack}/{range}.pbf",
      center: [94.36,29.65],
      zoom: 10
    },
    transformRequest: (url) => {
      if (url.indexOf("TileMatrix=") != -1) {
        const arr = url.split("TileMatrix=");
        const arr1 = arr[1].split("&");
        const nurl = `${arr[0]}&TileMatrix=${Number(arr1[0])}&${arr1[1]}&${arr1[2]}`;

      }
    }
  });

  window.map = map;
  map.mapboxGLMap.on("load", () => {
     map.addGaudLayer({
      url: 'http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
    })
    zoomTarget.value = map.mapboxGLMap.getZoom();
  });
  mapUtil.value = new MapUtil(map);

  mapUtil.value.Drawplot(); //初始化加载绘制工具

  // 设置地图中心点及图层
  emitter.on("setMapCenter", (res) => {
    mapUtil.value.setMapCenter(res.location, res.zoomLevel);
  });

  emitter.on("removePlot", (flag) => {
    mapUtil.value.removePlot(flag);
  });
  emitter.on("removeAll", (flag) => {
    mapUtil.value.removeAll(flag);
  });
  // 撒点
  emitter.on("addPointArea", (obj) => {
    console.log(obj);

    mapUtil.value.makerSki(obj);
  });
  // 鼠标滑过提示文字的点位
  emitter.on("showPoint", (obj) => {
    mapUtil.value.showPoint(obj);
  });

  // 清除覆盖物
  emitter.on("deletePointArea", (res) => {
    mapUtil.value.removeElement(res);
  });
  // 清除某个覆盖物的单个
  emitter.on("deletePointAreaOne", (obj) => {
    mapUtil.value.removeElementOne(obj.flag, obj.id);
  });

  // 清除某个覆盖物的单个
  emitter.on("showSquire", (obj) => {
    mapUtil.value.zdySquire(obj);
  });

  // 绘制图形 - 回显区域
  emitter.on("drawShape", (res) => {
    mapUtil.value.plot(res, resFun);
  });
  emitter.on("removeEara", (flag) => {
    mapUtil.value.removeEara(flag);
  });
  // 回显图形
  emitter.on("echoPlane", (res) => {
    mapUtil.value.echoPlane(res);
  });
  //移除绘制区域
  emitter.on("removeEara", (flag) => {
    mapUtil.value.removeEara(flag);
  });
  // 回显线
  emitter.on("echoLine", (res) => {
    mapUtil.value.createLine(res);
  });
  //创建边界面（geojson）
  emitter.on("setBoundarys", (res) => {
    mapUtil.value.createBoundarys(res);
  });
  // 移除边界
  emitter.on("removeBj", (res) => {
    mapUtil.value.removeBj(res);
  });

  // 轨迹回放
  emitter.on("drawLineAnimation", (res) => {
    mapUtil.value.displayLineAnimation(res);
  });

  // 聚合撒点
  emitter.on("addPoint", (obj) => {
    mapUtil.value.aggregateScatteringPoint(obj);
  });

  // 热力图显示
  emitter.on("thermodynamicChart", (res) => {
    mapUtil.value.showHeatDrawing(res);
  });

  // 扩散圆
  emitter.on("diffusionCircle", (res) => {
    mapUtil.value.diffusionCircle(res);
  });

  // 清除全部覆盖物
  emitter.on("removeElementAll", () => {
    mapUtil.value.removeElementAll();
  });

  // 展示盘曲
  emitter.on("showGapText", (obj) => {
    mapUtil.value.gapText(obj);
  });

  // 获取当前地图中心点
  emitter.on("getCurrentCenter", (res) => {
    let centerPoint = map.mapboxGLMap.getCenter();
    let coords = [centerPoint.lng, centerPoint.lat];
    emitter.emit("getcentercoord", coords);
  });
});
//切换地图底图
const onMapImageChange = (val) => {
  //清除已经存在胡地图图层
  if (map.mapboxGLMap.getLayer("SGQS_ID"))
    map.mapboxGLMap.removeLayer("SGQS_ID");
  if (map.mapboxGLMap.getLayer("YX_ID")) map.mapboxGLMap.removeLayer("YX_ID");
  if (map.mapboxGLMap.getLayer("SGSG_ID"))
    map.mapboxGLMap.removeLayer("SGSG_ID");
  if (map.mapboxGLMap.getLayer("TDT_TITLE_ID"))
    map.mapboxGLMap.removeLayer("TDT_TITLE_ID");
  if (map.mapboxGLMap.getLayer("TDT_ROAD_ID"))
    map.mapboxGLMap.removeLayer("TDT_ROAD_ID");
  if (map.mapboxGLMap.getLayer("TDT_POI_ID"))
    map.mapboxGLMap.removeLayer("TDT_POI_ID");
  //设置图层
  switch (val) {
    case 0:
      mapSetLayer("SGQS_ID", "SGQS");
      break;
    case 1:
      mapSetLayer("YX_ID", "YX");
      break;
    case 2:
      mapSetLayer("SGSG_ID", "SGSG");
      break;
    case 3:
      mapSetLayer("TDT_TITLE_ID", "TDT_TITLE_SOURCES");
      mapSetLayer("TDT_ROAD_ID", "TDT_ROAD_SOURCES");
      mapSetLayer("TDT_POI_ID", "TDT_POI_SOURCES");
      break;
  }
  if (map.mapboxGLMap.getLayer("realTimeTrafficlevelOne"))
    map.mapboxGLMap.moveLayer("realTimeTrafficlevelOne");
  if (map.mapboxGLMap.getLayer("map_id")) map.mapboxGLMap.moveLayer("map_id");
  if (map.mapboxGLMap.getLayer("map_ids")) map.mapboxGLMap.moveLayer("map_ids");
};

//设置图层函数
const mapSetLayer = (id, source) => {
  map.mapboxGLMap.addLayer({ id, type: "raster", source });
};

//获取地图绘制的数据
const resFun = (coord, type, flag, data) => {
  emitter.emit("coordString", {
    coord: coord,
    type: type,
    flag: flag,
    data: data
  });
};

// 地图层级
const handleZoom = (val) => {
  map.mapboxGLMap.setZoom(val);
};

// 是否打开或者关闭路况
const handleSwitch = (val) => {
  if (val) {
    // 打开
  } else {
    // 关闭
  }
};

onUnmounted(() => {
  emitter.off("removePlot");
  emitter.off("setMapCenter");
  emitter.off("addPointArea");
  emitter.off("showPoint");
  emitter.off("deletePointArea");
  emitter.off("deletePointAreaOne");
  emitter.off("drawShape");
  emitter.off("echoPlane");
  emitter.off("removeEara");
  emitter.off("echoLine");
  emitter.off("addPoint");
  emitter.off("thermodynamicChart");
  emitter.off("drawLineAnimation");
  emitter.off("aggregateScatteringPoint");
  emitter.off("hotmap");
  emitter.off("setBoundarys");
  emitter.off("diffusionCircle");
  emitter.off("SsCircle");
  emitter.off("ClearssCircle");
  emitter.off("removeElementAll");
});
</script>

<style lang="scss" scoped>
.map {
  width: 100%;
  height: 100%;
  background-color: aliceblue;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 1;
}

.changeMap_box {
  position: absolute;
  right: 398px;
  bottom: 4px;
  z-index: 9;
  .mapImageItem {
    border: 1px solid #08aae8;
    background: rgb(9, 26, 70);
    & > img {
      width: 100%;
      height: 50px;
    }
    & > div {
      text-align: center;
      position: relative;
      top: -3px;
    }
  }
  .zoomTargetBox {
    margin-top: 10px;
    margin-left: 23px;
  }
  ::v-deep .el-input-number__decrease,
  ::v-deep .el-input-number__increase {
    background: #133362;
    color: #fff;
    border: none;
  }
  ::v-deep .el-input__inner {
    background: #0c1641;
  }
}
</style>