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

使用OverlayView在地图上叠加元素。

我们不会在同一张地图上创建两个完全独立的layer，因此这并非在每种情况下都适用，但是如果您需要在地图之间添加某种类型的DOM层，则效果很好基本图层和图像的叠加层。该解决方案非常适合我所处的情况，即我希望在基础地图的顶部设置不透明屏幕，并且我认为它也可以在许多其他情况下使用。花了一段时间才弄清楚，所以我把它放在这里，以防对任何人有用。

为此，假设您已按照Custom Overlays Documentation设置主叠加层，则可以通过以下方法将代码添加到OverlayView的配置中以制作另一层。

在构造函数中，为您的附加层添加一个保持div，我们将其称为/* Set up properties to hold the overlay, which is added in onAdd() */ this.layer_ = null this.div_ = null：

onAdd()

然后，在使用panes启动覆盖图时，您将设置其他div。这里的关键部分是正确使用Google地图以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 }中，您需要删除其他覆盖面板：

<tizen:setting background-support="disable" encryption="disable" hwkey-event="enable"/>

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

如何在一张Google地图上制作多个叠加图？

1 个答案: