arcgis 4.x 入门学习三 (地图的事件触发机制)

1.4.x 和 3.x地图的触发机制的区别

　　arcgis 4.x 引入了webgl的结构，导致渲染方式发生了翻天覆地的变化，事件的机制已经和3.x完全不同了， 学习起来会有点难受

   1. 点击事件

//双击事件的话就用dblclick

view.on("click",(event)=>{
  //mapPoint是指你鼠标当前点击的位置
  console.log(event.mapPoint);
  // 因为。webgl 我也不知道怎么说 反正这种规范下一定要对平面坐标和世界坐标进行转换 
  view.hitTest(event).then((response)=>{
    // 转换完毕后 判断点击触发到的几何目标数组
    if(response.results[0]){
      // 如果存在 触发相应的事件
      var graphic = response.results[0].graphic;
      // 我自己的处理是判断graphic是否带有click函数，如果存在这个函数这执行，回调返回自己以及可能会用到的对象，这个click是我在创建graphic的时候自己添加的 不是属于arcgis规范， 这一块大家仁者见仁智者见智了
      graphic.click && graphic.click(graphic,event,response,view);
    }
  })
})

 

2. 摄像头变化

4.x采用的对象全是双向绑定的对象( vue直呼内行 ) 对任意对象下的属性都可以用watch进行监听变化 (这里指大部分....)

// 监听摄像头的变化
view.watch('camera',(camera) => {
     // 基本上 在4.x里面 所有的地图拖动 旋转 本质上都是摄像头的变化


});

3. 监听arcgis 4.x  mouseout mouseover事件 （鼠标移入 移出事件）

这个真的有点复杂 希望看得人没事  头晕了就休息一下

// 监听几何响应鼠标事件
var viewMouseover = [];
// 万恶的arcgis4.x 取消了mouseout mouseover的支持 只有这个了
view.on("pointer-move", (event)=>{
  // 传统异能 屏幕转世界
  view.hitTest(event).then(function(response) {
    for( var i = 0; i < viewMouseover.length; i++ ){
      var graphic = viewMouseover[i];
      if( response.results.map((e)=>{ return e.graphic }).indexOf(graphic) === -1 ){
        // 进入这里就是已经判断移出了
        if( graphic.cursor ) {
          document.body.style.cursor = "";
        }
        // 我还是监听当前移出的graphic是否有我定义的mouseout事件，如果没有这个属性也就不管他了
        graphic.mouseout && graphic.mouseout(graphic,event,response,view)
        viewMouseover.splice(i,1);
        i--;
      } 
    }
    response.results.map((e)=>{ return e.graphic }).forEach((graphic,i)=>{
      if( i === 0 && graphic.cursor ) {
        document.body.style.cursor = graphic.cursor;
      }
      if( viewMouseover.indexOf(graphic) === -1 ){
        // 这里就是判断已经移入的graphic
        viewMouseover.push(graphic);
        // 我的传统艺能， 就不解释了吧。。。
        graphic.mouseover && graphic.mouseover(graphic,event,response,view)
      }
    })
  });
});