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对象,可以理解为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,图片的动态切换了