JavaScript ArcGIS MapView.breakpoints用法及代碼示例

基本信息

以下是所在類或對象的基本信息。

AMD: require(["esri/views/MapView"], (MapView) => { /* code goes here */ });

ESM: import MapView from "@arcgis/core/views/MapView";

類： esri/views/MapView

繼承: MapView > View > Accessor

自從：用於 JavaScript 4.0 的 ArcGIS API

用法說明

MapView.breakpoints函數(或屬性)的定義如下：

breakpoints Object

用於定義視圖高度和寬度斷點的便利屬性。此處指定的大小根據視圖的大小確定 widthBreakpoint 和 heightBreakpoint 屬性的值。

設置斷點有助於響應式應用程序設計。它通過觀察寬度和高度斷點來做到這一點。這很有幫助，因為它消除了對多個@media 調用.除了監聽視圖的大小和/或調整大小屬性，您可以為寬度斷點或者高度斷點視圖的屬性。

請參閱 styling guide 以獲取有關使用此函數的更多信息。

屬性：

類型	說明
xsmall Number	可選的默認值：544 設置 widthBreakpoint 和 heightBreakpoint 使用的像素 `xsmall` 斷點。如果視圖的高度或寬度小於此值，則 widthBreakpoint 或 heightBreakpoint 的值為 `xsmall` 。
small Number	可選的默認值：768 設置 widthBreakpoint 和 heightBreakpoint 使用的像素 `small` 斷點。如果視圖的高度或寬度在此值和 `xsmall` 屬性的值之間，則 widthBreakpoint 或 heightBreakpoint 的值將為 `small` 。
medium Number	可選的默認值：992 設置 widthBreakpoint 和 heightBreakpoint 使用的像素 `medium` 斷點。如果視圖的高度或寬度在此值和 `small` 屬性的值之間，則 widthBreakpoint 或 heightBreakpoint 的值將為 `medium` 。
large Number	可選的默認值：1200 設置 widthBreakpoint 和 heightBreakpoint 使用的像素 `large` 斷點。如果視圖的高度或寬度在此值和 `medium` 屬性的值之間，則 widthBreakpoint 或 heightBreakpoint 的值將為 `large` 。
xlarge Number	可選的設置 widthBreakpoint 和 heightBreakpoint 使用的像素 `xlarge` 斷點。如果視圖的高度或寬度大於 `large` 屬性的值，則 widthBreakpoint 或 heightBreakpoint 的值將為 `xlarge` 。

例子：

// Instead of watching the size or resizing properties
view.watch(size)
view.watch(resizing)

// Set up a watch handle for breakpoint
view.watch("widthBreakpoint",function(breakpoint){
  switch (breakpoint) {
    case "xsmall":
    // do something
      break;
    case "small":
    case "medium":
    case "large":
    case "xlarge":
    // do something else
      break;
    default:
  }
});

相關用法

注：本文由純淨天空篩選整理自arcgis.com大神的英文原創作品 MapView.breakpoints。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。