OpacitySliderViewModel

AMD: require(["geoscene/widgets/smartMapping/OpacitySlider/OpacitySliderViewModel"], (OpacitySliderVM) => { /* code goes here */ });
ESM: import OpacitySliderVM from "@geoscene/core/widgets/smartMapping/OpacitySlider/OpacitySliderViewModel";
类: geoscene/widgets/smartMapping/OpacitySlider/OpacitySliderViewModel
继承于:OpacitySliderViewModel SmartMappingSliderViewModel SliderViewModel Accessor
起始版本:GeoScene API for JavaScript 4.12

提供 OpacitySlider 微件的逻辑。

另请参阅:

构造函数

new OpacitySliderViewModel(properties)
参数:
properties Object
optional

有关可能传递到构造函数中的所有属性的列表,请参阅属性

属性概述

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

类的名称。

更多详情Accessor
Number更多详情

设置后,用户将限制将滑块拇指移动到高于此值的位置。

更多详情SliderViewModel
Number更多详情

设置后,将限制用户将滑块拇指移动到小于此值的位置。

更多详情SliderViewModel
LabelFormatter更多详情

用于设置用户输入格式的函数。

更多详情SliderViewModel
InputParser更多详情

用于解析由 inputFormatFunction 格式化的滑块输入的函数。

更多详情SliderViewModel
LabelFormatter更多详情

用于设置标注格式的函数。

更多详情SliderViewModel
String[]更多详情

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

更多详情SmartMappingSliderViewModel
Number更多详情

定义滑块值应如何舍入。

更多详情SliderViewModel
String更多详情

视图模型的状态。

更多详情SmartMappingSliderViewModel
OpacityStop[]更多详情

不透明度从 OpacityVariable 停止以链接到滑块。

更多详情OpacitySliderViewModel
Boolean更多详情

false 时,用户可以自由地将任何滑块拇指移动到轨道上的任何位置。

更多详情SliderViewModel
Number[]更多详情

与滑块的拇指位置关联的数据值。

更多详情SmartMappingSliderViewModel
Boolean更多详情

启用滑块上的缩放。

更多详情SmartMappingSliderViewModel
Object更多详情

将滑块轨迹缩放到此属性中提供的边界。

更多详情SmartMappingSliderViewModel

属性详细信息

declaredClass Stringreadonly inherited

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

effectiveMax Number inherited
起始版本:GeoScene API for JavaScript 4.23

设置后,用户将限制将滑块拇指移动到高于此值的位置。此值应小于滑块最大值effectiveMaxeffectiveMin 允许您表示数据集中无法使用滑块过滤或选择的值范围。当使用滑块表示具有异常值或不适合图层的比例范围的数据集时,这可能很有用。

示例:
// slider.viewModel.max = 100
slider.viewModel.effectiveMax = 60;
// now the user cannot slide thumbs above
// 60 even though the slider track displays
// values up to 100.
effectiveMin Number inherited
起始版本:GeoScene API for JavaScript 4.23

设置后,将限制用户将滑块拇指移动到小于此值的位置。此值应大于滑块最小值effectiveMineffectiveMax 允许您表示数据集中无法使用滑块进行过滤或选择的值的范围。当使用滑块表示具有异常值或不适合图层的比例范围的数据集时,这可能很有用。

示例:
// slider.viewModel.min = 0
slider.viewModel.effectiveMin = 4;
// now the user cannot slide thumbs below
// 4 even though the slider track displays
// values down to 0.
inputFormatFunction LabelFormatter inherited

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

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

无输入格式化的滑块

如果要格式化滑块输入值,使其与拇指标注匹配,可以将 labelFormatFunction 中设置的相同函数传递给 inputFormatFunction,以获得一致的格式。

无输入格式化的滑块

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

此属性重写默认输入格式化程序,该程序通过对输入值调用 toString() 进行格式化。

另请参阅:
示例:
// Formats the slider input to abbreviated numbers with units
// e.g. a thumb at position 1500 will render with an input label of 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,则必须设置此属性。否则,滑块值可能不会更新到其预期位置。

重写默认的输入解析,这是一个已解析的浮点数。

另请参阅:
示例:
// Parses the slider input (a string value) to a number value understandable to the slider
// This assumes the slider was already configured with an inputFormatFunction
// For example, if the input is 1.5k this function will parse
// it to a value of 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 时,标注的显示精度不超过小数点后两位,但实际的滑块拇指值将保持精度中指定的精度。

使用此属性可重写上面定义的行为。

示例:
// For thumb values, rounds each label to whole numbers.
// Note the actual value of the thumb continues to be stored
// based on the indicated data `precision` despite this formatting
sliderViewModel.labelFormatFunction = function(value, type) {
  return (type === "value") ? value.toFixed(0) : value;
}
labels String[]readonly inherited

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

precision Number inherited

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

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

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

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

const slider = new SliderVM({
  min: 20,
  max: 100,  // data range of 80
  values: [50.4331],
  // thumb label will display 50.43
  // thumb value will maintain precision, so
  // value will remain at 50.4331
});

如果用户手动输入的值的精度高于此属性所指示的精度,则该拇指值的精度将保持不变,直到用户移动该拇指。此时,该值将根据指示的精度进行舍入。

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

请记住,此属性对拇指进行舍入,不应专门用于格式设置目的。若要设置拇指 labels 的格式,请使用 labelFormatFunction 属性。

默认值:4
示例:
sliderViewModel.precision = 7;
state Stringreadonly inherited

视图模型的状态。

可能的值"ready"|"disabled"

不透明度从 OpacityVariable 停止以链接到滑块。这些停止中的不透明度值将用于在滑块上渲染渐变。它们应该与关联图层的不透明度视觉变量中渲染的不透明度相匹配。

示例:
opacityVariableCreator.createContinuousRenderer({
  layer: featureLayer,
  field: "fieldName",
  basemap: "tianditu-image"
}).then(function(opacityResponse){
  const slider = new OpacitySlider({
    viewModel: new OpacitySliderVM({
      stops: opacityResponse.visualVariable.stops
    }),
    container: "sliderDiv"
  });
});
thumbsConstrained Boolean inherited

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

默认值:true
示例:
// allows the user to freely move slider
// thumbs to any position along the track
slider.viewModel.thumbsConstrained = false;
values Number[]readonly inherited

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

另请参阅:
zoomingEnabled Boolean inherited

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

另请参阅:
示例:
// disables zooming on the slider
slider.viewModel.zoomingEnabled = false;
zoomOptions Object inherited

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

当滑块处于缩放状态时,轨道的缩放末端将显示锯齿状。在下图中,请注意,即使滑块最大值为 200,上拇指也无法移动超过缩放最大值 31

slider-zoom

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

当滑块绑定到严重倾斜的数据集时,设置 zoomOptions 很有用,其中直方图由于异常值而仅呈现一个或两个条柱。

slider-not-zoomed

您可以通过缩放滑块并根据缩放的最小值和最大值重新生成直方图来消除异常值的影响。

属性:
min Number
optional

缩放的下限。

max Number
optional

缩放的上限。

示例:
// zooms the slider to so thumbs can only be moved
// to positions between the values of 10 and 25 while
// maintaining the slider's absolute minimum and
// maximum values
slider.viewModel.zoomOptions = {
  min: 10,
  max: 25
};
// disables zooming on the slider
slider.viewModel.zoomOptions = null;
// zooms the slider to so thumbs can only be moved
// to positions above the value of 10, while maintaining
// the slider's absolute minimum value
slider.viewModel.zoomOptions = {
  min: 10
};
// zooms the slider to so thumbs can only be moved
// to positions below the value of 25, while maintaining
// the slider's absolute maximum value
slider.viewModel.zoomOptions = {
  max: 25
};
// zooms the slider to the handle positions
// with some padding
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 } });
};

方法概述

显示继承的方法 隐藏继承的方法
名称 返回类型 描述 类:
String更多详情

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

更多详情SliderViewModel
Number更多详情

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

更多详情SliderViewModel
String更多详情

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

更多详情SliderViewModel
Boolean更多详情

在实例上发出事件。

更多详情SliderViewModel
Bounds更多详情

返回滑块的有效边界。

更多详情SliderViewModel
Object更多详情

返回所提供索引处“值”的最小值和最大值边界。

更多详情SliderViewModel
String更多详情

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

更多详情SliderViewModel
StopInfo[]更多详情

生成在滑块上渲染的不透明度渐变。

更多详情OpacitySliderViewModel
更多详情

获取滑块的最大值。

更多详情SmartMappingSliderViewModel
更多详情

获取滑块的最小值。

更多详情SmartMappingSliderViewModel
Boolean更多详情

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

更多详情SliderViewModel
Object更多详情

在实例上注册事件处理程序。

更多详情SliderViewModel
更多详情

根据提供的索引更新拇指

更多详情SliderViewModel
String更多详情

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

更多详情SliderViewModel

方法详细信息

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 如果听取了侦听者的通知
getBounds(){Bounds}inherited
起始版本:GeoScene API for JavaScript 4.23

返回滑块的有效边界。如果在滑块上设置了 effectiveMineffectiveMax,则将返回这些值。如果不是,则返回最小值最大值

返回:
类型 说明
Bounds 滑块的有效边界。
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 返回格式化的标注。
getStopInfo(){StopInfo[]}

生成在滑块上渲染的不透明度渐变。

返回:
类型 说明
StopInfo[]
getUnzoomedMax()inherited

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

另请参阅:
getUnzoomedMin()inherited

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

另请参阅:
hasEventListener(type){Boolean}inherited

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

参数:
type String

事件的名称。

返回:
类型 说明
Boolean 如果类支持输入事件,则返回 true。
on(type, listener){Object}inherited

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

参数:

要侦听的事件或事件数组。

listener Function

事件激发时要调用的函数。

返回:
类型 说明
Object 返回具有 remove() 方法的事件处理程序,应调用该方法以停止侦听事件。
属性 类型 说明
remove Function 调用时,从事件中删除侦听器。
示例:
view.on("click", function(event){
  // event is the event handle returned after the event fires.
  console.log(event.mapPoint);
});
setValue(index, value)inherited

根据提供的索引更新拇指。提供的值必须与以前的值不同。提供的值也必须介于最小值最大值之间。

参数:
index Number

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

value Number

要替换为旧值的新值。

toPrecision(value){String}inherited
起始版本:GeoScene API for JavaScript 4.14

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

参数:
value Number

要格式化的拇指值。

返回:
类型 说明
String 输入值四舍五入到精度中指定的位数。
另请参阅:

类型定义

StopInfo

getStopInfo() 方法的返回对象。

属性:
color Color

停靠点的颜色。

offset Number

停靠点的偏移量。

事件概述

显示继承的事件 隐藏继承的事件
名称 类型 描述 类:
{oldValue: Number,type: "max",value: Number}
更多详情

当用户更改滑块的最大值时激发。

更多详情 SliderViewModel
{oldValue: Number,type: "min",value: Number}
更多详情

当用户更改滑块的最小值时激发。

更多详情 SliderViewModel

事件详细信息

max-changeinherited

当用户更改滑块的最大值时激发。

属性:
oldValue Number

滑块以前的最大值(或界限)。

type String

事件的类型。

该值始终为"max"

value Number

发出事件时滑块的最大值(或界限)的值。

min-changeinherited

当用户更改滑块的最小值时激发。

属性:
oldValue Number

滑块以前的 最小值(或界限)。

type String

事件的类型。

该值始终为"min"

value Number

发出事件时滑块的最小值(或界限)的值。

您的浏览器不再受支持。请升级浏览器以获得最佳体验。有关更多详细信息,请参阅我们的 浏览器弃用帖子