1. 程式人生 > 其它 >勉強解決arcGIS API for JS 中,地圖設定scale屬性後,縮放地圖時地圖自動偏移的問題

勉強解決arcGIS API for JS 中,地圖設定scale屬性後,縮放地圖時地圖自動偏移的問題

場景描述:
專題圖使用scale或者setScale設定了一個比例尺,滑鼠滾輪下滑,比例尺縮小,地圖縮小。
當比例尺達到設定的scale值,地圖不再縮小,但是會自動偏移,隨機向四面八方偏移。
通俗點來講就是地圖在亂飄。

問題原因:
其實我也沒整明白,但經過幾次測試,發現是個那個scale屬性有關,無論是在地圖建立的時候寫scale屬性,還是在後面使用setScale的方法設定,都出現了亂飄這個問題。

解決辦法:
那就不要這個scale了唄,手動整一個。
大概邏輯:

監聽地圖的mouse-wheel事件
獲取當前比例尺
if(滑鼠上滑){
   啟用滑鼠滾輪縮放事件;
   }else if(滑鼠下滑){
if(當前比例尺>=目標比例尺){
   禁用滑鼠滾輪縮放事件
   }else{
   啟用滑鼠滾輪縮放事件
  }
}

用到的函式和事件介紹:

  1. mouse-wheel事件:map.on("mouse-wheel",function(event){};
    滑鼠上滑時,event.value = 1;下滑時為-1.

這裡最好還是在地圖上監聽事件,而不是在整個網頁,一是網頁可能還有其他內容需要用到滾輪;二是網頁的滑鼠滾輪事件,判斷上滑下滑這個,需要做不同瀏覽器的適配。

溫馨提示:監聽的是mouse-whell事件而不是地圖縮放事件哦,監聽地圖縮放事件的話,禁用縮放以後,就不能再把它放出來了。

  1. 獲取地圖當前比例尺
    var scale = map.getScale();

  2. 禁用下滑事件
    map.disableScrollWheelZoom();

  3. 啟用下滑事件
    map.enableScrollWheelZoom();

溫馨提示:禁用了下滑事件以後,一定要記得把下滑事件放出來哦!!!!

最後,解釋下為什麼說是勉強解決了這個問題,因為如果滑鼠滑得太快的話,可能地圖已經無限縮放成一個渺小的點了,程式還沒有執行到禁用縮放事件那裡,影響也不是很嚴重,比亂飄還是要好些。

而且這個問題還不是很好解決,本來想用setTimeOut延時一下的,但是需要延時的是arcGIS的滑鼠滾輪縮放事件,不是我自己寫的那個事件,有、、複雜。