【GIS】矢量瓦片，GeoServer+Mapbox
2018-05-19 本文已影响4人
账号已删除
项目需要，要用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 href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/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 =<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
