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) }

至此，就可以實現在arcgis js 4.x，圖片的動態切換了

總結

以上是生活随笔為你收集整理的arcgis js 4.x 地图中加入图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。