vue中marker被識別點擊的過程場景分析
1.識別點擊
1.1初始o(jì)nEvent
在初始化場景的地方onEvent是與場景交互的,
我們這里就設(shè)置成當(dāng)場景被點擊的方法

ak_event調(diào)用當(dāng)中的方法是需要提前引入的

1.2 onEvent.js
/**
* 事件處理點擊
* 起點在init_test內(nèi)
*/
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"){
// 該變量將作為 其他業(yè)務(wù)使用的參數(shù) 獲取期內(nèi)的objectId,坐標(biāo) 范圍等參數(shù)
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"){
// 該變量將作為 其他業(yè)務(wù)使用的參數(shù) 獲取期內(nèi)的objectId,坐標(biāo) 范圍等參數(shù)
ak_event.currentClickObject=e;
var ObjectID=e.Id;// e.ObjectID;
var ss = ObjectID.indexOf("hjs");
if(ObjectID.indexOf("hjs")!=-1){
console.log("Custom_Tag:環(huán)境水:"+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名統(tǒng)一和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設(shè)置成全局變量供其他方法可使用
window.modelId = e.Id
1.3 判斷是那個marker被點擊
判斷那個marker被點擊是根據(jù)設(shè)置marker的時候id

在ak_event里面 判斷如果是marker被點擊,會進入到ak_click方法中,然后根據(jù)寫好的id前綴來判斷是那個marker被點擊,點擊后要執(zhí)行的方法,



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){ //辦公設(shè)備
// 展示辦公電腦的 監(jiān)控情況 正常異常對比
if(e.indexOf("bgsb_dn")>0){
ak_bangong.getBgWindowsSbTj(7);
//展示辦公設(shè)備打印機的 監(jiān)控情況 正常-異常對比
}else if(e.indexOf("bgsb_dyj")>0){
ak_bangong.getBgWindowsSbTj(7);
//展示辦公設(shè)備大型打印機的 監(jiān)控情況 正常-異常對比
}
}
//視頻監(jiān)控
else if(id.indexOf("spjk")>0){
if(id.indexOf("spjk_ptsxt")>0){
ak_spjk.getIpByMid();
}
}else if(e.indexOf("yy")>0){ //預(yù)約
if(e.indexOf("yy_qhj")>0){
// 取號機的 性能監(jiān)測數(shù)據(jù)
ak_bangong.getZwAndroidSbTj(7);
}else if(e.indexOf("yy_pjq")>0){
//評價器的 性能監(jiān)測數(shù)據(jù)
ak_bangong.getZwAndroidSbTj(7);
}else if(e.indexOf("yy_jhq")>0){
//叫號器的 性能監(jiān)測數(shù)據(jù)
ak_bangong.getZwAndroidSbTj(7);
}else if(e.indexOf("yy_jhp")>0){
//叫號屏的 性能監(jiān)測數(shù)據(jù)
// ak_bangong.getZwAndroidSbTj();
}else if(e.indexOf("yy_zzj")>0){
//自助機的 性能監(jiān)測數(shù)據(jù)
ak_zichan.getSbZzjInfo();
}else if(e.indexOf("yy_cktxp")>0){
//窗口條形屏的 性能監(jiān)測數(shù)據(jù)
ak_yuyue.getckModel();
}
}else if(e.indexOf("xxfb")>0){ //信息發(fā)布
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){
// 環(huán)形屏 展示輪播 視頻
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("啦啦啦啦+++++視頻監(jiān)控了"+modelId)
console.log(modelId)
}
}
export default ak_spjk;到此這篇關(guān)于vue中marker被識別點擊的過程場景分析的文章就介紹到這了,更多相關(guān)vue marker點擊內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue2中組件互相調(diào)用實例methods中的方法實現(xiàn)詳解
vue在同一個組件內(nèi),方法之間經(jīng)常需要互相調(diào)用,下面這篇文章主要給大家介紹了關(guān)于vue2中組件互相調(diào)用實例methods中的方法實現(xiàn)的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
Vue使用.sync 實現(xiàn)父子組件的雙向綁定數(shù)據(jù)問題
這篇文章主要介紹了Vue使用.sync 實現(xiàn)父子組件的雙向綁定數(shù)據(jù),需要的朋友可以參考下2019-04-04
vuex 實現(xiàn)getter值賦值給vue組件里的data示例
今天小編就為大家分享一篇vuex 實現(xiàn)getter值賦值給vue組件里的data示例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
解決element-ui的el-dialog組件中調(diào)用ref無效的問題
這篇文章主要介紹了解決element-ui的el-dialog組件中調(diào)用ref無效的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
vue中的el-tree @node-click傳自定義參數(shù)
這篇文章主要介紹了vue中的el-tree @node-click傳自定義參數(shù)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08
關(guān)于vue v-for 循環(huán)問題(一行顯示四個,每一行的最右邊那個計算屬性)
這篇文章主要介紹了關(guān)于vue v-for 循環(huán)問題(一行顯示四個,每一行的最右邊那個計算屬性),需要的朋友可以參考下2018-09-09
Vue3通過hooks方式封裝節(jié)流和防抖的代碼詳解
vue3 中的 hooks 就是函數(shù)的一種寫法,就是將文件的一些單獨功能的js代碼進行抽離出來,放到單獨的js文件中,或者說是一些可以復(fù)用的公共方法/功能,本文給大家介紹了Vue3通過hooks方式封裝節(jié)流和防抖,需要的朋友可以參考下2024-10-10

