diff --git a/chikudate.pdf b/chikudate.pdf index 3f9c6be..44cc484 100644 --- a/chikudate.pdf +++ b/chikudate.pdf Binary files differ diff --git a/chikudate.tex b/chikudate.tex index 8d5b04d..c1f3dc7 100644 --- a/chikudate.tex +++ b/chikudate.tex @@ -250,19 +250,14 @@ \section{パノラマ写真とは} 広大な光景を一目で見られるようにした写真のことである。分割撮影してプリント時に境界線を接合して作るもの、フィルムのこまの上下をカットして撮影するもの、専用の機材を用いて撮影するもの、デジタル写真データを計算機などで加工して作るものなどがある(図\ref{pa})。 %パノラマ写真について図説 + \begin{figure}[H] + \vspace*{8em} \includegraphics[width=4cm, bb=0 0 350 325]{panorama.pdf} \caption{パノラマ写真の作成工程} \label{pa} \end{figure} -\section{作業環境} -作業環境は以下の通りである。 -\begin{itemize} - \item Leaflet\footnote[3]{Web上で地図を表示するオープンソースのマップクライアントライブラリ} - \item JavaScript -\end{itemize} - \section{撮影} 2018年11月5日(日)に加茂地区にて仲町通りを中心に加茂地区の町並みを撮影した。 \subsection{撮影機材} @@ -285,10 +280,10 @@ \section{パノラマ写真の作成} -パノラマ写真を作成するためのソフトウェアは複数あるが、今回は以下の2つのソフトウェアを用いた。 +パノラマ写真を作成するためのソフトウェアは複数あるが、今回は以下の2つのソフトウェアを作成に用いた。 \subsection{Hugin} -Huginはオープンソースのフリーのソフトウェアである。UbuntuなどのフリーのOSにも対応している\cite{roku}。 +Huginはオープンソースのフリーのソフトウェアである(図\ref{hug})。UbuntuなどのフリーのOSにも対応している\cite{roku}。 完成したパノラマ写真は、JPEG、TIFF、PNG形式で保存できる。 \begin{figure}[H] @@ -300,9 +295,10 @@ \subsection{Image Composite Editor} -Image Composite Editor(以下ICE)は、Microsoft Research Computational Photography Groupによって作成されたソフトウェアである\cite{nana}。対応するOSはWindowsのみである。完成したパノラマ写真は、JPEG、TIFF、PhotoshopのPSD / PSB形式、HD ViewやDeep Zoomで使用されるマルチ解像度のタイル形式など、さまざまな画像形式で保存できる。 +Image Composite Editor(以下ICE)は、Microsoft Research Computational Photography Groupによって作成されたソフトウェアである\cite{nana}(図\ref{ice})。対応するOSはWindowsのみである。完成したパノラマ写真は、JPEG、TIFF、PhotoshopのPSD / PSB形式、HD ViewやDeep Zoomで使用されるマルチ解像度のタイル形式など、さまざまな画像形式で保存できる。 \begin{figure}[H] + \vspace*{2em} \includegraphics[width=4cm, bb=0 0 350 325]{ice.pdf} \caption{ICE作業画面} \label{ice} @@ -330,7 +326,47 @@ \section{システム} +作成したパノラマ写真をLeafletを用いてWeb上で表示するよう設定する。 %Leafletの背景を作ったパノラマ写真に変えた +\subsection{作業環境} +作業環境は以下の通りである。 +\begin{itemize} +\item Leaflet\par +Leafletとは、Web上で地図を表示するオープンソースのマップクライアントライブラリのこと\cite{hachi}。\par +HTML、CSS、JavaScriptの3つから構成され、任意の画像を背景またはアイコンにすることができるため自由度が高い。 +軽量でスマートフォンなどのタッチ操作にも対応した地図を手軽に表示することができる。 +ユーザーによって様々なプラグインが作成されているのが特徴で、それらを組み合わせることで多様な表現を行うことができる。 + +\item JavaScript\par +JavaScript とは、プログラミング言語のひとつである。オブジェクト指向スクリプト言語で、文字や画像、ページ等を動かす仕組みを作ることができる。 + +\end{itemize} + +\subsection{背景の設定} +Leafletは本来、Web上で地図を表示するためのライブラリである。 +そのため任意の画像を背景として用いる場合は下記のように設定する必要がある。 +今回は背景に関する設定をしたjsファイルを「imageoverlay.js」、背景に設定した画像のファイル名を「panorama.jpeg」とする。 + +\begin{itembox}[l]{imageoverlay.js} +  \begin{verbatim} +var leftBottom = [0.0, -0.0025], rightTop = [0.0025, 0.014]; +var map = L.map("imagemap").setView([0.001, 0.001], 18); +map.setMinZoom(18).setMaxZoom(22); +var imageUrl = 'map.jpeg', + imageBounds = [leftBottom, rightTop]; +L.imageOverlay(imageUrl, imageBounds).addTo(map); + \end{verbatim} +\end{itembox} + +\par +上記のように設定することで加茂地区の町並みを表示することが可能である(図\ref{saku})。 + +\begin{figure}[H] +\includegraphics[width=4cm, bb=0 0 350 325]{saku.pdf} +\caption{町並みを表示} +\label{saku} +\end{figure} + \chapter{結論}