Third-party standard layers

This article explains how to display third-party standard data on Amap by adding layers. Includes:

1. WMS standard data layer AMap.TileLayer.WMS
2. WMTS standard data layer Map.TileLayer.WMTS
3. Non-official Amap raster image layer AMap.TileLayer

1、WMS Standard Layer

The WMS standard layer is a layer class used to load WMS map services that comply with OGC standards. It was added since v1.4.3 and only supports WMS layers in the EPSG3857 coordinate system.

Introducing WMS Layer:

//Create a map instance
var map = new AMap.Map("container", {
  zoom: 3,
  center: [-99.241291, 39.51401],
  showOversea: true, //Enable world Map
});

//Create a WMS standard layer
var wms = new AMap.TileLayer.WMS({
  url: "https://ahocevar.com/geoserver/wms", //The URL address of the WMS service
  blend: false, //Whether the images of different levels are mixed when switching map levels
  tileSize: 512, //The tile size of the image when loading the WMS layer service
  params: {
    LAYERS: "topp:states",
    VERSION: "1.3.0",
  }, //Parameters of the GetMap interface for WMS map services compliant with OGC standards
});

map.add(wms);

2、WMTS Standard Layer

The WMTS Standard Layer is a layer class used to load WMTS map services compliant with OGC standards. It was added since version v1.4.3 and only supports WMTS layers with the EPSG3857 coordinate system.

Introducing WMTS Layer:

//Initialize the map
var map = new AMap.Map('container', {
  zoom: 3,
  center: [-99.241291, 39.51401]
  showOversea: true, //Enable world Map
}); 
 
//Create WMTS standard layer
var wmts = new AMap.TileLayer.WMTS({
  url: 'https://wmts-service.pre-fc.alibaba-inc.com/amap/service/wmts', //URL address of WMTS service
  blend: true, //Whether the images of different levels are mixed when switching map levels
  tileSize: 256, //The tile size of images when loading WMTS layer services
  params: {
    'LAYERS': 'map:shanghai',
    'VERSION': '1.1.0'
  } //Parameters of the GetMap interface for OGC-standard WMTS map services
});

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

3、Non-official Amap raster image layer

To use non-official Amap raster images, you can specify the tileUrl property of the raster map when constructing the TileLayer object. The tileUrl can be a concatenated URL string, where [x], [y], [z] represent the x, y, z coordinate positions of the tile.

Taking Google Maps as a raster tile example, set tileUrl as a concatenated URL:

//Initialize the map
var map = new AMap.Map('container'); 

//Create a custom tile layer and specify the getTileUrl property
var googleLayer = new AMap.TileLayer({
   tileUrl: 'https://wprd0{1,2,3,4}.is.autonavi.com/appmaptile?x=[x]&y=[y]&z=[z]&size=1&scl=1&style=8&ltype=11',
   zIndex:2
});

//Add custom layer to the map
map.add(googleLayer);