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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。