javascript - 在 Google 基本 map 和标签图像之间插入 Mapnik 平铺

Question

我目前正在使用 Mapnik 通过 node-mapnik 使用 Wax 中的 g.connector 创建巴西地区的等值线图 block ，如下面的代码所示，效果很好。

var map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: new google.maps.LatLng(-23.1851, -51.0754),
    zoom: 8,
    zoomControlOptions: {
        style: google.maps.ZoomControlStyle.SMALL
    },
    mapTypeId: google.maps.MapTypeId.HYBRID
});

var tiles = {
tilejson: '2.0.0',
    tiles: ['url/{z}/{x}/{y}.png']
};
map.overlayMapTypes.insertAt(0, new wax.g.connector(tiles));

但我注意到，使用 Chrome 开发者工具，Google map 会为每个 x、y、z 平铺发送两个单独的 png(一个是带有道路和标签的 512x512 vt png，第二个是地面的 256x256 kh png) )。

使用 Wax 或其他 JavaScript 工具，是否可以在两个 Google map png 之间插入我从 Mapnik 返回的 PNG？我的目标是让标签位于 Mapnik 返回的图像之上。这当然可以通过更改 Mapnik 图 block 的不透明度来实现，但当不透明度降低时，颜色不会那么突出。非常感谢任何帮助。

Answer 1

目前似乎不支持。

如果您查看实际的 html - 两个卫星图像图层位于具有 z 索引的嵌套 div 中，并且叠加层位于具有不同 z 索引的单独 div 中。我相信不可能将单独的 div 嵌套在不同 div 的两个不同 z-index 中，也就是说，这是行不通的:

<div style:"z-index: 5"></div>
<div>
   <div style:"z-index: 1"></div>
   <div style:"z-index: 10"></div>
</div>

对于单个图 block ，可以将其与覆盖 div 分离，然后将其重新附加到 map 图 block div，并将 z 索引分配给所有三个图像，但这似乎不太实用。

目前，有许多开放请求希望将此功能添加到 Google map ，但目前还没有任何请求。

这是一种替代方法的想法 - 启用没有道路图层的谷歌地图(搜索谷歌地图样式向导)，并使用 openStreetMap 数据中的 mapnik 将道路图层渲染到您的图 block 上。