更新渲染器的属性

此示例演示如何在渲染器和直方图中更改驱动可视化的变量。使用 histogram() 统计函数生成直方图。

Slider 微件允许用户更新用于驱动可视化的年份。

const slider = new Slider({
  min: 1880,
  max: 2018,
  values: [ 1880 ],
  rangeLabelsVisible: true,
  labelsVisible: true,
  labelInputsEnabled: true,
  precision: 0,
  steps: 1,
  container: "sliderDiv"
});

这个应用程序还演示了如何自定义和设置直方图以邀请用户交互。条形颜色已更新以匹配渲染器，从而减少了对图例的需求。当用户单击或关注直方图条时，与该条相关的要素会在视图中突出显示。下面的代码片段实现了所有这些功能。

const histogramChart = new Histogram({
  container: "histogram",
  // These properties were generated from
  // the histogram() function
  min: histMin,
  max: histMax,
  bins: histogramResult.bins,
  // average is calculated from summaryStatistics()
  average: average,
  // provides a baseline for the anomaly data
  dataLines: [{
    value: 0
  }],
  // shortens the length of the 0 data line
  dataLineCreatedFunction: (element, label, index) => {
    if(index === 0){
      element.setAttribute("y2", "75%")
    }
  },
  labelFormatFunction: (value, type) => {
    return type === "average" ? value.toFixed(2) + "°" : value;
  },
  // colors bars based on the midpoint of their range
  // and adds event listeners that trigger highlighting features
  // that fall inside the bounds of the bin
  barCreatedFunction: (index, element) => {
    const bin = histogramChart.bins[index];
    const midValue = ((bin.maxValue - bin.minValue) / 2) + bin.minValue;
    const color = getColorFromValue(midValue);
    element.setAttribute("fill", color.toHex());
    element.addEventListener("focus", () => {
      const { minValue, maxValue, count } = bin;
      const query = lv.layer.createQuery();
      const field = "F" + slider.values[0];
      query.where = field  + " >= " + minValue + " AND " + field + " <= " + maxValue;
      lv.queryObjectIds(query).then((ids) => {
        if(highlight){
          highlight.remove();
          highlight = null;
        }
        highlight = lv.highlight(ids);
      });
    });

    element.addEventListener("blur", () => {
      if(highlight){
        highlight.remove();
        highlight = null;
      }
    });
  }

当用户滑动滑块时，渲染器和直方图都将更新。

GeoScene API for JavaScript示例中心

更新渲染器的属性