第三方标准图层 最后更新时间: 2023年03月29日
本章将介绍如何通过添加图层在高德地图上展示第三方标准数据。包括:
- WMS 标准数据图层 AMap.TileLayer.WMS
- WMTS 标准数据图层 Map.TileLayer.WMTS
- 非高德官方的栅格图片图层 AMap.TileLayer
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标准
引入 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',
blend: true,
tileSize: 256,
params: {
'LAYERS': 'map:shanghai',
'VERSION': '1.1.0'
}
});
//将图层添加到地图
map.add(wmts);
非高德官方的栅格图片
使用非高德官方的栅格图片,可以在构造 TileLayer 对象时,指定栅格图的 tileUrl 属性。 tileUrl 可以是一个 URL 的拼接字符串,其中的 [x]、 [y]、 [z]代表切片的 x、y、z 坐标位置。
以 Google 地图作为栅格切片为例,设置 tileUrl 为拼接 URL:
// 初始化地图
var map = new AMap.Map('container', {
zoom: 3,
center: [-99.241291, 39.51401]
});
//创建自定义切片图层,指定 getTileUrl 属性
var googleLayer = new AMap.TileLayer({
tileUrl: '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
});
// 将自定义图层添加到地图
map.add(googleLayer);