javascript - 带有 Google Maps V3 的矢量切片

Question

我有一堆非常大的多边形，我想覆盖在我的谷歌地图上。我有一个提供 GeoJSON 功能的 tile 服务器，它还负责使应用程序工作所需的各种几何操作(加入多边形、简化到缩放级别、平铺等)。

目前，我们只是将 map 上的大多边形显示为数据层，但理想情况下，我们能够以较小的缩放级别显示多边形的简化版本，并根据缩放级别增加它们的复杂性。

我的选择似乎是:

1) 数据层 : Hook 各种 map 更改事件，然后根据需要从 map 中添加/删除(其中添加将获取适当的图 block )。这里的困难在于似乎有很多 map 更改事件，并且找到最顺利的实现方式可能需要相当大的努力。另外，感觉好像我正在处理这里的数据 API。

2) 叠加 View : 与上面类似，但作为一个绝对大小的 OverlayView(即一个完整的覆盖)。想法是覆盖层会监听绘制事件，获取适当的图 block ，并根据需要添加/清理。这似乎是一个更可预测的解决方案，但同样有很多内容。

我对 map 如何在幕后工作以提供更多洞察力知之甚少，但我的最终解决方案(尽管有很大帮助)将是采用磁贴服务器 URL，然后尽可能顺利地融入 map 如何为正确的缩放级别加载正确的图 block (并且鉴于它们是矢量图 block ，我也可以随着缩放级别或位置的变化而逐渐增强/降级)。

任何人都可以提供任何见解吗？你会如何处理它？

Answer 1

我处理获取平铺数据的方法是使用overlayMapTypes。 Here's a working example .

就像任何实现 MapType interface 的对象一样，它希望您定义一个 getTile方法和可选的 releaseTile方法。

每当瓦片进入视口(viewport)时，这种对象就会调用 getTile传递坐标和缩放。每当一个 tile 退出视口(viewport)时，它都会调用 releaseTile与它被删除的节点元素。因此，使用链接的示例，您只需为每个图 block 添加一个数据层，并在图 block 发布时将其删除:

假设您的 tile 服务后端回答了一个 url，例如

'/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());