Javascript 矢量平铺与谷歌地图V3

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

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

我的选择似乎是：

1）数据层：钩住各种映射更改事件，然后根据需要从映射中添加/删除（添加将获取相应的磁贴）。这里的困难在于，似乎有很多地图更改事件，要找到最顺利的实现方法可能需要相当大的努力。另外，我感觉好像是在与数据API对抗

2）覆盖视图：与上述内容类似，但为绝对尺寸的覆盖视图（即全覆盖）。我们的想法是，覆盖将侦听绘制事件，获取适当的平铺，并根据需要添加/清理。这似乎是一个更可预测的解决方案，但也有很多

我对“地图”在引擎盖下的工作方式知之甚少，无法提供更多的见解，但我最终的解决方案（只要有帮助）将是采用一个磁贴服务器URL，然后尽可能平滑地适应“地图”的工作方式，以加载正确的磁贴，达到正确的缩放级别（如果它们是矢量图块，我也可能随着缩放级别或位置的改变而逐渐增强/降低）

---

有人能提供一些见解吗？你会怎么做？

我处理平铺数据的方法是使用OverlyMapTypes

与实现的任何对象一样，它希望您定义一个

getTile

方法，或者定义一个

releaseTile

方法

每当一个平铺进入视口时，这种对象调用

getTile

传递坐标和缩放。每当一个平铺退出视口时，它调用

releaseTile

，并使用要移除的节点元素。因此，使用链接的示例，您只需要向每个平铺添加一个数据层，并在平铺被释放时移除它ASE：

假设您的磁贴服务后端响应url，如

'/mytiles/1048/1520/13';

然后（借用示例中几乎完整的代码）将OverlyMapType声明为

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

---

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

现场演示是，文档/代码是

这是谷歌卫星图像上方打开的街道地图块

---

前面提到的另一个选项是使用deck.gl，具体来说是以下组件，它非常适合矢量平铺，并且与Gooogle贴图兼容（您不必使用Mapbox）：

---

我最近创建了一个库，使用OverlyMapType对象在Google地图中加载矢量图块。添加.pbf url如下：

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

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

---

链接到库和一个。

不太确定您想要实现什么。但是您考虑过KML层吗？它作为一个平铺层工作，但是当有大数据时，它是相当优化的。您可以浏览文档，看看它是否适合您的项目。我已经为渲染mapbox向量构建了一个解决方案谷歌地图上的瓷砖。我正在开源整个过程中，但现在你可以看到渲染的核心部分…然后是amenadiel建议的一个例子。你能展示一下如果瓷砖不是json格式而是pbf格式，如何渲染瓷砖吗？我在谷歌地图上开发已经有一段时间了s、 但我不认为有任何努力可以添加任何类型的矢量平铺支持，更不用说protobuf了。这太棒了！非常感谢！对于任何试图在google地图上显示pbf的人，就是这样！对于可用的zooms变量，我看到它可以是一个数组，但代码似乎只检查第一个元素。是否有在该数组中指定多个项目有什么好处？再次感谢！不要担心“只检查第一个元素”…这是我在玩它时做的，我忘了哈哈哈