Arcgis 之地图滑块问题

柔光的暖阳◎ 2022-05-10 08:38 119阅读 0赞

注意：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);  
                \});  
            \});