我正在Google地图上使用叠加层在地图上绘制备用图像，并且效果很好。我正在使用OverlayView()，也可以通过绘图API在Overlay上创建一些设计，这很棒。
问题是我想在两者之间添加一个额外的叠加层，以在基础地图上创建一些不透明性（轻微的屏蔽效果）。
我是否在同一张地图上使用两种不同的叠加方法？
在这里。
我将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)
}
叠加层可以正常工作并正在加载。我需要在此叠加层和基础地图之间添加另一个叠加层。
使用panes在地图上叠加元素。
我们不会在同一个地图上创建两个完全独立的OverlayView，因此这在每种情况下都无法使用，但是如果您需要在地图基础层和图片的叠加层。该解决方案非常适合我所处的情况，即我希望在基础地图的顶部设置不透明屏幕，并且我认为它也可以在许多其他情况下使用。花了一段时间才弄清楚，所以我把它放在这里，以防对任何人有用。
[为此，假设您已按照Custom Overlays Documentation设置主叠加层，则可以通过以下方法将代码添加到OverlayView的配置中以制作另一层。
在构造函数中，您为其他图层添加了一个保持div，我们将其称为layer：
/* Set up properties to hold the overlay, which is added in onAdd() */
this.layer_ = null
this.div_ = null
然后，当使用onAdd()启动叠加时，您将设置附加的div。这里的关键部分是正确使用Google地图公开为panes的可用MapPanes供您使用：
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
}
就是这样，您现在应该在主叠加层和基础地图之间出现一个额外的叠加层。