一、引言

加载切片底图是openlayer最经常不过的功能，这篇文章先讲述了在线arcgis切片地图的加载，让读者有个基本的认识，下一节中会详细介绍加载切片的原理。分别是加载arcgis中的标准的切图方法和自定义的切图，标准的就是arcgisonline模式，有固定的分辨率，自定义的就是suggest模式。

二、在线标准切片


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="js/ol.css"><script src="lib/jquery/jquery-3.3.1.min.js"></script><script src="js/ol-debug.js"></script></head></head>
<body>
<div id="map"></div><script type="text/javascript">var map = new ol.Map({target: 'map',layers: [new ol.layer.Tile({source: new ol.source.TileArcGISRest({url: 'http://localhost:6080/arcgis/rest/services/test/cadcustom/MapServer'})})],view: new ol.View({center: [509018, 299803],zoom: 14,projection: 'EPSG:3857'})});map.on('click', function(evt) {var coor=evt.coordinate;alert(coor);});</script>
</body>
</html>

在线标准切片比较简单，因为openlayers已经自己封装了针对arcgisrest服务的source接口，直接调用就可以。

这里最终请求的服务详情为：

三、在线自定义切片

加载自定义切片底图涉及到几个概念，分辨率resolution、起始点origin、切片位置对应关系XYZ。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="js/ol.css"><script src="lib/jquery/jquery-3.3.1.min.js"></script><script src="js/ol.js"></script></head>
<body>
<div id="map" style="height: 100%;width: 98%"></div>
<script type="text/javascript">var projection = ol.proj.get('EPSG:3857');// 瓦片地址// 瓦片地址格式：http://localhost:6080/arcgis/rest/services/Test/Beijing/MapServer/tile/{z}/{y}/{x}var tileUrl = "http://localhost:6080/arcgis/rest/services/test/cadcustom/MapServer/tile/{z}/{y}/{x}";// 原点var origin = [ -2.00377E7 ,3.02411E7];// 分辨率var resolutions = [2.116670900008467,1.0583354500042335,0.5291677250021167,0.26458386250105836,0.13229193125052918,0.06614596562526459];// 地图范围var fullExtent = [ 508609.7079405099,299415.4490000001,509204.2680308107,299922.62196192663];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:[509018, 299803],resolutions: resolutions,// 注意：此处指定缩放级别不能通过zoom来指定，指定了也无效，必须通过resolution来指定// 官方API说明：// Resolutions to determine the resolution constraint.// If set the maxResolution, minResolution, minZoom, maxZoom, and zoomFactor options are ignored.resolution: 1.0583354500042335,projection: projection,extent: fullExtent})});map.on('click', function(evt) {var coor=evt.coordinate;alert(coor);});</script></body>
</html>

这里通过tileGrid重新定义了openlayers的瓦片坐标系，从而能加载自定义的在线切图，具体请求地址可见：

这里的请求地址url我们是怎么得来的呢？是通过arcgisserver中manager主页中通过arcgis JavaScript查看服务中得来的，从其中查看到请求方式也为这种格式，所以直接使用的：

四、总结

加载arcgis在线标准切片；

加载arcgis在线自定义切片；

开源GIS（十）——openlayers中加载在线标准与自定义切片相关推荐

开源GIS（十一）——openlayers中加载离线标准与自定义切片（深度好文）
目录一.引言二.离线标准与自定义切片的制作与使用 1.离线切片的制作 2.离线切片的使用三.离线标准切片加载四.离线自定义切片加载(重点非常有用) 五.总结一.引言上一篇文章中讲解了在线切 ...
Openlayers中加载Geoserver切割的EPSG:900913离线瓦片图层组
场景 Openlayers中加载Geoserver切割的EPSG:900913离线瓦片地图并显示: Openlayers中加载Geoserver切割的EPSG:900913离线瓦片地图并显示_BADA ...
两种在CAD中加载在线卫星影像的方法
概述经常使用CAD的朋友应该会有这样的一个烦恼,就是当加载卫星图到CAD中进行绘图的时候,由于CAD本身的限制和电脑性能等原因,往往不能加载太大的地图图片到CAD内,这里给大家介绍两种在CAD内加载 ...
开源GIS（十二）——openlayers中加载切片原理
目录一.切片加载方法 1.代码 2.代码分析 3.参数解释二.切片加载原理一.切片加载方法 1.代码 var projection = ol.proj.get('EPSG:3857');// 瓦 ...
Openlayers中加载GeoJson文件显示地图
场景 Openlayers下载与加载geoserver的wms服务显示地图: Openlayers下载与加载geoserver的wms服务显示地图_BADAO_LIUMANG_QIZHI的博客-CSD ...
Arcgis for js，Openlayers中加载GeoJSON
概述: 在前文中,讲述了在JAVA环境下如何将shp转换为GeoJSON,在本文,分别讲述在Arcgis for js,Openlayers2和Openlayers3中加载展示GeoJSON. 实现: ...
Openlayers中加载Geoserver切割的EPSG:900913离线瓦片地图并显示
场景 Openlayers下载与加载geoserver的wms服务显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114 ...
Qgis 加载在线地图：如高德、天地图、OSM等
QGIS是一个开源的基础地理信息系统平台软件支持mac.windows.Linux 等系统,属于轻量级gis软件. QGIS中加载在线地图总结2种方式: 1. 使用XYZ格式 2.使用插件:QGI ...
QGIS加载在线地图：高德、天地图等
QGIS能够加载WMS.WMTS.WFS,以及XYZ形式的瓦片等在线地图服务,通常可以作为空间数据的底图一起可视化出来,例如高德地图.天地图.OSM(openstreetmap)等在线地图服务. QG ...

开源GIS（十）——openlayers中加载在线标准与自定义切片

一、引言

二、在线标准切片

三、在线自定义切片

四、总结

开源GIS（十）——openlayers中加载在线标准与自定义切片相关推荐

最新文章

热门文章