Что хочу: загрузить карту со стилем mapbox, сверху нее положить свой векторный слой, загруженный предварительно на geoserver.
Нашла такой способ:
Код: Выделить всё
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Карта освещенности</title>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css' rel='stylesheet' />
<style>
html, body, #map {
height: 90%;
width: 90%;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
</body>
<script>
mapboxgl.accessToken = 'токен';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/osugeo/ckhd5yihm038519qpw3asd46k',
center: [56.1, 52.1],
zoom: 6
});
map.on('load', function() {
map.addLayer({
"id": "light",
"type": "fill",
"source": {
"type": "vector",
"scheme": "tms",
"tiles": ["http://127.0.0.1:8080/geoserver/gwc/service/tms/1.0.0/topp:light@EPSG%3A4326@pbf/{z}/{x}/{y}.pbf"],
"minzoom": 0,
"maxzoom": 14
},
"source-layer": "light",
"paint": {
"fill-opacity": 0.6,
"fill-color": "rgb(53, 175, 109)",
'fill-outline-color': 'white'
}
});
});
map.on('mouseleave', 'grnicy_ao_w1251_id', function () {
map.getCanvas().style.cursor = '';
});
map.addControl(new mapboxgl.NavigationControl());
map.addControl(new mapboxgl.ScaleControl());
map.addControl(new mapboxgl.FullscreenControl());
</script>
</html>
В браузере консоль выдает ошибки типа: Access to fetch at 'http://127.0.0.1:8080/geoserver/gwc/ser ... /42/43.pbf' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.