<template> <div style="width: 100%;height: 100%;"> <div class="btnBox"> <div class="btnItem" @click="bbbbb">添加点位</div> <div class="btnItem" @click="ccccc">删除图层</div> <div class="btnItem" @click="ddddd">操作桩号</div> </div> <!-- <component :is="mapContainer" ref="MapContainerRef" @update:isGisCompleted="(data) => { this.isGisCompleted = data; }" /> --> <div class="BMapContainer"> <gisMap2d ref="gisMap2d" :mapZoom = "mapZoom" :mapCenter="mapCenter" radarSliderBottom="33%" radarSliderRight="14%" mapBoxHeight="100vh" @clickPointEvent="clickPointEvent" widgetBoxDisplay="none"></gisMap2d> </div> <div class="Home"> <section class="content"> <!-- 左侧 --> <div class="content-l"> <!-- 上 --> <FocusedMonitoring class="card-menu" style="height: 288px;" /> <!-- 下 --> <RoadAndEvents ref="RoadAndEventsRef" :isGisCompleted="isGisCompleted" :mapContainer="mapContainer" style="flex:1" class="card-menu" /> </div> <div class="content-m"> </div> <div class="home-icons" > <HomeFilter class="item" /> <HomeFrame class="item" /> <HomeVector class="item" v-hasPermi="['business:home:exportOperationalReport']" /> <HomeWord class="item" /> <HomeFrameControl class="item" v-hasPermi="['business:home:batchControl']" /> <HomeWeather class="item" /> <HomeWeatherLayer class="item" /> <HomeTraffic class="item" /> </div> <div class="content-r"> <ConditionStatistics class="right card-menu" style="height: 100%;" /> </div> </section> <footer class="footer card-menu"> <div class="footer-title"> <span>济菏高速缩略图</span> <i class="el-icon-s-fold" style="color: #2ad9fd; transform: rotate(-90deg)" @click.stop="handleShrink" /> </div> <div class="footer-content"> <Thumbnail ref="Thumbnail" /> </div> </footer> </div> </div> </template> <script> import FocusedMonitoring from "./components/FocusedMonitoring/index.vue"; import Thumbnail from "./components/Thumbnail/index.vue"; import ConditionStatistics from "./components/ConditionStatistics/index.vue"; import AMapContainer from "./components/AMapContainer/index.vue"; import HomeFilter from "./components/HomeFilter/index.vue"; import HomeFrame from "./components/HomeFrame/index.vue"; import HomeVector from "./components/HomeVector/index.vue"; import HomeWord from "./components/HomeWord/index.vue"; import HomeFrameControl from "./components/HomeFrameControl/index.vue"; import HomeVectorControl from "./components/HomeVectorControl/index.vue"; import HomeWeather from "./components/HomeWeather/index.vue"; import HomeWeatherLayer from "./components/HomeWeatherLayer/index.vue"; import HomeTraffic from "./components/HomeTraffic/index.vue"; import RoadAndEvents from "./components/RoadAndEvents/index.vue"; import Button from "@screen/components/Buttons/Button.vue"; import Vue from "vue"; import BMapContainer from "./components/BMapContainer/index.vue"; import { gisMap2d } from 'gis-map-universal' const lnglat = [117.16515148266497,35.2797674572588] import pointsObj_new from './assets/data' export default { name: "Home", components: { gisMap2d, FocusedMonitoring, ConditionStatistics, Thumbnail, RoadAndEvents, AMapContainer, BMapContainer, Button, HomeFilter, HomeFrame, HomeVector, HomeFrameControl, HomeVectorControl, HomeWord, HomeWeather, HomeWeatherLayer, HomeTraffic }, data() { return { selectedDevice: null, isGisCompleted: false, mapContainer:'BMapContainer', mapBoxHeight: '100vh', mapZoom: '7.5', // 默认值'7.5' String类型 mapCenter: lnglat, //默认值[118.75, 36.46] Array类型 }; }, provide() { return { // 2024-06-04更新地图========================================== getMap: () => { return this.$refs.gisMap2d //.getMapInstance(); }, setMapZoomAndCenter: (zoom,lnglat) => { this.$refs.gisMap2d.setMapZoomAndCenter(zoom,lnglat); }, activeDeviceTypes: Vue.observable([]), }; }, async mounted() { // this.$refs.gisMap2d.zoomInBylatlon( // lnglat,7.5 // ); // Vue.prototype.map2d = this.$refs.gisMap2d; Vue.prototype.mapIns = this.$refs.gisMap2d; this.isGisCompleted = true; this.$root.$on('refresh-gismap', this.refreshLayer); }, methods: { refreshLayer(layers){ console.log(layers,'更新图标') this.$refs.gisMap2d.addPointByArr( {pointList:[]}, // 点位数据数组(按以下规范组装) 'jhlayers', // 当前添加的数据 唯一标识(删除该图层时也会用到)//./事件专题/交通事故.svg true // 当前新加图层是否启用聚合效果 ); this.$refs.gisMap2d.removeLayerByName('jhlayers'); this.$refs.gisMap2d.addPointByArr( layers, "jhlayers", true ); }, debug(){ this.$refs.Thumbnail.debug() }, handleShrink(e) { const translateXElement = e.target.parentElement.parentElement; const result = (e.target.style.transform.match(/[-0-9]+/)?.[0] || -90) * -1; e.target.style.transform = `rotate(${result}deg)`; if ( translateXElement.style.transform !== `translateY(calc(100% - 36px))` ) { translateXElement.style.transform = `translateY(calc(100% - 36px))`; translateXElement.style.position = `absolute`; translateXElement.style.bottom = `0px`; } else { translateXElement.style.transform = `translateY(0)`; translateXElement.style.position = `relative`; } }, bbbbb() { this.$refs.gisMap2d.addPointByArr( // this.pointsObj, pointsObj_new, "jhlayers", true ); }, ccccc() { this.$refs.gisMap2d.removeLayerByName("jhlayers"); }, ddddd() { this.$refs.gisMap2d.pileIsShow("jhlayers", this.isShow); // this.$refs.gisMap2d.pileIsShow("customLayer222", this.isShow); this.isShow = !this.isShow; }, clickPointEvent(obj) { if(obj && obj.otherInfo){ obj.otherInfo.config.markerClick?.(obj.otherInfo.extData, obj.otherInfo.config?.item); } // console.log(obj); //此处可以拿到点位的所有字段信息 }, setMapZoomAndCenter(zoom,lnglat){ this.$refs.gisMap2d.zoomInBylatlon(lnglat,zoom) }, showRoadConditions(visible){ if(visible){ // TODO 展示云图 } else { // TODO 隐藏云图 } } }, }; </script> <style lang="scss" scoped> .BMapContainer { position: absolute; z-index: 0; width: 100%; height: 100%; transform-origin: left top; background-color: #103253 !important; transition: all 0.15s linear; ::v-deep { .el-loading-mask { user-select: none; .el-loading-spinner { display: flex; align-items: center; justify-content: center; flex-direction: column; .el-loading-text, .el-icon-place { color: #59d1fe; font-size: 15px; } .el-icon-place { font-size: 18px; animation: 1.2s infinite jump; } } } } } .Home { width: 100%; height: 100%; // height: 100%; // z-index: 6; display: flex; flex-direction: column; justify-content: space-between; // gap: 30px; padding: 19px 31px 0 25px; // justify-content: center; .card-menu { transition: all 0.24s linear; } .content { width: 100%; display: flex; justify-content: space-between; height: 62vh; .content-l { width: 480px; overflow: hidden; display: flex; flex-direction: column; overflow: hidden; height: 100%; gap: 10px; } .content-m { display: flex; gap: 9px; flex: 1; } .home-icons { display: flex; gap: 0px; flex-direction: column; z-index: 0; margin-right: 10px; .item { padding-top: 15px; } } .content-r { width: 480px; overflow: hidden; display: flex; flex-direction: column; align-items: flex-end; overflow: hidden; height: 100%; } } .footer { width: 100%; // margin: auto; pointer-events: none; overflow: hidden; height: min-content; will-change: height; bottom: 0; z-index: 0; >div { pointer-events: all; } // position: fixed; // bottom: 0; .footer-title { width: 164px; height: 36px; border-radius: 11px 11px 0px 0px; opacity: 1; border: 1px solid #2ad9fd; display: flex; justify-content: center; align-items: center; overflow: hidden; display: flex; align-items: center; gap: 15px; span { font-size: 16px; font-family: PingFang SC, PingFang SC; font-weight: 500; color: #2ad9fd; } i { transition: all 0.24s linear; cursor: pointer; } // img { // display: inline-block; // margin-left: 11px; // width: 16px; // height: 13px; // cursor: pointer; // } } .footer-content { width: 100%; height: 200px; background: #005570; border-top: 1px solid #003354; } } } .btnBox { display: flex; align-items: center; justify-content: space-between; width: 44%; position: absolute; z-index: 999; top: 5px; left: 5px; } .btnItem { border: 1px #fff solid; padding: 3px; border-radius: 3px; color: #fff; background: linear-gradient(to right, #237d9a, #074055); cursor: pointer; } </style>