样式未完成加载:Mapbox GL JS
Posted
技术标签:
【中文标题】样式未完成加载:Mapbox GL JS【英文标题】:Style is not done loading: Mapbox GL JS 【发布时间】:2017-03-26 05:17:45 【问题描述】:我的目标是创建一个前后地图,在后地图上显示一系列坐标标记。
执行代码时,我在控制台中看到此错误消息:Style is not done loading
最终目标是看到允许用户水平滑动并查看地图变化(从之前到之后)的光标。
到目前为止,这是我的代码,任何帮助都会大有帮助!
$(document).ready(function()
var request_one = $.ajax(
url: "https://geohack-framework-gbhojraj.c9users.io/ny",
dataType: 'json'
)
var request_two = $.ajax(
url: "https://geohack-framework-gbhojraj.c9users.io/man",
dataType: 'json'
);
$.when(request_one, request_two).done(function(response_one, response_two)
console.log(response_one, response_two);
//create map of ny state
var nyGeo = response_one[0];
var manGeo = response_two[0];
(function()
mapboxgl.accessToken = 'pk.eyJ1IjoiamdhcmNlcyIsImEiOiJjaXY4amM0ZHQwMDlqMnlzOWk2MnVocjNzIn0.Pos1M9ZQgxMGnQ_H-bV7dA';
//manhattan map
var manCenter = manGeo.features[0].geometry.coordinates[0][0][0];
console.log('man center is', manCenter);
var beforeMap = new mapboxgl.Map(
container: 'before',
style: 'mapbox://styles/mapbox/light-v9',
center: manCenter,
zoom: 5
);
console.log('man geo is ', manGeo);
//ny state map
var nyCenter = nyGeo.features[0].geometry.coordinates[0][0];
console.log('the ny center is ', nyCenter);
var afterMap = new mapboxgl.Map(
container: 'after',
style: 'mapbox://styles/mapbox/dark-v9',
center: nyCenter,
zoom: 9
);
console.log('ny geo homie', nyGeo);
afterMap.on('load', function()
afterMap.addSource("points",
"type": "geojson",
"data": nyGeo
)
);
afterMap.addLayer(
"id": "points",
"type": "symbol",
"source": "points",
"layout":
"icon-image": "icon-15",
"text-field": "title",
"text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
"text-offset": [0, 0.6],
"text-anchor": "top"
);
var map = new mapboxgl.Compare(beforeMap, afterMap,
// Set this to enable comparing two maps by mouse movement:
// mousemove: true
);
());
)
);
【问题讨论】:
【参考方案1】:问题是您在加载地图之前将图层添加到地图。确保您在load
事件处理程序中附加了磁贴源和样式层。
afterMap.on('load', function()
afterMap.addSource("points",
"type": "geojson",
"data": nyGeo
)
afterMap.addLayer(
"id": "points",
"type": "symbol",
"source": "points",
"layout":
"icon-image": "icon-15",
"text-field": "title",
"text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
"text-offset": [0, 0.6],
"text-anchor": "top"
);
);
【讨论】:
但也许你会遇到这个问题github.com/mapbox/mapbox-gl-js/issues/4849。我终于在加载样式之前添加了 2 秒的延迟:-\以上是关于样式未完成加载:Mapbox GL JS的主要内容,如果未能解决你的问题,请参考以下文章
MapBox GL Android:来自自定义图块源的离线地图已下载但未使用