arcgis js 4. Add pictures to x map

Among the methods I found on the Internet , It is found that most methods only apply to 3.x edition , There is only one way to introduce customization BaseDynamicLayer The methods available , However, in this way , Unable to meet the needs of dynamically refreshing pictures .

resolvent
step 1： Or use BaseDynamicLayer Introduce pictures

var mainMap = new Map({
    
            basemap:"satellite",
            ground: "world-elevation",
        });
// establish MapView To store various layers 
var mainView = new MapView({
    
   map:mainMap,
   container:"viewDiv",
   center:[110.3147025,37.5991070],
   zoom:13,
});

var CustomImageOverlayLayer = BaseDynamicLayer.createSubclass({
    
   properties: {
    
       picUrl: null,
       extent: null,
       image: null,
       canvas: null,
   },

   // Override the getImageUrl() method to generate URL
   // to an image for a given extent, width, and height.
   getImageUrl: function (extent, width, height) {
    
       // new Image object , It can be understood as DOM
       if (!this.image) {
    
           this.image = new Image();
       }
       this.image.src = this.picUrl;

       //  establish canvas DOM Elements , And set its width and height to be the same as the picture 
       if (!this.canvas) {
    
           this.canvas = canvas = document.createElement("canvas");
       }
       this.canvas.width = 2000;
       this.canvas.height = 2000;

       // The coordinates of the upper left corner convert the screen coordinates , In order to obtain canvas The starting point for drawing pictures 
       var mapPoint = {
    
           x: this.extent.xmin,
           y: this.extent.ymax,
           spatialReference: {
    
               wkid: 4326
           }
       };
       var screenPoint = mainView.toScreen(mapPoint);
       // according to extent Range calculation canvas Draw the width and height of the picture 
       // The lower left corner 
       var leftbottom = {
    
           x: this.extent.xmin,
           y: this.extent.ymin,
           spatialReference: {
    
               wkid: 4326
           }
       };
       var screen_leftbottom = mainView.toScreen(leftbottom);
       // Upper right corner 
       var righttop = {
    
           x: this.extent.xmax,
           y: this.extent.ymax,
           spatialReference: {
    
               wkid: 4326
           }
       };
       var screen_righttop = mainView.toScreen(righttop);
       this.canvas.getContext("2d").drawImage(this.image, screenPoint.x, screenPoint.y, Math.abs(screen_righttop.x - screen_leftbottom.x), Math.abs(screen_righttop.y - screen_leftbottom.y));
       return this.canvas.toDataURL("image/png");

   }
});
const temp = ["t=0.png", "t=180.png","t=360.png","t=540.png","t=1080.png","t=1260.png","t=1440.png","t=1620.png","t=1800.png","t=1980.png","t=2160.png","t=2340.png","t=2520.png","t=2880.png","t=3060.png","t=3420.png","t=3600.png"]		// Name of the image to be traversed 

var ImageOverlayLayer = new CustomImageOverlayLayer({
    
   picUrl: "../images/changePic/"+temp[0],   // Picture path 
   extent: {
    xmin: 110.2237025, ymin: 37.5121070, xmax:110.4497025, ymax: 37.6551070}		// Picture location （ Maximum and minimum longitude and latitude ）
})
mainMap.add(ImageOverlayLayer, 0);	// Put the picture layer into mainMap, And set it at the bottom 

step 2（ The key ）： Realize the dynamic switching of pictures

function showTime()
{
    
    ImageOverlayLayer.refresh()
}
setInterval(showTime, 1);		// Set the layer to refresh automatically every second （ Very important ）
for(var i = 1; i < 17; i++) {
    
    (function (i) {
    
        setTimeout(function () {
    	// Set the timer , Refresh the next picture every three seconds 
            ImageOverlayLayer.picUrl = "../images/changePic/"+temp[i]		// Update the image path and refresh the layer 
            ImageOverlayLayer.refresh()
        }, (i + 1) * 3000);
    })(i)
}

thus , It can be realized in arcgis js 4.x, Dynamic switching of pictures