MapBox / Open Layers错误地映射渲染图块

Question

根据上图，我正在尝试使用以下代码在OpenLayers / MapBox中渲染地图：

var map = new ol.Map({
    layers: [
      new ol.layer.Tile({
        source: new ol.source.XYZ({
        url: 'https://api.mapbox.com/styles/v1/mapbox/streets-v9/tiles/512/{z}/{y}/{x}?access_token=<the access token goes here>'
        })
      })
    ],
    target: 'map',
    controls: ol.control.defaults({
      attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
        collapsible: false
      })
    }),
    view: new ol.View({
      center: [0, 0],
      zoom: 2
    })
  });

HTML：

{% extends "layout.html" %}

{% block head %}
<link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css" type="text/css">
<link href='http://mapbox.com/base/latest/base.css' rel='stylesheet'/>
{% endblock %}

{% block body %}
<main id="content">
<div id="map" class="map" tabindex="0"></div>
</main>
<script src="https://openlayers.org/en/v4.0.1/build/ol.js"></script>
<script src="{{ url_for('static', filename='js/search/map.js')></script>

{% endblock %}

显然地图无法正确渲染。有没有人遇到过这个？

Answer 1

真的很傻。我在网址中有 z，y，x 而不是 z，x，y ！

url: 'https://api.mapbox.com/styles/v1/mapbox/streets-v9/tiles/512/{z}/{y}/{x}?access_token=<the access token goes here>