Add Layers Using Custom Data

This article introduces how to add custom data to the map, including:

1. Image Layer AMap.ImageLayer
2. Canvas Layer AMap.CanvasLayer
3. Flexible Tile Layer TileLayer.Flexible

1、Images as custom layers

This section introduces how to add custom image resources to the map.

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

var map = new AMap.Map("container", {
  center: [77.342659, 28.946275],
  showOversea: true, //Enable world Map
  zoom: 15,
});

//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, //Layer hierarchy
  zooms: [15, 20], //Set visibility level, [minimum level, maximum level]
});

//Add the layer to the map instance
map.add(imageLayer);

2、Canvas as a custom layer

Add Canvas as a layer on the map, and the Canvas layer will adaptively scale with the zoom level.

var map = new AMap.Map("container", {
  viewMode: "3D",
  zoom: 13,
  center: [77.328911, 28.937229],
  showOversea: true, //Enable world Map
});
//Create and set up canvas
var canvas = document.createElement("canvas");
canvas.width = canvas.height = 200;
var context = canvas.getContext("2d");
context.fillStyle = "rgb(0,100,255)";
context.strokeStyle = "white";
context.globalAlpha = 1;
context.lineWidth = 2;
var radious = 0;
//Call canvas for drawing
var draw = function () {
  context.clearRect(0, 0, 200, 200);
  context.globalAlpha = (context.globalAlpha - 0.01 + 1) % 1;
  radious = (radious + 1) % 100;
  context.beginPath();
  context.arc(100, 100, radious, 0, 2 * Math.PI);
  context.fill();
  context.stroke();
  AMap.Util.requestAnimFrame(draw);
};
//Create canvas layer
var CanvasLayer = new AMap.CanvasLayer({
  canvas: canvas, //Canvas DOM Object
  bounds: new AMap.Bounds([77.328911, 28.937229],[77.342659, 28.946275]), //Latitude and longitude of the image extent, input the coordinates of the southwest and northeast corners
  zooms: [3, 18],
});
//Add canvas to the map
map.addLayer(CanvasLayer);
draw();

3、Flexible Tile Layer TileLayer.Flexible

This layer allows customization of the content of each slice. The content of the slice is passed by specifying the createTile attribute of the TileLayer.Flexible class. The specific method is as follows:

var map = new AMap.Map("container", {
  zoom: 15,
  showOversea: true, //Enable world Map
});
//Create Flexible Layer
var flexibleLayer = new AMap.TileLayer.Flexible({
  cacheSize: 30, //Quantity of Cached Tiles
  opacity: 0.3, 
  createTile: function (x, y, z, success, fail) {
    /**
     * Custom Slice Attributes, Returning Slice Image or Canvas
     * @param x: Horizontal Slice Numbering
     * @param y: Slice vertical number
     * @param z: Slice level
     * @param success: Creation success callback
     * @param fail: Creation failure callback
     */
    if ((x + y) % 3) {
      fail();
      return;
    }

    var img = document.createElement("img");
    img.onload = function () {
      success(img);
    };
    img.crossOrigin = "anonymous"; //Must be added, and the image must have cross-domain headers
    img.onerror = function () {
      fail();
    };

    img.src = "https://a.amap.com/jsapi_demos/static/images/amap.png";
  },
});

//Add layers to the map
map.add(flexibleLayer);