个人中心
gpt4 book ai didi

javascript - 无法使用传单渲染矢量切片 (.mbtiles) 文件

转载 作者：行者123 更新时间：2023-11-29 16:01:57 25 4
gpt4 key购买 nike

我正在尝试渲染从 OpenMapTile 下载的一些本地存储的基于矢量的图 block 。我这样做的原因是因为我的最终应用程序只能在无法连接到互联网的计算机上运行。

关于 leaflet 是否可以渲染基于矢量的图 block ，我已经阅读了很多不同的东西，但从一些例子来看它似乎可以。

It seems that it is not possible with Vector Grid that only does raster tiles但是那个it is possible with Leaflet.TileLayer.MBTiles

所以我尝试这样做，但在尝试时总是偶然发现一个空白页面……我有 map 的 Controller ，但它没有显示任何内容。这是我的 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/leaflet@1.0.3/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/leaflet@1.3.1/dist/leaflet.js"></script>
    <script type="text/javascript"  src="https://unpkg.com/leaflet.vectorgrid@1.2.0"></script>

    <script src="https://unpkg.com/sql.js@0.3.2/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/">&copy; OpenMapTiles</a>, <a href="http://www.openstreetmap.org/copyright">&copy; 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 是一个您可以下载的版本

对于示例图 block ，您可以使用 this one (直接从专注于法国图卢兹的 OpenMapTiles 下载，因为它是一个相当小的 mbtile 文件)。

我真的不明白问题出在哪里。我想到传单很可能无法读取矢量图 block ，在这种情况下，我想我可以尝试转换它们，以便最终得到光栅图 block ，但我找不到这样做的方法。我不知道最好的解决方案是什么......似乎有些人已经设法让它与矢量和光栅图 block 一起工作 as explained on StackOverflow但我似乎无法找到一种方法让它自己工作，而且这篇链接的帖子不是很详细。

预先感谢您的帮助。

最佳答案

试试这个改变:

var openmaptilesUrl = "http://127.0.0.1:8080/2017-07-03_france_toulouse.mbtiles";

为此:

var openmaptilesUrl = "./2017-07-03_france_toulouse.mbtiles";

并将您的 mbtiles 文件存储到 index.html 旁边的网络根目录中

关于javascript - 无法使用传单渲染矢量切片 (.mbtiles) 文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51850396/

25 4 0
文章推荐： android - 位图大小在不同的 Android 设备中显示不同
文章推荐： php - 使用包含日期的php变量搜索mysql date列
文章推荐： mysql - 普通查询或 Sequelize 查询
文章推荐： android - 为什么在尝试在 ScrollView 中单击按钮时设置 EditText 时会出现 Nullpointer 异常？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com