使用Google Maps V3的矢量图块

时间:2014-12-04 00:31:36

标签: google-maps google-maps-api-3

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

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

我的选择似乎是:

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

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

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

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

4 个答案:

答案 0 :(得分:5)

我通过使用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());

答案 1 :(得分:5)

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

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

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

screenshot

答案 2 :(得分:1)

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

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

答案 3 :(得分:0)

我最近创建了一个库,用于使用 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