示例中心
功能在线体验
控制台
您现在的位置: 开发 > 地图 JS API > 教程 > 图层 > 第三方标准图层 >

高德 开发 地图 JS API 教程 图层 第三方标准图层

更新时间:2018年07月06日


本章介绍如何在高德地图内部使用第三方标准图层,包括:

  1. WMTS 标准图层
  2. WMTS 标准图层
  3. 非高德官方的栅格图片

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);

查看全部属性和方法


WMTS 标准图层

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

查看全部属性和方法    亲手试一试

非高德官方的栅格图片

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

以 Google 地图作为栅格切片为例,设置 getTileUrl 为拼接 URL:

//创建自定义切片图层,指定 getTileUrl 属性
var googleLayer = new AMap.TileLayer({
   getTileUrl: 'http://mt{1,2,3,0}.google.cn/vt/lyrs=m@142&hl=zh-CN&gl=cn&x=[x]&y=[y]&z=[z]&s=Galil',
   zIndex:2
});

googleLayer.setMap(map);



或者设置  getTileUrl 为返回切片 url 的 function:

//创建自定义切片图层,指定 getTileUrl 属性
var googleLayer = new AMap.TileLayer({
    zIndex:2,
    getTileUrl: function(x , y, z){
      return 'http://mt1.google.cn/vt/lyrs=m@142&hl=zh-CN&gl=cn&x='+ x +'&y='+ y +'&z='+ z +'&s=Galil';
   }
});

googleLayer.setMap(map);
移动端
示例中心
功能
在线体验
常见问题