OSM 日本ベクトルタイルを ArcGIS API for JavaScript で消費する #JavaScript

ベクトルタイル Advent Calendar 2017の10日目でご案内した OSM 日本ベクトルタイルをArcGIS API for JavaScript 4.5で消費するための HTML コードは、次の通りになります。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>jp1710_aajs</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">
<style>
html, body, #map {padding: 0; margin: 0; height: 100%; width: 100%; overflow: hidden;}
</style>
<script src="https://js.arcgis.com/4.5/"></script>
<script>
require(["esri/views/MapView", "esri/Map", "esri/layers/VectorTileLayer"],
function(MapView, Map, VectorTileLayer) {
  map = new Map({layers: [new VectorTileLayer({url: "https://hfu.github.io/jp1710/style.json"})]})
  view = new MapView({center: [138.731389, 35.362222], zoom: 5, container: "map", map: map})
})
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>

このコードは、gh:hfu/jp1710_aajsに置いてあり、gh-pages でデモサイトもホストしています。現時点で ArcGIS API for JavaScript は、Mapbox style レベルで Mapbox GL JS との互換性を維持していますね。