JavaScript ArcGIS ColorSizeSlider用法及代碼示例

AMD: require(["esri/widgets/smartMapping/ColorSizeSlider"], (ColorSizeSlider) => { /* code goes here */ });

ESM: import ColorSizeSlider from "@arcgis/core/widgets/smartMapping/ColorSizeSlider";

類： esri/widgets/smartMapping/ColorSizeSlider

繼承: ColorSizeSlider > SmartMappingSliderBase > Widget > Accessor

自從：用於 JavaScript 4.12 的 ArcGIS API

ColorSizeSlider 小部件用於在可以使用 ColorVariable 和 SizeVariable 呈現的任何層中創作和探索數據驅動的可視化。兩個可視變量都應該用於可視化相同的數據變量。

這種滑塊和可視化樣式專為 3D 主題可視化而設計，其中大小和顏色都用於可視化相同的數據變量，以最大程度地減少由於感知失真而造成的混亂。例如，如果兩個大小相似的特征(因此數據值)彼此相距很遠，則拉伸點的可視化可能難以理解；距離Camera 最遠的要素將顯得比靠近相機的要素小。顏色變量可以幫助用戶了解兩個特征具有相似的值。

您至少必須設置小部件的最小、最大和停止屬性。這些停止點用於在滑塊的軌道上渲染顏色漸變。

有關此滑塊上可用的可配置選項的摘要，請參見下圖。

fromRendererResult 方法可用於根據 createContinuousRenderer 方法的結果方便地創建此滑塊。

const params = {
  layer: layer,
  basemap: map.basemap,
  valueExpression: "( $feature.POP_POVERTY / $feature.TOTPOP_CY ) * 100",
  view: view
};

let rendererResult = null;

univariateColorSizeRendererCreator
  .createContinuousRenderer(params)
  .then(function(response) {
    rendererResult = response;
    layer.renderer = response.renderer;

    return histogram({
      layer: layer,
      valueExpression: colorParams.valueExpression,
      view: view,
      numBins: 70
    });
  })
   .then(function(histogramResult) {
     const slider = ColorSizeSlider.fromRendererResult(rendererResult, histogramResult);
     slider.container = "slider";
   })
   .catch(function(error) {
     console.log("there was an error: ", error);
   });

此滑塊應用於更新圖層渲染器中匹配的 color 和 size 視覺變量。應用程序開發人員有責任在此滑塊上設置事件偵聽器，以在適當的渲染器中更新這些變量。

// when the user slides the handle(s), update the renderer
// with the updated color stops

slider.on(["thumb-change", "thumb-drag"], function() {
  const renderer = layer.renderer.clone();
  renderer.visualVariables = slider.updateVisualVariables( renderer.visualVariables );
  layer.renderer = renderer;
});