使用谷歌地圖V3的矢量圖瓷磚

我有一堆非常大的多邊形，我想疊加在我的Google地圖上。我有一個服務GeoJSON功能的瓷磚服務器，它還負責使我的應用程序工作所需的各種幾何操作（加入多邊形，簡化縮放級別，平鋪等）。使用谷歌地圖V3的矢量圖瓷磚

目前，我們只是在地圖上顯示大的多邊形作爲數據層，但理想情況下，我們可以在較小的縮放級別顯示簡化版的多邊形，並通過縮放級別增加其內聯的複雜性。

我的選擇似乎是：

1）數據圖層：鉤到各個地圖改變事件，然後添加/從地圖適當除去（其中添加將被取適當的瓦）。這裏的困難在於似乎有很多地圖變化事件，並且尋找最順利的方式可能需要付出相當大的努力。另外，感覺就像我在這裏使用數據API一樣。

2）OverlayView：與上述類似，但是作爲絕對尺寸的OverlayView（即全覆蓋）。我們的想法是，疊加層將聽取繪畫事件，獲取適當的圖塊，並根據需要添加/清理。這似乎是一個更可預測的解決方案，但同樣有很多。

我對底圖如何工作以提供更多洞察力並不瞭解，但我最終的解決方案（儘可能多地幫助）將需要一個tile服務器URL，然後適合作爲儘可能平滑地映射到地圖如何加載正確的貼圖，獲得正確的縮放級別（並且由於它們是矢量圖塊，我可能會隨着縮放級別或位置的改變而逐漸增強/降級）。

任何人都可以擺脫任何見解嗎？你會如何處理它？

來源

2014-12-04 Whestley P. Tavistock

不完全確定你正在嘗試做什麼。但是你有沒有想過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());

來源

2015-11-17 15:14:09 amenadiel

我剛纔開源mapbox-GL-JS的一個分支，它可以讓您在客戶端呈現矢量瓷磚在受控特別是這意味着你可以在t上使用矢量圖谷歌地圖的一部分。

現場演示是here和機制的文檔/代碼here

這裏是一個谷歌衛星圖像的頂部開放街道地圖瓦片...

來源

2018-01-31 13:52:15

使用谷歌地圖V3的矢量圖瓷磚

回答

相關問題