免费的crm系统推荐,想找搜索引擎优化,如何查询公司做没做网站,网站建设目的意义arcgis js 4.x版本#xff0c;如何加入图片问题#xff1a;如何将自定义图片放入到arcgis的图层当中#xff1f;本人在网上查找的方法中#xff0c;发现大部分方法只适用于3.x版本#xff0c;只有一种引入自定义BaseDynamicLayer的方法可用#xff0c;然而按照这种方式如何加入图片 问题如何将自定义图片放入到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 [t0.png, t180.png,t360.png,t540.png,t1080.png,t1260.png,t1440.png,t1620.png,t1800.png,t1980.png,t2160.png,t2340.png,t2520.png,t2880.png,t3060.png,t3420.png,t3600.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图片的动态切换了