使用Google Maps V3的矢量图块

Question

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

目前,我们只是在地图上显示大型多边形作为数据层,但理想情况下,我们能够以较小的缩放级别显示多边形的简化版本,并增加其与缩放级别一致的复杂性.

我的选择似乎是:

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

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

我不太了解地图如何在幕后工作以提供更多的洞察力,但我最终的解决方案(尽管它有帮助)将采用一个平铺服务器URL然后尽可能顺利地适应对于正确的缩放级别,地图如何工作以加载正确的图块(并且鉴于它们是矢量图块,我可能还会随着缩放级别或位置更改而逐渐增强/降级).

任何人都能有任何见解吗？你会怎么做？

Answer 1

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

现场演示在这里,文档/代码在这里

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

Answer 2

我处理获取切片数据的想法的方法是使用overlayMapTypes。这是一个有效的例子。

就像任何实现MapType接口的对象一样，它希望您定义一个getTile方法，也可以定义一个releaseTile方法。

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

假设您的磁贴提供后端答案，例如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());