mapbox添加Geoserver发布矢量瓦片_4. geoserver配合mapbox的拓展

作者：我家小花儿 | 2024-06-12 17:20:59

踩

4. geoserver配合mapbox的拓展

Geoserver发布矢量瓦片

注意：本文使用GeoServer 2.15.1版本
安装Geoserver需要安装了JRE、安装完Geoserver后要解决跨域问题
制作切片需要切片扩展，将jar包复制到...\GeoServer 2.15.1\webapps\geoserver\WEB-INF\lib下

1、下载安装geoserver

官网下载：http://geoserver.org/download

安装过程一直next，电脑会自己找到jdk，若没有下载jdk请先下载jdk并配置相关环境变量。此教程中用户名及密码使用的默认用户名及密码

2、下载切片扩展

官网下载地址：http://geoserver.org/release/2.15.x/

将下载的jar包放置到D:\tools\geoserver-2.51.1\GeoServer 2.15.1\webapps\geoserver\WEB-INF\lib下

3：下载安装完geoserver及矢量瓦片插件之后启动geoserver

浏览器访问地址：http://localhost:8080/geoserver/web/

登录名：admin 密码：geoserver

4、geoserver解决跨域问题（后边mapbox调用geoserver矢量瓦片服务的会存在跨域问题）

打开D:\tools\geoserver-2.51.1\GeoServer 2.15.1\webapps\geoserver\WEB-INF目录下的web.xml文件

将下边两张截图中的文件释放

第一张：

第二张：

5、发布矢量瓦片

1、工作区-添加新的工作区

2、数据存储-添加新的数据存储

3、Tile Layers

预览效果：

4、获取服务地址：

点击geoserver图标

选择tms1.0.0

找到刚才发布的服务

拼接服务地址供后边mapbox调用：http://localhost:8080/geoserver/gwc/service/tms/1.0.0/myTest%3APROPL@EPSG%3A900913@pbf + /{z}/{x}/{y}.pbf

6、mapbox调用


<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>mapbox添加geoserver发布的矢量瓦片</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.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 = 'pk.eyJ1IjoiY2hlbndhbmdzaGFuIiwiYSI6ImNqaGp3djlxMTJwb2szZG50ZzBjbDQ1cWIifQ.Gp_2XohZMGO-a6e_treCQQ';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v10',
    zoom: 12,
    center: [91.13, 29.65]
});
 
map.on('load', function() {
    // Add Mapillary sequence layer.
    // https://www.mapillary.com/developer/tiles-documentation/#sequence-layer
    map.addLayer({
        "id": "PROPL",
        "type": "fill",
        "source": {
            "type": "vector",
            "scheme":"tms",
            "tiles": ["http://localhost:8080/geoserver/gwc/service/tms/1.0.0/myTest%3APROPL@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf"],
            "minzoom": 1,
            "maxzoom": 14
        },
        "source-layer": "PROPL",
        "paint": {
            "fill-color":"#088",
            "fill-opacity":0.8
        }
    });
});
 
map.addControl(new mapboxgl.NavigationControl());
</script>
 
</body>
</html>

7、效果展示（矢量瓦片为西藏省界）：

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/708902