javascript - Google map - 热图层位于数据层之后

Question

我已接近完成我在这张 map 中的需要，我添加了一个热图层来显示热图，并添加了一个数据层来从 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
});

Answer 1

有一个选项可以使用 setStyle 方法设置数据层的 zIndex。您甚至可以对每个特征应用不同的 zIndex if you pass it a function as argument .

但是，您的 map 包含的每个数据层都在 div 中呈现，该 div 是 overlayLayer 的子层(参见 MapPanes )。修改数据层的 zIndex 只会修改其相对于其他数据层的索引。有问题的 div 仍然有自己的 z-index(在我的例子中是 30)。

HeatmapLayer 将在 overlayLayer 的另一个 div 内呈现，在我的例子中，它的 z-index 为 15。

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

现在，这是一个hacky 和肮脏的方式 做你想做的事。

1.- 创建辅助 google.maps.OverlayView获取对 map Pane 的引用。

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

2.- 设置 OverlayView 的 map 属性。

auxOverlay.setMap(map);

3.- 获取对 overlayLayer Pane 的引用并向其添加 ID。我将使用 jQuery。可能有人会说可以用 vanilla JS 来完成。好的，但我会用 jQuery 来完成。

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

4.- 当没有自定义叠加层被添加到 map 时，数据层将是“overlayLayer”的唯一内容，所以你可以给它一个 ID

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

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

例如，做

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

将其放在热图下方。

Hacky as hell，如果您想兼顾其他类型的层，当然无法扩展。