时间戳

首页 > 解决方案 > Issue creating maps with leaflet.js with files from local directory.

angular - Issue creating maps with leaflet.js with files from local directory.

问题描述

I am currently working on an application that needs to have a map work offline. I essentially followed this tutorial:

http://blog.davidelner.com/create-map-with-tilemill-and-leaflet/

I created an mbtiles file of the area I needed here:

https://openmaptiles.com/extracts/#bounds=-83.84455,42.19104,-83.59049,42.35465

I saved the file as michigan.mbtiles then ran this command to create the png images:

mb-util --image_format=png michigan.mbtiles michigan

lastly in the javascript file I have this 

    var map = L.map('map').setView([42.26, -83.72], 5);
    L.tileLayer('assets/Michigan/{z}/{x}/{y}.png', {
        maxZoom: 14
      }).addTo(map);

I am using angular 6 if that makes any difference. But I have the Michigan folder in my assets folder and I am trying to get the map made from the directory.

If I change the L.tileLayer to any of the demo code I see online a map displays so I'm thinking either there's an issue with the way I made the png's(If i open them up I don't see anything, but I'm not sure that's wrong because this is the first time I ever tried to do anything like this.)

Or there's an issue with my relative path that for some reason I cant just figure out.

Thanks for any help.

标签： angularleafletmapsmbtiles

解决方案

我想通了，当将 mb-util 与 openmaptiles 一起使用时，您从它们获得的 mbtiles 文件不包含所需的数据。例如，如果您通过 tilemill 创建了一个地图，然后对该 mbtiles 文件使用了 mb-util，则提取的文件将是 png。出于某种原因，openmaptiles 不包含其 mbtiles 文件中的任何内容。

推荐阅读