Tangram

事前要件

コード

必要なライブラリを含めてください。

<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
<script src="https://unpkg.com/tangram/dist/tangram.min.js"></script>

この例の CSS は次のようになります。

        body {
            margin: 0px;
            border: 0px;
            padding: 0px;
        }
        #map {
            height: 100%;
            width: 100%;
            position: absolute;
        }

次に、必要な JS コードを追加します。

ベアラートークン
| apiKey
<body>
    <div id="map"></div>

    <script>
        var map = L.map('map');
        var layer = Tangram.leafletLayer({
            scene: 'map_style.yaml' // you should use your own file
        });
        var scene = layer.scene;
        scene.subscribe({
            load: function (e) {
                request_headers.Authorization = 'Bearer ' + getAuthToken(); // this function returns your authentication token
            }
        });
        layer.addTo(map);
    </script>
  </body>
<body>
    <div id="map"></div>

    <script>
        var map = L.map('map');
        var layer = Tangram.leafletLayer({
            scene: 'map_style.yaml' // You should use your own file. You may use use 'https://assets.vector.hereapi.com/styles/berlin/day/tangram/tilezen?apikey=API_KEY_HERE' as a starting example
        });
        layer.addTo(map);
        map.setView([52.5200, 13.4050], 2);
    </script>
  </body>
map_style.yaml 定義では、サービスに接続する必要があります。
ベアラートークン
| apiKey
sources:
    heremvt:
        type: MVT
        url: https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv
        request_headers:
            Authorization: Bearer XXXXXX
        max_zoom: 17
sources:
    heremvt:
        type: MVT
        url: https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=apikey_HERE
        max_zoom: 17

「」に一致する結果は 件です

    「」に一致する結果はありません