矢量瓦片一统江湖
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Add a third party vector tile source</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='mapbox-gl.js'></script>
<link href='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.eyJ1IjoicmFkaTIwMTUiLCJhIjoiY2luaW04ODg4MHdybnRxa2oydm5venJqYyJ9.uGY2VxwsRwqWIXJNcruZdA'
// 比例符号图
var fillColor = [
'interpolate',
['linear'],
['get','area'],
250, '#FFD273',
500, '#E86D68',
1000, '#9BFF69'
];
var map = new mapboxgl.Map({
container: 'map',
zoom: 4,
center: [109.898625809072612, 19.106708155556731],
style: {
"name": "mapbox_baidu",
"glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
"version": 8,
"sources": {},
"layers": []
},
// style: 'mapbox://styles/mapbox/light-v9',
hash: false,
attributionControl: false,
localIdeographFontFamily: "'全新硬笔行书简'"
});
map.on('load', function loaded() {
map.addSource('polygon-countries', {
type: 'vector',
tiles: ['http://localhost:8080/tiles/{z}/{x}/{y}']
});
map.addLayer({
id: 'background',
type: 'background',
paint: {
'background-color': 'pink'
}
});
map.addLayer({
"id": "polygon-layer",
"type": "fill",
"source": "polygon-countries",
"source-layer": "points",
"paint": {
// "fill-color": {
// "property": "name",
// "type": "categorical",
// "stops": [["China", "yellow"]],
// "default": "blue"
// }
'fill-color': fillColor,
'fill-opacity': .8
}
});
map.addLayer({
"id": "line-layer",
"type": "line",
"source": "polygon-countries",
"source-layer": "points",
'type': 'line',
'paint': {
'line-color': '#FFF',
'line-width': 1.5
}
});
map.addLayer({
"id": "text-layer",
'type': 'symbol',
"source": "polygon-countries",
"source-layer": "points",
'layout': {
// 'text-field': '{name}',
'text-field': ['get','name'],
"text-size": 22
},
'paint': {
'text-color': '#000000'
}
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Add a third party vector tile source</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='mapbox-gl.js'></script>
<link href='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.eyJ1IjoicmFkaTIwMTUiLCJhIjoiY2luaW04ODg4MHdybnRxa2oydm5venJqYyJ9.uGY2VxwsRwqWIXJNcruZdA'
var tileset = 'mapbox.streets';
var map = new mapboxgl.Map({
container: 'map',
zoom: 4,
center: [120.747646331787, 31.3388509750366],
style: {
"name": "mapbox_baidu",
'version': 8,
'sources': {},
'layers': []
},
//style: 'mapbox://styles/mapbox/light-v9',
hash: false
});
map.on('load', function loaded() {
map.addSource('countries-source', {
type: 'vector',
tiles: ['http://localhost:8080/tiles/{z}/{x}/{y}']
});
map.addLayer({
id: 'background',
type: 'background',
paint: {
'background-color': 'pink'
}
});
map.addLayer({
"id": "countries-layer",
"type": "line",
"source": "countries-source",
"source-layer": "points",
'layout': {
'line-join': 'round',
'line-cap': 'round'
},
'paint': {
'line-color': '#ff69b4',
'line-width': 3
}
});
});
</script>
</body>
</html>
