我正在尝试渲染一些从 OpenMapTile 下载的本地存储和基于矢量的图块。我这样做的原因是因为我的最终应用程序只能在无法连接到互联网的计算机上运行。
我已经阅读了许多关于传单是否可以渲染基于矢量的图块的不同内容，但从一些示例来看它似乎可以。
看来矢量网格不可能只做栅格图块 https://github.com/Leaflet/Leaflet.VectorGrid但是那个可以使用 Leaflet.TileLayer.MBTiles https://www.npmjs.com/package/Leaflet.TileLayer.MBTiles
所以我尝试这样做，但在尝试时总是偶然发现一个空页面......我有地图的控制器，但它不显示任何内容。这是我的 MWE。
<!DOCTYPE html>
<html>
<head>
<title>VectorGrid.Protobuf example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/[email protected] /cdn-cgi/l/email-protection/dist/leaflet.css" />
</head>
<body style='margin:0'>
<div id="map" style="width: 100vw; height: 100vh; background: white"></div>
<script type="text/javascript" src="https://unpkg.com/[email protected] /cdn-cgi/l/email-protection/dist/leaflet.js"></script>
<script type="text/javascript" src="https://unpkg.com/[email protected] /cdn-cgi/l/email-protection"></script>
<script src="https://unpkg.com/[email protected] /cdn-cgi/l/email-protection/js/sql.js"></script>
<!--<script src="https://unpkg.com/leaflet.tilelayer.mbtiles@latest/Leaflet.TileLayer.MBTiles.js"></script>-->
<script src="Leaflet.TileLayer.MBTiles.js"></script>
<!-- <script type="text/javascript" src="../dist/Leaflet.VectorGrid.bundled.js"></script> -->
<script>
var vectorTileStyling = {
water: {
fill: true,
weight: 1,
fillColor: '#06cccc',
color: '#06cccc',
fillOpacity: 0.2,
opacity: 0.4,
},
admin: {
weight: 1,
fillColor: 'pink',
color: 'pink',
fillOpacity: 0.2,
opacity: 0.4
},
waterway: {
weight: 1,
fillColor: '#2375e0',
color: '#2375e0',
fillOpacity: 0.2,
opacity: 0.4
},
landcover: {
fill: true,
weight: 1,
fillColor: '#53e033',
color: '#53e033',
fillOpacity: 0.2,
opacity: 0.4,
},
landuse: {
fill: true,
weight: 1,
fillColor: '#e5b404',
color: '#e5b404',
fillOpacity: 0.2,
opacity: 0.4
},
park: {
fill: true,
weight: 1,
fillColor: '#84ea5b',
color: '#84ea5b',
fillOpacity: 0.2,
opacity: 0.4
},
boundary: {
weight: 1,
fillColor: '#c545d3',
color: '#c545d3',
fillOpacity: 0.2,
opacity: 0.4
},
aeroway: {
weight: 1,
fillColor: '#51aeb5',
color: '#51aeb5',
fillOpacity: 0.2,
opacity: 0.4
},
road: { // mapbox & nextzen only
weight: 1,
fillColor: '#f2b648',
color: '#f2b648',
fillOpacity: 0.2,
opacity: 0.4
},
tunnel: { // mapbox only
weight: 0.5,
fillColor: '#f2b648',
color: '#f2b648',
fillOpacity: 0.2,
opacity: 0.4,
// dashArray: [4, 4]
},
bridge: { // mapbox only
weight: 0.5,
fillColor: '#f2b648',
color: '#f2b648',
fillOpacity: 0.2,
opacity: 0.4,
// dashArray: [4, 4]
},
transportation: { // openmaptiles only
weight: 0.5,
fillColor: '#f2b648',
color: '#f2b648',
fillOpacity: 0.2,
opacity: 0.4,
// dashArray: [4, 4]
},
transit: { // nextzen only
weight: 0.5,
fillColor: '#f2b648',
color: '#f2b648',
fillOpacity: 0.2,
opacity: 0.4,
// dashArray: [4, 4]
},
building: {
fill: true,
weight: 1,
fillColor: '#2b2b2b',
color: '#2b2b2b',
fillOpacity: 0.2,
opacity: 0.4
},
water_name: {
weight: 1,
fillColor: '#022c5b',
color: '#022c5b',
fillOpacity: 0.2,
opacity: 0.4
},
transportation_name: {
weight: 1,
fillColor: '#bc6b38',
color: '#bc6b38',
fillOpacity: 0.2,
opacity: 0.4
},
place: {
weight: 1,
fillColor: '#f20e93',
color: '#f20e93',
fillOpacity: 0.2,
opacity: 0.4
},
housenumber: {
weight: 1,
fillColor: '#ef4c8b',
color: '#ef4c8b',
fillOpacity: 0.2,
opacity: 0.4
},
poi: {
weight: 1,
fillColor: '#3bb50a',
color: '#3bb50a',
fillOpacity: 0.2,
opacity: 0.4
},
earth: { // nextzen only
fill: true,
weight: 1,
fillColor: '#c0c0c0',
color: '#c0c0c0',
fillOpacity: 0.2,
opacity: 0.4
},
// Do not symbolize some stuff for mapbox
country_label: [],
marine_label: [],
state_label: [],
place_label: [],
waterway_label: [],
poi_label: [],
road_label: [],
housenum_label: [],
// Do not symbolize some stuff for openmaptiles
country_name: [],
marine_name: [],
state_name: [],
place_name: [],
waterway_name: [],
poi_name: [],
road_name: [],
housenum_name: [],
};
// Monkey-patch some properties for nextzen layer names, because
// instead of "building" the data layer is called "buildings" and so on
vectorTileStyling.buildings = vectorTileStyling.building;
vectorTileStyling.boundaries = vectorTileStyling.boundary;
vectorTileStyling.places = vectorTileStyling.place;
vectorTileStyling.pois = vectorTileStyling.poi;
vectorTileStyling.roads = vectorTileStyling.road;
var map = L.map('map');
//var openmaptilesUrl = "https://free-{s}.tilehosting.com/data/v3/{z}/{x}/{y}.pbf.pict?key={key}";
var openmaptilesUrl = "http://127.0.0.1:8080/2017-07-03_france_toulouse.mbtiles";
var openmaptilesVectorTileOptions = {
rendererFactory: L.canvas.tile,
attribution: '<a href="https://openmaptiles.org/">© OpenMapTiles</a>, <a href="http://www.openstreetmap.org/copyright">© OpenStreetMap</a> contributors',
vectorTileLayerStyles: vectorTileStyling,
subdomains: '0123',
key: 'UmmATPUongHdDmIicgs7',
maxZoom: 14
};
var mb = L.tileLayer.mbTiles(openmaptilesUrl).addTo(map);
/*var openmaptilesPbfLayer = L.vectorGrid.protobuf(openmaptilesUrl, openmaptilesVectorTileOptions).addTo(map);*/
map.setView({ lat: 47.040182144806664, lng: 9.667968750000002 }, 0);
/*L.control.layers({
OpenMapTiles: openmaptilesPbfLayer,
}, {}, {collapsed: false}).addTo(map);*/
</script>
</body>
</html>
由于我找不到 Leaflet.TileLayer.MBTiles，https://gitlab.com/IvanSanchez/Leaflet.TileLayer.MBTiles/blob/master/Leaflet.TileLayer.MBTiles.js是一个可以下载的版本
对于示例图块，您可以使用this one https://drive.google.com/file/d/1yVNG5x7Rm2n7c7dll9iyqOBCPp4oFhtx/view?usp=sharing（直接从 OpenMapTiles 下载，重点关注法国图卢兹，因为它是一个相当小的 mbtile 文件）。
我真的不明白问题是什么。我想到，传单很可能无法读取矢量图块，在这种情况下，我认为我可以尝试转换它们，以便最终得到光栅图块，但我找不到这样做的方法。我不知道最好的解决方案是什么......似乎有些人已经设法使其与矢量和光栅图块一起使用正如 StackOverflow 上所解释的 https://stackoverflow.com/questions/48175582/possible-to-style-mbtiles-in-a-leaflet-map但我似乎找不到一种方法让它自己工作，而且这个链接的帖子不是很详细。
预先感谢您的帮助。
