MapBox /開啓圖層地圖渲染瓦片不正確

如根據上面的圖像，我試圖呈現的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 %}

很明顯，地圖渲染不正確。任何人都遇到過這個？

來源

2017-02-16 purplelionastronaut

真的很愚蠢的錯誤。我有z，y，x在url中，而不是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>

來源

2017-02-16 14:19:05 purplelionastronaut

MapBox /開啓圖層地圖渲染瓦片不正確

回答

相關問題