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

arcgis js 4.x版本，如何加入图片

问题：如何将自定义图片放入到arcgis的图层当中？

本人在网上查找的方法中，发现大部分方法只适用于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对象，可以理解为DOMif (!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)
}