Geekly Articles each Day

オープンソースのオンラインマッピング

こんにちは。 Development SeedのMapBoxオープンソースソフトウェアスイートを使用したインターネット上のマッピングに関する一連の記事を続けます。

前のパーツ：
  1. スタジオレビュー
  2. TileMillの概要
  3. 高度な機能

今日は私が検討します：


面白い？ あなたを猫に招待します。

キャッシュされたマッピングサービスとは何かを説明するために、Samsonov T.Eから引用します。 「Webベースの地図作成設計：Webサービスのマップの設計と設計」 ：

通常、地図作成Webサービスは、動的とキャッシュの2つの大きなグループに分けられます。 最初のケースでは、スケーリングまたは移動するたびにデータにアクセスし、新しいカバレッジを考慮して画像が再描画されます。 この場合、クライアントは既製のビットマップ画像のみを受信します-それらのレンダリングはサーバーによって実行されます。

キャッシュサービスの場合、各縮尺のラスターイメージ（タイル）のモザイクは事前に準備されているため、作業は1桁速くなります。 もちろん、デザインとデータ自体の複雑さは表示速度にまったく影響しません-これは大きなプラスです。 ただし、明らかな制限があります。データを変更する場合、キャッシュを再計算する必要があり、オブジェクトを編集してレイヤーの表示を制御することはできません。縮尺のリストは固定されています。 キャッシュの再計算には数日から数週間かかることもあることを覚えておく価値があります（！）カードの核心の複雑さによって異なります。

したがって、動的サービスとキャッシュサービスのどちらを選択するかは、一見しただけでは明らかではありません。 原則として、まれなデータまたは断片化されたデータを使用してキャッシュサービスを作成し、動的サービスのサブストレートマップを作成するか、プロジェクト自体が小さい場合、キャッシュをすばやく再カウントできます。 また、各レイヤーが個別のラスターモザイクであるマルチレイヤーキャッシュオプションもあります。 ただし、この場合のサービスのパフォーマンスには多くの要望があります。結局、Webサーバーはレイヤーラスタを動的に重ね合わせなければなりません。


タイルストリーム


TileStreamは、Web上でMBTilesファイルを表示する機能を備えた高性能タイルサーバーです。
機能：

要件：

依存関係のインストール

必要なパッケージをインストールします。 たとえば、Ubuntuの場合：
sudo apt-get install curl build-essential libssl-dev libsqlite3-0 libsqlite3-dev


node.jsとnpmをインストールします。 nvmユーティリティを使用して、 node.jsの特定のバージョンを選択できます。 ソースからのインストール ：

 git clone --depth 1 git://github.com/joyent/node.git cd node git checkout v0.4.9 export JOBS=2 # optional, sets number of parallel commands. mkdir ~/local ./configure --prefix=$HOME/local/node make make install echo 'export PATH=$HOME/local/node/bin:$PATH' >> ~/.profile source ~/.profile

Npmインストール：
 curl http://npmjs.org/install.sh | sh


TileStreamをインストールする


リポジトリからソースコードをダウンロードします 。 npmを使用してインストールプロセスを開始します。
 git clone git://github.com/mapbox/tilestream.git cd tilestream npm install -g tilestream


-gスイッチは、タイルストリームをグローバルにインストールする必要があることをnpmに伝えます。 これには、スーパーユーザー特権が必要です。 ローカル（現在のディレクトリ）にインストールするには、このキーを省略します。

TileStreamを起動します。
 tilestream


開発者が提供するテストスイートを使用してTIleStreamを確認できます。 テストには、 Expressoを使用します。 ライブラリをインストールして、次のようなテストを実行できます。
 npm install -g expresso cd tilestream npm test


重要です。 TileStreamをローカルマシン上ではなくサーバーとして使用する場合は、起動時にホスト名を指定する必要があります。
 tilestream --host 127.0.0.1 tilestream --host yourhost.com


次のようなすべてのTileStream起動オプションに関する詳細なヘルプを取得できます。
 tilestream start --help


使用する


TileStreamの使用を開始するには、MBTilesをtilesディレクトリにコピーする必要があります。 MapBox Webサイトで、開発者から無料のタイルのセットを見つけることができます。

タイルの各セットは次で表示できます localhost:8888/map/[filename] localhost:8888/map/[filename] 、ここで[filename] 、拡張子.mbtilesなしのタイルセットの名前です。

タイルセット名：


ワックス


ワックスは、サイトでのマップの使用を容易にする拡張機能とツールのセットです。 Waxは、Modest Maps、LeafLet、Google Mapsなど、いくつかの異なるライブラリのAPIをサポートしています。

使用する


読み込み中


ワックスAPIはTileJSONを使用します 。 TileJSONは、一連のタイルを使用するために必要なメタデータと情報を含む形式です。

開始するには、使用するタイルセットのURLを知っている必要があります。 ほとんどの場合、次の規則が使用されます。
 /{z}/{x}/{y}.[image format]

{z}はズームレベル、 {x}および{y}座標です。 TileJSONは、これらのプレースホルダーを置き換えるタイルセットのURLを表し、セットから任意のタイルを取得できるようにします。

たとえば、そのようなURL
 https://habrastorage.org/getpro/habr/post_images/e09/b8b/605/e09b8b60541e60473a21c777c75bcff9.png

タイルを返します
画像

このタイルのセットを記述するTileJSONは次のとおりです。
 { "version": "1.0.0", "scheme": "tms", "tiles" ["http://a.tile.mapbox.com/1.0.0/world-light/{z}/{x}/{y}.png"] }




キャッシュされたマップサービスと組み合わせて使用​​される非常に多くの異なるライブラリがありますが、それらはすべてほぼ同じことを行います-ページにタイルを追加し、マップが小さな正方形のピースのセットではなく、世界の不可欠な画像のように見えるようにそれらを管理します。

それでは、簡単で迅速な地図作成用JavaScriptライブラリであるModest Mapsを使用することから始めましょう。

ささやかな地図JS


Modest Maps JSは、タイルに基づいてマップを表示し、それらと対話するためのJavaScriptライブラリです。 BSDライセンスの下で配布。

開発者は、Modest Maps JSを、プロジェクトでインタラクティブマップを使用したい目の肥えたデザイナーやプログラマー向けの、無料で軽量で、拡張可能でカスタマイズ可能なライブラリと位置付けています。 このライブラリは、組み込みのフックシステムを使用して拡張できる圧縮されたクリーンなコードの形で一連の機能をカーネルに提供します。

当初、Modest MapsはPythonとActionScriptで作成されました。 ケーススタディ-walkingpapers.org

まず、必要なソースコードをダウンロードする必要があります 。
 git clone git://github.com/mapbox/wax.git


ワックスには、適度なマップを含む、サポートされているライブラリのセットが付属しています。 JavaScriptとCSSを接続します。
 <html> <head> <script src='wax/ext/modestmaps.min.js' type='text/javascript'></script> <script src='wax/dist/wax.mm.js' type='text/javascript'></script> <link href='wax/theme/controls.css' rel='stylesheet' type='text/css' /> ...




Waxには、wax.mm.connectorのTileJSON形式で記述されたタイルのセットを表示するModest Mapsプロバイダーが含まれています。

 var tilejson = { tilejson: '1.0.0', scheme: 'tms', tiles: ['http://a.tiles.mapbox.com/mapbox/1.0.0/world-light/{z}/{x}/{y}.png'] }; // Alias com.modestmaps to mm. This isn't necessary - // just nice for shorter code. var mm = com.modestmaps; // Set up a map in a div with the id 'modestmaps-setup' var m = new mm.Map('modestmaps-setup', // Use Wax's connector to add a new custom layer new wax.mm.connector(tilejson), // And it'll be 240px by 120px new mm.Point(240,120)); // Center it on the United States, at zoom level 2. m.setCenterZoom(new mm.Location(39, -98), 2);


マップは、 modestmaps-setupという識別子を持つdivに表示されmodestmaps-setup 。
 <div id="modestmaps-setup"></div>


例 。

リーフレット


LeafLetは、CloudMadeによって開発されたインタラクティブなタイルベースのマップを作成するための、最新の軽量なJavaScriptライブラリです。

このライブラリは、HTML5に含まれる高度な技術を使用して、デスクトッププラットフォームとモバイルプラットフォームの両方で効率的かつスムーズに動作するようにゼロから開発されました。 開発の主な優先事項は、使いやすさ、パフォーマンス、小さいサイズ、高度なブラウザーのサポート、柔軟性、使いやすいAPIです。 コードはOOPスタイルで記述され、モジュール式で、拡張可能で、理解しやすいように設計されています。

LeafLetを使用するには、プロジェクトで必要なコードを接続します。
 <html> <head> <script src='wax/ext/leaflet.js' type='text/javascript'></script> <script src='wax/dist/wax.leaf.js' type='text/javascript'></script> <link href='wax/ext/leaflet.css' rel='stylesheet' type='text/css' /> ...




Waxには、LeafLetのプロバイダーも含まれています。LeafLetは、wax.leaf.connectorのTileJSON形式で記述されたタイルセットを表示します。

 var tilejson = { tilejson: '1.0.0', scheme: 'tms', tiles: ['http://a.tiles.mapbox.com/mapbox/1.0.0/geography-class/{z}/{x}/{y}.png'], grids: ['http://a.tiles.mapbox.com/mapbox/1.0.0/geography-class/{z}/{x}/{y}.grid.json'], formatter: function(options, data) { return data.NAME } }; var map = new L.Map('leaflet-simple') .addLayer(new wax.leaf.connector(tilejson)) .setView(new L.LatLng(51.505, -0.09), 1); wax.leaf.interaction(map, tilejson);


おわりに


このトピックでは、TileStreamタイルサーバーをModest MapsおよびLeafLetライブラリと共に使用して、最も単純なキャッシュマッピングサービスの作成を検討しました。

ご清聴ありがとうございました。

便利なリンク

Source: https://habr.com/ru/post/J123290/

More articles:


All Articles