ドラクエウォークでも使われているらしい GeoHex を YOLP 地図に表示する #JavaScript

GeoHex とは

GeoHex は地図上を六角形の領域で区切った位置情報表現。
六角形のひとつひとつに場所を表すコードが付いている。

Hexagonal geo-coding system / Original mapping project
GeoHex/ GEOHEX devide whole target area into honeycomb geometry regions.

ドラゴンクエストウォークで使われているらしい

ドラゴンクエストウォークはスマートフォン向け位置情報ゲーム。
参考情報: ドラゴンクエストウォーク公式プロモーションサイト | SQUARE ENIX

ドラゴンクエストウォークを起動して、各種情報の画面を見ると、 GeoHex のライセンスが表示されている。

GeoHex をどのように使っているのかわからないが、もしかして距離を算出するのに使っているのだろうか？

GeoHex を YOLP 地図上に表示する

YOLP:Yahoo! JavaScriptマップAPI の上に GeoHex を表示するサンプルを作成した。

動作確認環境: macOS Mojave + Google Chrome 77.0.3865.90

動作サンプルページ: GeoHex on YOLP (Yahoo! Open Local Platform JavaScript Map API)

ソースコード

地図上に GeoHex を表示するための GeoHexLayer クラスを作成し、Map オブジェクトにレイヤー追加することで GeoHex 表示を実現している。

GeoHexLayer クラス (geohexlayer.js)

// GeoHex を表示するレイヤーです
class GeoHexLayer extends Y.Layer {

  constructor() {
    super();
    this.initializedLayer = false; // このレイヤー独自の初期化が終わっているか
  }

  // レイヤーを描画します
  // Y.Layer.drawLayer をオーバーライドしています
  drawLayer(force) {

    // レイヤーの初期化
    if (!this.initializedLayer) {
      this.initializedLayer = true; // レイヤー初期化済みフラグをONに
      this.hexLevel = 7; // Hex の大きさを表すレベル
      this.canvas = null; // 描画用 Canvas
      this.drawnItems = new Array(); // 描画済み Hex のリスト
      this.getMap().bind("move", this.onMove, this); // 地図移動時のイベントを捕捉する
    }

    // GeoHex 描画処理
    this.createCanvas();
    this.drawGeoHexList();
  }

  // 地図移動時に実行します
  onMove() {
    this.drawLayer();
  }

  // Canvas 要素を生成します
  createCanvas () {

    // すでに Canvas 要素が存在していたらクリアする
    if (this.canvas) {
      this.canvas.remove();
      this.drawnItems = new Array();
    }

    // Canvas 要素を生成
    let canvas = document.createElement("canvas");
    canvas.style.position = "fixed";
    canvas.style.top = 0;
    canvas.style.left = 0;

    // 地図を表示している要素を取得
    const container = this.getMapContainer();
    if (container && container[0]) {
      // Canvas 要素のサイズを地図表示している要素に合わせる
      canvas.width = container[0].offsetWidth;
      canvas.height = container[0].offsetHeight;
      // Canvas 要素を追加
      container[0].appendChild(canvas);
    }

    this.canvas = canvas;
  }

  // GeoHex を描画します
  drawGeoHexList() {

    // 地図表示領域の矩形を緯度経度座標で取得
    const bounds = this.getMap().getBounds(); // LatLngBounds
    const sw = bounds.getSouthWest();
    const ne = bounds.getNorthEast();

    // getXYListByRect.js を使用して
    // 矩形領域内の Hex リストを取得 ([{"x":x, "y":y}] 形式)
    const hexBuffer = true;
    const xyList = getXYListByRect(sw.lat(), sw.lng(), ne.lat(), ne.lng(), this.hexLevel, hexBuffer);

    // Hex をひとつずつ描画
    for(let xy of xyList) {
      // hex_v3.2_core.js を使用して Zone オブジェクトを取得
      const zone = GEOHEX.getZoneByXY(xy.x, xy.y, this.hexLevel);
      // Hex を描画
      this.drawGeoHex(zone);
    }
  }

  // Hex を描画します
  // zone: Hex 領域1つを表すオブジェクト
  drawGeoHex (zone) {

    // 描画済みなら何もしない
    if (this.drawnItems.includes(zone)) {
      return;
    }

    // 六角形の緯度経度をピクセル座標に変換
    const pixels = this.coordsToPixels(zone.getHexCoords());

    // Canvas に描画
    const ctx = this.canvas.getContext("2d");
    ctx.strokeStyle = "black";

    // 六角形を描画
    this.storokeHexagon(ctx, pixels);

    // Code を描画 (本来なら配置位置や文字の大きさを動的に調整すべき)
    ctx.fillStyle = "white"; // 背景色
    ctx.fillRect(pixels[1].x + 5, pixels[1].y + 6, 100, 16);
    ctx.fillStyle = "black"; // 文字色
    ctx.font = "14px serif";
    ctx.fillText(zone.code, pixels[1].x + 10, pixels[1].y + 20);

    // 描画済みリストに追加
    this.drawnItems.push(zone);
  }

  // GeoHex 形式の緯度経度の配列をコンテナ座標へ変換します
  // coords: GeoHex 形式の緯度経度オブジェクトの配列
  coordsToPixels(coords) {
    let pixels = new Array();
    for(let c of coords) {
      pixels.push(this.fromLatLngToContainerPixel(new Y.LatLng(c.lat, c.lon)));
    }
    return pixels;
  }

  // 六角形を描画します
  // ctx: CanvasRenderingContext2D オブジェクト
  // pixels: コンテナ座標の配列
  storokeHexagon(ctx, pixels) {
    ctx.moveTo(pixels[5].x, pixels[5].y);
    for(let p of pixels) {
      ctx.lineTo(p.x, p.y);
    }
    ctx.stroke();
  }
};

HTML

<!DOCTYPE html>
<html>
<head>
<title>GeoHex on YOLP (Yahoo! Open Local Platform JavaScript Map API)</title>
<meta charset="UTF-8">
<style>
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
#map {
  width: 100%;
  height: 100%;
}
</style>
</head>
<body>

<div id="map"></div>

<!-- YOLP Yahoo! JavaScriptマップAPI -->
<script type="text/javascript" charset="utf-8" src="https://map.yahooapis.jp/js/V1/jsapi?appid=YOUR_APPLICATION_ID"></script>

<!-- GeoHex ライブラリ -->
<script src="http://geohex.net/src/script/hex_v3.2_core.js"></script>
<script src="http://geohex.net/src/script/getXYListByRect.js"></script>

<!-- 今回作成した GeoHexLayer -->
<script src="geohexlayer.js"></script>

<script>

// Map オブジェクトを生成
var ymap = new Y.Map("map", {
  "configure": {
    "dragging": true,
    "singleClickPan": false,
    "doubleClickZoom": true,
    "continuousZoom": true,
    "scrollWheelZoom": true
  }
});

// GeoHexLayer を追加
ymap.addLayer(new GeoHexLayer('map'));

// 名古屋駅付近の地図を表示
var p = {lat : 35.171962, lon : 136.8817322, zoom : 16};
ymap.drawMap(new Y.LatLng(p.lat, p.lon), p.zoom, Y.LayerSetId.NORMAL);

// リサイズ時に地図を再描画
window.addEventListener("resize", () => {
  ymap.updateSize();
});

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

ドラクエウォークでも使われているらしい GeoHex を YOLP 地図に表示する