29 - 単純な Vector Feature の描画 2 - ポイントの追加

29-3 ポイント（点）の表示
example フォルダにある「OpenLayers: Vector Features（vector-features.html）」を参考にポイント（point: 点）、ライン（line: 線）、ポリゴン（polygon: 面）を表示します。
最初に、単純なポイントを表示します。
HTML ファイルを準備します。

a メニューの「ファイル」->「開く」をクリックします。

b 「ファイルを開く」ウィンドウで、「OpenLayers-2.13.1」->「ol009-nippon_bmi_akiruno_pgis.html」をクリックして選択し、「OK」ボタンをクリックします。

c メニューの「ファイル」->「新規」 -> 「その他」をクリックします。

d 「ウィザードを選択」ウィンドウで、「Web」（複数あるときは展開して探してください。）->「HTMLファイル」をクリックして選択し、「次へ」ボタンをクリックします。

e 「HTML」ウィンドウで「openlayersTokyoproj」をクリックして選択し、「ファイル名」を「ol010-nippon_bmi_akiruno_pgis.html」と入力し、「完了」ボタンをクリックします。







f 「ol009-nippon_bmi_akiruno_pgis.html」の内容をコピーして「ol010-nippon_bmi_akiruno_pgis.html」ファイルに貼り付けます。

g メニューの「ファイル」->「開く」をクリックします。

h 「ファイルを開く」ウィンドウで、「OpenLayers-2.13.1」->「examples」->「vector-features.html」をクリックして選択し、「OK」ボタンをクリックします。






i 「vector-features.html」のjavascript の一部をコピーして「ol010-nippon_bmi_akiruno_pgis.html」に貼り付けて、次のように修正します。
（29-2 で追加したところは削除します。）

---
map.addLayers([layer0, layer3, layer1, layer2, layer4]);

// ここから追加
// allow testing of specific renderers via "?renderer=Canvas", etc
var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;

/*
 * Layer style
 */
// we want opaque external graphics and non-opaque internal graphics
// 不透明外部図形と不透明でない内部画像を用意
var layer_style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
layer_style.fillOpacity = 0.2; // 塗りつぶし透過度
layer_style.graphicOpacity = 1; // 図形透過度

/*
 * Blue style
 */
var style_blue = OpenLayers.Util.extend({}, layer_style);
style_blue.strokeColor = "blue"; // 外周線色
style_blue.fillColor = "blue"; // 塗りつぶし色
style_blue.graphicName = "star"; // 形状
style_blue.pointRadius = 10; // 半径
style_blue.strokeWidth = 3; // 外周線太さ
style_blue.rotation = 45; // 傾き
style_blue.strokeLinecap = "butt"; // 外周線終端タイプ（平坦）

/*
 * Green style
 */
var style_green = {
 strokeColor: "#00FF00", // 16進法の色指定
 strokeWidth: 3,
 strokeDashstyle: "dashdot", // 外周線種類
 pointRadius: 6,
 pointerEvents: "visiblePainted",
/*
 * pointer-events: ポインタイベントの標的要素になれるフィーチャの状況
 * "visiblePainted": fill と stroke が none に設定されていない
 *「対話性 SVG 1.1（第２版）」（http://www.hcn.zaq.ne.jp/___/SVG11-2nd/interact.html）より
 * ポインタがフィーチャに重ねられると次の title: の内容が表示される。
 */
 title: "this is a green line"
};

/*
 * Mark style
 */
var style_mark = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);

/*
 * each of the three lines below means the same, if only one of
 * them is active: the image will have a size of 24px, and the
 * aspect ratio will be kept
 * 下の３本のコードはそれぞれ同じ意味です。その中の一つのコメントを外したとき、
 * 画像サイズは24ピクセルで、アスペクト比（長辺と短辺の比）は保持されます。
 */

// style_mark.pointRadius = 12;
// style_mark.graphicHeight = 24; 
// style_mark.graphicWidth = 24;

/*
 * if graphicWidth and graphicHeight are both set, the aspect ratio
 * of the image will be ignored
 * graphicWidth と graphicHeight が両方設定されていたら、画像のアクセプト比は
 * 無視されます。
 */

style_mark.graphicWidth = 24;
style_mark.graphicHeight = 20;
style_mark.graphicXOffset = 10; // default is -(style_mark.graphicWidth/2);
// x軸方向右に10ピクセル移動
style_mark.graphicYOffset = -style_mark.graphicHeight;
// y軸方向上に style_mark.graphicHeigh の半分移動
style_mark.externalGraphic = "OpenLayers-2.13.1/img/marker.png"; //パス修正
// title only works in Firefox and Internet Explorer

style_mark.title = "this is a test tooltip";

var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {
 style: layer_style,
 renderers: renderer
});

// create a point feature
var epsg4326 = new OpenLayers.Projection("EPSG:4326"); //追加
var point = new OpenLayers.Geometry.Point(139.191, 35.715).transform(epsg4326, map.getProjectionObject()); //緯度経度変換
var pointFeature = new OpenLayers.Feature.Vector(point,null,style_blue);
// OpenLayers.Feature.Vector("ジオメトリ","属性","スタイル")
var point2 = new OpenLayers.Geometry.Point(139.211, 35.742).transform(epsg4326, map.getProjectionObject()); //緯度経度変換
var pointFeature2 = new OpenLayers.Feature.Vector(point2,null,style_green);
var point3 = new OpenLayers.Geometry.Point(139.270, 35.724).transform(epsg4326, map.getProjectionObject()); //緯度経度変換
var pointFeature3 = new OpenLayers.Feature.Vector(point3,null,style_mark);
var point4 = new OpenLayers.Geometry.Point(139.270, 35.724).transform(epsg4326, map.getProjectionObject()); //Offset の効果確認のため追加
var pointFeature4 = new OpenLayers.Feature.Vector(point4,null,null);

map.addLayer(vectorLayer);
// map.setCenter(new OpenLayers.LonLat(point.x, point.y), 5);
vectorLayer.addFeatures([pointFeature, pointFeature3, pointFeature2, pointFeature4]); //, lineFeature, polygonFeature]);

// 追加はここまで
 

map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());
map.zoomToMaxExtent();
---