Openlayers 4+使用本地矢量磁貼（.pbf）無服務器

我是在線映射的新手，在過去，我已經使用Maperitive從osm數據成功創建了柵格貼圖。它可以從localhost/local文件夾結構中正常工作。但我的問題：是否有可能從.pbf或geojson文件服務本地矢量地圖沒有任何服務器或地圖盒的東西就像光柵圖像？是否有可能在瀏覽器中直接在客戶端沒有提供任何服務器或API密鑰服務？如果是的話，有人能給我一個工作的例子嗎？Openlayers 4+使用本地矢量磁貼（.pbf）無服務器

謝謝。

來源

2017-12-03 Felicián Vass

你的意思是你想創建一個HTML頁面（上有一個地圖），您直接從電腦的硬盤驅動器打開？ – dube

嗯..你的問題聽起來很簡單，但是。基於矢量圖塊。可能嗎？ –

通常網站無法訪問您的本地文件系統。這是爲了保護您和您的計算機免受監視您的網站的侵害。

但是，該規則也有例外。

網站可以讀取您在「上傳文件」輸入元素中選擇的文件。
一頁可以讀取文件系統，當它從磁盤

打開從硬盤的HTML文檔opended意味着你只需雙擊您的計算機上，並在瀏覽器中打開它。那個HTML文檔中的所有相關鏈接都是相對於該文檔的。

所以如果你使用的GeoJSON class，你可以簡單地把它給文件的路徑在您的計算機上。下面是讀取一個文件夾mysubfolder名爲mygeojson.geojson本地文件，並將其顯示在一個OpenStreetMap的層頂部的例子：

var map = new ol.Map({ 
    layers: [ 
    new ol.layer.Tile({ 
     source: new ol.source.OSM() 
    }), 
    new ol.layer.Image({ 
     source: new ol.source.ImageVector({ 
     source: new ol.source.Vector({ 
      url: 'mysubfolder/mygeojson.geojson', 
      format: new ol.format.GeoJSON() 
     }), 
     style: new ol.style.Style({ 
      fill: new ol.style.Fill({ 
      color: 'rgba(255, 255, 255, 0.6)' 
      }), 
      stroke: new ol.style.Stroke({ 
      color: '#319FD3', 
      width: 1 
      }) 
     }) 
     }) 
    }) 
    ], 
    target: 'map', 
    view: new ol.View({ center: [0, 0], zoom: 1 }) 
});

來源

2017-12-05 12:33:17 dube

謝謝dube！這就是我等待的或類似的東西。我只有一個問題。你怎麼看？我可以將整個國家轉換爲geojson文件嗎？從PBF（150 MB）或大的OSM文件（3GB）：d？或從mapsforge文件？再次感謝您的回答。 –

它可以通過使用VectorTile，它只加載整個地圖數據的片段。但是，您必須先將源文件拆分爲_tiles_，以便它可以加載這些磁貼。這些瓷磚也取決於縮放級別，所以這不是一件容易的事 – dube

Openlayers 4+使用本地矢量磁貼（.pbf）無服務器

回答

相關問題