ArcGISImageServiceLayer has no constructor

341
0
12-19-2018 01:24 PM
KevinRobertson
New Contributor

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!

0 Kudos
0 Replies