arcgis js 4.x 地图中加入图片

本人在网上查找的方法中，发现大部分方法只适用于3.x版本，只有一种引入自定义BaseDynamicLayer的方法可用，然而按照这种方式，无法满足动态刷新图片的需求。

解决方法
step 1：还是使用BaseDynamicLayer引入图片

var mainMap = new Map({
    
            basemap:"satellite",
            ground: "world-elevation",
        });
//创建MapView来存放各个图层
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) {
    
       //新Image对象，可以理解为DOM
       if (!this.image) {
    
           this.image = new Image();
       }
       this.image.src = this.picUrl;

       // 创建canvas DOM元素，并设置其宽高和图片一样
       if (!this.canvas) {
    
           this.canvas = canvas = document.createElement("canvas");
       }
       this.canvas.width = 2000;
       this.canvas.height = 2000;

       //左上角坐标转换屏幕坐标,为了获取canvas绘制图片的起点
       var mapPoint = {
    
           x: this.extent.xmin,
           y: this.extent.ymax,
           spatialReference: {
    
               wkid: 4326
           }
       };
       var screenPoint = mainView.toScreen(mapPoint);
       //根据extent范围计算canvas绘制图片的宽度以及高度
       //左下角
       var leftbottom = {
    
           x: this.extent.xmin,
           y: this.extent.ymin,
           spatialReference: {
    
               wkid: 4326
           }
       };
       var screen_leftbottom = mainView.toScreen(leftbottom);
       //右上角
       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"]		//待遍历的图片名称

var ImageOverlayLayer = new CustomImageOverlayLayer({
    
   picUrl: "../images/changePic/"+temp[0],   //图片路径
   extent: {
    xmin: 110.2237025, ymin: 37.5121070, xmax:110.4497025, ymax: 37.6551070}		//图片位置（最大最小经纬度）
})
mainMap.add(ImageOverlayLayer, 0);	//将图片图层放入mainMap，并设置在最底层

step 2（关键）：实现图片动态切换

function showTime()
{
    
    ImageOverlayLayer.refresh()
}
setInterval(showTime, 1);		//设置图层每秒自动刷新一次（很重要）
for(var i = 1; i < 17; i++) {
    
    (function (i) {
    
        setTimeout(function () {
    	//设置定时器，每三秒刷新后一张图片
            ImageOverlayLayer.picUrl = "../images/changePic/"+temp[i]		//更新图片路径并刷新图层
            ImageOverlayLayer.refresh()
        }, (i + 1) * 3000);
    })(i)
}

至此，就可以实现在arcgis js 4.x，图片的动态切换了