arcgis api 4.x for js custom overlay images superimposed layers to achieve Map Photo Gallery (with source code download)

Foreword

About Benpian function used to achieve api involving class can not read, see arcgis esri official website for JS api 4.x: ESRI's official website api , which describes in detail the introduction arcgis api 4.x each class, there is online example: ESRI's official website online examples , this is a good learning materials arcgis api 4.x of.

At a Glance

arcgis api 4.x for js map overlay image effects to achieve
the source code demo download

Achieve renderings:

Realization of ideas

Provide custom layer by arcgis api 4.x Interface BaseDynamicLayer.createSubclass ({}), create an overlay layer picture, achieve map overlay pictures

• Create an overlay imagery layer calling code

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

picUrl: Image Path
extent: Image overlay map display range

• Image overlay layer complete code

//自定义叠加图片图层
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之家小专栏

文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波