第三方标准图层 最后更新时间: 2024年02月04日

本文介绍如何通过添加图层在高德地图上展示第三方标准数据。包括：

1. WMS 标准数据图层 AMap.TileLayer.WMS
2. WMTS 标准数据图层 Map.TileLayer.WMTS
3. 非高德官方的栅格图片图层 AMap.TileLayer

1、WMS 标准图层

WMS 标准图层是用于加载 OGC 标准的 WMS 地图服务的一种图层类，自 v1.4.3 新增，仅支持 EPSG3857 坐标系统的 WMS 图层。

引入 WMS 图层：

//创建地图实例
var map = new AMap.Map("container", {
  zoom: 3,
  center: [-99.241291, 39.51401],
});

//创建 WMS 标准图层
var wms = new AMap.TileLayer.WMS({
  url: "https://ahocevar.com/geoserver/wms", //WMS 服务的 url 地址
  blend: false, //地图级别切换时，不同级别的图片是否进行混合
  tileSize: 512, //加载 WMS 图层服务时，图片的分片大小
  params: {
    LAYERS: "topp:states",
    VERSION: "1.3.0",
  }, //OGC 标准的 WMS 地图服务的 GetMap 接口的参数
});

map.add(wms);

2、WMTS 标准图层

WMTS 标准图层是用于加载 OGC 标准的 WMTS 地图服务的一种图层类，自 v1.4.3 新增，仅支持 EPSG3857 坐标系统的 WMTS 图层。

引入 WMTS 图层：

//初始化地图
var map = new AMap.Map('container', {
  zoom: 3,
  center: [-99.241291, 39.51401]
}); 
 
//创建 WMTS 标准图层
var wmts = new AMap.TileLayer.WMTS({
  url: 'https://wmts-service.pre-fc.alibaba-inc.com/amap/service/wmts', //WMTS 服务的 url 地址
  blend: true, //地图级别切换时，不同级别的图片是否进行混合
  tileSize: 256, //加载 WMTS 图层服务时，图片的分片大小
  params: {
    'LAYERS': 'map:shanghai',
    'VERSION': '1.1.0'
  } //OGC 标准的 WMTS 地图服务的 GetMap 接口的参数
});

//将图层添加到地图
map.add(wmts);

3、非高德官方的栅格图片图层

使用非高德官方的栅格图片，可以在构造 TileLayer 对象时，指定栅格图的 tileUrl 属性。 tileUrl 可以是一个 URL 的拼接字符串，其中的 [x]、 [y]、 [z]代表切片的 x、y、z 坐标位置。

以 Google 地图作为栅格切片为例，设置 tileUrl 为拼接 URL：

//初始化地图
var map = new AMap.Map('container'); 

//创建自定义切片图层，指定 getTileUrl 属性
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
});

//将自定义图层添加到地图
map.add(googleLayer);