Go to Qiita Advent Calendar 2024 Top
LoginSignup
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@4gouinマップマーケティング株式会社

HERE Maps API for JavaScriptでGeoJSONのポリゴンを表示させる / はじめましてHERE

Last updated at Posted at 2024-05-07

この記事ではHERE Maps API for JavaScriptを使って地図にポリゴンを表示させてみようと思います。

私が所属しているマップマーケティングではエリアマーケティングで利用するポリゴンや統計データの作成を行っています。ポリゴンは行政界(都道府県～町丁目)やメッシュを扱うことが多いです。TerraMap APIというWeb APIでデータの配信も行っています。
これらのデータを使って地図アプリケーションを作成する際にポリゴンの表示がほぼほぼ必須になります。HERE Maps API for JavaScriptでGeoJSONの町丁目ポリゴンの表示方法を知りたいというのが今回試してみた動機です。

今回は地図の表示から始まり、GeoJSONのポリゴンを描画するところまでをゴールとします。私はこれまでHEREを使ったことがありません。はじめてのHEREです。

HEREについて

HEREさんのオーガニゼーションがあるのでそちらを見てもらうのがはやいと思います。

こちらも見ていただくとより分かりやすいです。

HERE Maps API for JavaScript

HERE Maps API for JavaScriptはHEREマップを使ってブラウザでアプリケーション開発を行うためのJavaScriptのAPIです。

利用の流れ

HEREマップを使って開発を行うにはアカウント登録が必要です。
アカウント登録　→　HEREプラットフォームで Maps API for JavaScript用のアプリ追加（APIキーゲット）　→　コード実装
の流れになります。

アカウント登録やアプリ追加については以下の記事が詳しいです。（私自身こちらの記事に助けられました）

地図を表示させる

何はともあれ地図を表示させないことには始まりません。
公式のドキュメントをベースに書いてみます。クイックスタートのページのコード例をベースにしてみました。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, width=device-width" />
    <script src="https://js.api.here.com/v3/3.1/mapsjs-core.js"
    type="text/javascript" charset="utf-8"></script>
    <script src="https://js.api.here.com/v3/3.1/mapsjs-service.js"
    type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <div style="width: 640px; height: 480px" id="mapContainer"></div>
    <script>
      // Initialize the platform object
      const platform = new H.service.Platform({
        'apikey': 'YOUR-API-KEY'
      });

      // Obtain the default map types from the platform object
      const maptypes = platform.createDefaultLayers();

      // Instantiate (and display) the map
      const map = new H.Map(
        document.getElementById('mapContainer'),
        maptypes.vector.normal.map,
        {
          zoom: 10,
          center: {lat: 35.68216, lng: 139.76593}
        });
    </script>
  </body>
</html>

image.png

日本向けの地図にする

日本のデータを使い始めるのページを参考にして日本向けの地図にしてみました。
ついでにズームやパンなどの地図イベントの有効化とズームコントロールの表示も行いました。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Here Map API for JavaScript サンプル</title>
    <meta name="viewport" content="initial-scale=1.0, width=device-width" />
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
    <!-- マップイベント用のjs -->
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
    <!-- UIコントロール用のjs -->
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js" ></script>
    <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />     
  </head>
  <body>
    <div id="mapContainer"></div>
    <script type="module" src="/main.js"></script>
  </body>
</html>

import './style.css'

const platform = new H.service.Platform({
  'apikey': 'YOUR-API-KEY'
});

// 日本に対応した地図にする
const omvService = platform.getOMVService({path:  'v2/vectortiles/core/mc'});
const baseUrl = 'https://js.api.here.com/v3/3.1/styles/omv/oslo/japan/';
const style = new H.map.Style(`${baseUrl}normal.day.yaml`, baseUrl);
const omvProvider = new H.service.omv.Provider(omvService, style);
const omvlayer = new H.map.layer.TileLayer(omvProvider, {max: 22});

// mapオブジェクト生成と地図表示
const map = new H.Map(
  document.getElementById('mapContainer'),
  omvlayer,
  {
    zoom: 15,
    center: {lat: 35.68216, lng: 139.76593}
  });

// パンやズームなどの地図イベントを有効にする
const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

// ズームコントロールをセット
const ui = H.ui.UI.createDefault(map, omvlayer);

すごく見やすい地図になりました。
image.png

GeoJSONのポリゴンを表示させる その1

ここからが本題です。GeoJSONのポリゴンを表示させていきます。
Display GeoJSON Dataを参考にして、東京駅周辺の町丁目ポリゴンを表示させてみました。
H.data.geojson.Readerクラスを使ってGeoJSONのファイルを読み込んで表示させる方法です。

image.png

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Here Map API for JavaScript サンプル</title>
    <meta name="viewport" content="initial-scale=1.0, width=device-width" />
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js" ></script>
    <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
    <!-- mapsjs-data.jsを追加 -->
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-data.js"></script>
  </head>
  <body>
    <div id="mapContainer"></div>
    <script type="module" src="/main.js"></script>
  </body>
</html>

import './style.css'

const platform = new H.service.Platform({
  'apikey': 'YOUR-API-KEY'
});

// 日本に対応した地図にする
const omvService = platform.getOMVService({path:  'v2/vectortiles/core/mc'});
const baseUrl = 'https://js.api.here.com/v3/3.1/styles/omv/oslo/japan/';
const style = new H.map.Style(`${baseUrl}normal.day.yaml`, baseUrl);
const omvProvider = new H.service.omv.Provider(omvService, style);
const omvlayer = new H.map.layer.TileLayer(omvProvider, {max: 22});

// mapオブジェクト生成と地図表示
const map = new H.Map(
  document.getElementById('mapContainer'),
  omvlayer,
  {
    zoom: 15,
    center: {lat: 35.68216, lng: 139.76593}
  });

// パンやズームなどの地図イベントを有効にする
const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

// ズームコントロールをセット
const ui = H.ui.UI.createDefault(map, omvlayer);

// H.data.geojson.ReaderでGeoJSONファイルを読み込む
const reader = new H.data.geojson.Reader('area.json', {
  style: function (mapObject) {
    if (mapObject instanceof H.map.Polygon) {
      mapObject.setStyle({
        fillColor: 'rgba(255, 0, 0, 0.3)',
        strokeColor: 'rgba(0, 0, 255, 0.2)',
        lineWidth: 3
      });
    }
  },
  // マルチポリゴンを表示するにはdisableLegacyModeをセット！
  disableLegacyMode: true
});

// GeoJSONファイルをパースする
reader.parse();

// GeoJSONレイヤーを追加
map.addLayer(reader.getLayer());

GeoJSONのポリゴンを表示させる その2

H.data.geojson.ReaderでGeoJSONのファイルを読み込む方法を試しましたが、そのほかの方法も見てみます。

  • GeoJSONをJavaScriptのオブジェクトに格納したデータ
  • 外部APIから取得したGeoJSONデータ
    を表示させるようなケースを想定したものです。

外部APIを呼び出す際にH.data.geojson.Readerでfetchできないようなこともあると思います。
外部APIから受け取ったGeoJSONのデータをURL.createObjectURL()でURLに変換してH.data.geojson.Readerにセットしてみます。
こちらのページを参考にしました。

クリック地点から半径1km円の範囲と共有部分がある町丁目ポリゴンをGeoJSON形式で取得して表示させています。

import './style.css'

const platform = new H.service.Platform({
  'apikey': 'YOUR-API-KEY'
});

// 日本に対応した地図にする
const omvService = platform.getOMVService({path:  'v2/vectortiles/core/mc'});
const baseUrl = 'https://js.api.here.com/v3/3.1/styles/omv/oslo/japan/';
const style = new H.map.Style(`${baseUrl}normal.day.yaml`, baseUrl);
const omvProvider = new H.service.omv.Provider(omvService, style);
const omvlayer = new H.map.layer.TileLayer(omvProvider, {max: 22});

// mapオブジェクト生成と地図表示
const map = new H.Map(
  document.getElementById('mapContainer'),
  omvlayer,
  {
    zoom: 15,
    center: {lat: 35.68216, lng: 139.76593}
  });

// パンやズームなどの地図イベントを有効にする
const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

// ズームコントロールをセット
const ui = H.ui.UI.createDefault(map, omvlayer);

// click地点から半径1000mの円と共有部分がある町丁目を取得して表示する
map.addEventListener('tap', function (evt) {
  // click地点の座標
  const coord = map.screenToGeo(evt.currentPointer.viewportX, evt.currentPointer.viewportY);
  // 円半径1000mに設定
  const radius = 1000;
  const params = {
    lat: coord.lat,
    lng: coord.lng,
    radius: radius,
  };
  const queryParams = new URLSearchParams(params);

  // 外部APIにリクエストしてGeoJSONフォーマットでレスポンスされる場合を想定
  fetch(`http://127.0.0.1:3300/?${queryParams}`)
  .then((response) => response.blob())
  .then((blob) => {
      // BlobオブジェクトをURLに変換する
      const url = URL.createObjectURL(blob);
      
      // H.data.geojson.ReaderでURLのGeoJSONを読み込む
      const reader = new H.data.geojson.Reader(url, {
        style: function (mapObject) {
          if (mapObject instanceof H.map.Polygon) {
            mapObject.setStyle({
              fillColor: 'rgba(255, 0, 0, 0.3)',
              strokeColor: 'rgba(0, 0, 255, 0.2)',
              lineWidth: 3
            });
          }
        },
        // マルチポリゴンを表示するにはdisableLegacyModeをセット！
        disableLegacyMode: true
      });

      // GeoJSONファイルをパースする
      reader.parse();

      // GeoJSONレイヤーを追加
      map.addLayer(reader.getLayer());
      URL.revokeObjectURL(url)

      // 指定した円ラインを描画する
      const circle = new H.map.Circle({lat: coord.lat, lng: coord.lng}, radius);
      circle.setStyle({
        fillColor: 'rgba(0, 0, 0, 0)', // 塗りつぶさない方法がわからなかったので完全に透過させる
        strokeColor: 'rgba(255, 0, 0, 0.5)',
        lineWidth: 3
      });
      map.addObject(circle);
    })
    .catch((error) => {
      console.log(error);
    });
});

here-map.gif

やってみて

日本に対応した地図があることはすごく良いと思いました。よく見ると町丁目の区画も地図に表現されていますし、小田原市曽我別所あたりの細かい飛び地も表現されているようでした。
詳しくは触れてませんが、APIキーの生成などを行うHEREプラットフォームのサイトも使いやすかったです。

今後理解を深めたいところ

初めてHERE Maps API for JavaScriptを触ってみて、まだまだわからないことがいっぱいです。HERE Maps API for JavaScriptでやる上での基本概念の理解もできていないです。H.data.geojson.ReaderのdisableLegacyModeについてもわかってないので理解したいと思います。 ← マルチポリゴンを描画するにはdisableLegacyModeが重要でした！
また、GeoJSONのポリゴンを描画する方法としてH.data.geojson.Readerを使わない方法もあると思います。
GeoJSONをパース → H.geo.MultiPolygonを生成 → H.geo.MultiPolygonからH.map.Polygonを生成 → mapに追加
の流れでもGeoJSONのポリゴンを描画することができそうな感じがします。GeoJSONからH.geo.MultiPolygonを生成する部分でスマートな方法が思いつかなかったので今回はやめました。

追記

disableLegacyModeについて書きました。

3
3
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?