文章目錄
1. 什麼是地圖交互 interaction ？？？
地圖交互功能都是不可見的，如鼠標雙擊、滾輪滑動等，手機設備的手指縮放等。
地圖的交互功能包含很多，如地圖雙擊放大，鼠標滾輪縮放，矢量要素點選，地圖上繪製圖形等等。只要是涉及到與地圖的交互，就會涉及到 intercation 類，它定義了用戶與地圖進行交互的基本要素和事件。下面我們就來看看用戶與地圖都有那些交互，怎麼交互。
2. 簡述地圖交互 interaction
在之前的文章中有寫到一個地圖map，是必須存在的三個屬性 target ，view，layers。那麼地圖是不是還可以存在其他屬性呢？當然是有的，現在這篇就爲大家講解另外的一個屬性 interaction 地圖的交互功能。
可以看到官網的描述：最初添加到地圖的互動。如果未指定， module:ol/interaction~defaults則使用。
也就是說這個屬性不是必須 存在的，默認使用的是 interaction~defaults 內容，並且是已 Array 數組形式存在，也就是說可以像圖層一樣，已多個交互功能承載在地圖上。
3. interaction 介紹
在 OpenLayers 6 中，表達交互功能的基類是 interaction，它是一個虛基類，不負責實例化，交互功能都繼承該基類， OpenLayers 6 中可實例化的子類及其功能如下：
- doubleclickzoom ，雙擊放大交互功能；
- draganddrop ，以“拖文件到地圖中”的交互添加圖層；
- dragbox，拉框，用於劃定一個矩形範圍，常用於放大地圖；
- dragpan ，拖拽平移地圖；
- dragrotateandzoom，拖拽方式進行縮放和旋轉地圖；
- dragrotate ，拖拽方式旋轉地圖；
- dragzoom ，拖拽方式縮放地圖；
- draw，繪製地理要素功能；
- keyboardpan ，鍵盤方式平移地圖；
- keyboardzoom ，鍵盤方式縮放地圖；
- select，選擇要素功能；
- modify ，更改要素；
- mousewheelzoom ，鼠標滾輪縮放功能；
- pinchrotate，手指旋轉地圖，針對觸摸屏；
- pinchzoom ，手指進行縮放，針對觸摸屏；
- pointer ，鼠標的用戶自定義事件基類；
- snap，鼠標捕捉，當鼠標距離某個要素一定距離之內，自動吸附到要素。
interaction defaults ，規定了默認添加的交互功能；
4. interaction defaults - 默認添加的交互功能
https://openlayers.org/en/latest/apidoc/module-ol_interaction.html
該類規定了默認包含在地圖中的功能，他們都是繼承自 ol.interaction 類。 主要是最爲常用的功能，如縮放、平移和旋轉地圖等，具體功能有如下這些：
- altShiftDragRotate 是否需要Alt-Shift-拖動旋轉 （布爾值：默認爲true）
- doubleClickZoom 是否鼠標或手指雙擊縮放地圖（布爾值：默認爲true）。
- keyboard 是否需要鍵盤交互（布爾值：默認爲true）
- mouseWheelZoom 是否鼠標滾輪縮放地圖。布爾值 （默認爲true）
- shiftDragZoom 是否需要Shift拖動縮放（布爾值：默認爲true） 。
- dragPan 是否鼠標或手指拖拽平移地圖（布爾值：默認爲true）
- pinchRotate 是否兩個手指旋轉地圖，針對觸摸屏（布爾值：默認爲true）
- pinchZoom 是否兩個手指旋轉地圖，針對觸摸屏（布爾值：默認爲true）
- zoomDelta 使用鍵盤或雙擊縮放時的縮放級別增量。（數）
- zoomDuration 縮放動畫的持續時間（數：以毫秒爲單位）
- onFocusOnly 僅在地圖具有焦點時進行交互。這會影響MouseWheelZoom和的DragPan相互作用，並且在沒有瀏覽器焦點的地圖需要頁面滾動時很有用（布爾值：默認爲false）
可以看出，很多都兼容移動設備的觸摸屏，鍵盤，鼠標事件，這就是OpenLayers 3以後的改進，跨平臺改進。這些功能都是默認添加的，如果要更改默認的選項，需要在相應的選項設置爲 false。
栗子：如果想去掉默認的 DoubleClickZoom 功能，配置如下：
interactions: ol.interaction.defaults([
doubleClickZoom: false
]),
這樣就取消雙擊放大功能，去除其他的默認功能，是一樣的。
5. 栗子：dragrotateandzoom (shift + 鼠標拖拽進行縮放和旋轉地圖)
import {
defaults as defaultInteractions,
DragRotateAndZoom
} from "ol/interaction";
this.map = new Map({
target: target,
layers: tileLayer,
view: view,
interactions: defaultInteractions().extend([
new DragRotateAndZoom()
])
});
6. 寫在最後
地圖交互功能內容實在是太多了，包括 鍵盤事件，鼠標事件，拖拽，平移，縮放 等一些基本的交互動作，還有後面會寫到的 測距，測面，通過draw 繪製，選擇要素 select，modify，鋪捉吸附的 snap 和鼠標自定義事件 pointer 都構成了openlayers 更加強大的交互功能系統，提升更優的用戶體驗。
通過一系列的交互改變（新增，刪除，更新）數據實現動態交互。