arcgis js 加載動態服務並渲染顏色和選擇圖層顯示

//渲染
        getLayerDrawingOptions : function(symbol){
      var color = [this.levelColor[1],this.levelColor[2],this.levelColor[3],"#8e1411"].map((e)=>{ 
        var sym = window.esri.symbol.fromJson(symbol.toJson())
        sym.setColor(new window.esri.Color(e));
        return sym;
      });
      var field = "";
      if( this.zjs == "" ){
        if( this.sjvalue === "農產品點位" ){
          field = "ZHN_Class"
        }else{
          field = "ZH_Class"
        }
      }else{
        if( this.sjvalue === "農產品點位" ){
          field = this.zjs + "N" + "_Class";
        }else{
          field = this.zjs + "_Class";
        }
      }
      var renderer;
      if( this.drawerComponent === 'jcDrawer' && this.isTab.code === "國控" ){
        renderer = new window.esri.renderer.ClassBreaksRenderer( color[3] , field);
      }else{
        renderer = new window.esri.renderer.ClassBreaksRenderer( color[2] , field);
        renderer.addBreak(0,1.1, color[0])
        renderer.addBreak(1.1,2, color[1])
      }
      // renderer.addBreak(2.1,Infinity, color[2]) 
      var drawingOptions = new window.esri.layers.LayerDrawingOptions();
      drawingOptions.renderer = renderer;
      return drawingOptions; 
        },
        ArcGISDynamicMapServiceLayerShow : function(url,map,symbolConfig, where){
      if( this.dynamicMapServiceLayer ) {
        window.map.removeLayer(this.dynamicMapServiceLayer); 
        this.dynamicMapServiceLayer = null;
      }
            var layerindex = url.lastIndexOf("/");
            var layer_url = url.substring(0,layerindex);
            layerindex = url.substring(layerindex+1,url.length);
            var imageParameters = new window.esri.layers.ImageParameters();
      var layerDefs = [];
      layerDefs[layerindex] = where || "1 = 1" ;
      imageParameters.layerDefinitions = layerDefs;
      imageParameters.format = "png8";  
      var dynamicMapServiceLayer = this.dynamicMapServiceLayer = new window.esri.layers.ArcGISDynamicMapServiceLayer(layer_url, { id: "dynamicMapServiceLayer" , "imageParameters": imageParameters });
      dynamicMapServiceLayer.on("update-start",()=>{
        this.loading = this.$loading({
          lock: true,
          background: "rgba(0, 0, 0, 0.5)"
        });
      });
      dynamicMapServiceLayer.on("update-end",()=>{
        this.loading.close();
        this.loading = null;
      });
      dynamicMapServiceLayer.setVisibleLayers([layerindex]);
      var symbol = [];
      var sym = symbolConfig || {
        "type": "esriSMS",
        "style": "esriSMSCircle",
        "color": window.esri.Color("#ffffff"),
        "size": 4,
        "angle": 0,
        "xoffset": 0,
        "yoffset": 0,
        "outline": {
          "color": [ 0, 0, 0, 255 ],
          "width": 1
        }
      }
      sym = window.esri.symbol.fromJson(sym)
      symbol[layerindex] = this.getLayerDrawingOptions(sym);
      dynamicMapServiceLayer.setLayerDrawingOptions(symbol);
      map.addLayer(dynamicMapServiceLayer,1);
      return dynamicMapServiceLayer;
        },