arcgis api 4.x for js 自定義疊加圖片圖層實現地圖疊加圖片展示（附源碼下載）

前言

關於本篇功能實現用到的 api 涉及類看不懂的，請參照 esri 官網的 arcgis api 4.x for js：esri 官網 api，里面詳細的介紹 arcgis api 4.x 各個類的介紹，還有就是在線例子：esri 官網在線例子，這個也是學習 arcgis api 4.x 的好素材。

內容概覽

arcgis api 4.x for js 實現地圖疊加圖片效果
源代碼 demo 下載

實現效果圖：

實現思路

通過 arcgis api 4.x 提供自定義圖層的接口 BaseDynamicLayer.createSubclass({})，創建疊加圖片圖層，實現地圖疊加圖片

• 創建疊加圖片圖層調用代碼

var ImageOverlayLayer = new CustomImageOverlayLayer({
picUrl:"0.png",
extent:{xmin:113.3596,ymin:23.1239,xmax:113.3748,ymax:23.1354}
});
map.add(ImageOverlayLayer);

picUrl： 圖片路徑
extent： 圖片范圍疊加地圖顯示

• 疊加圖片圖層完整代碼

//自定義疊加圖片圖層
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;
……

更多的詳情見：GIS之家小專欄

文章尾部提供源代碼下載，對本專欄感興趣的話，可以關注一波