ArcGISImageServiceLayer has no constructor

KevinRobertson — Sun, 12 Dec 2021 07:22:48 GMT

I am working in AngularJS and ArcGIS for Javascript API 3.14. I am having an issue with getting ArcGISImageServiceLayer to work with an image server. However, we also have a MapServer of the data instance running as well, which works just fine. We want to get the ImageServer portion running, because it does run faster. Below is my code snippet.

return {
   restrict: 'E',
   require: '^onfarmMap',
   templateUrl: 'components/map/templates/map-legend.html',
   link: function(scope, element, attrs, onfarmMap) {

      var etUrl = "https://gis.swiimsystem.com:6443/arcgis/rest/services/SWIIMETaImageryTier1/MapServer";
      //var etUrl = "https://gis.swiimsystem.com:6443/arcgis/rest/services/SWIIMETaImageryTier1/ImageServer";
      var etQueryTask =  new esri.tasks.QueryTask('https://gis.swiimsystem.com:6443/arcgis/rest/services/SWIIMETaImageryTier1/ImageServer');
      var etQuery = new esri.tasks.Query();

      // TODO make soil layer mo-betta
      var soilLayer = new esri.layers.ArcGISTiledMapServiceLayer("//server.arcgisonline.com/arcgis/rest/services/Specialty/Soil_Survey_Map/MapServer", {"opacity": 0.5});
      var etLayer = new esri.layers.ArcGISDynamicMapServiceLayer(etUrl, {"opacity": 0.5});
      //var etLayer = new esri.layers.ArcGISImageServiceLayer(etUrl, {"opacity": 0.5});

      scope.layers = [];
      scope.soilLayer = { checked: false };
      scope.etLayer = { checked: false };

      scope.baseLayers = [
         { name: 'hybrid', title: 'Hybrid', selected: true },
         { name: 'gray', title: 'Gray' },
         { name: 'streets', title: 'Streets' },
         { name: 'topo', title: 'Topographic' },
         //{ name: 'satellite', title: 'Satellite' },
         //{ name: 'oceans', title: 'Oceans' },
         //{ name: 'osm', title: 'Open Street Map' },
         //{ name: 'national-geographic', title: 'National Geographic' }
      ];

      scope.mapKeys = [
         { icon: '//assets.onfarm.com/images/mapview/soil-moisture.png',     title: 'Soil moisture device' },
         { icon: '//assets.onfarm.com/images/mapview/weather-station.png',   title: 'Weather station' },
         { icon: '//assets.onfarm.com/images/mapview/well-pump.png',         title: 'Irrigation device' },
         { icon: '//assets.onfarm.com/images/mapview/marker.png',            title: 'Uncategorized device' },
         { icon: '//assets.onfarm.com/images/mapview/boundary.png',          title: 'Boundary' }
      ];

      onfarmMap.onLoad(function(map) {
         soilLayer.hide();
         etLayer.hide();
         map.addLayer(soilLayer);
         map.addLayer(etLayer);

         scope.setBasemap = function(layer) {
            angular.forEach(scope.baseLayers, function(layer) {
               layer.selected = false;
            });

            layer.selected = true;
            map._esriMap.setBasemap(layer.name);
         };

         map.on('boundaries-loaded', function() {
            map.getBoundaryGroups().forEach(function(boundaryGroup) {
               boundaryGroup.layer.checked = true;
               scope.layers.unshift(boundaryGroup.layer);
            });
            scope.layers.loaded = true;
         });

         map.on('devices-loaded', function() {
            map.layers.devices.checked = true;
            scope.layers.push(map.layers.devices);
            scope.layers.loaded = true;
         });

         map.on('sensor-groups-loaded', function() {
            map.layers.sensorGroups.checked = true;
            scope.layers.push(map.layers.sensorGroups);
            scope.layers.loaded = true;
         });

         scope.toggleSoilLayer = function(layer) {
            if(layer.checked && !soilLayer.isVisibleAtScale(map._esriMap.getScale())) map._esriMap.setScale(soilLayer.maxScale);
            soilLayer.setVisibility(layer.checked);
         };

         scope.toggleEtLayer = function(layer) {
            if(layer.checked && !etLayer.isVisibleAtScale(map._esriMap.getScale())) map._esriMap.setScale(etLayer.maxScale);
            etLayer.setVisibility(layer.checked);

            map.on('layers-add-result', addTimeSlider(layer.checked));
         };

         scope.toggleLayer = function(layer) {
            layer.setVisibility(layer.checked);
            map._esriMap.infoWindow.hide();
         };


         //This is the start of the ET layer functionality needs to be put into its own service. -- KR 2018.11.27

         var requestSucceeded = function(response) {
            getFieldData(response.fields);
         };

         var requestFailed = function(error) {
            console.log(error);
         };

         var getContent  = function() {
            var requestHandle = esri.request({
               "url": "https:" + etUrl,
               "content": {
                  "f": "json"
               },
               "callbackParamName": "callback"
            });
            requestHandle.then(requestSucceeded, requestFailed);
         };

         var getFieldData = function() {
            etQuery.outFields = ["OBJECTID", "DateStamp", "Shape", "Name", "Category", "ImagerySource"];
            etQuery.where = "OBJECTID >= 1";
            etQueryTask.execute(etQuery, showResults);
         };

         var showResults = function (featureSet) {
            var features = featureSet.features;
            features.forEach(function(item) {
               //console.log(new Date(item.attributes.DateStamp) + " : (" + item.attributes.Shape + "," + item.attributes.Name + "," + item.attributes.Category + "," + item.attributes.ImagerySource + ")");
               return;
            });
         };

         var addTimeSlider = function(checked) {
            getContent();

            var bottomPanel = document.getElementById('bottom_panel');

            var ids = ['time_slider_div'];
            dijit.registry.forEach(function(w) {
               if (dojo.indexOf(ids)) {
                  w.destroyRecursive();
               }
            });

            if (!checked) {
               bottomPanel.innerHTML = "";
            } else {

               bottomPanel.innerHTML = "<div id='time_slider_background'></div>" +
                                 "<div id='time_info'>" +
                                 "<div id='time_slider_div'></div>" +
                                 "</div>";

               var month;
               var day;
               var labels = [];

               var monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];

               var timeSlider = new esri.dijit.TimeSlider({
                  style: "width: 100%;"},
                  dojo.byId('time_slider_div'));
               map.setTimeSlider(timeSlider);

               var timeExtent = new esri.TimeExtent();
               timeExtent.startTime = new Date("05/01/2018 UTC");
               timeExtent.endTime = new Date("10/25/2018 UTC");
               timeSlider.setThumbCount(1);
               timeSlider.singleThumbAsTimeInstant(true);
               timeSlider.createTimeStopsByTimeInterval(timeExtent, 1, "esriTimeUnitsDays");
               timeSlider.setThumbIndexes([0,1]);
               timeSlider.setThumbMovingRate(2000);
               timeSlider.startup();

               var timeSliderLength = timeSlider.timeStops.length;


               for (var i = 0; i < timeSliderLength; i++) {

                  if (i % 10 === 0) {
                     month = monthNames[timeSlider.timeStops.getMonth()];
                     day = timeSlider.timeStops.getDate();
                     labels.push(month + ' ' + day);
                  } else {
                     labels.push(' ');
                  }
               }

               timeSlider.setLabels(labels);
            }
         };
      });

      //This is the end of the ET layer functionality. -- KR 2018.11.27

      // Manually get the soil layer legend data
      $http.get("//server.arcgisonline.com/arcgis/rest/services/Specialty/Soil_Survey_Map/MapServer/legend?f=json").then(function(response) {
         scope.soilLayerLegend = response.data.layers[0].legend;
      });
   },

};

This is my directive for the map-legend-directive.

I get an error of esri.layers.ArcGISImageServiceLayer has no constructor

Any help would be appreciated. Thanks!

topic ArcGISImageServiceLayer has no constructor in ArcGIS Server with JavaScript API Questions

ArcGISImageServiceLayer has no constructor