OpenLayers 13 Feature Style 地図記号を表示

無料で使えるEPSフリー素材集【EPSフリー素材.jp】
http://freesozai.jp/

から学校関係の地図記号をmapsignという名前のフォルダを作ってそこにダウンロードしました。
mkg_013から017の低解像度を選びました。

Eclipseで地図記号を次のようにインポートします。
0 プロジェクトウィンドウのOpenLayersprojを右クリックして「新規」-「フォルダ」をクリックします。
「フォルダー」画面で「フォルダー名」を「mapsign」と入力し「終了」ボタンをクリックします。
1 プロジェクトウィンドウのOpenLayersprojを右クリックしてインポートをクリックします。
2 「選択」画面で「一般」-「ファイル・システム」を選んで「次へ」ボタンをクリックします。
3 「ファイル・システム」画面の「次のディレクトリから」欄右側の「参照」ボタンをクリックします。
4 （私の場合は）デスクトップのmapsignフォルダを選んで「OK」ボタンをクリックします。
5 「すべて選択ボタン」をクリックします。
6 「宛て先フォルダー」欄右側の「参照」ボタンをクリックします。
7 「OpenLayersproj」-「mapsign」を選んで「OK」ボタンをクリックします。
8 「選択」画面で「終了」ボタンをクリックします。

feature_style_unique.html を参考に地図を作成します。
0 feature_style_unique.html をダブルクリックして開きます。
1 プロジェクトビューのOpenLayersprojフォルダを右クリックして、新規->HTMLファイルをクリックします。
2 HTMLファイルウィンドウでファイル名をfeature_style_mapsign.htmlと入力し、終了ボタンをクリックします。
3 エディタのタブをエディタビュー内の下へドラッグすると2段になってみやすくなります。
4 charsetをUTF-8にして、<title>をFeature Style Map Signにします。
5 feature_style_basic.htmlの内容をコピーしてfeature_style_mapsign.html ファイルに貼り付け修正します。

6 kanagawa_mlit_pgis_school.map の elementary_school レイヤように次のように修正します。

---
var style_markRed = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
  style_markRed.graphicWidth = 15;  //画像の幅
  style_markRed.graphicHeight = 15; //画像の高さ
  style_markRed.graphicOpacity = 1;  //画像の透明度
  style_markRed.graphicXOffset = -(style_markRed.graphicWidth/2);
//画像を横方向に画像幅の半分ずらす
  style_markRed.graphicYOffset = -style_markRed.graphicHeight;
//画像を縦方向に画像高さ分のずらす
  style_markRed.externalGraphic = "./mapsign/junior_school.png"; //画像のパス

7他のレイヤも同様に追加します。

LAYER NAME        extarnalGraphic
juniorhigh_school ./mapsign/junior_school.png
high_school       ./mapsign/high_school.png
technical_college ./mapsign/tec_college.png
college           ./mapsign/2college.png 
university        ./mapsign/university.png 

technical_college、college、universityは、画像の幅と高さを "25" にすると見やすくなります。

8 Webブラウザを起動して、アドレスバーに次のように入力します。

http://localhost/openlayers/OpenLayersproj/feature_style_mapsign.html