javascript - 谷歌地图 API v3 上的单图 block WMS 图层

标签 javascript google-maps google-maps-api-3 wms

我正在尝试使用谷歌地图 API 将 WMS 图层添加到谷歌地图 map 。我能够使用以下代码通过平铺 WMS 图层成功完成此操作:

var tileSize = new google.maps.Size(256, 256);

var options = {
    'getTileUrl': googleGetTileUrlFunction,
    'tileSize': tileSize,
    'isPng': true
};

var googleWMSLayer = new google.maps.ImageMapType(options);

其中 googleGetTileUrlFunction 是一个函数,它接收坐标和缩放参数并返回 WMS 请求的 URL。

但是,我需要向同一张 map 添加另一个图层,其中该图层是单个图像,而不是图 block 。由于我在 google map api 中找不到单图 block WMS 图层的对象,因此我尝试设置一个图 block map ,其中图 block 的大小与视口(viewport)相同。我最终得到这个结果:

enter image description here

它显然仍然是平铺的,并且没有正确居中。有没有办法强制 Google map API 根据 WMS 请求在指定位置绘制单个图 block ?

编辑:以下是谷歌地图渲染的 WMS 图层与 WMS 请求返回的图像的比较: enter image description here WMS 图像与 map 完美对齐,您可以清楚地看到东海岸。我正在寻找一种使用谷歌地图 API 在视口(viewport)上显示该图像的方法。

最佳答案

Ground overlays解决了我的问题。据我了解,他们在 map 上的指定坐标处显示图像。

我没有创建 google.maps.ImageMapType,而是创建了一个新的地面叠加层:

var overlay = new google.maps.GroundOverlay(
    url,
    imageBounds
);

overlay.setMap(gmap);

url 是我的 WMS 请求的 URL,imageBounds 是描述图像每一侧坐标的对象。

每次平移或缩放 map 时,我都会通过生成新的请求 URL 来删除之前的叠加层并用新的叠加层替换,其中边界框参数 (BBOX) 是 map 的视口(viewport)。

为此,我必须将叠加层和生成 WMS URL 的函数保存在可在处理 map 平移事件的函数中访问的变量中。

我仍然有一些小的投影问题需要解决,但这看起来是一个有效的方法。

编辑:我实际上最终制作了一个自定义叠加层来解决我的投影问题。这里有一个教程:https://developers.google.com/maps/documentation/javascript/customoverlays

关于javascript - 谷歌地图 API v3 上的单图 block WMS 图层,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37552717/

相关文章:

javascript - 使用 JQuery 压缩 Javascript 条件 block

javascript - 如何在页面加载时添加类之前确保元素已加载

android - 重绘/刷新逐项叠加? (安卓/谷歌地图 API)

javascript - 谷歌地图 API - 未捕获的 ReferenceError : directionsService is not defined

javascript - 如何为绘制的 GeoJson 要素分配唯一的 ID,然后根据 ID 删除它们?

javascript - 我什么时候应该使用 icepick.merge 而不是 lodash.merge

javascript - 使用 JavaScript 显示/隐藏表格数据

google-maps - 自定义 Flutter Google Map 中的中心位置按钮

java - 如何在 Android 中将 Google map 的最大缩放级别设置为 30?

javascript - 单击外部链接时的标记位置