如何在单个 Google 地图上制作多个叠加层？

Question

我在 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)

  }

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

Answer 1

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

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

您不会在同一张地图上创建两个完全独立的 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 地图公开为 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
    }

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

如何在单个 Google 地图上制作多个叠加层？

How to make multiple Overlays on a single Google Map?

javascript

google-maps

overlay

google-maps-api-3