SizeSliderViewModel

属性列表

属性详细说明

declaredClass Stringreadonly inherited

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

handlesSyncedToPrimary Boolean inherited

仅当在滑块上设置了三个拇指（即句柄）时才适用（即当 primaryHandleEnabled 是 true 时)。此属性指示外部句柄的位置是与中间还是主句柄同步。启用后，如果移动主句柄，则会更新外部句柄位置，同时保持与主句柄的固定距离。

仅在 primaryHandleEnabled 为 true 时适用。

默认值：true

另参阅：

• primaryHandleEnabled

示例代码：

// 启用主句柄并将其与其他句柄同步
slider.viewModel.primaryHandleEnabled = true;
slider.viewModel.handlesSyncedToPrimary = true;

inputFormatFunction LabelFormatter inherited

用于设置用户输入格式的函数。 与设置拇指标注格式的 labelFormatFunction 相反，当用户开始编辑输入元素中的拇指值时，它们会设置 inputFormatFunction 的格式。

下图演示了默认情况下滑块输入值如何与相应的滑块值相似，并且与 labelFormatFunction 中设置的格式不匹配。

如果要设置滑块输入值的格式，使其与拇指标签匹配，则可以将 labelFormatFunction 中设置的相同函数传递给 inputFormatFunction 以实现一致的格式。

但是，如果指定了 inputFormatFunction，则还必须编写相应的 inputParseFunction，以将用户输入解析为可理解的滑块值。在大多数情况下，如果指定 inputFormatFunction，则应将 labelFormatFunction 设置为相同的值，以确保标注和输入之间的一致性。

此属性覆盖默认输入格式化程序，该格式化程序通过在输入值上调用 toString() 进行格式化。

另参阅：

• inputParseFunction

示例代码：

// 将滑块输入的格式设置为带单位的缩写数字
// 例如，位置 1500 处的拇指将以 1.5k 的输入标注渲染
slider.inputFormatFunction = function(value, type){
  if(value >= 1000000){
    return (value / 1000000).toPrecision(3) + "m"
  }
  if(value >= 100000){
    return (value / 1000).toPrecision(3) + "k"
  }
  if(value >= 1000){
    return (value / 1000).toPrecision(2) + "k"
  }
  return value.toFixed(0);
}

inputParseFunction InputParser inherited

用于分析由 inputFormatFunction 格式化的滑块输入的函数。 如果设置了 inputFormatFunction 则必须设置此属性。 否则，滑块值可能不会更新到其预期位置。

覆盖默认输入解析，这是一个已解析的浮点数。

另参阅：

• inputFormatFunction

示例代码：

// 将滑块输入（字符串值）解析为滑块可理解的数字值
// 这假设滑块已经配置了 inputFormatFunction
// 例如，如果函数的输入值是 1.5k，
// 则解析为 1500
slider.inputParseFunction = function(value, type, index){
  let charLength = value.length;
  let valuePrefix = parseFloat(value.substring(0,charLength-1));
  let finalChar = value.substring(charLength-1);

  if(parseFloat(finalChar) >= 0){
    return parseFloat(value);
  }
  if(finalChar === "k"){
    return valuePrefix * 1000;
  }
  if(finalChar === "m"){
    return valuePrefix * 1000000;
  }
  return value;
}

labelFormatFunction LabelFormatter inherited

用于设置标注格式的函数。覆盖默认标注格式化程序。

默认情况下，标注的格式设置如下：

• 当数据范围小于 10（(max - min) < 10）时，标注将基于精度属性中设置的值进行舍入。
• 当数据范围大于 10 时，标注的显示精度不超过小数点后两位，但实际滑块拇指值将保持精度中指定的精度。

使用此属性可以覆盖上面定义的行为。

示例代码：

// 对于拇指值，将每个标注舍入为整数。
// 注意：尽管存在这种格式，
// 拇指的实际值仍将根据指示的数据“精度”进行存储
sliderViewModel.labelFormatFunction = function(value, type) {
  return (type === "value") ? value.toFixed(0) : value;
}

labels String[]readonly inherited

与使用内部标注格式化程序生成的值或从 labelFormatFunction 返回的值关联的字符串数组。

persistSizeRangeEnabled Boolean

起始版本： GeoScene API for JavaScript 4.22

此属性通常用于发散或 above-and-below 渲染器配置。

当为 true 时, 则确保 above 范围内的符号大小与所有滑块拇指位置的 below 范围内的符号大小一致。 换言之，随着滑块拇指的更新，停靠点中的大小值将根据大小范围约束（maxSize - minSize）内数据值的位置按比例进行调整。 如果为 false，则即使滑块拇指值发生更改，停靠点中的大小值也将保持不变。

在大多数情况下，应将此值设置为 true 以使 above 范围内的大小与 below 范围内的大小保持一致，以避免地图误读。

默认值：false

示例代码：

slider.viewModel.persistSizeRangeEnabled = true;

precision Number inherited

定义滑块值应如何舍入。此数字表示滑块值在移动时应舍入到的小数位数。

此值还指示拇指标注的精度，当数据范围 （最大值 - 最小值） 小于 10 时。

当数据范围大于 10 时，标注显示，精度为不超过两个小数位，但实际的滑块缩略图值将保持此属性中指定的精度。

例如，给定 4 的默认精度和以下滑块配置，拇指值的标注将显示两个小数位，但即使用户滑动或移动拇指，实际拇指值的精度也不会丢失。

const slider = new SliderVM({
  min: 20,
  max: 100,  // 数据范围为 80
  values: [50.4331],
  // 拇指标注将显示 50.43
  // 拇指值将保持精度，
  // 因此该值将保持在 50.4331
});

如果用户手动输入的值的精度高于此属性所指示的精度，则在用户移动该拇指之前，将保持该拇指值的精度。此时，该值将根据指示的精度进行舍入。

如果拇指标注不可见，则必须使用 labelInputsEnabled 启用它们。

请记住，此属性会将拇指舍入值，不应专门用于格式设置目的。要设置拇指 label 的格式，请使用 labelFormatFunction 属性。

默认值：4

示例代码：

sliderViewModel.precision = 7;

primaryHandleEnabled Boolean inherited

如果为 true，则滑块将在默认情况下已提供的两个句柄之间渲染第三个句柄。 这是主句柄。 必须为要渲染的主句柄定义三个或五个停靠点。主句柄代表中间停止。

当 handlesSyncedToPrimary 为 true 时, 此句柄将控制其他句柄在移动时的位置。

默认值：false

另参阅：

• handlesSyncedToPrimary

示例代码：

// 启用主句柄并将其与其他句柄同步
slider.viewModel.primaryHandleEnabled = true;
slider.viewModel.handlesSyncedToPrimary = true;

state Stringreadonly inherited

视图模型的状态。

可选值："ready"|"disabled"

stops SizeStop[]

大小停靠点从 SizeVariable 链接到滑块。

示例代码：

sizeRendererCreator.createContinuousRenderer({
  layer: featureLayer,
  field: "fieldName",
  basemap: "tianditu-image"
}).then(function(sizeResponse){
  const slider = new SizeSlider({
    viewModel: new SizeSliderVM({
      stops: sizeResponse.visualVariable.stops
    }),
    container: "sliderDiv"
  });
});

thumbsConstrained Boolean inherited

当 false 时，用户可以自由地将任何滑块拇指移动到轨道的任何位置。默认情况下，拇指的位置受限于相邻拇指的位置，因此您无法将一个拇指移动到另一个拇指之上。将此属性设置为 false 以禁用此约束行为。

默认值：true

示例代码：

// 允许用户将滑块
// 拇指沿轨迹自由移动到任何位置
slider.viewModel.thumbsConstrained = false;

values Number[]readonly inherited

与滑块的拇指位置关联的数据值。这些是从停靠点计算得出的。实际的拇指位置取决于提供的停靠点数。

另参阅：

• setValue

zoomingEnabled Boolean inherited

在滑块上启用缩放。有关沿滑块轨道缩放的详细信息，请参阅 zoomOptions。

另参阅：

• zoomOptions

示例代码：

// 禁用滑块上的缩放
slider.viewModel.zoomingEnabled = false;

zoomOptions Object inherited

将滑块轨道缩放到此属性中提供的边界。 当提供最小和/或最大缩放值时， 最小和最大滑块值将被保留并渲染在滑块上的典型位置。 但是，滑块轨迹本身会被缩放，因此拇指不能在提供的最小和最大缩放值的上方或下方移动。

当滑块处于缩放状态时，轨迹的缩放末端将显示为锯齿状。 在下图中，请注意即使滑块最大值为 200，也无法将顶部拇指移动到 31 缩放最大值之后。

要退出缩放状态，用户可以单击锯齿线，或者开发人员可以将 zoomOptions 设置为 null。 开发人员有责任为最终用户提供 UI 选项以启用滑块上的缩放。

当滑块与严重偏斜的数据集相关联时，设置 zoomOptions 很有用，在这些数据集中，直方图由于异常值而仅渲染一个或两个条形。

您可以通过缩放滑块并根据缩放的最小值和最大值重新生成直方图来消除异常值的影响。 这将提供更好的数据视图并使滑块对最终用户更有用。

属性：

min Number optional 缩放的下限。

max Number optional 缩放的上限。

示例代码：

// 将滑块缩放到只能移动拇指
// 到 10 和 25 的值之间的位置，而
// 保持滑块的绝对最小值和
// 最大值
slider.viewModel.zoomOptions = {
  min: 10,
  max: 25
};

// 禁用滑块上的缩放
slider.viewModel.zoomOptions = null;

// 将滑块缩放到
// 拇指只能移动到值 10 以上的位置，
// 同时保持滑块的绝对最小值
slider.viewModel.zoomOptions = {
  min: 10
};

// 将滑块缩放到
// 拇指只能移动到值 25 以下的位置，
// 同时保持滑块的绝对最大值
slider.viewModel.zoomOptions = {
  max: 25
};

// 使用一些填充
// 将滑块缩放到句柄位置
document.getElementById("zoomInButton").onclick = function() {
  const lowerThumb = slider.values[0];
  const upperThumb = slider.values[1];

  const range = upperThumb - lowerThumb;
  const padding = range * 0.3;

  const zoomMin = (lowerThumb - padding) > slider.min ? (lowerThumb - padding) : slider.min;
  const zoomMax = (upperThumb + padding) < slider.max ? (upperThumb + padding) : slider.max;

  slider.viewModel.set({ zoomOptions: { min: zoomMin, max: zoomMax } });
};

方法列表

方法详细说明

defaultInputFormatFunction(value){String}inherited

默认输入格式函数可用作自定义格式设置实现中的回退。

参数：

value Number 要格式化的输入值。

返回值：

类型	描述
String	格式化的输入值。

defaultInputParseFunction(value){Number}inherited

默认输入分析函数，可用作自定义分析实现中的回退。

参数：

value String 要分析的拇指值。

返回值：

类型	描述
Number	分析的拇指值。

defaultLabelFormatFunction(value){String}inherited

默认标签格式函数，可用作自定义格式设置实现中的回退。

参数：

value Number 要格式化的拇指值。

返回值:

类型	描述
String	格式化的拇指值。

emit(type, event){Boolean}inherited

在实例上触发事件。仅当创建此类的子类时才应使用此方法。

参数：

type String 事件名称。

event Object optional 事件负载。

返回值：

类型	描述
Boolean	如果侦听器收到通知,则为 true

getBoundsForValueAtIndex(index){Object}inherited

返回提供的索引处的“值”的最小和最大边界。还用于在内部通过 HTMLElement 属性提供辅助功能信息

参数：

index Number 关联值的索引。

返回值：

类型	描述
Object	返回具有边界信息的简单对象。

getLabelForValue(value, type, index){String}inherited

返回提供的值的格式化标注。

参数：

value Number 要从中检索格式化标注的值。

type String optional 标注类型。 可选值："min"|"max"|"tick"|"values"

index Number optional 标注的索引。

返回值：

类型	描述
String	返回格式化标注。

getUnzoomedMax()inherited

获取滑块的最大值。当用户想要更改在缩放状态下不可见的滑块最大值时，这很有用。

另参阅：

• zoomOptions

getUnzoomedMin()inherited

获取滑块的最小值。当用户想要更改在缩放状态下不可见的滑块最小值时，这很有用。

另参阅：

• zoomOptions

hasEventListener(type){Boolean}inherited

指示实例上是否存在与提供的事件名称匹配的事件侦听器。

参数：

type String 事件名称。

返回值：

类型	描述
Boolean	如果类支持输入事件，则返回 true。

on(type, listener){Object}inherited

在实例上注册事件处理程序。调用此方法将事件与侦听器挂钩。

参数：

type String|String[] 要监听的事件或者事件数组。

listener Function 事件触发时要调用的函数。

返回值：

类型	描述
Object	返回一个 remove() 方法的事件处理程序，该方法用以停止侦听事件。 属性 类型 描述 remove Function 当被调用时，从事件中移除监听器。

示例代码：

view.on("click", function(event){
  // event 是事件触发后返回的事件句柄。
  console.log(event.mapPoint);
});

setValue(index, value)inherited

根据提供的索引更新缩略图值。提供的值必须与以前的值不同。提供的值还必须介于最小值和最大值之间。

参数：

index Number 关联值数组中拇指值的索引。

value Number 要替换旧值的新值。

toPrecision(value){String}inherited

起始版本： GeoScene API for JavaScript 4.22

将给定值舍入为在视图模型上设置的精度属性中指定的小数位数。

参数：

value Number 要设置格式的拇指值。

返回值：

类型	描述
String	输入值四舍五入到精度中指定的位数。

另参阅：

• precision

Event Overview

{oldValue: Number,type: "max",value: Number}

{oldValue: Number,type: "min",value: Number}

Event Details

max-changeinherited

当用户更改滑块的max值时触发。

属性:

oldValue Number 滑块的前max 值（或界限）

type String 事件类型 该值通常是 "max".

value Number 触发事件时滑块的max值（或绑定值）。

min-changeinherited

当用户更改滑块的min值时触发。

属性:

oldValue Number 滑块的前min 值（或界限）

type String 事件类型 该值通常是 "min".

value Number 触发事件时滑块的min值（或绑定值）。