2017-07-19 13 views
0

私はかなり前にhtmlを使い始めました。そしてある友人が私に彼にウェブサイトを作るのを助けるように頼んだ。現在、OSMタイルを使用しています。そして1つの問題は彼が別の言語でそれを望んでいることです。だから彼はタイルを作ったので、ウェブページにタイルをローカルに追加したい。言い換えれば、タイルは私のコンピュータ上にあります。私は100のようなものがあっても1タイルしか得ることができません。どのように私はタイルの残りの部分に助けをリーフレットを使ってウェブサイトにローカルタイルを追加する方法

<html> 
 
<head> 
 
    <title>A Leaflet map!</title> 
 
    <link rel="stylesheet" href="leaflet.css"/> 
 
    <script src="leaflet.js"></script> 
 
    <style> 
 
    #map{ height: 100% } 
 
    </style> 
 
</head> 
 
<body> 
 

 
    <div id="map"></div> 
 

 
    <script> 
 

 
    // initialize the map 
 
    var map = L.map('map').setView([45.8311111,-74.1992559], 16); 
 

 
    // load a tile layer 
 
    //I want to load multiple tile layers 
 
    L.tileLayer('file://C:/Users/Adam-PC/Documents/Map/Tiles1/18/77027/93433.png', 
 
    { 
 
     attribution: 'Tiles by <a href="https://www.openstreetmap.org">Open Street Map</a>, Data by <a href="https://www.openstreetmap.org">Open Street Map</a>', 
 
     maxZoom: 17, 
 
     minZoom: 9 
 
    }).addTo(map); 
 

 
    </script> 
 
</body> 
 
</html> 
 
\t

感謝を得ることができるだろう!

答えて

1

タイルレイヤURLテンプレートのズーム、y、xの値をハードコードする代わりに'file://C:/Users/Adam-PC/Documents/Map/Tiles1/{z}/{x}/{y}.png'を使用してください。

+0

まだ動作していないようです。私は灰色の画面が表示されます。それはタイルが異なるフォルダにあるからですか? –

+0

はい、URLテンプレートには、タイルの保存方法やフォルダ構造が反映されている必要があります。ブラウザのコンソールを使用して、結果のURLが表示されていることを確認できます(404エラーが発生する可能性があります)。 – ghybs

+0

ご協力いただきありがとうございます。私はズーム値を変えることで修正できました。良い仕事を続けてください:) –

関連する問題