OpenLayers加载自定义ArcGIS切片服务

由于项目要求，需要使用OpenLayers加载ArcGIS的REST切片服务。OpenLayers官网只提供了加载ArcGIS标准切片服务的demo，但很多时候考虑到切片服务太占用磁盘空间，我们在ArcGIS Server中会自定义切片的等级，如下图所示，切片服务TestMapService只使用了0-4级切片。
在这里插入图片描述

在利用OpenLayers加载自定义切片服务之前，我们需要先获取该服务的一些参数，如下图所示：
在这里插入图片描述
有了这些参数就可以用OpenLayers加载ArcGIS自定义的切片服务了，代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <title>REST服务</title>
    <link href="scripts/ol.css" rel="stylesheet" />
    <style>
        html, body, #map {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <script src="scripts/ol.js"></script>
</head>
<body>
    <div id="map"></div>
    <script>
        // 坐标原点
        var origin = [
            -400.0,
            399.9999999999998
        ];

        // 分辨率
        var resolutions = [
            0.29743262572878504,
            0.15228550437313793, 
            0.07614275218656896,
            0.03807137609328448,
            0.01903568804664224
        ];

        // 地图范围
        var extent = [
            -121.04290329332338,
            -7.1283531563668845,
            35.35203341553756,
            56.39654924514745
        ];

        // 瓦片网格
        var tileGrid = new ol.tilegrid.TileGrid({
            tileSize: 256,
            origin: origin,
            extent: extent,
            resolutions: resolutions
        });

        // 瓦片数据源
        var source = new ol.source.XYZ({
            tileGrid: tileGrid,
            projection: ol.proj.get('EPSG:4326'),
            url: "https://localhost:6443/arcgis/rest/services/TestMapService/MapServer/tile/{z}/{y}/{x}"
        });

        // 显示地圖
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: source
                }),
            ],
            view: new ol.View({
                center: [30, 30],
                resolutions: resolutions,
                resolution: 0.15228550437313793,
                projection: ol.proj.get('EPSG:4326'),
                extent: extent
            })
        });
    </script>
</body>
</html>

程序运行结果如下图所示：
在这里插入图片描述

HerryDong

发布了99 篇原创文章 · 获赞 16 · 访问量 3万+

私信关注

OpenLayers加载自定义ArcGIS切片服务

猜你喜欢