🌈个人主页：前端青山
🔥系列专栏：Vue篇
🔖人终将被年少不可得之物困其一生
依旧青山,本期给大家带来Vue篇专栏内容:Vue-依赖注入-中央事件总线
目录
中央事件总线使用
依赖注入使用
总结
中央事件总线
依赖注入
结言
大家好，依旧青山，
最近呢也随着需求的变更调优，加载数字孪生地图的缓慢，要将原有vue3+Ts数据大屏子菜单整合到一个地图环境下（注：无需加载其余地图场景,同一地图环境下切换不同菜单），也就是主页面及子菜单调用一次地图环境即可，页面很好集合前嵌套，但是不同页面对地图的操作该如何呢？
那么我首先做的就是封装一个公共的地图调用方法，以组件形式引入所有子菜单实现跨组件通信！
以数字孪生地图为例
javascript">import { ElLoading } from 'element-plus'
import mapJson from '@/utils/tjbhJson';
import textArr from '@/utils/textJson';
import cloudRenderer from "51superapi"
import { ref, onMounted, onBeforeUnmount,reactive,watchEffect } from "vue"
// 引入前缀路径
//封装51地图函数
const app = new cloudRenderer("mapDiv");
export default function (){ let loadingInstance: any; // 在更宽泛的作用域定
const prefixUrl = import.meta.env.VITE_APP_BASE_API || '';
//配置51地图参数
const startRenderConfig = reactive({ "url": "http://192.168.1.20:8080", //[必须] 云渲染服务地址; 8889:固定端口 "order": "123456", //[必须] 渲染口令; 在云渲染客户端上获得 "resolution": [window.innerWidth > 1920? 4096 : window.innerWidth,window.innerHeight >1080? 1209 : window.innerHeight], //[可选] 设置渲染场景像素分辨率 "nodestyle": `width:${window.innerWidth > 1920? 4096 : window.innerWidth};height:${window.innerHeight >1080? 1209 : window.innerHeight};position:absolute;top:0px;left:0px;bottom:0px;right:0px;margin:auto;`, //[可选] 设置渲染场景容器DOM节点样式, 与设置渲染场景像素分辨率配对使用 "keyboard": "keyboardnofn", //[可选] 初始建盘事件, 开启wasd方向键 [选项: keyboard/keyboardnofn; 详见注册键盘事件] "setlogmode": true, //[可选] 开启/关闭SuperAPI调用日志, 默认false
})
// 设置初始分辨率
startRenderConfig.resolution = [ window.innerWidth > 1920 ? 4096 : window.innerWidth, window.innerHeight > 1080 ? 1209 : window.innerHeight,
];
//围绕中心旋转
let jsonData = { "time": 50, //相机旋转一周所需要的时间, (单位:秒) "direction": "stop" //clockwise:顺时针; anticlockwise:逆时针; stop:停止旋转
}
//添加区域轮廓
let jsondata2 = { "id": "range_id", "coord_type": 0, //坐标类型(0:经纬度坐标, 1:cad坐标) "cad_mapkey": "", //CAD基准点Key值, 项目中约定 "coord_z": 0, //高度(单位:米) "coord_z_type": 0, //坐标高度类型(0:相对3D世界表面；1:相对3D世界地面；2:相对3D世界海拔; 注:cad坐标无效) "type": "loop_line", //样式类型; 注① "color": "ffffff", //轮廓颜色(HEXA颜色值) "range_height": 60, //围栏高度(单位:米) "stroke_weight": 10, //底部轮廓线宽度(单位:米; 注: 区域中含有内环"inner_points"时无效) "fill_area": "none", //底部区域填充类型; 注② "geojson": mapJson, //geojson数据; 注③
}
//添加3d文字信息与区域轮廓
const pushAllCovering = () => { app.SuperAPI("Add3DText", textArr, (status: any) => { console.log(status); //成功、失败回调 }); //添加区域轮廓 app.SuperAPI('AddGeoRange', jsondata2).then((_back: any) => { })
}
//初始地图视角
const Camejsondata = { "coord_type": 0, //坐标类型(0:经纬度坐标, 1:cad坐标) "cad_mapkey": "", //CAD基准点Key值, 项目中约定 "coord_z": "2.06", 
