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)
      }
    })
  });
});