Coverage/Layer Management

This article introduces methods for adding, getting, and removing coverages and layers, and how to operate a collection of coverages, including

1. Add, Get, Remove Coverages
2. Add, Set, Get, Remove Layers
3. Coverage Collection
4. GeoJSON class

1、Add, get, and remove overlays

1.1 Add overlay

There are various types of overlays, including point markers, vector graphics, information windows, etc., all of which can be added using the add() method.

//Construct point marker
var marker = new AMap.Marker({
  icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
  position: [100.454343, 13.816334],
});
//Construct a vector circle
var circle = new AMap.Circle({
  center: new AMap.LngLat("100.747541", "13.826335"), 
  radius: 1000, // Unit: meters
  strokeColor: "#F33", 
  strokeOpacity: 1, 
  strokeWeight: 3, 
  fillColor: "#ee2200", 
  fillOpacity: 0.35, 
});
//Add point markers and vector circles to the map separately
map.add(marker);
map.add(circle);

map.add([marker, circle]); //Add point markers and vector circles to the map simultaneously

1.2 Get overlays

Use the getAllOverlays(type) method to get the added overlays. The type parameter includes marker, circle, polyline, and polygon. All types of overlays are returned by default.

//Get all added overlays
map.getAllOverlays();
//Get only all added markers
map.getAllOverlays('marker');

1.3 Remove overlays

You can use the remove() method to remove overlays. The parameter can be a single overlay object or an array including multiple overlay objects. You can also use the clearMap() method to remove all overlays

//Use the remove method to remove overlays. The parameter can be a single overlay object or an array including multiple overlays

//Remove point markers separately
map.remove(marker);

//Remove both point markers and vector circles
map.remove([marker,circle]);

//Use the clearMap method to remove all overlays
map.clearMap();

2、Add, set, get, and remove layers

2.1 Add Layer

You can use the add() method to add various types of layers on the map, such as the official satellite, road network layers from Gaode, or third-party and custom layers.

//Create Map
const map = new AMap.Map("container", {
  zoom: 15,
  showOversea: true, //Enable world Map
  center: [77.342659, 28.946275],
});
//Construct image layers
var layer1 = new AMap.ImageLayer({
  url: "https://amappc.cn-hangzhou.oss-pub.aliyun-inc.com/lbs/static/img/dongwuyuan.jpg", 
  bounds: new AMap.Bounds([77.327911, 28.939229],[77.342659, 28.946275]), 
  zIndex: 10, //Hierarchy of layers
  zooms: [14, 20],
});

map.add(layer1);

var layers = [layer1,...];
//Add to the map
map.add(layers);

2.2 Set layers

Use the setLayers() method to set layers, which can add multiple layers to the map at once, replacing the original layers on the map.

var layers = [layer1, ...];
//Set Layer on Map
map.setLayers(layers);

2.3 Get Layer

You can get map layer data through the getLayers() method

//Get Map Layer Data
map.getLayers();

2.4 Remove Layer

Remove map layers via the remove() method

//Remove a layer
map.remove(layer1);

map.remove([layer1, ...]); 

3、Overlay Group

3.1 Overlay Group OverlayGroup

When users need to perform operations on a group of overlays as a whole, they can use the instance created by the AMap.OverlayGroup class to avoid setting properties one by one through loops.

//Overlay 1
var polyline = new AMap.Polyline({
  path: [
    new AMap.LngLat("100.3486", "13.809666"),
    new AMap.LngLat("100.376066", "13.700286"),
  ],
});
//Overlay 2
var circle = new AMap.Circle({
  center: new AMap.LngLat("100.496229", "13.783659"),
  radius: 50, //Unit: meter
});

//Create an overlay group, passing in an array of overlays
var overlayGroup = new AMap.OverlayGroup([polyline, circle]);
//Set the same attribute for this overlay group
overlayGroup.setOptions({
  strokeColor: "red",
  strokeWeight: 5,
});
//Uniformly add to the map instance
map.add(overlayGroup);
//It is also possible to perform unified show/hide operations on the group
overlayGroup.hide(); //Overlay hidden
//overlayGroup.show(); 

Moreover, if the overlayGroup has already been added to the map instance, any overlays subsequently added to the overlayGroup will also be automatically added to the map instance, and the same applies when they are removed.

var marker = new AMap.Marker({
  position: new AMap.LngLat("100.483182", "13.814333"),
});
overlayGroup.addOverlay(marker); //Add a new overlay to the group
//overlayGroup.removeOverlay(polyline1); //Remove an overlay from the group

4、GeoJSON Class

The GeoJSON class inherits from OverLayGroup and is also a class that operates on a group of overlays. The difference is, here the AMap.GeoJSON plugin is used to convert GeoJSON type data into OverlayGroup, and then by specifying properties such as getMarker, getPolyline, etc., you can obtain the converted data to draw the corresponding overlays. The specific methods are as follows:

//Define a string containing GeoJSON data that describes a polygon feature
var geoJsonData = `{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[100.356839, 13.83767],[100.358213, 13.744978],[100.548414, 13.721632],[100.575879, 13.817667]]]},"properties":{"name":"Polygon"}}]}`;
//Asynchronously load the AMap.GeoJSON plugin, which is used to parse and render GeoJSON data
AMap.plugin("AMap.GeoJSON", function () {
  //Create a geoJSON instance, pass in GeoJSON data and other options
  var geoJson = new AMap.GeoJSON({
    //Parse GeoJSON data in string form into an object
    geoJSON: JSON.parse(geoJsonData),
    //Define a callback function to create a polygon object, which receives a geojson object and an lnglats array as parameters
    getPolygon: function (geojson, lnglats) {
      //Return a new AMap.Polygon object, passing in options such as path, fill opacity, border color, and fill color
      //You can also customize getMarker and getPolyline to create marker and polyline objects
      return new AMap.Polygon({
        path: lnglats,
        fillOpacity: 0.8,
        strokeColor: "white",
        fillColor: "red",
      });
    },
  });
  //Add the geoJson object to the map
  map.add(geoJson);
});