ArcGIS JS 3.x加载geoserver发布的3857坐标系的矢量切片服务

最新推荐文章于 2024-01-25 17:58:05 发布

L.傲骨雄风

最新推荐文章于 2024-01-25 17:58:05 发布

阅读量1.4k

点赞数 1

分类专栏： arcgis-js

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

版权

arcgis-js 专栏收录该内容

42 篇文章 4 订阅

订阅专栏

通过geoserver加载shp数据发布成矢量切片在线服务，调用方式参考该资料：

全部代码：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>矢量切片</title>
    <link rel="stylesheet" href="http://localhost/arcgis/library/3.27/3.27/esri/css/esri.css">
    <style>
        html, body, #map {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #FFF;
            overflow: hidden;
            font-family: "Trebuchet MS";
        }
    </style>
    <script src="http://localhost/arcgis/library/3.27/3.27/init.js"></script>
    <script src="js/jquery.js"></script>
    <script>

        var map;
        require([
            "esri/map",
            "esri/layers/ArcGISTiledMapServiceLayer",
            "esri/layers/ArcGISDynamicMapServiceLayer",
            "esri/layers/VectorTileLayer",
            "esri/layers/GraphicsLayer",
            "esri/symbols/SimpleLineSymbol",
            "esri/geometry/projection",
            "esri/geometry/Point",
            "esri/SpatialReference",
            "dojo/on",
            "dojo/dom",
            "dojo/domReady!"],
            function (Map,
                ArcGISTiledMapServiceLayer,
                ArcGISDynamicMapServiceLayer,
                VectorTileLayer,
                GraphicsLayer,
                SimpleLineSymbol,
                projection,
                Point,
                SpatialReference,
                on,
                dom
            ) {
                map = new Map("map", {
                    center: [101.78, 36.62],
                    zoom: 12,
                    logo: false
                });
                var DXT = new ArcGISTiledMapServiceLayer("http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer", { id: "DXT" });
                map.addLayer(DXT);
                var style = {       
                    "version": 8,
                    "sources": {
                        "osm": {     
                            "type": "vector",
                            "tiles": ["http://localhost:8080/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=map:PIPESECTIONMPA&STYLE=&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&FORMAT=application/vnd.mapbox-vector-tile&TILECOL={x}&TILEROW={y}"],  
                               
                        }
                    },
                    "layers": [
                        {
                            id: "sampleline",
                            type: "line",
                            source: "osm",
                            "source-layer": "PIPESECTIONMPA",
                            paint: {
                                "line-color": "#3031ff"
                            }
                        }
                    ],
                    "id": "test"

                };
                var tileLyr = new VectorTileLayer(style);
                map.addLayer(tileLyr);
            });
    </script>
</head>
<body>
    <div id="map"></div>
</body>
</html>

效果图：