Arcgis 之地图滑块问题

最新推荐文章于 2023-03-25 15:22:18 发布

山人在山上

最新推荐文章于 2023-03-25 15:22:18 发布

阅读量794

点赞数

分类专栏： arcgis 文章标签： smartmapping colorinfoslider createcolorrender

本文链接：https://blog.csdn.net/dalaijianfen/article/details/82866798

版权

arcgis 专栏收录该内容

11 篇文章 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);
               });
           });