arcgis 4.11 colorSlider

记录埋坑过程：

需求：

        服务端发布一个图层，利用滑块来获取某个区间内，地图渲染上的不同

问题：

        采取colorSlider(在3.x的版本中交colorinfoslider)可以很好的实现，但是问题来了，我们需要的渲染颜色如果和内置的颜色不同的时候怎么办，总不能勉强的使用内置颜色，或者是重新配图的方式获取颜色吧

解决方式：

       根据你采用主题的不同（theme），createContinuousRenderer中响应返回的数据中visualVariable中stops数组中颜色的个数是不相同的，那么好，你不要将得到的visualVariable赋给sliderParams参数中的visualVariable这个属性，你要自己编写sliderParam中visualVariable中stops的颜色以及值（警告：个数必须相同，如果不同会将滑块莫名其妙的隐藏掉）

代码：
import store from '@/store/index'

export default class MapColorSlider {

  url = '*****************************************************************************';
  rendererFieldName = 'MIAN_JI';
  outFields = ['*'];
  popupTemplate = {
    title: "{XIAN}",
    content: [{
      type: 'fields',
      fieldInfos: [
        {
          fieldName: 'XING_ZQH',
          label: '行标题'
        }
      ]
    }]
  };
  numHandles = 2;
  sliderParams = {
    numHandles: 2,
    syncedHandles: true,
    container: "slider",
    visualVariable :{
        type:'color',
        field:'MIAN_JI',
        stops:[
          {value:0,color:'#e128d6'},
          {value:1000,color:'#eee8d6'},
          {value:500000,color:'#FFFFFF'},
          {value:800000,color:'#ewee8d6'},
          {value:1969594,color:'#453e94'}
        ],
      },
    // labelsVisible:false,
    // 不再滑块中显示平均值
    statisticsVisible:false
  };
  view = null;
  layers = null;
  /**
   *
   * @param {*} view
   * @param {*} url 图层的url地址
   * @param {*} rendererFieldName 图层渲染需要的字段
   * @param {*} outFields 图层查询的字段
   * @param {*} popupTemplate 点击地图弹出框的格式，以及字段
   * @param {*} numHandles 滑块手柄的个数
   */
  constructor(view, url, rendererFieldName, outFields, popupTemplate, numHandles) {
    this.view = view;
    this.url = url;
    this.rendererFieldName = rendererFieldName;
    this.outFields = outFields;
    this.popupTemplate = popupTemplate;
    this.sliderParams.numHandles = numHandles
    //引入store中定义的东西
    this.modules = store.state.modules;
  }
  getRenderHistogram() {
    var povLayer = new this.modules.FeatureLayer({
      url: this.url,
      outFields: this.outFields,
      visible: true,
      popupTemplate: this.popupTemplate
    });
    this.layers = povLayer
    var colorParams = {
      layer: povLayer,
      field: this.rendererFieldName,
      theme: "above-and-below"
    };

    var owner = this;
    this.modules.color.createContinuousRenderer(colorParams)
      .then(function(response){
        owner.layers.renderer = response.renderer;
        owner.view.map.add(owner.layers);
        owner.sliderParams.statistics = response.statistics;
        // console.info(response.visualVariable)
        // console.info(owner.sliderParams.visualVariable)
        // owner.sliderParams.visualVariable = response.visualVariable;
        owner.sliderParams.min = 0;
        owner.sliderParams.max = 90000;
        
        var his = new owner.modules.histogram({
          layer: povLayer,
          field: owner.rendererFieldName
        });
        owner.sliderRendererByHistogram(his)
      })
      .catch(function (error) {
        console.log("there was an error: ", error);
      });
  }
  /**
   *
   * @param {*} histogram 通过histogram渲染滑块
   */
  sliderRendererByHistogram(histogram) {
    var owner = this
    this.sliderParams.histogram = histogram;
    var colorSlider = new this.modules.ColorSlider(this.sliderParams);
    this.view.ui.add("containerDiv", "bottom-left");
    colorSlider.on("data-change", function () {
      var renderer = owner.layers.renderer.clone();
      renderer.visualVariables = [
        owner.modules.lang.clone(colorSlider.visualVariable)
      ];
      owner.layers.renderer = renderer;
    });
  }
}