我尝试从ol-mapbox-style导入具有样式功能的样式。但这是行不通的。 -没有样式部分,地图就像矢量线一样完美呈现 -包括样式部分,浏览器不会显示地图 请参见下面的代码:
var stylefunction = olms.stylefunction;
var {applyStyle} = olms;
var {apply} = olms;
var key = 'my-key';
const map = new Map({
target: 'map',
view: new View({
center: fromLonLat([5.058510183635008, 52.30659202560312]),
zoom: 14
})
});
const layer = new VectorTileLayer({
source: new VectorTileSource({
attributions: '',
format: new GeoJSON(),
maxZoom: 19,
url: 'https://tile.nextzen.org/tilezen/vector/v1/all/{z}/{x}/{y}.json?api_key=' + key,
tileLoadFunction: function(tile, url) {
tile.setLoader(function(extent, resolution, projection) {
fetch(url).then(function(response) {
response.text().then(function(data) {
const jsons = JSON.parse(data);
const format = tile.getFormat();
const layers = ['water', 'roads', 'buildings'];
const features = [];
layers.forEach(function(layer) {
const layerFeatures = format.readFeatures(jsons[layer], {
featureProjection: projection
});
layerFeatures.forEach(function(feature) {
feature.set('layer', layer);
features.push(feature);
});
});
tile.setFeatures(features);
});
});
});
}
})
});
map.addLayer(layer);
fetch('./static/bright.json')
.then(r => r.json())
.then((glStyle) => {
stylefunction(layer, glStyle, 'bright');
if (map.getLayers().getArray().indexOf(layer) === -1) {
map.addLayer(layer);
}
});
并在此处查看我试图用作测试文件的bright.json的第一行。
{
"glyphs": "https://maps.tilehosting.com/fonts/{fontstack}/{range}.pbf?key=",
"name": "bright",
"layers": [
{
"id": "background",
"paint": {
"background-color": "#f8f4f0"
},
"type": "background"
},
{
"filter": [
"==",
"subclass",
"glacier"
],
"id": "landcover-glacier",
"layout": {
"visibility": "visible"
},
"metadata": {
"mapbox:group": "1444849388993.3071"
},
"paint": {
"fill-color": "#fff",
"fill-opacity": {
"base": 1,
"stops": [
[
0,
0.9
],
[
10,
0.3
]
]
}
},
"source": "openmaptiles",