arcgis 4.11 colorSlider

我就是我 2022-04-24 13:28 84阅读 0赞

记录埋坑过程：

需求：

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

问题：

采取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"  
    \};