<template> <!-- 规划引领 阶段三系统治理--> <div class="sheHuiNetThree"> <div class="content"> <div class="futureGc"></div> </div> </div> </template> <script> import { toRefs, onMounted, reactive, onBeforeUnmount } from "vue"; import bus from "@/utils/util"; import Popup from "./Popup.vue"; export default { name: "sheHuiNetThree", components: { Popup }, setup() { const allData = reactive({ checkedLegend: [ { isCheck: false, layername: "rainAndwu" }, { isCheck: false, layername: "qingyu" }, { isCheck: false, layername: "tuokuan" }, { isCheck: false, layername: "layer2" }, { isCheck: false, layername: "layer7" }, { isCheck: false, layername: "layer13" }, ], }) // 初始化图例数据 async function initLayer() { for (let i = 0; i < 14; i++) { mapbox._map.on("click", "layer" + i + "_layer", function (e) { e.preventDefault(); const features = mapbox._map.queryRenderedFeatures(e.point); // 判断是否点击当前点位 features.map(item => { if (item.layer.id == "layer" + i + "_layer") { // 拼接显示详情内容 bus.emit("pointToDetail", item); } }) }); mapbox.changeTypeOfmouse("layer" + i + "_layer")//切换鼠标样式 } bus.on("pointToDetail", param => { mapbox.markerPopup(param, mapbox.createPopup(Popup, param.properties)); }); } onMounted(() => { initLayer(); //设置初始化视角 mapbox._map.setPitch(60).setBearing(0) setTimeout(() => { mapbox.flyto([114.265596, 30.640028], 12.5, 0.8) }, 300) // 设置默认选中的图例图层 setTimeout(() => { bus.emit("showDefaultLegend", allData.checkedLegend); }) }); onBeforeUnmount(() => { //清空图例默认开启,true 代表关闭图层 bus.emit("showDefaultLegend", [ { isCheck: true, layername: "rainAndwu" }, { isCheck: true, layername: "qingyu" }, { isCheck: true, layername: "tuokuan" }, { isCheck: true, layername: "layer2" }, { isCheck: true, layername: "layer7" }, { isCheck: true, layername: "layer13" }, ]); //清除选中图层 //!!window.timeranhan && clearInterval(window.timeranhan); //!!window.timerwater && clearInterval(window.timerwater); !!window.timertuokuan && clearInterval(window.timertuokuan); !!window.timerspread && clearInterval(window.timerspread); //!!window.timerflow && clearInterval(window.timerflow); !!window.timerbushui && clearInterval(window.timerbushui); //清除弹窗 bus.off("pointToDetail"); if (!!mapbox._popup) { mapbox._popup.remove() } //恢复初始视角 mapbox._map.setPitch(60).setBearing(0) setTimeout(() => { mapbox.flyto([114.275596, 30.610028], 13.5, 0.8) }, 300) }) return { ...toRefs(allData), initLayer, }; }, }; </script> <style lang="less"> .sheHuiNetThree { .content { height: 735px; overflow: auto; margin: 20px 0px 50px 0px; padding-left: 10px; .futureGc { width: 406px; height: 995px; background: url("@/assets/newImgs/future.png") no-repeat center; background-size: 100% 100%; margin-bottom: 60px; } } } </style>