mapbox 调用geoserver矢量切片

最新推荐文章于 2025-03-15 16:06:27 发布

Li.map

最新推荐文章于 2025-03-15 16:06:27 发布

阅读量1.7k

点赞数

分类专栏： GIS开发文章标签： mapbox

本文链接：https://blog.youkuaiyun.com/u012123612/article/details/99638984

版权

GIS开发专栏收录该内容

8 篇文章

订阅专栏

1.使用geoserver 发布矢量切片服务

参考：https://blog.youkuaiyun.com/u012123612/article/details/98940602

2.调用服务

全部示例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>mapbox 矢量切片</title>

    <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>
        html,body{
            height: 100%;
            width: 100%;
            margin: 0;
        }
        #mapdiv{
            height: 100%;
            width: 100%;
            z-index: 1;
        }
    </style>
</head>
<body>
    <div id="mapdiv">  
    </div>
</body>
<script>
</script>

<script>


    
    
    let source1={name:'Traffic',source:{
        "type": "vector",
        "traffic": true,
        "scheme":"tms",//new
        "tiles": ["http://127.0.0.1:8080/geoserver/gwc/service/tms/1.0.0/cite%3Aadm_devcoper_bas_rdnet_linkid_info_d60@3857@pbf/{z}/{x}/{y}.pbf"]
    }}
    let layer1={
        "id": "trafficlines",
        "type": "line",
        "source": "Traffic",
        "source-layer": "adm_devcoper_bas_rdnet_linkid_info_d60",
        "layout": {
            "line-join": "round",
            "line-cap": "round"
        },
        "paint": {
            "line-color": {
                "type": "categorical",
                "property": "color",
                "stops": [
                    ['1', '#66cc00'],
                    ['2', '#66cc00'],
                    ['3', '#ff9900'],
                    ['4', '#cc0000'],
                    ['5', '#9d0404']
                ]
            },
        }
    }


    mapboxgl.accessToken ='pk.eyJ1IjoibGJ5MDEwMiIsImEiOiJjanYyMjEwNDcyMGJoNDRwZmxyZDQ3ZjdmIn0.qXtiRarbRFMUbzuwlbmKiA';
    var map = new mapboxgl.Map({
        container: 'mapdiv',
        style: {
            "version": 8,
            "name": "Mapbox Streets",
            "sprite": "mapbox://sprites/mapbox/streets-v8",
            "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
            "sources": {},
            "layers": []
        },
        center: [121.54291,29.8687],
        zoom: 10
    });
    map.on("load", function () {
        //添加路况图层
        map.addSource("Traffic",source1.source);
        map.addLayer(layer1);
    });


 
    

</script>
</html>