項目需要，要用Mapbox渲染較大量的建筑數據，考慮到數據加載(下載)的效率需要采用瓦片的形式
總體方案為本地有shp或geojson數據，用Geoserver切片和發布服務，Mapbox調用
數據介紹
處理后的OSM數據，曼哈頓街區范圍，保留高度字段，加個是否顯示的標記用于測試filter功能
GeoServer
Tips：
Publishing a GeoServer Layer for use with Mapbox Styles
本文用GeoServer 2.13.0版本
注意安裝Geoserver需要安裝了JRE
注意制作切片需要切片擴展，將jar包復制到...\GeoServer 2.13.0\webapps\geoserver\WEB-INF\lib下
安裝成功后，先Start GeoServer，再打開Admin Page
跨域問題：https://blog.csdn.net/longshengguoji/article/details/53352888
(待考證)Mapbox矢量切片目前僅支持EPSG:900913
流程：安裝Geoserver(及JRE、矢量切片擴展)——新建工作區——添加數據/發布——編輯數據Tile Caching——跨域問題——mapbox調用
GeoServer+切片擴展
切片擴展
需要JRE
start
Admin Page
新建工作區
添加數據
編輯圖層
切片圖層
切片預覽
跨域問題
Mapbox調用示例
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Join local JSON data with vector tile geometries</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js'></script>
<link 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 =<your token>;
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [-73.95, 40.78],
zoom: 13
});
map.on('load', function() {
map.addSource('xixi',{
'type':'vector',
'scheme':'tms',
'tiles':['http://localhost:8080/geoserver/gwc/service/tms/1.0.0/myTest%3AbigBuildings@EPSG:900913@pbf/{z}/{x}/{y}.pbf']
});
map.addLayer({
'id': '3d-buildings',
'source': 'xixi',
'source-layer':'bigBuildings',
'type': 'fill-extrusion',
'paint': {
'fill-extrusion-color': [
'interpolate',
['linear'],
['get', 'height'],
0, 'rgb(255,255,191)',
75, 'rgb(253,174,97)',
150, "rgb(215,25,28)",
],
'fill-extrusion-height': ['get', 'height'],
'fill-extrusion-opacity': .8
}
});
});
</script>
</body>
</html>
非常重要！
注意地址：
map.addSource('xixi',{
'type':'vector',
'scheme':'tms',
'tiles':['http://localhost:8080/geoserver/gwc/service/tms/1.0.0/myTest%3AbigBuildings@EPSG:900913@pbf/{z}/{x}/{y}.pbf']
});
這個地址可以從主頁tms1.0.0處獲得
image.png
image.png
image.png
image.png
