我正在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在同一张地图上创建两个完全分开的，因此这并非在每种情况下都适用，但是如果您需要在地图基础层和图像叠加层之间需要某种类型的额外DOM层，那么它将很好。该解决方案非常适合我所处的情况，即我希望在基础地图的顶部设置不透明屏幕，并且我认为它也可以在许多其他情况下使用。花了一段时间才弄清楚，所以我把它放在这里，以防对任何人有用。
为此，假设您已遵循“自定义叠加层文档”来设置您的主要叠加层，则可以按照以下方法将代码添加到OverlayView的配置中以制作另一个层。
在构造函数中，为您的附加层添加一个保持div，我们将其称为layer：
/* Set up properties to hold the overlay, which is added in onAdd() */
this.layer_ = null
this.div_ = null
然后，使用初始化叠加层时onAdd()，您将设置其他div。这里的关键部分是正确使用panesgoogle maps作为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
}
就是这样，您现在应该在主叠加层和基础地图之间出现一个额外的叠加层。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句