Openlayers之加载ArcGIS Server瓦片(XYZ方式)

1、打开ArcGIS Server Manager查看已经切好的瓦片的信息,这些信息会在后面的加载瓦片过程中使用,我们先来看看哪些信息是很重要的:


2、准备工作完成后,下面我们开始加载瓦片,其中我们会用到一个比较重要的类ol.tilegrid.TileGrid,该类的构造参数自己查看官方API,具体代码如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.2.0/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.2.0/build/ol.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            // 地图投影
            var projection = ol.proj.get('EPSG:4326');
            // 瓦片地址
           // 瓦片地址格式:http://localhost:6080/arcgis/rest/services/Test/Beijing/MapServer/tile/{z}/{y}/{x}
            var tileUrl = "你的瓦片服务地址";
            // 原点
            var origin = [-400.0, 400.0];
            // 分辨率
            var resolutions = [
                0.7031250000029744,
                0.3515625000014872,
                0.1757812499888463,
                0.08789062499442316,
                0.04394531250910888,
                0.021972656242657134,
                0.010986328121328567,
                0.00549316407256159,
                0.0027465820243834896,
                0.0013732910240890498,
                6.866455120445249E-4,
                3.433227441249574E-4,
                1.7166138395978374E-4,
                8.583068008258684E-5,
                4.291534004129342E-5,
                2.145767002064671E-5,
                9.658089455004757E-6,
                5.364423453814192E-6,
                2.682199829602067E-6,
                1.3411118121060625E-6
            ];
            // 地图范围
            var fullExtent = [114.35806006193161,23.016552561747606,114.57328646488625,23.215949180689137];
            var tileGrid = new ol.tilegrid.TileGrid({
                tileSize: 256,
                origin: origin,
                extent: fullExtent,
                resolutions: resolutions
            });
            // 瓦片数据源
            var tileArcGISXYZ = new ol.source.XYZ({
                tileGrid: tileGrid,
                projection: projection,
                url: tileUrl,
            });

            var map = new ol.Map({
                target: 'map',
                layers: [
                     new ol.layer.Tile({
                         source: new ol.source.OSM(),
                     }),
                     // 瓦片图层
                    new ol.layer.Tile({
                        source: tileArcGISXYZ
                    }),
                ],
                view: new ol.View({
                    center: [114.4250, 23.0890],
                    resolutions: resolutions,
                    // 注意:此处指定缩放级别不能通过zoom来指定,指定了也无效,必须通过resolution来指定
                    // 官方API说明:
                    // Resolutions to determine the resolution constraint. 
                    // If set the maxResolution, minResolution, minZoom, maxZoom, and zoomFactor options are ignored.
                    resolution: 3.433227441249574E-4,
                    projection: projection,
                    extent: fullExtent
                })
            });
        };
    </script>
</head>
<body>
    <div id="map"></div>
</body>
</html>


3、结果展示



转载自:https://blog.csdn.net/SmileCoffin/article/details/77248213

You may also like...

退出移动版