javascript - MapBox/Open Layers map 渲染图 block 不正确

Question

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

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 %}

显然 map 渲染不正确。有人以前遇到过这个吗？

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>