注意：1、渲染方式是根据地图basemap上面的灰度值渲染完地图之后，渲染滑块的。
2、无法直接指定颜色渲染，需要穿件basemap指定颜色之后，才能生成滑块的颜色。
3、单独使用滑块组件的时候不建议用3.x的版本，耦合性高。
源码：
domConstruct.empty("info");
legendDiv = domConstruct.create("div",{},"info");
var colorInfoSlider = new ColorInfoSlider({
colorInfo:{
stops:[
{ color: new Color([92,92,92]), label: "50", value: 50},
{ color: new Color([92,92,92]), label: "51", value: 51}
]
}
},legendDiv);
colorInfoSlider.startup();
var layerDefinition = {
"geometryType" : "esriGeometryPolygon",
"fields" : [
{"name": "OBJECTID", "type": "esriFieldTypeOID", "alias": "OBJECTID"},
{"name": "NAME", "type": "esriFieldTypeString", "alias": "NAME"},
{"name": "id", "type": "esriFieldTypeInteger", "alias": "id"},
{"name": "Shape_Length", "type": "esriFieldTypeDouble", "alias": "Shape_Length"},
{"name": "Shape_Area", "type": "esriFieldTypeDouble", "alias": "Shape_Area"},
{"name": "SYMBOLE", "type": "esriFieldTypeSmallInteger", "alias": "SYMBOLE"},
{"name": "PROVICE", "type": "esriFieldTypeString", "alias": "PROVICE"},
{"name": "CODE", "type": "esriFieldTypeString", "alias": "CODE"},
{"name": "LAND_AREA", "type": "esriFieldTypeDouble", "alias": "LAND_AREA"}
]
};
var featureCollection = {
layerDefinition : layerDefinition,
featureSet : null
};
var renderFeatureLayer = new FeatureLayer(featureCollection,{
showLabels : true
});
arrayUtil.forEach( owner.highlightLayer.graphics,function(g){
var type = g.geometry.type;
if(type=="polygon"){
for(var i=0;i<ary.length;i++){
if(ary[i].CITY == g.attributes.CODE){
g.attributes.LAND_AREA = ary[i].RENDERVALUE;
renderFeatureLayer.add(g);
break ;
}
}
}
});
var featureLayerStatistics = new FeatureLayerStatistics({layer:renderFeatureLayer,visible:false});
renderFeatureLayer.on("load",function(){
owner.map.addLayer(renderFeatureLayer);
featureLayerStatistics.getSuggestedScaleRange().then(function (scaleRange){
renderFeatureLayer.setScaleRange(scaleRange.minScale, scaleRange.maxScale);
owner.map.setScale(scaleRange.minScale);
});
SmartMapping.createColorRenderer({
layer : renderFeatureLayer,
field : "LAND_AREA",
basemap : "dark-gray"
}).then(function(colorRenderer){
if (!renderFeatureLayer.visible) {
renderFeatureLayer.show();
}
renderFeatureLayer.setRenderer(colorRenderer.renderer);
renderFeatureLayer.redraw();
featureLayerStatistics.getHistogram({
field: "LAND_AREA",
// normalizationField: "LAND_AREA",
numBins: 10
}).then(function (histogram){
var sliderHandleInfo = {
handles: [0, 2, 4],
primaryHandle: function(data){
console.info(data);
}
};
colorInfoSlider.set("colorInfo", colorRenderer.renderer.visualVariables[0]);
colorInfoSlider.set("minValue", colorRenderer.statistics.min);
colorInfoSlider.set("maxValue", colorRenderer.statistics.max);
colorInfoSlider.set("statistics", colorRenderer.statistics);
colorInfoSlider.set("histogram", histogram);
colorInfoSlider.set("handles", sliderHandleInfo["handles"]);
colorInfoSlider.set("primaryHandle", sliderHandleInfo["primaryHandle"]);
console.info(colorInfoSlider);
// colorInfoSlider.on("data-change", function (event){
// renderFeatureLayer.renderer.setVisualVariables([event.colorInfo]);
// renderFeatureLayer.redraw();
// });
// recreate the renderer when the theme changes
}).otherwise(function (error){
// busyIndicator.hide();
console.log("An error occurred while calculating the histogram, Error: %o", error);
});
}).otherwise(function(error){
console.info(error);
});
});