200字范文 > 开源GIS（二）——openlayers加载Arcgis和geoserver离线切片

开源GIS（二）——openlayers加载Arcgis和geoserver离线切片

时间：2020-11-14 05:04:25

一、引言

开始开源gis的不归路，第一课便是加载底图，底图目前主流的都是wmts，以后会研究一下wms，本文介绍了普通网络在线切片（如谷歌百度高德等）、Arcgis在线切片与离线切片、openlayer在线与离线切片。通过这三类主流的方式基本可以满足基本需求，如果遇到比较困难的可以直接研究下openlayer的切片加载原理，直接自己手动修改，你想怎么加载就怎么加载==

二、网络在线切片地图（以谷歌为例）

网络在线切片比较简单了，直接知道他的地图url与参数对应关系就比较好操作了。

三、Arcgis切片

Arcgis切片分为两类，一类是通过arcgisserver发布rest服务，可以使紧凑型可以使离散性的；另一类是离线地图切片，就是一张张图片，等价为arcgis发布的离散性服务中的图片。为什么分为这两种呢？因为你买了arcgis server服务可以随意用了，如果你没有买arcgis server，那么你可以用盗版arcgis server的切图，然后直接把图片放到web服务器上就行了，如果切片你也懒得用arcgis server切，你可以直接到网上（俗称地图下载器）下载arcgis标准的切片就行了。

1、Arcgis在线切片服务

2、Arcgis标准的离线切片

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="lib/v4.6.4-dist/ol.css"><script src="lib/v4.6.4-dist/ol-debug.js"></script><script src="lib/jquery-3.1.0.min.js"></script></head><body><div id="map" style="height: 100%;width: 98%"></div><script type="text/javascript">// 设置地图中心，此处进行坐标转换，把EPSG:4326(经纬度坐标)，转换为EPSG:3857(WGS84网络墨卡托(辅助球))坐标，因为ol默认使用的是EPSG:3857坐标//[106.677, 36.7388]是下载地图的中心经纬度//var centerPos = ol.proj.transform([106.677, 36.7388], 'EPSG:4326', 'EPSG:3857');//var centerPos = ol.proj.transform([106.677, 36.7388], 'EPSG:4326', 'EPSG:3857');//创建地图var map = new ol.Map({view: new ol.View({center: [12956574, 4853421],//地图中心位置//center:[503409, 305653],zoom: 15//地图初始层级}),//添加地图图层//这里注销在下面添加新的离线地图图层/*layers: [new ol.layer.Tile({source:new ol.source.OSM()})],*///将地图添加到的map容器中target: 'map'});//给8位字符串文件名补0function zeroFill(num, len, radix) {var str = num.toString(radix || 10);while (str.length < len) {str = "0" + str;}return str;}// ol.source.XYZ添加瓦片地图的层var tileLayer = new ol.layer.Tile({source: new ol.source.XYZ({tileUrlFunction: function (coordinate) {//alert(coordinate[0] + " X= " + coordinate[1] + " Y= " + coordinate[2]);var x = 'C' + zeroFill(coordinate[1], 8, 16);var y = 'R' + zeroFill(-coordinate[2] - 1, 8, 16);var z = 'L' + zeroFill(coordinate[0], 2, 10);//return '_alllayers/' + z + '/' + y + '/' + x + '.png';//这里可以修改地图路径return 'taile/_alllayers/' + z + '/' + y + '/' + x + '.png';//这里可以修改地图路径},projection: 'EPSG:3857'})});map.addLayer(tileLayer);//添加到map里面/* map.addControl(new ol.control.ScaleLine());$("#map").click(function (e) {//alert('X ; '+ e.clientX + 'Y: '+e.clientY);var t = map.getEventCoordinate(e);alert(t);})*/</script></body></html>

暂时arcgis离线加载必须按照google切片要求切固定层级上述代码才能使用，自己随便定义的比例尺或分辨率还要调代码。

四、geoserver切片

目前只做了geoserver栅格切片在线的加载，参考下了，离线的过几天再做下

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="lib/jquery-3.1.0.min.js"></script><link rel="stylesheet" href="lib/v4.6.4-dist/ol.css"><script src="lib/v4.6.4-dist/ol-debug.js"></script></head><body><div id="map" class="map"></div><script>var projection = ol.proj.get('EPSG:3857');var projectionExtent = projection.getExtent();var mapExtent = [492996, 294667,514044, 316533];var matrixIds = new Array(7);for (var z = 0; z < 20; ++z) {matrixIds[z] = "xcy:" + z;}resolutions = [156543.03390625,78271.516953125, 39135.7584765625,19567.87923828125,9783.939619140625, 4891.9698095703125, 2445.9849047851562,1222.9924523925781,611.4962261962891,305.74811309814453,152.87405654907226,76.43702827453613,38.218514137268066,19.109257068634033,9.554628534317017,4.777314267158508,2.388657133579254,1.194328566789627,0.5971642833948135,0.2985821416974068];bouldersLayerWMTS = new ol.layer.Tile({source: new ol.source.WMTS({url: 'http://localhost:8080/geoserver/gwc/service/wmts',layer: 'xcy:GGBWY2',matrixSet: 'xcy',format: 'image/png',projection: projection,tileGrid: new ol.tilegrid.WMTS({origin: ol.extent.getTopLeft(projectionExtent),resolutions: resolutions,matrixIds: matrixIds})})});var map = new ol.Map({layers: [bouldersLayerWMTS],target: 'map',view: new ol.View({extent: mapExtent,projection: projection,center: [503406, 305529],zoom: 15})});</script></body></html>

这里geoserver切片不是随便切就能加载的，必须自定义切片方案：设定坐标系，并且添加切片层级，这里一定别设定范围。

最后在用geoserver切图的时候再设定切图范围，这样切出来的图片才能正常显示。

=====================================================================================

补充：geoserver wms调用，wms与wmts区别是wms每次请求返回一张图片，改图片是根据视图范围后台实时生成的。

<!DOCTYPE html><html><head><title>wfs demo</title><link rel="stylesheet" href="ol/ol.css"><script src="ol/ol-debug.js"></script></head><body><div id="map" style="width:100%;height:100%;"></div><script>var layers = [new ol.layer.Tile({source: new ol.source.TileWMS({url: 'http://localhost:8080/geoserver/xcy/wms',params: {'LAYERS': 'xcy:gglayer','TILED': true}})})];var map=new ol.Map({layers: layers,target:'map',view: new ol.View({projection: 'EPSG:3857',center:[503408,305632],zoom: 16}),controls: ol.control.defaults({attributionOptions: {collapsible: false}})});</script></body></html>

上面创建的tilewms最终从浏览器中可以查看加载的也是一张张切片，为什么呢，不过你放心他确实是wms，只不过是调用的实时渲染的切片，如果你想像咱们平时理解的wms每次得到一张大图，可以使用imagewms创建，如下：

var wms = new ol.layer.Image({source: new ol.source.ImageWMS({ratio: 1,url: 'http://localhost:8080/geoserver/xcy/wms',params: {'FORMAT': format,'VERSION': '1.1.1',"STYLES": '',"LAYERS": 'xcy:bound',"exceptions": 'application/vnd.ogc.se_inimage',}})});

总结一小下wms调用

（1）切片方式（TileWMS）：动态地图在GIS Server生成后，以切片的方式返回到前端，优点是将地图切分，每个切片的数据量很小，便于数据的传输，适用于网络状况不佳的环境；缺点是在地图切片的过程中，可能会造成我遇到的标注多次出现的问题。

（2）图像方式（ImageWMS）：地图生成后，直接以一个整体返回到前端显示，优点是不会出现标注重复出现的问题，确定是对网络状况不佳的环境，可能出现请求失败的问题。