arcgis js 3.x加载geoserver发布的矢量切片服务图层_arcgis加载geoserver矢量瓦片-CSDN博客

本文链接：https://blog.csdn.net/xlp789/article/details/126524819

本文介绍如何利用deck.gl库创建自定义图层，并通过一个具体示例展示了如何将地图服务与矢量瓦片图层集成到ArcGIS API for JavaScript中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport"
          content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>
        Build a custom layer view using deck.gl | Sample | ArcGIS API for
        JavaScript 4.23
    </title>


    <link rel="stylesheet" href="https://js.arcgis.com/3.27/esri/css/esri.css" />
    <script src="https://js.arcgis.com/3.27/init.js"></script>

    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>

    <script>
        require(["esri/map", "esri/geometry/Extent", "esri/layers/ArcGISTiledMapServiceLayer",
            "esri/layers/ArcGISDynamicMapServiceLayer",
            "esri/SpatialReference",
            "esri/layers/VectorTileLayer",
            "esri/layers/WMSLayer"], function (Map, Extent, ArcGISTiledMapServiceLayer,
            ArcGISDynamicMapServiceLayer, SpatialReference, VectorTileLayer, WMSLayer) {
                var map = new Map("viewDiv", {
                    zoom: 10,
                    center: [118.5151588, 31.6648887],

                });
            var DXT = new ArcGISTiledMapServiceLayer("http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer", { id: "DXT" });
            map.addLayer(DXT);
          

            var style = {
                "version": 8,
                "sources": {
                    "osm": {
                        "tiles": ['http://localhost:8080/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=jjgis:pipeline&STYLE=&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&FORMAT=application/vnd.mapbox-vector-tile&TILECOL={x}&TILEROW={y}'],
                        "type": "vector",

                    }
                },
                "layers": [
                    {
                        "id": "gx",
                        "type": "line",
                        "source": "osm",
                        "source-layer": "pipeline",
                        "minzoom": 0,
                        "maxzoom": 24,
                        "paint": {
                            "line-color": "#595CCF",
                            "line-width": 2
                        }
                    }
                ],
                "id": "test"
            };
            var tileLyr = new VectorTileLayer(style);
            console.log(tileLyr)
            map.addLayer(tileLyr);
        });

     
          
    </script>
</head>

<body>
    <div id="viewDiv"></div>
</body>
</html>