OpenLayers加载自定义ArcGIS切片服务

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

在利用OpenLayers加载自定义切片服务之前,我们需要先获取该服务的一些参数,如下图所示:
OpenLayers加载自定义ArcGIS切片服务_第2张图片
有了这些参数就可以用OpenLayers加载ArcGIS自定义的切片服务了,代码如下:


<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>

程序运行结果如下图所示:
OpenLayers加载自定义ArcGIS切片服务_第3张图片

你可能感兴趣的:(OpenLayers)