arcgis for js图层graphic的鼠标悬浮事件
//仅供参考(与layui前端框架配合使用)
$(function(){
createModelAllLayer();
wbgraphicsOnMouseOut();
});
/**
* 用于轨迹鼠标悬浮事件
*/
var wbnpTtNum,wbnpTtArray;
function wbgraphicsOnMouseOut(){
var modelAllLayer=map.getLayer("modelAllLayer");
var wbnplayerConnect=dojo.connect(modelAllLayer, "onMouseMove", function(evt) {
var g = evt.graphic;
if(wbnpTtNum==g.attributes.id){
if(tipsClose<=0){
//轨迹鼠标悬浮展示层【layui】
showTrajectoryTips(wbnpTtArray,evt.target);
}
return true;
}
var id=g.attributes.id;
//遍历图层获取需要展示的数组数据
wbnpTtArray=querywbnpDates(id);
wbnpTtNum=id;//将序号传给wbnpTtNum
//轨迹鼠标悬浮展示层【layui】
showTrajectoryTips(wbnpTtArray,evt.target);
});
//dojo.disconnect(wbnplayerConnect);//移除图层的监听事件
}
/**
* 轨迹鼠标悬浮之获取graphic信息(包含重复叠加的graphic)
*/
function querywbnpDates(id){
var graphics=modelAllLayer.graphics;
var array=new Array(),a=0;
for(var i=0;i<graphics.length;i++){
var gid=graphics[i].attributes.id;
if(id==gid){
array[a]={
"name":graphics[i].attributes.wbname
};
a++;
}
}
return array;
}
var tipsClose;
/**
* 轨迹鼠标悬浮之展示层【layui】
*/
function showTrajectoryTips(array,target){
var str="<div>";
for(var a=0;a<array.length;a++){
str+="<p>"+array[a].name+"</p>";
}
str+="</div>";
tipsClose=layer.tips(str, target, {
tips: [1, '#3595CC'],
area: ['350px', 'auto'],
time: 0//tips一直存在
});
}
/**
* 创建图层和鼠标移出事件
*/
function createModelAllLayer(){
//创建一键搜索图层
var layerid="modelAllLayer";
modelAllLayer = new esri.layers.GraphicsLayer();
modelAllLayer.id=layerid;
map.addLayer(modelAllLayer);
//鼠标移出事件，用于鼠标悬浮tips展示
dojo.connect(modelAllLayer, "onMouseOut", function(evt) {
if(tipsClose && tipsClose>0){
layer.close(tipsClose);
tipsClose=0;
}
});
}
arcgis for js图层graphic的鼠标悬浮事件相关推荐
- JavaScript的DOM之鼠标悬浮事件
JS的DOM之鼠标悬浮事件 鼠标悬浮事件之onmouseover()和onmouseout()事件 这里用大白话介绍一下最简单的原理: 就是当鼠标在这块区域时候会触发相应事件,将鼠标挪开则恢复原先事件 ...
- 鼠标悬浮事件 -jQuery hover（）方法（layer.js）（layer.tips）
鼠标悬浮事件 -jQuery hover()方法代码: <!DOCTYPE html> <html lang="en"> <head><m ...
- jQuery鼠标悬浮事件
今天学习了鼠标悬浮事件,跟小编来看看吧~ 先来看一下效果: 原本样式: 鼠标悬浮样式: 鼠标离开样式: 源码: <!DOCTYPE html> <html lang="en ...
- html 鼠标放在div悬停事件,用js给div添加鼠标悬停事件
新任务:给表格上的某列添加鼠标悬浮事件 但是表格是由omGrid生成的,无法修改 所以只能先获取,再添加事件 先用firebug看清表格结构:\ 是div class="innerCo1 & ...
- 鼠标悬浮事件的hover的使用
鼠标悬浮事件hover的使用 用法1: 表示当鼠标悬浮在a元素上时,a元素的背景颜色变成粉色 .a:hover{background-color: pink;} 用法2: 用a来控制其他元素 用a来控 ...
- echart移上去显示内容_echarts 使用formatter 修改鼠标悬浮事件信息操作
formatter 一般用于格式化鼠标悬浮时间的信息,如果你的数据是JSON数组格式,那么不必和我这样一一判断扇形图的 ticket 值,使用 formatter 的 callback 时间即可自行对 ...
- php $delaytime /= $delaytime,定时器之延时触发鼠标悬浮事件
定时器之延时触发鼠标悬浮事件 }.hoverDiv{width:100px;height:100px;margin:50px;background:#ECAD9E;border:3px solid # ...
- chrome调试鼠标悬浮事件(不是CSS:hover)
文章目录 文章参考 问题描述 解决办法 鼠标右键弹出菜单 ctrl+shift+c 文章参考 chrome浏览器如何审查鼠标移入事件? Chrome调试鼠标悬停后出现的元素 chrome模拟鼠标悬停调 ...
- 使用transform:scale之后导致页面鼠标悬浮事件消失
兼容pad设置transform缩放导致高德地图页面鼠标悬浮事件消失
最新文章
- 【问题收录】Eclipse the import java.awt cannot be resolve 问题解决
- 数据恢复knowledge
- 支付宝支付 订单参数异常，请重新下单后再发起付款
- IBM又双叒叕要分拆了，IT基础设施部门将剥离，未来专注云计算和AI
- 大数据查询——HBase读写设计与实践--转
- PHP错误处理 - debug_backtrace()的用法
- day12_oracle hint——SQL优化过程中常见Oracle中HINT的30个用法
- vuex构建vue项目_如何使用Vue.js，Vuex，Vuetify和Firebase构建单页应用程序
- 企业微信H5_网页jssdk调用 agentconfig选人选照片等案例演示
- 多位诺贝尔奖获得者推荐的精品力作：《大数据时代的调查师》
- C#LeetCode刷题之#226-翻转二叉树（Invert Binary Tree）
- 用于计算成像的超材料
- 问题：虚拟机安装Ubuntu时，显示PXE-MOF:Exiting Intel PXE ROM.Operating Systen not found
- java web问卷调查设计方案_Java web 调查问卷
- 蚁群算法原理及matlab代码实现
- 嵌入式单片机面试笔记
- Windows驱动开发（一）WDM/WDF驱动概述
- vue-pdf插件不翻页预览
- 何文江先生出任创意信息集团总经理
- Electron 自定义托盘实战——桌面计算器