tippecanoe -e b -pC -Z8 -z14 -f c.geojson
location /laketile {
alias E:/code/00test/MapBox/mbutil/lake;
add_header 'Access-Control-Allow-Origin' '*';
}
<!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="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.0.1/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: 12,
center: [121, 23],
style: {
"name": "mapbox_baidu",
'version': 8,
'sources': {},
'layers': []
},
style: 'mapbox://styles/mapbox/light-v10',
hash: false
});
// map.on('load', function(){
// map.addSource('hn_source', {
// type: 'geojson',
// data: 'a.geojson'
// });
// map.addLayer({
// "id": "lake",
// "type": "circle",
// "source": 'hn_source',
// 'layout': {},
// 'paint': {
// 'circle-color': 'red',
// 'circle-radius': 3,
// 'circle-stroke-width': 2,
// 'circle-stroke-color': 'red'
// }
// });
// });
// map.on('load', function(){
// map.addSource('hn_source', {
// type: 'geojson',
// data: 'c.geojson'
// });
// map.addLayer({
// "id": "lake",
// "type": "fill",
// "source": 'hn_source',
// 'layout': {},
// 'paint': {
// 'fill-color': 'red',
// 'fill-opacity': 0.5
// }
// });
// });
// map.on('load', function(){
// map.addLayer({
// "id": "lake",
// "type": "circle",
// "source": {
// type: 'vector',
// tiles: ['http://localhost:8081/mbxtile/a/{z}/{x}/{y}.pbf']
// },
// "source-layer": "lake",
// 'layout': {},
// 'paint': {
// 'circle-color': 'red',
// 'circle-radius': 3,
// 'circle-stroke-width': 2,
// 'circle-stroke-color': 'red'
// }
// });
// });
map.on('load', function(){
map.addLayer({
"id": "c",
"type": "fill",
"source": {
type: 'vector',
tiles: ['http://localhost:8081/mbxtile/b/{z}/{x}/{y}.pbf']
},
"source-layer": "c",
'layout': {},
'paint': {
'fill-color': 'red',
'fill-opacity': 0.5
}
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Tegola Sample</title>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/build/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/css/ol.css">
<style>
#map {
width: 100%;
height: 100%;
position: absolute;
background: #f8f4f0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}
),
new ol.layer.VectorTile({
source: new ol.source.VectorTile({
format: new ol.format.MVT(),
url: "http://127.0.0.1:8081/mbxtile/a/{z}/{x}/{y}.pbf"
}),
style: styleFunction
})
],
projection:3857,
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([116.5,40]), //coordinates the map will center on initially
zoom: 10
})
});
function styleFunction(feature){
var styles = [];
styles.push(new ol.style.Style({
text: new ol.style.Text({
text: feature.get("ID"),
font: "bold 10px 微软雅黑",
fill: new ol.style.Fill({
color: 'red'
}),
textAlign:"center",
textBaseline:"middle"
})
}));
styles.push(
new ol.style.Style({
geometry: feature.get("geometry"),
image: new ol.style.Circle({
radius: 8,
fill: new ol.style.Fill({
color: 'black'
}),
stroke: new ol.style.Stroke({
color: 'green',
width: 2
})
})
})
);
return styles;
}
</script>
</body>
</html>
{"type":"Feature","properties":{"id":34,"name":"台湾","density":640.05},"geometry":{"type":"Polygon","coordinates":[[[121.63599694100014,25.222805080000114],[121.71851647200015,25.15200429900011],[121.89283287900003,25.113674221000167],[121.9057723320002,24.95010000200014],[121.82349694100014,24.854925848000164],[121.81495201900032,24.644354559000192],[121.85596764400032,24.550523179000123],[121.78003991000003,24.43268463700008],[121.77271569100003,24.30923086100006],[121.66285241000014,24.193101304000038],[121.60743248800014,24.07684967700004],[121.62891686300009,24.026190497000158],[121.52149498800031,23.658677476000094],[121.46216881600026,23.34300364800015],[121.4088647800001,23.254584052000126],[121.40007571700005,23.145493882000153],[121.29957116000003,22.95917389500019],[121.19027754000001,22.843166408000144],[121.14144941500001,22.741766669000185],[121.02100670700008,22.647894598000136],[120.9482528000002,22.52680084800005],[120.87501061300014,22.289252020000134],[120.87924238400001,22.055812893000052],[120.84156334700009,21.925482489000103],[120.70435631600014,21.98139069200016],[120.69695071700016,22.113226630000156],[120.62126712300017,22.29507070500017],[120.51197350400025,22.42475006700016],[120.33122806100027,22.51972077000019],[120.17554772200015,22.88410065300016],[120.17025800900024,23.013373114000046],[120.05941816500012,23.151027736000174],[120.1301491600002,23.360960244000154],[120.12426153300032,23.520020550000083],[120.18921959700026,23.774807033000116],[120.29224694100003,23.911932684000192],[120.34009850400014,24.02179596600007],[120.4931746750002,24.23065827000005],[120.57081139400032,24.404933986000202],[120.64893639400009,24.48387278900023],[120.70215905000032,24.60700104400013],[120.84750410200013,24.710842190000108],[120.90235436300031,24.836818752000056],[121.05933678500003,25.050238348000164],[121.37875410200007,25.157945054000038],[121.43628991000026,25.24144114800012],[121.53972415500004,25.28742096600007],[121.63599694100014,25.222805080000114]]]}}
网友评论