当前位置: 首页>>代码示例 >>用法及示例精选 >>正文


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