开发 地图 JS API 2.0 进阶教程 图层 第三方标准图层

第三方标准图层 最后更新时间: 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 标准图层? 查看 WMS 的 OGC 标准

引入 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 标准图层?查看 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);
返回顶部 示例中心 常见问题 智能客服 公众号
二维码