vue中marker被识别点击的过程场景分析

 更新时间:2023年11月17日 10:23:53   作者:akglobe  
这篇文章主要介绍了vue中marker被识别点击的过程场景分析,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

1.识别点击

1.1初始onEvent

在初始化场景的地方onEvent是与场景交互的,

我们这里就设置成当场景被点击的方法

ak_event调用当中的方法是需要提前引入的

1.2 onEvent.js

/**
 * 事件处理点击
 * 起点在init_test内
 */
import ak_click from "./ak_click.js";
import ak_api from "../../api/ak_api.js";
var  ak_event= {
	/**
	 * 控制
	 */
    handler: null,
	currentClickObject:null,
	/**
	 * 初始化
	 */
	init:function(e){
		if(e.eventtype=="LeftMouseButtonClick"){
			ak_event.LeftMouseButtonClick(e);
		}
	},
	type:1,
	LeftMouseButtonClick:function(e){
      window.modelId ="";
		if(e.Type=="marker"){
       window.modelId = e.Id
			 // config.modelId=e.Id;
			 console.log("我是marker  我的ID 是:::::"+e.Id);
			 ak_click.getClickObj();
			 return ;
		}else if(e.Type=="TileLayer"){
			//  该变量将作为 其他业务使用的参数 获取期内的objectId,坐标 范围等参数
			 ak_event.currentClickObject=e;
			 var ObjectID=e.Id;//  e.ObjectID;
			 console.log("我是TileLayer  信息  我即将被点击  ");
			 console.log("dddddddddddddddddddddddd");
			   __g.tileLayer.stopHighlightActor();
			 if(ObjectID){
                ak_click.getClickObj(e.Id);
			}else{
				// 如果没有Objid 进行处理
			}
		}else if(e.Type=="Custom_Tag"){
			//  该变量将作为 其他业务使用的参数 获取期内的objectId,坐标 范围等参数
			ak_event.currentClickObject=e;
			var ObjectID=e.Id;//  e.ObjectID;
			var ss = ObjectID.indexOf("hjs");
			if(ObjectID.indexOf("hjs")!=-1){
				console.log("Custom_Tag:环境水:"+ObjectID);
			}else if(ObjectID.indexOf("cktxp")!=-1){
				console.log("Custom_Tag:窗口:"+ObjectID);
			}
		}
	},
}
export default ak_event

我们写的js中的方法想要其他地方能引用,需要在最下面,写

export default ak_event   每个js都是如此,ak_event是需要和js名统一和var 的变量名一致

这里判断的是识别是点击的marker还是TileLayer

if(e.Type=="marker"){
       window.modelId = e.Id
             // config.modelId=e.Id;
             console.log("我是marker  我的ID 是:::::"+e.Id);
             ak_click.getClickObj();
             return ;
 }else if(e.Type=="TileLayer"){

把id设置成全局变量供其他方法可使用

 window.modelId = e.Id

1.3 判断是那个marker被点击

判断那个marker被点击是根据设置marker的时候id

在ak_event里面 判断如果是marker被点击,会进入到ak_click方法中,然后根据写好的id前缀来判断是那个marker被点击,点击后要执行的方法,

 ak_click代码

/**
 * 点击事件的处理
 */
import ak_even from "./ak_event.js";
import ak_spjk from "../../cloud/ak_business_geodb/ak_spjk.js";
var  ak_click={
	obj1:null,
	getClickObj:function(){
     var id=modelId;
     var e=id;
		 if(id.indexOf("MPH001")>0){
		     ak_mpjz.Showimagegs();
			 return ;
		 }
		// 高亮选中 对象
	  //	__g.tileLayer.highlightActor(config.currentTileLayerId, e);
		if(e.indexOf("bgsb")>0){ //办公设备
					// 展示办公电脑的 监控情况  正常异常对比
					if(e.indexOf("bgsb_dn")>0){
						ak_bangong.getBgWindowsSbTj(7);
						//展示办公设备打印机的 监控情况 正常-异常对比
					}else if(e.indexOf("bgsb_dyj")>0){
						ak_bangong.getBgWindowsSbTj(7);
						//展示办公设备大型打印机的 监控情况 正常-异常对比
					}
			}
			 //视频监控
			else if(id.indexOf("spjk")>0){
				if(id.indexOf("spjk_ptsxt")>0){
						ak_spjk.getIpByMid();
				}
			}else if(e.indexOf("yy")>0){   //预约
				if(e.indexOf("yy_qhj")>0){
					// 取号机的 性能监测数据
					ak_bangong.getZwAndroidSbTj(7);
				}else if(e.indexOf("yy_pjq")>0){
					//评价器的 性能监测数据
					ak_bangong.getZwAndroidSbTj(7);
				}else if(e.indexOf("yy_jhq")>0){
					//叫号器的 性能监测数据
					ak_bangong.getZwAndroidSbTj(7);
				}else if(e.indexOf("yy_jhp")>0){
					//叫号屏的 性能监测数据
					// ak_bangong.getZwAndroidSbTj();
				}else if(e.indexOf("yy_zzj")>0){
					//自助机的 性能监测数据
					ak_zichan.getSbZzjInfo();
				}else if(e.indexOf("yy_cktxp")>0){
					//窗口条形屏的 性能监测数据
					ak_yuyue.getckModel();
				}
			}else if(e.indexOf("xxfb")>0){ //信息发布
				if(e.indexOf("xxfb_dp")>0){
					//  大屏幕 展示轮播 视频
					ak_message.getXxfbsplb();
				}else if(e.indexOf("xxfb_txp")>0){
					//  条形屏幕 展示轮播 视频
					ak_message.getXxfbsplb();
				}else if(e.indexOf("xxfb_zd")>0){
					//  终端 展示轮播 图片
					ak_message.getXxfbtplb();
				}else if(e.indexOf("xxfb_hxp")>0){
					//  环形屏 展示轮播 视频
					ak_message.getXxfbsplb();
				}
			}else if(e.indexOf("cd")>0){ //场地
				if(e.indexOf("cd_hys")>0){
					//  场地 会议室
					ak_field.gethysModel();
				}else if(e.indexOf("cd_mj")>0){
					// 场地门禁
					ak_field.gethysModel();
				}
			}
	}
}
export default ak_click;

ak_spjk.js

var ak_spjk={
  getIpByMid:function(){
    console.log("啦啦啦啦+++++视频监控了"+modelId)
    console.log(modelId)
  }
}
export default ak_spjk;

到此这篇关于vue中marker被识别点击的过程场景分析的文章就介绍到这了,更多相关vue marker点击内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue项目配置eslint保存自动格式化问题

    vue项目配置eslint保存自动格式化问题

    这篇文章主要介绍了vue项目配置eslint保存自动格式化问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue3 自定义指令控制按钮权限的操作代码

    vue3 自定义指令控制按钮权限的操作代码

    这篇文章主要介绍了vue3 自定义指令控制按钮权限,为了提高用户体验,当该按钮无权使用时,使用el-tooltip功能进行提醒,结合实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-10-10
  • Vue插件从封装到发布的完整步骤记录

    Vue插件从封装到发布的完整步骤记录

    这篇文章主要给大家介绍了关于Vue插件从封装到发布的完整步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-02-02
  • vue element el-select下拉滚动加载的方法

    vue element el-select下拉滚动加载的方法

    很多朋友都遇到这样一个问题在使用vue+element的el-select下拉框加载返回数据太多时,会造成卡顿,用户体验欠佳,这篇文章主要介绍了vue element el-select下拉滚动加载方法,需要的朋友可以参考下
    2022-11-11
  • 使用element-ui +Vue 解决 table 里包含表单验证的问题

    使用element-ui +Vue 解决 table 里包含表单验证的问题

    这篇文章主要介绍了使用element-ui +Vue 解决 table 里包含表单验证的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • 浅谈Vue灰度发布新功能的使用

    浅谈Vue灰度发布新功能的使用

    本文主要介绍了浅谈Vue灰度发布新功能的使用,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Vue+Openlayers实现实时坐标点展示

    Vue+Openlayers实现实时坐标点展示

    这篇文章主要为大家详细介绍了Vue+Openlayers实现实时坐标点展示,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • Vue+webpack+Element 兼容问题总结(小结)

    Vue+webpack+Element 兼容问题总结(小结)

    这篇文章主要介绍了Vue+webpack+Element 兼容问题总结(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • 移动端底部导航固定配合vue-router实现组件切换功能

    移动端底部导航固定配合vue-router实现组件切换功能

    经常遇到这样的需求,移动端中的导航并不是在顶部也不是在底部,而是在最底部且是固定的,当我们点击该导航项时会切换到对应的组件。这篇文章主要介绍了移动端底部导航固定配合vue-router实现组件切换功能,需要的朋友可以参考下
    2019-06-06
  • 关于eslint和prettier格式化冲突问题

    关于eslint和prettier格式化冲突问题

    这篇文章主要介绍了eslint和prettier格式化冲突问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-08-08

最新评论