Add a Layer

JS API supports official layers, third-party layers, data layers, etc.

This article explains how to add custom data layers to a map: image layer AMap.ImageLayer.

Image Layer Example

1、Implementation Steps

1.1 Create Layer

const layer = new AMap.createDefaultLayer({
  zooms: [3, 20], 
  visible: true, 
  opacity: 1, 
  zIndex: 0, 
});

1.2 Load layer

const map = new AMap.Map("container", {
  viewMode: "2D", //Default to 2D mode
  zoom: 15, //Map Level
  center: [77.342659, 28.946275],
  showOversea: true, //Enable world Map
  layers: [layer], //layer is the default created layer
});

Prompt

If you only need the default layer when initializing the map, the layers property of the map object can be omitted, the JS API will automatically add a default layer. The layers property value is an array for setting map layers, the array can be one or more layers.

1.3 Create image layer

Add static images as layers on the map, and the image layers will adaptively scale with the zoom level.

//Create image layer
var imageLayer = new AMap.ImageLayer({
  url: "https://amappc.cn-hangzhou.oss-pub.aliyun-inc.com/lbs/static/img/dongwuyuan.jpg", //image Url
  bounds: new AMap.Bounds([77.327911, 28.939229],[77.342659, 28.946275]), //Latitude and longitude of the image extent, input the coordinates of the southwest and northeast corners
  zIndex: 2, 
  zooms: [14, 20], //Set visibility level, [minimum level, maximum level]
});

map.add(imageLayer);

View all AMap.ImageLayer properties and methods

1.4 Show and hide image layers

Simply call show() and hide() on the layer object to control its visibility.

imageLayer.show(); 
imageLayer.hide();