ArcGIS Platform でベクタータイルベースマップを ArcGIS API for JavaScript で表示してみる。

はじめに

Esri 社では背景地図として、ベクタータイルベースマップを提供しており、グローバルとして提供しているため、世界中の地図を使用することができます。そのため、地図上で表示している言語も開発者が任意にして使用することもできます。

Esri社のベクタータイルベースマップのリファレンスも提供されており、例えば、このドキュメントの 35 ページに記載されている手順の「root.json」ベクタータイルスタイルファイルを編集することで言語の設定などを変更することが可能です。

Esri Vector Basemap Reference Document (v2)
https://esri.maps.arcgis.com/home/item.html?id=c908722b0841404ba6a87d6221f201e4

また、ArcGIS Vector Tile Style Editor も提供しているため、地図のデザインを自由に変更したりしてオリジナルの地図を作成することも可能です。 developers.arcgis.com

デフォルトでは、Esri社が ArcGIS Online を利用してアクセスできるさまざまなベクターベースマップを提供しています。今回は、そこで提供している背景地図を ArcGIS API for JavaScript を使用して表示しましたので、その手順について紹介したいと思います。背景地図の使用では、API キーを使用しました。

ArcGIS Online Vector Basemaps
https://www.arcgis.com/home/group.html?id=aee77a8bf9cd40f4ab62f1873fbe46d1

API キーの使用について ArcGIS Platform の記事でも紹介していますのでそちらを参照してください。

freedom-tech.hatenablog.com

ArcGIS API for JavaScript

ArcGIS API for JavaScript で表示したベクタータイルベースマップ

全体のソースは、GitHub にもアップしました。 github.com

ArcGIS API for JavaScript でベクタータイルベースマップを表示

ArcGIS API for JavaScript でベクタータイルを表示には、VectorTileLayer クラスを使用します。VectorTileLayer クラスのプロパティのURL には、ベクタータイルサービスの URL、または、レイヤーのレンダリングに使用されるベクタータイルのスタイルリソースへの URL を指定します。

今回は、スタイルリソースとして以下の URL を使用しました。 https://www.arcgis.com/sharing/rest/content/items/001a6ce28431449da6c343c702eb5809/resources/styles/root.json

developers.arcgis.com

次のコードは、VectorTileLayer クラスを使用して、背景地図として使用するまでの手順になります。

      
var vtlJP = new VectorTileLayer({
    url: "https://www.arcgis.com/sharing/rest/content/items/001a6ce28431449da6c343c702eb5809/resources/styles/root.json"
});

var bmJP = new Basemap({
    baseLayers: [vtlJP]
});

const map = new Map({
    basemap: bmJP
});
      
const view = new MapView({
    map: map,
    center: [139.76, 35.69],
    zoom: 13, 
    container: "viewDiv",
    constraints: {
    snapToZoom: false
    }
});

全体のコードは以下になります。

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Japan Street Custom Basemap</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.19/"></script>

  <script>
    require([
      "esri/config",
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/VectorTileLayer",
      "esri/Basemap"
    ], function(esriConfig, Map, MapView, VectorTileLayer, Basemap) {

      esriConfig.apiKey = "AAPKaccc0b5f2dcf4f4e8c1adc5d2cbdd2d2gaw3u-Y5awzEH5KK04kv1dKs5tluamN6YYWGn0nKOM6Ac8NpaVBicKBvCGu9uLN1";
      
      var vtlJP = new VectorTileLayer({
        url: "https://www.arcgis.com/sharing/rest/content/items/001a6ce28431449da6c343c702eb5809/resources/styles/root.json"
      });
      
      var bmJP = new Basemap({
        baseLayers: [vtlJP]
      });
      
      const map = new Map({
        basemap: bmJP
      });
      
      const view = new MapView({
        map: map,
        center: [139.76, 35.69],
        zoom: 13, 
        container: "viewDiv",
        constraints: {
          snapToZoom: false
        }
      });
      
    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>