（ArcGIS-03）ArcGis之光标图层停留及点击弹窗事件

光标停留

原理，整个MapView增加事件光标滑动处理函数，函数中：滑动进入自定义图层时，记录标记为Y，离开图层时，记录标记为N，当标记变化为Y时，添加计时器，。

this.view.on('pointer-move', this.pointerMoveHandler);//添加光标滑动处理函数
/**************************************
 * 光标滑动处理器
 **************************************/
pointerMoveHandler(evt) {
  //划过图标时，展示设备信息
  this.view.hitTest(evt).then(this.config);
},
/*********************************************************
 * 当光表进入设备图标时 初始化计时器，然后开始计时，当计时到一定事件后，展示信息
 * 当光标离开设备图标时 清除计时器
 *********************************************************/
config(response) {
  if (response.results.length) {
    this.judgeTimer = setTimeout(() => {
      console.log("-------光标一直在图标上,展示设备详细信息------")
      this.$refs.deviceInfo.view(response.results[0].graphic.attributes);
      this.judgeTimer = null;
      this.polling = null;
      clearTimeout(this.judgeTimer);
      clearInterval(this.polling);
    }, 1000);
  } else {
    this.judgeTimer = null;
    this.polling = null;
    clearTimeout(this.judgeTimer);
    clearInterval(this.polling);
  }
},

效果：

当光标滑动到图标上时，停留一秒后，页面打开一个弹窗展示我们的相关信息。

此处因为this.$refs.deviceInfo是一个普通弹窗页面，就不提供代码和内容，也不提供截图了，自己可以将this.$refs.deviceInfo.view(response.results[0].graphic.attributes);替换成alert("1111111111111")测试即可，

弹窗事件

let _point = new Point({
  type: "point",  // autocasts as new Point()
  longitude: 100,
  latitude: 20
})
icon = require('@/assets/image/video.jpg');
let _symbol = new PictureMarkerSymbol({angle: 20, url: icon, width: 20, height: 20})
let color = [4, 4, 4]//默认布防 颜色为绿色
if (item.defenceInfo.defenceType === "2") {//撤防 颜色修改为红色
  color = [255, 255, 255]
}
let textSymbol = {
  type: "text",
  borderLineColor: [48, 242, 120],
  borderLineSize: 1,
  backgroundColor: [0, 0, 0],
  haloColor: color,
  text: item.deviceName,
  xoffset: 1,
  yoffset: 12,
  //font: {size: 12,}
}

let innerHTML = '<table><tbody>' +
  '<tr><th>设备名称</th><td>' + item.deviceName + '</td><th>设备编码</th><td>' + item.deviceCode + '</td></tr>' +
  '<tr><th>设备类型</th><td>' + item.deviceTypeName + '</td><th>生产厂商</th><td>' + item.manufacturer + '</td></tr>' +
  '<tr><th>归属线路</th><td>' + item.belongLineName + '</td><th>所属区间</th><td>' +　item.belongAreaName + '</td></tr>' +
  '<tr><th>IP地址</th><td>' + item.ipAddr + '</td><th>端口</th><td>80</td></tr><tr><th>登录账号</th><td>admin</td>' +
  '<th>登录密码</th><td>admin</td></tr></tbody></table>'
let _popup = new PopupTemplate({
  title: '<p><strong>设备详情</strong></p>',
  content: innerHTML,
  width: 20,
})
let graphic = new Graphic({
  geometry: _point, symbol: _symbol,popupTemplate: _popup,
});
graphic.attributes = item;
this.deviceLayer.add(graphic);