• geoscene/views

Magnifier

AMD: require(["geoscene/views/Magnifier"], (Magnifier) => { /* code goes here */ });
ESM: import Magnifier from "@geoscene/core/views/Magnifier";
类: geoscene/views/Magnifier
继承于:Magnifier Accessor
起始版本:GeoScene Maps SDK for JavaScript 4.19

放大镜允许最终用户将视图的一部分显示为放大图像。可以通过 MapView.magnifierSceneView.magnifier 访问此类的实例。

magnifier-overlay

正如您在以上屏幕截图中所见,放大镜使用放大镜玻璃的默认叠加图像。覆盖图像是使用 overlayUrl 属性设置的。您可以通过将 Magnifier.overlayEnabled 设置为 false 来禁用覆盖图像。下面演示了使用没有叠加图像的放大镜。

magnifier-no-overlay

放大镜包含一个默认的蒙版图像,这可使用 maskUrl 进行设置,并确定放大图像的可见区域。默认情况下,放大区域为圆形。以下示例演示了一个以正方形形状设置的蒙版图像。请注意,在此示例中,overlayEnabled 设置为 false 以隐藏叠加图像,并且仅显示放大区域。

magnifier-maskUrl

另请参阅
示例
view.when(() => {
  view.magnifier.visible = true;

  const offset = view.magnifier.size / 2;
  view.magnifier.offset = { x: offset, y: offset };

  //The magnifier will be displayed whenever the cursor hovers over the map.
  view.on("pointer-move", function (event) {
    view.magnifier.position = { x: event.x, y: event.y };
  });
});

构造函数

new Magnifier(properties)
参数
properties Object
optional

有关可能传递给构造函数的所有属性的列表,请参见属性

属性概述

可以设置、检索或侦听任何属性。请参阅使用属性主题。
显示继承属性 隐藏继承属性
名称 类型 描述
String

类的名称。

更多详情
Accessor
Number

控制要显示的放大倍数。

更多详情
Magnifier
Boolean

指示是否启用掩膜图像。

更多详情
Magnifier
String

掩膜 url 指向确定放大图像可见区域的图像 (alpha 通道)

更多详情
Magnifier
ScreenPoint

放大镜的偏移,以像素为单位。

更多详情
Magnifier
Boolean

指示是否启用叠加图像。

更多详情
Magnifier
String

叠加 url 指向显示在放大图像顶部的图像。

更多详情
Magnifier
ScreenPoint

放大镜的位置,以像素为单位。

更多详情
Magnifier
Number

放大镜的大小,以像素为单位。

更多详情
Magnifier
Boolean

指示放大镜是否可见。

更多详情
Magnifier

属性详细信息

declaredClass Stringreadonly inherited

类的名称。声明的类名称格式化为 geoscene.folder.className

factor Number

控制要显示的放大倍数。值越大,放大后的图像显示的增强程度越高。

默认值:1.5
maskEnabled Boolean

指示是否启用掩膜图像。

默认值:true
maskUrl String

掩膜 url 指向确定放大图像可见区域的图像 (alpha 通道)。当 maskUrl 为 null 时,使用直径等于放大镜大小的默认内置圆掩膜。

默认值:null

放大镜的偏移,以像素为单位。偏移量允许调整放大镜相对于其位置的绘制位置。

示例
const offset = view.magnifier.size / 2;
view.magnifier.offset = { x: offset, y: offset };
overlayEnabled Boolean

指示是否启用叠加图像。

默认值:true
overlayUrl String

叠加 url 指向显示在放大图像顶部的图像。请注意,叠加图像不受 maskUrl 的影响。当 overlayUrl 为 null 时,使用放大镜默认的内置图像。

默认值:null
position ScreenPoint

放大镜的位置,以像素为单位。如果位置为空,则不会显示放大镜。

默认值:null
size Number

放大镜的大小,以像素为单位。

默认值:120
visible Boolean

指示放大镜是否可见。

默认值:true

方法概述

显示继承的方法 隐藏继承的方法
名称 返回值类值 描述

添加一个或多个与对象的生命周期相关联的句柄。

更多详情
Accessor
Boolean

如果存在指定的句柄组,则返回 true。

更多详情
Accessor

移除对象拥有的句柄组。

更多详情
Accessor

方法详细说明

addHandles(handleOrHandles, groupKey)inherited
起始版本:GeoScene Maps SDK for JavaScript 4.25

添加一个或多个与对象的生命周期相关联的句柄。当对象被销毁时,将移除句柄。

// Manually manage handles
const handle = reactiveUtils.when(
  () => !view.updating,
  () => {
    wkidSelect.disabled = false;
  },
  { once: true }
);

// Handle gets removed when the object is destroyed.
this.addHandles(handle);
参数
handleOrHandles WatchHandle|WatchHandle[]

对象销毁后,标记为要移除的句柄。

groupKey *
optional

标识句柄应添加到的组的键。组中的所有句柄稍后都可使用 Accessor.removeHandles() 进行删除。如果未提供键,则句柄将被添加到默认组。

hasHandles(groupKey){Boolean}inherited
起始版本:GeoScene Maps SDK for JavaScript 4.25

如果存在指定的句柄组,则返回 true。

参数
groupKey *
optional

组键。

返回
类型 描述
Boolean 如果存在指定的句柄组,则返回 true
示例
// Remove a named group of handles if they exist.
if (obj.hasHandles("watch-view-updates")) {
  obj.removeHandles("watch-view-updates");
}
removeHandles(groupKey)inherited
起始版本:GeoScene Maps SDK for JavaScript 4.25

移除对象拥有的句柄组。

参数
groupKey *
optional

要移除的组键或组键的数组或集合。

示例
obj.removeHandles(); // removes handles from default group

obj.removeHandles("handle-group");
obj.removeHandles("other-handle-group");

类型定义

ScreenPoint

表示屏幕上的位置的对象。Magnifier.position 表示屏幕上的实际点,而 Magnifier.offset 表示相对于放大镜位置的位置。

属性

x 坐标。

y 坐标。

您的浏览器不再受支持。请升级您的浏览器以获得最佳体验。请参阅浏览器弃用帖子以获取更多信息