高德地图 sdk 加载 geoserver 发布的瓦片地图服务
前言
最近,碰到了需求,想要在高德 sdk 中使用在 geoserver 里面发布的瓦片地图。
还好经过一番研究,在其官方文档中发现,从新版本(v1.4.3开始)的高德 sdk 开始,已经支持加载第三方 wms/wmts 服务了。
为了测试一下是否能用,我们先将官方的示例拷贝过来试一试。
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 这张矢量地图:
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);
你会发现,也可以成功加载:
但是仔细研究这个示例,你会发现,官方提供的 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",},
});
再次运行,发现并没有成功加载图层,打开控制台,看一下相关请求,可以发现会返回如下错误:
经过一番排查,发现参数里缺少了一个参数 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);
发现还是有问题:
瓦片大小对应不上,更改以后,再次尝试:
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 的方式呢?
调整代码如下:
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);
再次运行,发现不能正确获取到瓦片,提示如下错误:
发现提示请求的参数不正确,但是高德 sdk 官方文档里明确说了,不要添加 tilematrixset
等参数:
因此可以得出结论,对于 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 坐标系生成的地图比,会存在偏差。
比如,下面,是我在高德 sdk 中叠加的我在 geoserver 中发布的影像图,我发布的影像图是未经过加密的,坐标系未 ESPG4326。
可以看到,当我选取了江苏常州的奥林匹克体育中心这一块,就会发现瓦片地图中奥林匹克体育中心的位置,与高德地图中的位置偏差了很多。
因此想要同时在高德底图上,叠加标准的第三方瓦片图,看起来并不现实。
虽然高德 sdk 提供了坐标转换的接口,但是我们想要实现纠偏,同样得改源码才能实现。
但是还是同样的问题,高德 sdk 并不开源,想要改源码,着实太困难,并且,对应的接口,也没有提供实现纠偏的参数或者方法。
其实还有一种方式,就是我们发布一张,火星坐标系的影像图。但是这更不可能,因为火星坐标系,由于保密需要,其设置偏移的时候,并不是采用一种公开的算法,而是随机加入偏移,想要保持与高德地图一致,得把我们的图发给高德 sdk 官方的人处理才行。
因此,总结一下,在高德地图 sdk 中加载 geoserver 发布的第三方影像图,确实能加载成功,但是目前不建议使用,除非接下来官方提供了标准地图纠偏相关的方案。
高德地图 sdk 加载 geoserver 发布的瓦片地图服务相关推荐
- ios 高德地图加载瓦片地图_OpenLayers加载谷歌地球离线瓦片地图
本文使用OpenLayers最新版本V5.3.0演示:如何使用OpenLayer加载谷歌地球离线瓦片地图.OpenLayers 5.3.0下载地址为:https://github.com/openla ...
- Cesium加载geoserver发布的wms地图服务-设置BBOX参数无效
一.问题描述: 地图服务是geoserver发布的wms地图服务,使用cesium加载渲染,加载代码如下. // Cesium加载wms var wms = new Cesium.WebMapServ ...
- Vue+Openlayers加载Geoserver发布的TileWMS后更换shp数据源的流程
场景 Vue中使用Openlayers加载Geoserver发布的TileWMS: Vue中使用Openlayers加载Geoserver发布的TileWMS_BADAO_LIUMANG_QIZHI的 ...
- Vue中使用Openlayers加载Geoserver发布的TileWMS时单击获取shp文件的坐标信息
场景 Vue中使用Openlayers加载Geoserver发布的TileWMS: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/ ...
- Vue中使用Openlayers加载Geoserver发布的TileWMS
场景 Openlayers下载与加载geoserver的wms服务显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114 ...
- ArcGIS JS API加载GeoServer发布的WFS服务
文章目录 前言 主要代码 总结 参考链接 前言 WFS(Web Feature Service),OGC标准下的要素服务.其支持的主要操作如下: GetCapabilities (discovery ...
- Mapbox加载天地图CGCS2000矢量瓦片地图服务
1.背景 最近在做天地图的项目,要基于MapBox添加CGCS2000矢量切片数据,但是 Mapbox 只支持web 墨卡托(3857)坐标系的数据.Github有专业用户修改了mapbox-gl的相 ...
- osgearth加载本地离线影像瓦片地图
osgearth加载本地离线影像瓦片地图案例 说明 本实例演示重新编译bing驱动直接加载本地离线影像瓦片地图. 本实例使用软件版本:osg3.3.1和osgEarth2.5 VC10编译环境(参考o ...
- OpenLayers加载谷歌地球离线瓦片地图
本文使用OpenLayers最新版本V5.3.0演示:如何使用OpenLayer加载谷歌地球离线瓦片地图.OpenLayers 5.3.0下载地址为:https://github.com/openla ...
最新文章
- python安装虚拟环境virtualenv
- mass Framework event模块 v8
- 【postgresql】远程连接
- 13、HTML <meta>标签
- python开发中遇到的难题_初学者在Python开发中常见的问题(上)
- 关于c/c++语言中*和*使用的详细分析
- 中国地质大学网络计算机考试试题,2017年中国地质大学(武汉)计算机学院830计算机软件综合之计算机网络考研题库...
- 有人说如果车速每小时超过120公里,爆胎时无法挽回是真的吗?
- python 打印输出xml数据问题
- 算法不会,尚能饭否之排序——插入排序法(用链表实现)
- php7视频处理扩展_PHP7扩展开发之类型处理
- poj 2606 Rabbit hunt 解题报告
- 微信公众号正式号网络授权域名操作
- 打包报错:Unable to find a single main class from the following candidates
- eclipse安装red5插件,创建red5项目
- php函数大小写转化,php大小写转换函数(strtolower、strtoupper)用法介绍
- 计算机键盘打字基础知识,计算机基础知识:计算机键盘的使用
- MapReduce模型过程详解
- php在线留言,PHP在线提交留言直接发到邮箱
- vs2012 access数据库 crystalreport
热门文章
- 【T+】畅捷通T+往来单位档案中默认票据类型设置为“必录”
- 解读PureMVC框架
- (四)Docker网络可视化面板
- 视觉基础:关于机器视觉、机器学习及人工智能领域
- uniapp框架如何实现仿微信相册插件 | 图视频编辑 + 压缩
- java毕业设计办公自动化管理系统Mybatis+系统+数据库+调试部署
- 第7章第27节:三图排版:三张图片交错对齐排列 [PowerPoint精美幻灯片实战教程]
- BP神经网络——基于近红外光谱的汽油辛烷值预测
- Windows日常使用快捷方式
- c语言将时速转换成配速,都是速度指标,为何跑步用“配速”而非“时速”?3个原因请明白...