使用谷歌地图V3的矢量图瓷砖

问题描述：

我有一堆非常大的多边形，我想叠加在我的Google地图上。我有一个服务GeoJSON功能的瓷砖服务器，它还负责使我的应用程序工作所需的各种几何操作（加入多边形，简化缩放级别，平铺等）。使用谷歌地图V3的矢量图瓷砖

目前，我们只是在地图上显示大的多边形作为数据层，但理想情况下，我们可以在较小的缩放级别显示简化版的多边形，并通过缩放级别增加其内联的复杂性。

我的选择似乎是：

1）数据图层：钩到各个地图改变事件，然后添加/从地图适当除去（其中添加将被取适当的瓦）。这里的困难在于似乎有很多地图变化事件，并且寻找最顺利的方式可能需要付出相当大的努力。另外，感觉就像我在这里使用数据API一样。

2）OverlayView：与上述类似，但是作为绝对尺寸的OverlayView（即全覆盖）。我们的想法是，叠加层将听取绘画事件，获取适当的图块，并根据需要添加/清理。这似乎是一个更可预测的解决方案，但同样有很多。

我对底图如何工作以提供更多洞察力并不了解，但我最终的解决方案（尽可能多地帮助）将需要一个tile服务器URL，然后适合作为尽可能平滑地映射到地图如何加载正确的贴图，获得正确的缩放级别（并且由于它们是矢量图块，我可能会随着缩放级别或位置的改变而逐渐增强/降级）。

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

不完全确定你正在尝试做什么。但是你有没有想过KML Layer？它可以作为TileOverlay使用，但是当数据量很大时，它会相当优化。您可以阅读文档，看看它是否适用于您的项目。 https://developers.google.com/maps/documentation/javascript/kmllayer#kml_layer_options – KayAnn 2015-01-29 03:19:08

我已经构建了一个在Google地图上呈现地图框矢量图块的解决方案。我正在开源整个过程，但现在你可以看到渲染的核心部分https://landtechnologies.github.io/Mapbox-vector-tiles-basic-js-renderer/debug/basic/ ......那么这就是一个类似于amenadiel所建议的事情。 – 2018-01-19 10:51:21

答

我来处理获取平铺数据的想法是通过使用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());

答

我刚才开源mapbox-GL-JS的一个分支，它可以让您在客户端呈现矢量瓷砖在受控特别是这意味着你可以在t上使用矢量图谷歌地图的一部分。

现场演示是here和机制的文档/代码here

这里是一个谷歌卫星图像的顶部开放街道地图瓦片...

使用谷歌地图V3的矢量图瓷砖

相关推荐