mapbox本地化(tomcat发布精灵图、底图资源)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>mapbox本地化tomcat发布</title>
<meta charset="utf-8"/>
<script src='../lib/mapboxgl/mapbox-gl.js'></script>
<link href='../lib/mapboxgl/mapbox-gl.css' rel='stylesheet'/>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
//mapboxgl.accessToken = 'pk.eyJ1IjoiZnJlZWdpcyIsImEiOiJjam04dXRudWwwNXczM3Fqb3dkd201dGZzIn0.jvDsB3YWibUpk1oR9vva1A';
var map = new mapboxgl.Map({
container: 'map',
style: {
"version": 8,
"name": "Mapbox Streets",
"sprite": "http://localhost:8080/mapbox_build/sprite/sprite",
"glyphs": "http://localhost:8080/mapbox_build/font/{fontstack}/{range}.pbf",
"sources": {
"osm-tiles": {
"type": "raster",
'tiles': [
// "http://c.tile.openstreetmap.org/{z}/{x}/{y}.png"
"http://localhost:8080/googlechina/{z}/{x}/{y}.png" // 加载google 正确，加载百度失败（底图资源） 算法不同
],
'tileSize': 256
}
},
"layers": [{
"id": "123",
"type": "raster",
"source": "osm-tiles",
"source-layer": "osmtiles"
}]
},
center: [119, 31], // starting position
zoom: 3
});
map.on('load', function () {
map.addLayer({
"id": "points",
"type": "symbol",
"source": {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-77.03238901390978, 38.913188059745586]
},
"properties": {
"title": "Mapbox DC",
"icon": "monument"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-122.414, 37.776]
},
"properties": {
"title": "Mapbox SF",
"icon": "harbor"
}
}]
}
},
"layout": {
"icon-image": "{icon}-15",
"text-field": "{title}",
"text-font": ["Open Sans Regular"],
"text-offset": [0, 0.6],
"text-anchor": "top"
}
});
});
</script>
</body>
</html>
效果图
浙公网安备 33010602011771号