如何在单个谷歌地图上制作多个叠加层?

Question

我正在使用谷歌地图上的叠加层在地图上绘制备用图像，它工作正常。我正在使用OverlayView()，我也能够通过绘图 API 在叠加层上创建一些设计，这很棒。

问题是我想在两者之间添加一个额外的叠加层，以在底层地图上创建一些不透明度(轻微的屏蔽效果(。

我是否在同一张地图上使用两种不同的叠加方法？

这就是它所在的地方。

我this.maps设置为 GMaps 库，this.map设置为地图实例本身。

createOverlay() {
MyOverlay.prototype = new this.maps.OverlayView()
/* Constructor for the OverlayView() class */
function MyOverlay(bounds, image, map) {
/* Set up local properties */
this.bounds_ = bounds
this.image_ = image
this.map_ = map
/* Set up property to hold the overlay, which is added in onAdd() */
this.div_ = null
/* Explicitly attach this overlay. */
this.setMap(map)
}
/**
* onAdd() - called when the map's panes are ready and the overlay is added
*/
MyOverlay.prototype.onAdd = function () {
/* Create the element to hold the overlay */
const evDiv = document.createElement('div')
evDiv.style.borderStyle = 'none'
evDiv.style.borderWidth = '0px'
evDiv.style.position = 'absolute'
/* Create the image element for the overlay and attach it */
const evImg = document.createElement('img')
evImg.src = this.image_
evImg.style.width = '100%'
evImg.style.height = '100%'
evImg.style.position = 'absolute'
evDiv.appendChild(evImg)
this.div_ = evDiv
/* Attach the elements to the map */
const panes = this.getPanes()
panes.overlayLayer.appendChild(evDiv)
}
/**
* draw() - called whenever the map's tiles are touched to adjust the overlay
*        - uses sw and ne coords of the overlay to set its size and peg it to
*          the correct position and size.
*/
MyOverlay.prototype.draw = function () {
/* Retrieve the projection from the overlay */
const overlayProjection = this.getProjection()
/* Convert the coords to pixels and resize the div */
const sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest())
const ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast())
const div = this.div_
div.style.left = sw.x + 'px'
div.style.top = ne.y + 'px'
div.style.width = (ne.x - sw.x) + 'px'
div.style.height = (sw.y - ne.y) + 'px'
}
/* onRemove() - Called if we remove the overlay via setting it to 'null' - Not needed yet */
MyOverlay.prototype.onRemove = function () {
this.div_.parentNode.removeChild(this.div_)
this.div_ = null
}
const { src, latMax, lngMax, latMin, lngMin } = this.state.Imagery
const boundaries = new this.maps.LatLngBounds(
new this.maps.LatLng(latMin, lngMin),
new this.maps.LatLng(latMax, lngMax),
)
this.mapOverlay = new MyOverlay(boundaries, src, this.map)
}

覆盖层工作正常并加载。我需要在此叠加层和底层地图之间添加另一个叠加层。

Answer 1

使用panes在地图上对叠加元素进行分层。

这并非在所有情况下都有效，但如果在地图基础图层和图像叠加层之间需要某种类型的额外 DOM 层，则效果很好。此解决方案非常适合我所处的情况，我想要在底层地图顶部有一个不透明的屏幕。

您不会在同一张地图上创建两个完全独立的OverlayView。

相反，要执行此操作，假设您已按照自定义叠加文档设置主叠加，请将代码添加到叠加视图的配置中以创建另一个层。

在构造函数中，您为附加层添加一个保持div，我们将其称为layer：

/* Set up properties to hold the overlay, which is added in onAdd() */
this.layer_ = null
this.div_ = null

然后，当启动带有onAdd()的覆盖时，您可以设置其他div。这里的关键部分是正确使用谷歌地图公开为MapPanes供您使用的可用panes：

MyOverlay.prototype.onAdd = function () {
/* Create a layer in between google and overlay tiles */
const layerDiv = document.createElement('div')
layerDiv.style.backgroundColor = 'white'
layerDiv.style.opacity = '0.5'
layerDiv.style.position = 'absolute'
/* Any other properties here for your additional layer element */
this.layer_ = layerDiv
/* Attach the elements to the proper pane layers of the map */
const panes = this.getPanes()
panes.mapPane.appendChild(layerDiv)
panes.overlayLayer.appendChild(div)

您不必触摸draw()功能，但在onRemove()中，您需要删除其他叠加窗格：

MyOverlay.prototype.onRemove = function () {
this.layer_.parentNode.removeChild(this.mask_)
this.layer_ = null
this.div_.parentNode.removeChild(this.div_)
this.div_ = null
}

就是这样，您现在应该在主叠加层和基础地图之间出现一个额外的叠加层。