2015/06/12

OpenLayers 3 のマーカーに文字を表示する方法 2種

OpenLayers 3 でマーカーを表示する方法 2種 でマーカーを表示できるようになったので、今度は文字を表示してみたいと思います。


Feature を利用する方法

Feature を使用する場合は ol.style.Style に text 属性をつけて実現します。
サンプルは以下です。
サンプルでは固定の文字列を表示していますが、Feature 毎に変更する方法もあります。

サンプル

ソースコード
<!DOCTYPE html>
<html>
<head>
<title>Marker Expample</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.6.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'
  }),
  text: new ol.style.Text({
    fill: new ol.style.Fill({color: "#ff0000"}),
    stroke: new ol.style.Stroke({color: "#ffffff", width: 2}),
    scale: 1.6,
    textAlign: "center",
    textBaseline: "top",
    offsetY: 0,
    text: "DefaultFeature",
    font: "Courier New, monospace"
  })
});

// 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'
  }),
  text: new ol.style.Text({
    fill: new ol.style.Fill({color: "#0000ff"}),
    stroke: new ol.style.Stroke({color: "#ffffff", width: 2}),
    scale: 1.6,
    textAlign: "center",
    textBaseline: "top",
    offsetY: 0,
    text: "FeatureA",
    font: "Courier New, monospace"
  })
});

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 を使う方法

Overlay を使用する場合、マーカーはHTMLエレメントなので、divタグ等を使用すれば文字を表示することができます。
CSS を適用することも出来るので、既存の技術で装飾等も可能です。
注意点としては、アイコン用のimgタグとテキスト用のdivタグは別の Overlay で表現したほうが良いです。
そうしないと、アイコンの表示位置がずれてしまいます。

サンプルでは読みやすさを重視して、愚鈍にアイコンとテキストの Overlay を並べて書いていますが、実際に使用する際にはまとめてオブジェクト化する等の工夫をした方が良いかもしれません。

サンプル

ソースコード
<!DOCTYPE html>
<html>
<head>
<title>Marker Expample</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.6.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;
}
function makeTextOverlay(text, coordinate) {
  var textElement = document.createElement('div');
  textElement.innerHTML = text;
  var markerOverlay = new ol.Overlay({
    element: textElement,
    position: coordinate,
    positioning: 'top-center'
  });
  return markerOverlay;
}

var coordinateA = convertCoordinate(139.745229, 35.658227);
var markerA = makeMarkerOverlay('marker-blue.png', coordinateA);
var textA = makeTextOverlay('MarkerA', coordinateA);
var coordinateB = convertCoordinate(139.744165, 35.658013);
var markerB = makeMarkerOverlay('marker-red.png', coordinateB);
var textB = makeTextOverlay('MarkerB', coordinateB);
var coordinateC = convertCoordinate(139.744262, 35.659695);
var markerC = makeMarkerOverlay('marker-red.png', coordinateC);
var textC = makeTextOverlay('MarkerC', coordinateC);

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

0 件のコメント:

コメントを投稿