私は地図作成と地理情報サービスについて何も理解していないので、この記事はより親しみやすく初心者向けです。ロシア語の情報はインターネット上にあまりないので、偶然に出会ったからです。
そのため、タスクは次のとおりでした。.bmp+ .shpレイヤー形式の5913x7863ピクセルの白黒タブレット（都市地図の小さな断片）があります。
（当初、マップは.dwg形式（自動CAD形式）で描画されましたが、これは閉じた形式であり、何もすることができないため、各レイヤーを.sf + .dbfの属性データに個別に保存する必要がありました）
これらすべてから、オンラインマップを作成する必要があります。その主な機能は、レイヤーをクリックして属性を表示し、これらのレイヤーを有効/無効にすることです。
選択はleaflet.jsにありました。これはオープンソースのシェルであり、 OSMと私のお気に入りの2GISが作成されているためです。 さらに、モバイルデバイスでもうまく機能します。
まず、マップをすばやくロードできるように、マップをタイル（256x256ピクセルの正方形）にカットする必要があります。 私はこれについてほとんど理解していないので、 gdal2tiles.pyを掘り下げることはせず、そのグラフィカルなmaptilerシェルには費用がかかります。単純なLeafletPanoプログラムをダウンロードしました。 ピクチャをタイルにカットし、最小および最大の近似レベル（変数z）を設定するだけです。
スクリーンショットLeafletPano 
すべてをカットしてホスティングにアップロードすると、接続することもできます：
スクリプトコード
map = L.map('map', { // crs: L.CRS.Wall, // ( ) maxZoom: 5, // zoom () minZoom: 0 // zoom () }).setView([1700,170], 0); // var osn = L.tileLayer('./images/map/{z}-{x}-{y}.jpg', { // attribution: '-', // ( ) continuousWorld: true, // , , true (- ) noWrap: true // }).addTo(map);
スライスした後、タイル（256x256 pxの正方形）を座標にバインドする必要があります。 そして、ここで最も興味深い部分が始まります。事実は、これらのマップの座標系は条件付きローカルプランスキームであるということです。つまり、本質的に緯度と経度に関係のないフラットなローカル都市座標系です。
それで、何をすべきか：5913x7863ピクセルを測定するマップは、そのような座標に配置されているはずです。
難しさは何ですか？ 既に述べたように、タイルは256x256pxの正方形であり、高さ7863×256のピクセル数は余りなく割り切れないため、73ピクセルが欠落しています。 したがって、LeafletPanoプログラムは（他のタイルカッターと同様に）最後の正方形を白で補足し、サイズが256x183ではなく256x256になるようにします。
次のようになります。
同様に、幅-5913も256で割られず、231pxでは十分ではありません。
そして、フラット座標系について話しているので、ドキュメントを見ると、完成したL.CRS.SimpleシステムがLeafletに組み込まれています（フラット画像用に設計されており、座標を参照しません）。 彼女はどのように働いていますか？ L.CRS.Simpleは、幅と高さをそれぞれ256と-256に設定します。
L.CRS.Simpleに基づいて、transformation = new L.Transformation（a、b、c、d）を使用して座標系を作成します。 ドキュメントの式は非常に単純です：（x、y）は（a * x + b、c * y + d）に変換され、すべて4つの数値になります。 次は数学です：
必要な座標の高さを計算します。
1968.2715 - 1468.9700 = 499,3015
（これは、座標でのマップの高さです）。
ピクセル単位の高さで割ります：
499,3015 / 7863 = 0,0635001271779219
73個の欠落ピクセルを乗算します。
0,0635001271779219 * 73 = 4,6355092839883
座標でのマップの高さを、座標で欠落しているピクセルの高さに追加します（明確に書きたいと思います）。
499,3015 + 4,6355092839883 = 503,9370092839883
（マップの高さ+タイルのホワイトバランス（座標で同じ73ピクセル）を取得しました）。
次に、以前の座標系（L.CRS.Simple）の高さを目的の高さで除算します。
256 / 503,9370092839883 = 0,5079999985786595
そして、この係数を1から引きます：
1 - 0,5079999985786595 = 0,4920000014213405
やった！ 式（a * x + b、c * y + d）からaと-cを取得しましたが、 bとdを取得するために残ります
X座標（何らかの理由でマイナスなし）に係数を掛けます：
11.7050 * 0,4920000014213405 = 5,758860016636791
y座標に係数が乗算されます
1968.2715 * 0,4920000014213405 = 968,389580797584
新しい座標系を作成します。
L.CRS.Wall = L.extend({}, L.CRS.Simple, { transformation: new L.Transformation(0.4920000014213405, 5.758860016636791, -0.4920000014213405, 968.389580797584), });
次に、.shpを接続します。 マップをクリックすると、属性情報が表示されるこれらのインタラクティブマップの主要な機能。 .shpを接続するときはそうですが、ロシア語の碑文はkrakozyabramsによって表示されます。 属性情報は.dbfファイルに格納されており、問題は明らかにそのエンコーディングにありますが、それをどうしても解決しません（.dbfエンコーディングを変更するために膨大な数の方法を試してみました）ので、唯一の方法は.shpをよりネイティブなものに変換することですutf-8エンコーディングのリーフレット.geojson形式。 これはQGISプログラムを使用して実行できます。
次に、Leafletのプラグインを接続します。これにより、 leaflet-ajaxと呼ばれる接続レイヤー.geojsonの記録が容易になります。
.geojsonレイヤーを接続します。
埋め込みコード.geojson
var dorogi = new L.GeoJSON.AJAX("geoj/dorogi.geojson", {onEachFeature: function (feature, layer) { if (feature.properties) { var info = function(k){ var str = k + ": " + feature.properties[k]; return str; } layer.bindPopup(Object.keys(feature.properties).map(info).join("<br />"),{maxHeight:200}); layer.setStyle({ color: '#555', clickable: true, weight: 4, opacity: 0.8}); } }});
最後に、レイヤーの表示をオン/オフにします。これのために、L.control.layersを挿入します。
コードL.control.layers
var baseMaps = {}; var overlayMaps = { "": osn, "": dorogi, "": gazoprovod, "": vodoprovod, "": zdaniz_new }; L.control.layers(baseMaps, overlayMaps).addTo(map);
結果：
PS将来の予定：線でマークされた建物だけでなく、OSMのように、カードが適切に見えるようにします。 また、私が最も適切な方法で何をしているのかわかりません。おそらくGeoServerまたはこのような方法があり、それほど手作業を行う必要はありません。 私のカードはひどく見えるので、ほとんどの場合、OSM上のカードのデバイスに向かって掘る必要があります。
ヒントやコメントを歓迎します。