高德地图 sdk 加载 geoserver 发布的瓦片地图服务

前言

最近,碰到了需求,想要在高德 sdk 中使用在 geoserver 里面发布的瓦片地图。

还好经过一番研究,在其官方文档中发现,从新版本(v1.4.3开始)的高德 sdk 开始,已经支持加载第三方 wms/wmts 服务了。

image.png

为了测试一下是否能用,我们先将官方的示例拷贝过来试一试。

wms 服务

先试试 wms 服务加载:

var wms = new AMap.TileLayer.WMS({
  url: "https://ahocevar.com/geoserver/wms",
  blend: false,
  tileSize: 512,
  params: {
    LAYERS: "topp:states",
    VERSION: "1.3.0",
  },
});
wms.setMap(map);

运行起来,你会发现,成功加载了 topp:states 这张矢量地图:


image.png

wmts 服务

再试试官方示例的 wmts 服务加载:

var wms = new AMap.TileLayer.WMTS({
  url:"https://services.arcgisonline.com/arcgis/rest/services/Demographics/USA_Population_Density/MapServer/WMTS/",
  blend: false,
  tileSize: 256,
  params: { Layer: "0", Version: "1.0.0", Format: "image/png" },
});
wms.setMap(map);

你会发现,也可以成功加载:


image.png

但是仔细研究这个示例,你会发现,官方提供的 wmts 服务是加载的 arcgis 提供的瓦片服务。

gwc 方式

我们知道,geoserver 仅提供 gwc 方式来访问 wmts 服务,并且使用 gwc 方式,还能提高瓦片的访问速率。

所以接下来我们研究一下,是否可以在高德 sdk 中,采用 geoserver 提供的 gwc 方式访问 wms 和 wmts 服务。

首先,研究一下 wms 方式,改一下之前的代码:

var wms = new AMap.TileLayer.WMS({
  url: "https://ahocevar.com/geoserver/gwc/service/wms",    // 改为 gwc 方式
  blend: false,
  tileSize: 512,
  params: {
    LAYERS: "topp:states",
    VERSION: "1.3.0",
  },
});

再次运行,发现并没有成功加载图层,打开控制台,看一下相关请求,可以发现会返回如下错误:

image.png

经过一番排查,发现参数里缺少了一个参数 SRS: "EPSG:3857" ,添加上以后,再次尝试:

var wms = new AMap.TileLayer.WMS({
  url: "https://ahocevar.com/geoserver/gwc/service/wms",
  blend: false,
  tileSize: 512,
  params: {
    LAYERS: "topp:states",
    VERSION: "1.3.0",
    SRS: "EPSG:3857",
  },
});
wms.setMap(map);

发现还是有问题:

image.png

瓦片大小对应不上,更改以后,再次尝试:

var wms = new AMap.TileLayer.WMS({
  url: "https://ahocevar.com/geoserver/gwc/service/wms",
  blend: false,
  tileSize: 256,
  params: {
    LAYERS: "topp:states",
    VERSION: "1.3.0",
    SRS: "EPSG:3857",
  },
});
wms.setMap(map);

发现可以成功加载。

image.png

那 wmts 的方式呢?

调整代码如下:

var wms = new AMap.TileLayer.WMTS({
  url: "https://ahocevar.com/geoserver/gwc/service/wmts",
  blend: false,
  tileSize: 256,
  params: { Layer: "topp:states", Version: "1.0.0", Format: "image/png" },
});
wms.setMap(map);

再次运行,发现不能正确获取到瓦片,提示如下错误:


image.png

发现提示请求的参数不正确,但是高德 sdk 官方文档里明确说了,不要添加 tilematrixset 等参数:

image.png

因此可以得出结论,对于 geoserver 的 gwc 方式,高德 sdk 仅支持 wms 服务,不支持 wmts 服务。

结论

如果想要在高德地图中加载 geoserver 发布的瓦片地图服务,得用 wms 的方式,使用方式如下:

var wms = new AMap.TileLayer.WMS({
  url: "https://ahocevar.com/geoserver/wms",
  blend: false,
  tileSize: 512,
  params: {
    LAYERS: "topp:states",
    VERSION: "1.3.0",
  },
});
wms.setMap(map);

或者 gwc 方式:

var wms = new AMap.TileLayer.WMS({
  url: "https://ahocevar.com/geoserver/gwc/service/wms",
  blend: false,
  tileSize: 256,
  params: {
    LAYERS: "topp:states",
    VERSION: "1.3.0",
    SRS: "EPSG:3857",
  },
});
wms.setMap(map);

如果要用 wmts 服务,得用 arcgis 发布的瓦片服务。由于博主也没用过,这里就不过多的涉及了。

如果你非要在高德 sdk 中使用 geoserver 提供的 wmts 服务,也不是没有方法。

你必须得修改 AMap.TileLayer.WMTS 这个类的源码才行,但是由于高德 sdk 并不开源,因此修改起来非常的困难,一般情况下建议直接放弃即可。

其实在高德 sdk 中加载第三方瓦片服务,还存在一个问题,因为高德地图用的是火星坐标系,因此与根据通用的 wgs84 坐标系生成的地图比,会存在偏差。

image.png

比如,下面,是我在高德 sdk 中叠加的我在 geoserver 中发布的影像图,我发布的影像图是未经过加密的,坐标系未 ESPG4326。


image.png

可以看到,当我选取了江苏常州的奥林匹克体育中心这一块,就会发现瓦片地图中奥林匹克体育中心的位置,与高德地图中的位置偏差了很多。

因此想要同时在高德底图上,叠加标准的第三方瓦片图,看起来并不现实。

虽然高德 sdk 提供了坐标转换的接口,但是我们想要实现纠偏,同样得改源码才能实现。

image.png

但是还是同样的问题,高德 sdk 并不开源,想要改源码,着实太困难,并且,对应的接口,也没有提供实现纠偏的参数或者方法。

其实还有一种方式,就是我们发布一张,火星坐标系的影像图。但是这更不可能,因为火星坐标系,由于保密需要,其设置偏移的时候,并不是采用一种公开的算法,而是随机加入偏移,想要保持与高德地图一致,得把我们的图发给高德 sdk 官方的人处理才行。

因此,总结一下,在高德地图 sdk 中加载 geoserver 发布的第三方影像图,确实能加载成功,但是目前不建议使用,除非接下来官方提供了标准地图纠偏相关的方案。

你可能感兴趣的:(高德地图 sdk 加载 geoserver 发布的瓦片地图服务)