使用Google Maps V3的矢量图块

Question

我有一堆非常大的多边形，我想在我的Google地图上叠加。我有一个提供GeoJSON功能的磁贴服务器，它还负责处理应用程序所需的各种几何操作（连接多边形，简化到缩放级别，平铺等）。

目前，我们只是将地图上的大型多边形显示为数据图层，但理想情况下，我们能够以较小的缩放级别显示多边形的简化版本，并通过缩放增加其复杂度水平。

我的选择似乎是：

1）数据层：挂钩到各种地图更改事件，然后根据需要添加/删除地图（添加将获取相应的图块）。这里的困难在于，似乎有很多地图变更事件，找到最顺利的方法可能需要付出相当大的努力。另外，感觉好像我在这里反对数据API。

2）OverlayView ：与上面类似，但是作为绝对大小的OverlayView（即完整覆盖）。我们的想法是叠加层会听取绘制事件，获取适当的图块，并根据需要添加/清理。这似乎是一个更可预测的解决方案，但它还有很多。

我不太了解地图如何在幕后工作以提供更多洞察力，但我最终的解决方案（尽管它有所帮助）将需要一个平铺服务器URL然后适合尽可能平滑地加工地图如何加载正确的图块，对于正确的缩放级别（并且给定它们的矢量图块，我可能还会随着缩放级别或位置的变化逐渐增强/降级）。

任何人都可以提出任何见解吗？你会怎么做？

Answer 1

我通过使用overlayMapTypes来处理获取平铺数据的想法。 Here's a working example

正如实现MapType interface的任何对象一样，它希望您定义getTile方法，并可选择releaseTile方法。

每当一个磁贴进入视口时，这种对象会调用getTile传递坐标和缩放。每当一个图块退出视口时，它会使用要删除的节点元素调用releaseTile。因此，使用链接的示例，您只需要为每个磁贴添加一个数据层，并在发布磁贴时将其删除：

让我们说你的瓷砖服务后端是一个像

这样的网址的答案

'/mytiles/1048/1520/13';

然后（借用几乎完整的代码示例），您将overlayMapType声明为

function CoordMapType() {
    this.tileSize = new google.maps.Size(256, 256);
}

CoordMapType.prototype.getTile = function (coord, zoom, ownerDocument) {
    var div = ownerDocument.createElement('div'),
        tileUrl = '/mytiles/' + coord.x + '/' + coord.y + '/' + zoom;

    div.innerHTML = coord;
    div.style.width = this.tileSize.width + 'px';
    div.style.height = this.tileSize.height + 'px';
    div.style.fontSize = '10';
    div.style.borderStyle = 'solid';
    div.style.borderWidth = '1px';
    div.style.borderColor = '#AAAAAA';

    div.dataLayer = new google.maps.Data();


    div.dataLayer.loadGeoJson(tileUrl,null, function() {
        div.dataLayer.setMap(map);
    });

    return div;
};

CoordMapType.prototype.releaseTile = function (tile) {
    if (tile.dataLayer) {
        tile.dataLayer.setMap(null);
    }
};


map.overlayMapTypes.insertAt(0, new CoordMapType());

Answer 2

我刚开源了一个mapbox-gl-js的分支，它允许你以受控的方式在客户端上渲染矢量切片，特别是这意味着你可以在谷歌地图上使用矢量切片。

现场演示为here，文档/代码为here

以下是谷歌卫星图像顶部的开放街道地图图块...

Answer 3

已经提到的另一个选项是使用 deck.gl，特别是以下组件，它适用于矢量图块并且与 Gooogle Maps 兼容（您不必使用地图框）：

https://deck.gl/docs/api-reference/geo-layers/mvt-layer

Answer 4

我最近创建了一个库，用于使用 overlayMapType 对象在 Google 地图中加载矢量切片。像这样添加 .pbf 网址：

var options = {
    url: "http://your_vector_tiles_url/{z}/{x}/{y}.pbf"
};

var mvtSource = new MVTSource(map, options);
map.overlayMapTypes.insertAt(0, mvtSource);

链接到 Vector Tiles Google Maps 库和一个 working example。