利用geoserver发布矢量切片，mapbox进行调用

来源：互联网发布：linux top n 1 编辑：程序博客网时间：2024/06/15 18:40

1、新建工作区

2、添加数据存储，选择矢量数据源下的文件夹方式，注意字符集编码。点击确定提交之后会出现该文件下的所有shpfile的图层发布界面。

3、或者选择左边的图层菜单，新建图层，选择工作区，进行图层进行发布。

4、设置图层的经纬度范围

5、切换到Tile Caching页面，设置发布切片的格式，矢量切片包括geojson、topojson、pbf，其中pbf数据格式数据量最小。

图层发布中的Tile Caching的设置可以实现设置缓存默认来同一设置要发布的切片格式。这样就不用没发布一个图层去设置相应的切片格式了。

6、图层发布完之后，可以新建图层组，将发布的图层添加到图层组进行管理。

7、切片发布完成之后，可以在Layer Preview或者Tile Layers中预览发布的切片。选择Layer Preview利用openlayers进行预览，选择相应的要素会出现要素的属性信息。

可以看到属性信息中文出现乱码，不用紧张，是字符编码的问题，在自己新建的数据存储中修改字符编码即可。

8、利用mapbox调用发布的矢量切片

代码

<!DOCTYPE html><html><head>    <meta charset='utf-8' />    <title>加载第三方矢量切片</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.32.1/mapbox-gl.js'></script>-->    <!--<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.css' rel='stylesheet' />-->    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.41.0/mapbox-gl.js'></script>    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.41.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 simple = {        "version": 8,        "sources": {            "composite": {                "url": "mapbox://mapbox.mapbox-terrain-v2",                "type": "vector"            },            "os": {                "type": "vector",                "scheme": "tms",                "tiles": [                    "http://localhost:8088/geoserver/gwc/service/tms/1.0.0/myspace:mylayer@EPSG:900913@pbf/{z}/{x}/{y}.pbf"                ]            },        },        "sprite": "your sprite",        "glyphs": "your glyphs",        "layers": [            {                "id": "background",                "type": "background",                "paint": {                    "background-color": "#ffffff"                },                "interactive": true            },            {                "id": "c",                "type": "fill",                "source": "os",                "source-layer": "bou2_4p",                "paint": {                    "fill-color": "#C1FFC1",                    "fill-opacity": 0.5                },                "interactive": true            },            {                "id": "mountain",                "type": "line",                "source": "os",                "source-layer": "m",                "layout": {                    "line-join": "round",                    "line-cap": "round"                },                "paint": {                    "line-color": "#3031ff",                    "line-width": {                        "stops": [[6,0.4], [8, 0.6], [13, 1]]                    },                    "line-dasharray": [1.5,3]                }            },            {                "id": "province",                "type": "symbol",                "source": "os",                "source-layer": "province",                "layout": {                    "symbol-spacing": 1000,                    "text-field": "{NAME}",                    "text-size": 15,                    "text-font": ["SimHei Regular"],                    "text-padding":2                },                "paint": {                    "text-color": "rgb(100,82,45)",                    "text-halo-color": "rgb(255,255,255)",                    "text-halo-width": 1,                },                "interactive": true            },        ]    };    var map = new mapboxgl.Map({        container: 'map',        style: simple,        zoom:3.5,        center:  [114.08,29.54]    });    map.addControl(new mapboxgl.NavigationControl()); /* new NavigationControl()创建NavigationControl，NavigationCongtrol包含一个缩放按钮和指南针，addControl(control,position)：添加控件，position表示位置，可以是top-left' ,  'top-right' ,  'bottom-left' , and  'bottom-right'，默认top-right */</script></body></html>

常见问题：

（1）mapbox调用服务的时候出现跨域问题

部署在Tomcat下面的geoserver请参照Tomcat下面部署Geoserver的跨域访问问题设置

独立安装版的geoserver请参照 Geoserver解决跨域问题设置

（2）mapbox加载wmts服务代码如下：

'mysource': {                "type": "vector",                'tiles': [                    'http://localhost:8080/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=hmyspace:mylayer&STYLE=&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&FORMAT=application/x-protobuf;type=mapbox-vector&TILECOL={x}&TILEROW={y}'                ]            },

阅读全文

0 0