背景

最近遇到一个需求，要使用OpenLayer加载ArcGIS Server发布的服务。如果直接拷贝OpenLayer提供的在线官方Demo，然后修改下地图服务地址是跑不通的，这是因为OpenLayer默认加载的ArcGIS服务是规范化的切片方案（从0级到20级，每一级的切片比例尺都是固定的），但是由于现场使用的是自定义的切片方案，所以还需要去调整下代码。

关键点

在加载ArcGIS Server发布的自定义切片方案的服务时，需要重点关注以下几个概念：

origin：坐标原点
resolutions：切片方案分辨率数组
matrixIds：分辨率对应的级别
projection：坐标系
具体可以参考下图：

完整代码

<!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.6.5/css/ol.css" type="text/css">

    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>

    <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>

    <script type="text/javascript">

        window.onload = function () {

            // 地图坐标

            var projection = ol.proj.get('EPSG:4326');

            // 基础地图服务切片地址

            var tileUrl = "http://localhost/gisserver/rest/services/MyMapService/MapServer/tile/{z}/{y}/{x}";

            // 坐标原点

            var origin = [-400.0, 400.0];

            // 分辨率

            var resolutions = [0.0016846869456599084, 8.423434728299542E-4, 4.211717364149771E-4, 2.1058467847698563E-4];

            //地图范围

            var fullExtent = [112.30626776825166,22.590658569048593,114.72797295438163,23.82554016094057];

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

                    }),

                ],

                view: new ol.View({

				    //初始化中心点坐标

                    center: [113.2759, 23.1170],

                    resolutions: resolutions,

                    // 注意：此处指定缩放级别不能通过zoom来指定，指定了也无效，必须通过resolution来指定

                    resolution: 8.423434728299542E-4,

                    projection: projection,

                    extent: fullExtent

                })

            });

        };

    </script>

</head>

<body>

    <div id="map"></div>

</body>

</html>

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

Openlayers 加载ArcGIS Server切片服务（自定义切片方案）的更多相关文章

  1. 不同网段无法加载ArcGIS Server发布服务解决方法

    问题描述: ArcGIS Server 10发布的服务, (1)在相同网段的Desktop9.3和Engine 9.3程序下可以正常显示, (2)在不同网段Desktop9.3和Engine 9.3程 ...

  2. ArcEngine中加载ArcGIS Server地图服务

    代码如下: private void addMapServerLayer(object sender, EventArgs e)  {             IActiveView pActiveV ...

  3. 天地图API加载ArcGIS Server服务

    发布的服务需要选择WMS功能 wmsLayer = new T.TileLayer.WMS("http://127.0.0.1:6080/arcgis/services/Demo/Defau ...

  4. Cesium加载ArcGIS Server4490且orgin -400 400的切片服务

    Cesium在使用加载Cesium.ArcGisMapServerImageryProvider加载切片服务时,默认只支持wgs84的4326坐标系,不支持CGCS2000的4490坐标系. 如果是A ...

  5. (转载）arcgis for js - 解决加载天地图和WMTS服务,WMTS服务不显示的问题,以及wmts服务密钥。

    1 arcgis加载天地图和wmts服务 arcgis for js加载天地图的例子网上有很多,这里先不写了,后期有空再贴代码,这里主要分析下WMTS服务为什么不显示,怎么解决. 条件:这里的WMTS ...

  6. Leaflet，OpenLayers3加载ArcGIS切片（png格式，Exploded松散型）

    需求 做了一个简单的WebGIS应用,不想因为加载切片就安装一台GIS服务器.于是想直接访问图片的方式来加载地图. 需解决的问题 leafletjs目前是不能够直接加载ArcGIS服务切片的,但可以借 ...

  7. maptalks 如何加载 ArcGIS 瓦片图层

    最近需要加载 ArcGIS 瓦片图层,运行官网加载 ArcGIS 瓦片图层的 demo 是没有问题的.如果把 ArcGIS 瓦片图层 URL 换成是自已发布的 ArcGIS 地图服务,发现加载不出来, ...

  8. openlayers 加载瓦片详解 一

    在这先说点题外话,本人在研究webgl 三维球过程中惊人发现,openlayers 的开发人员也在研究webgl并经证实他们也正在研发基于 webgl的三维gis开源平台,这可能是首个开源的三维平台, ...

  9. WebGIS开发之用openlayers加载离线百度地图

    因为项目需要,只有内网环境,没有外网环境,所以需要下载地图瓦片. 一.下载瓦片地图 这个可以自行在网上找一些地图瓦片下载器,下好的瓦片地图是分级的.大概如图这种类型. 二.在地图上显示标记 首先使用o ...

  10. 图解classloader加载class的流程及自定义ClassLoader

    图解classloader加载class的流程及自定义ClassLoader 博客分类: JVM JavaJVM虚拟机EXTSUN /** *  转载请注明作者longdick    http://l ...

随机推荐

  1. [Java]Map接口有关总结

    Map接口 1.HashMap和Hashtable的区别 线程安全方面.HashMap是非线程安全的,Hashtable是线程安全的.因为Hashtable内部方法基本都经过synchronized修 ...

  2. NC16664 [NOIP2004]合唱队形

    题目链接 题目 题目描述 N位同学站成一排,音乐老师要请其中的(N-K)位同学出列,使得剩下的K位同学排成合唱队形. 合唱队形是指这样的一种队形:设K位同学从左到右依次编号为1,2-,K,他们的身高分 ...

  3. Spring Boot 加载外部配置文件

    Spring Boot 允许你从外部加载配置,这样的话,就可以在不同的环境中使用相同的代码.支持的外部配置源包括:Java属性文件.YAML文件.环境变量.命令行参数. 用@Value注解可以将属性值 ...

  4. AI数字人SadTalker实战

    1.概述 AI数字人在营销和品牌推广中扮演着至关重要的角色,许多企业和个人正积极利用数字技术来打造属于自己的财富.有没有一种简单而免费的方式来创建自己的数字人呢?本篇博客笔者将为大家介绍如何搭建属于自 ...

  5. 硬件开发笔记（十二）：RK3568底板电路电源模块和RTC模块原理图分析

    前言   做硬件做系统做驱动,很难从核心板做起,所以我们先依赖核心板,分析底板周围的电路,然后使用AD绘制原理图和设计PCB,打样我司测试底板,完成硬件测试,再继续系统适配,驱动移植,从而一步一步完善 ...

  6. 【LeetCode二叉树#15】二叉搜索树的最小绝对差（巩固迭代中序遍历#2）

    二叉搜索树的最小绝对差(迭代法中序遍历巩固) 力扣题目链接(opens new window) 给你一棵所有节点为非负值的二叉搜索树,请你计算树中任意两节点的差的绝对值的最小值. 示例: 提示:树中至 ...

  7. 数据结构(三):舞伴配对问题(C++，队列)

    好家伙, 题目如下: 1.舞伴配对问题:假设在周末舞会上,男士们和女士们进入舞厅时,各自排成一队.跳舞开始时,依次从男队和女队的队头上各出一人配成舞伴. 2.若两队初始人数不相同,则较长的那一队中未配 ...

  8. 【Azure APIM】APIM self-host 部署在K8S中，如何更换证书呢？

    问题描述 APIM self-host(自建网关)部署在K8S中,如何在本地上传及更换证书呢? 问题解答 如果使用Self-host网关,则不支持使用上传到 APIM的 CA 根证书验证服务器和客户端 ...

  9. 【Azure Developer】Python 读取 json文件及过滤出需要的结果

    问题描述 首先,有名为 campsites.json 的JSON数据文件,数据格式为 { "type": "FeatureCollection", " ...

  10. 【Azure 应用服务】更新镜像后并重启应用服务，部署日志始终没有出现加载新镜像成功的日志

    问题描述 在App Service中部署镜像文件,发现镜像一直没有部署,重启App Service服务也无效果. DockerFile如下: FROM crunchgeek/php-fpm:7.0 # ...