1

我目前正在使用 Mapnik 通过使用来自 Wax 的 g.connector 通过 node-mapnik 创建巴西区域的等值线图块，如下面的代码所示，它运行良好。

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 地图会发送两个单独的 png，每个 x、y、z 瓦片返回（一个是带有道路和标签的512x512 vt png ，第二个是256x256 kh png的地面）。

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

4

1 回答 1

0

貌似目前不支持。

如果您查看实际的 html - 两个卫星图像图层位于具有 z-index 的嵌套 div 中，而叠加层位于具有不同 z-index 的单独 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>

对于单个瓦片，可以将其从叠加 div 中分离出来，然后将其重新附加到地图瓦片 div，并将 z-indexes 分配给所有三个图像，但这似乎不太实用。

目前，有许多公开请求将此作为一项功能添加到谷歌地图，但什么都不存在。

这是另一种方法的想法 - 启用没有道路图层的谷歌地图（搜索谷歌地图样式向导），并使用来自 openStreetMap 数据的 mapnik 将道路图层渲染到瓷砖上。

于 2014-03-24T19:02:44.147 回答