2015/06/10

OpenLayers 3 でマーカーを表示する方法 2種

調べた限り、OpenLayers 3 でマーカーを表示する方法は2通りある様子OpenLayers 3.6.0 で確認。

Feature を利用する方法

マーカー用のレイヤを用意して、そこに Feature を配置する方法です。
以下のオブジェクトが必要になります。
  • ol.Feature
    座標情報など各マーカー毎に持つ情報を管理するオブジェクト。
  • ol.style.Style
    Marker のアイコンや表示文字など、見た目に関する情報を管理するオブジェクト。
    各Feature に適用することも出来るが、全て同じマーカーにする場合は Layer にセットすることも可能。
  • ol.source.Vector
    Feature 一覧をまとめたもの。
    ol.source にはいろいろな種類があり、Feature を使わないで外部から取り込んだりすることも出来る
  • ol.layer.Vector
    ol.source.Vector を Source として持つレイヤ。
具体的な使用方法は以下のサンプルを見てもらうと分かりやすいでしょう。

サンプル

ソースコード
<!DOCTYPE html>
<html>
<head>
<title>Marker Expample</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.5.0/ol.js"></script>
</head>
<body>
<div id="map" style="width:100%; height: 800px;"></div>

<script type="text/javascript">
function convertCoordinate(longitude, latitude) {
  return ol.proj.transform([longitude, latitude], "EPSG:4326","EPSG:900913");
}

// デフォルトのスタイル
var markerStyleDefault = new ol.style.Style({
  image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ {
    anchor: [0.5, 1],
    anchorXUnits: 'fraction',
    anchorYUnits: 'fraction',
    opacity: 0.75,
    src: 'marker-red.png'
  })
});

// FeatureA に適用するスタイル
var markerStyleA = new ol.style.Style({
  image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ {
    anchor: [0.5, 1],
    anchorXUnits: 'fraction',
    anchorYUnits: 'fraction',
    opacity: 0.75,
    src: 'marker-blue.png'
  })
});

var markerFeatureA = new ol.Feature({
  geometry: new ol.geom.Point(convertCoordinate(139.745229, 35.658227))
});
markerFeatureA.setStyle(markerStyleA);

var markerFeatureB = new ol.Feature({
  geometry: new ol.geom.Point(convertCoordinate(139.744165, 35.658013))
});

var markerFeatureC = new ol.Feature({
  geometry: new ol.geom.Point(convertCoordinate(139.744262, 35.659695))
});

// Feature 一覧 を Source にセット
var markerSource = new ol.source.Vector({
  features: [markerFeatureA, markerFeatureB, markerFeatureC]
});

// Source を Layer にセット
var markerLayer = new ol.layer.Vector({
  source: markerSource,
  style: markerStyleDefault
});

// Open Street Map Layer
var osmLayer = new ol.layer.Tile({
  source: new ol.source.OSM()
});

var map = new ol.Map({
  layers: [ osmLayer, markerLayer ],
  target: document.getElementById('map'),
  view: new ol.View({
    center: convertCoordinate(139.745433, 35.658579),
    zoom: 18
  })
});

</script>
</body>
</html>

Overlay を使う方法

参考
The Book of OpenLayers3 - Code samples
Layer ではなく最上位の Overlay にマーカーを描画します。
Layer を用いた細かい制御は出来ませんが、HTML Element をマーカーとして用いることが出来るため、参考リンクのようにスタイルシートアニメーションを適用したりすることが可能です。

サンプル

ソースコード
<!DOCTYPE html>
<html>
<head>
<title>Marker Expample</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.5.0/ol.js"></script>
</head>
<body>
<div id="map" style="width:100%; height: 800px;"></div>

<script type="text/javascript">
function convertCoordinate(longitude, latitude) {
  return ol.proj.transform([longitude, latitude], "EPSG:4326","EPSG:900913");
}

// Open Street Map Layer
var osmLayer = new ol.layer.Tile({
  source: new ol.source.OSM()
});

var map = new ol.Map({
  layers: [ osmLayer ],
  target: document.getElementById('map'),
  view: new ol.View({
    center: convertCoordinate(139.745433, 35.658579),
    zoom: 18
  })
});

function makeMarkerOverlay(imgSrc, coordinate) {
  var imgElement = document.createElement('img');
  imgElement.setAttribute('src', imgSrc);
  var markerOverlay = new ol.Overlay({
    element: imgElement,
    position: coordinate,
    positioning: 'bottom-center'
  });
  return markerOverlay;
}

var markerA = makeMarkerOverlay('marker-blue.png', convertCoordinate(139.745229, 35.658227));
var markerB = makeMarkerOverlay('marker-red.png', convertCoordinate(139.744165, 35.658013));
var markerC = makeMarkerOverlay('marker-red.png', convertCoordinate(139.744262, 35.659695));

map.addOverlay(markerA);
map.addOverlay(markerB);
map.addOverlay(markerC);
</script>
</body>
</html>

0 件のコメント:

コメントを投稿