一、引言
开始开源gis的不归路,第一课便是加载底图,底图目前主流的都是wmts,以后会研究一下wms,本文介绍了普通网络在线切片(如谷歌百度高德等)、Arcgis在线切片与离线切片、openlayer在线与离线切片。通过这三类主流的方式基本可以满足基本需求,如果遇到比较困难的可以直接研究下openlayer的切片加载原理,直接自己手动修改,你想怎么加载就怎么加载==
二、网络在线切片地图(以谷歌为例)
网络在线切片比较简单了,直接知道他的地图url与参数对应关系就比较好操作了。
<!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" class="map"></div>
<script>
var layer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://ditu.google.cn/maps/vt?pb=!1m5!1m4!1i{z}!2i{x}!3i{y}!4i256!2m3!1e4!2st!3i388!2m3!1e0!2sr!3i388084516!3m12!2szh-CN!3sCN!5e18!12m4!1e68!2m2!1sset!2sTerrain!12m3!1e37!2m1!1ssmartmaps!4e0'
})
});
var map = new ol.Map({
target: 'map',
layers: [
layer
],
view: new ol.View({
center: ol.proj.fromLonLat([106, 38]),
zoom: 5
})
});
$("#map").click(function (e) {
// alert('X ; '+ e.clientX + 'Y: '+e.clientY);
var t = map.getEventCoordinate(e);
alert(t);
})
</script>
</body>
</html>
三、Arcgis切片
Arcgis切片分为两类,一类是通过arcgisserver发布rest服务,可以使紧凑型可以使离散性的;另一类是离线地图切片,就是一张张图片,等价为arcgis发布的离散性服务中的图片。为什么分为这两种呢?因为你买了arcgis server服务可以随意用了,如果你没有买arcgis server,那么你可以用盗版arcgis server的切图,然后直接把图片放到web服务器上就行了,如果切片你也懒得用arcgis server切,你可以直接到网上(俗称地图下载器)下载arcgis标准的切片就行了。
1、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>
</head>
<body>
<div id="map">
<script type="text/javascript">
window.onload = function () {
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.TileArcGISRest({
url: ' http://localhost:6080/arcgis/rest/services/gggg/ggdl/MapServer'
})
})
],
view: new ol.View({
center: [503409, 305653],
zoom: 14,
projection: 'EPSG:3857'
})
});
};
$("#map").click(function (e) {
//alert('X ; '+ e.clientX + 'Y: '+e.clientY);
var t = map.getEventCoordinate(e);
alert(t);
/* var t = ol.proj.transform(map.getEventCoordinate(e), 'EPSG:3857', 'EPSG:4326');
alert(t);*/
})
</script>
</body>
</body>
</html>
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位字符串文件名补0
function 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 view = new ol.View({
center: [-8236177, 4976089],
center: [-8236177, 4976089],
zoom: 10,
projection: "EPSG:3857"
});
var tiled = new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://localhost:8080/geoserver/gwc/service/wmts',
params: {
'FORMAT': "image/png",
'VERSION': '1.1.1',
tiled: true,
STYLES: '',
LAYERS: 'xcy:nyc_roads',
//tilesOrigin: -124.73142200000001 + "," + 24.955967
}
})
});
var map = new ol.Map({
layers: [tiled],
view: view,
target: "map",
logo: false
});*/
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>
五、总结
- 网络在线地图切片加载;
- Arcgis服务切片加载与arcgis标准离线切片加载;
- geoserver的wmts服务加载;
- geoserver的wms服务加载;