谷歌地图 - 热力图层在数据层后面

Question

谷歌地图 - 热力图层在数据层后面

javascriptgoogle-mapsgoogle-maps-api-3google-visualizationvisualization

3

我离完成地图所需的功能很近了，我添加了一个热力图层来显示热力图，并添加了一个数据层来从geojson数据中绘制多边形。如果您仔细观察下面的图像，您会发现热力图被多边形遮挡了。我需要帮助将热力图层置于顶部。谢谢！:)

如果我减少多边形的不透明度，会得到这样的结果，但热力图层仍然在后面，所以这还不够:/

以下是我正在使用的代码：

var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 37.0902 , lng: -95.7129},
    zoom: 4 });

map.data.loadGeoJson('http://localhost/gz_2010_us_040_00_500k.json');

var heatMapData = [
    {location: new google.maps.LatLng(37.785, -122.447), weight: 3},
    {location: new google.maps.LatLng(46.965260, -109.533691), weight: 3},
    {location: new google.maps.LatLng(40.273502, -86.126976), weight: 1},
    {location: new google.maps.LatLng(38.573936, -92.603760), weight: 9},
    {location: new google.maps.LatLng(27.994402, -81.760254), weight: 2},
    {location: new google.maps.LatLng(39.876019, -117.224121), weight: 9},
    {location: new google.maps.LatLng(45.367584, -68.972168), weight: 4},
    {location: new google.maps.LatLng(44.182205, -84.506836), weight: 6},
    {location: new google.maps.LatLng(33.247875, -83.441162), weight: 1},
    {location: new google.maps.LatLng(21.289373, -157.917480), weight: 8},
    {location: new google.maps.LatLng(66.160507, -153.369141), weight: 3},
    {location: new google.maps.LatLng(35.860119, -86.660156), weight: 9},
];

heatmap = new google.maps.visualization.HeatmapLayer({
  data: heatMapData,
  map: map
});

- The SuperKat

请提供一些代码，展示如何获取、初始化并添加热力图到您的地图。 - m.nachury

我编辑了问题并添加了代码 :) - The SuperKat

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ffflabs · Accepted Answer

使用setStyle方法可以设置数据层的zIndex选项。如果将一个函数作为参数传递，则可以为每个要素应用不同的zIndex （查看链接1）。

然而，地图包含的每个数据层都是在一个div内呈现的，该div是overlayLayer的子元素（请参见MapPanes）。修改数据层的zIndex只会修改其与其他数据层相对位置的索引。该div仍然具有自己的z-index（在我的情况下为30）。

HeatmapLayer将呈现在另一个div中，该div位于overlayLayer中，并且在我的情况下具有z-index为15。

如果需要，您可以将数据层的 z-index 设置为-100，但其父元素的 z-index 会覆盖热力图父元素的 z-index。

现在，这是一个笨拙而不恰当的方法来实现您想要的效果。

1. - 创建一个辅助 google.maps.OverlayView 来获取地图窗格的引用。

var auxOverlay = new google.maps.OverlayView();
auxOverlay.draw = function () {};
auxOverlay.onAdd = function () {};

2.设置OverlayView的地图属性。

auxOverlay.setMap(map);

3.- 获取对 overlayLayer 面板的引用并为其添加一个ID。我将使用jQuery。也许有人会说可以使用原生JS来完成。好吧，但我会使用jQuery。

jQuery(auxOverlay.getPanes().overlayLayer).attr('id','overlayLayer')

4.- 当地图上没有添加自定义覆盖层时，数据层将是“overlayLayer”的唯一内容，因此您可以为其指定一个ID

jQuery('#overlayLayer > div').first().attr('id','datalayer');

5. - 现在你有一个数据层容器的引用，因此，一旦添加了热力图，你可以使用数据层容器的引用将其放置在热力图下方。

例如，执行

jQuery('#datalayer').css('z-index',10);

我会把它放在热力图下面。

非常不专业，当然如果你想处理其他类型的层，这种方法是不可扩展的。