interaction 是什么

地圖的交互功能包含很多，如地圖雙擊放大，鼠標(biāo)滾輪縮放，矢量要素點(diǎn)選，地圖上繪制圖形等等。只要是涉及到與地圖的交互，就會涉及到 intercation 類，它定義了用戶與地圖進(jìn)行交互的基本要素和事件。

interaction 簡介

在 OpenLayers 6 中，表達(dá)交互功能的基類是 interaction，它是一個虛基類，不負(fù)責(zé)實(shí)例化，交互功能都繼承該基類， OpenLayers 6 中可實(shí)例化的子類及其功能如下：

• doubleclickzoom ，雙擊放大交互功能；
• draganddrop ，以“拖文件到地圖中”的交互添加圖層；
• dragbox，拉框，用于劃定一個矩形范圍，常用于放大地圖；
• dragpan ，拖拽平移地圖；
• dragrotateandzoom，拖拽方式進(jìn)行縮放和旋轉(zhuǎn)地圖；
• dragrotate ，拖拽方式旋轉(zhuǎn)地圖；
• dragzoom ，拖拽方式縮放地圖；
• draw，繪制地理要素功能；
• keyboardpan ，鍵盤方式平移地圖；
• keyboardzoom ，鍵盤方式縮放地圖；
• select，選擇要素功能；
• modify ，更改要素；
• mousewheelzoom ，鼠標(biāo)滾輪縮放功能；
• pinchrotate，手指旋轉(zhuǎn)地圖，針對觸摸屏；
• pinchzoom ，手指進(jìn)行縮放，針對觸摸屏；
• pointer ，鼠標(biāo)的用戶自定義事件基類；
• snap，鼠標(biāo)捕捉，當(dāng)鼠標(biāo)距離某個要素一定距離之內(nèi)，自動吸附到要素。
• interaction defaults ，規(guī)定了默認(rèn)添加的交互功能；

interaction defaults- 默認(rèn)添加的功能

該類規(guī)定了默認(rèn)包含在地圖中的功能，他們都是繼承自 ol.interaction 類。 主要是最為常用的功能，如縮放、平移和旋轉(zhuǎn)地圖等，具體功能有如下這些：

• altShiftDragRotate 是否需要Alt-Shift-拖動旋轉(zhuǎn) （布爾值：默認(rèn)為true）
• doubleClickZoom 是否鼠標(biāo)或手指雙擊縮放地圖（布爾值：默認(rèn)為true）
• keyboard 是否需要鍵盤交互（布爾值：默認(rèn)為true）
• mouseWheelZoom 是否鼠標(biāo)滾輪縮放地圖。布爾值 （默認(rèn)為true）
• shiftDragZoom 是否需要Shift拖動縮放（布爾值：默認(rèn)為true） 。
• dragPan 是否鼠標(biāo)或手指拖拽平移地圖（布爾值：默認(rèn)為true）
• pinchRotate 是否兩個手指旋轉(zhuǎn)地圖，針對觸摸屏（布爾值：默認(rèn)為true）
• pinchZoom 是否兩個手指旋轉(zhuǎn)地圖，針對觸摸屏（布爾值：默認(rèn)為true）
• zoomDelta 使用鍵盤或雙擊縮放時的縮放級別增量。（數(shù)）
• zoomDuration 縮放動畫的持續(xù)時間（數(shù)：以毫秒為單位）
• onFocusOnly 僅在地圖具有焦點(diǎn)時進(jìn)行交互。這會影響MouseWheelZoom和的DragPan相互作用，并且在沒有瀏覽器焦點(diǎn)的地圖需要頁面滾動時很有用（布爾值：默認(rèn)為false）

舉例

dragrotateandzoom (shift + 鼠標(biāo)拖拽進(jìn)行縮放和旋轉(zhuǎn)地圖)

import {
    defaults as defaultInteractions,
    DragRotateAndZoom
} from "ol/interaction";


map.value = new Map({
    target: target,
    layers: tileLayer,
    view: view,
    interactions: defaultInteractions().extend([
        new DragRotateAndZoom()
    ])
});

結(jié)論

地圖交互功能內(nèi)容實(shí)在是太多了，包括 鍵盤事件，鼠標(biāo)事件，拖拽，平移，縮放 等一些基本的交互動作，還有后面會寫到的 測距，測面，通過draw 繪制，選擇要素 select ，modify ，鋪?zhàn)轿降?snap 和鼠標(biāo)自定義事件 pointer 都構(gòu)成了openlayers 更加強(qiáng)大的交互功能系統(tǒng)，提升更優(yōu)的用戶體驗(yàn)。文章來源地址http://www.zghlxwxcb.cn/news/detail-804057.html

到了這里，關(guān)于openlayers [六] 地圖交互 interaction 詳解的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！