ol4加载任意坐标系下的瓦片离线图
2017-08-04 本文已影响51人
雨恋星辰
<!DOCTYPE html>
<html>
<head>
<title>XYZ</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.2.0/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://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.3/proj4.js"></script>
<script src="https://openlayers.org/en/v4.2.0/build/ol-debug.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
var min=ol.proj.fromLonLat([73.62,18.11]);
var max=ol.proj.fromLonLat([134.77,53.56]);
var projection_4610 = new ol.proj.Projection({
code: 'EPSG:4610',
extent:[min[0],min[1],max[0],max[1]],
units: 'degree',
axisOrientation: 'neu'
});
ol.proj.addProjection(projection_4610);
//var tileUrl ='http://code.xjzhcs.cn:8099/newmap/rest/services/zhundong/zd_t_xa80/MapServer/tile?z=6&x=14597&y=7315&format=png';
var tileUrl = ' http://code.xjzhcs.cn:8099/newmap/rest/services/zhundong/zd_t_xa80/MapServer/tile?z={z}&x={x}&y={y}&format=png';
var origin =[0,0];
var resolutions =[
0.00237679150184093,
0.00118839575092046,
0.000594197875460232,
0.000237679150184093,
0.000118839575092046,
5.94197875460232E-05,
2.37679150184093E-05,
1.18839575092046E-05,
4.75358300368186E-06
];
var fullExtent = [88.52616,43.6405050848303,91.109587,45.3834159151697];
var tileGrid = new ol.tilegrid.TileGrid({
tileSize: [256,256],
origin: origin,
extent: fullExtent,
resolutions: resolutions,
minZoom:0,
maxZoom:8
});
var tileXYZ = new ol.source.XYZ({
tileGrid: tileGrid,
projection:projection_4610,
// url: tileUrl,
tileUrlFunction: function (tileCoord, pixelRatio, projection) {
if (!tileCoord) {
return "";
}
var z = tileCoord[0];
var x = tileCoord[1];
var y = tileCoord[2];
return 'http://code.xjzhcs.cn:8099/newmap/rest/services/zhundong/zd_t_xa80/MapServer/tile?z='+z+'&x='+x+'&y='+y+'&format=png';
}
});
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: tileXYZ
}),
],
view: new ol.View({
center: ol.extent.getCenter(fullExtent),
resolutions: resolutions,
projection: projection_4610,
extent: fullExtent,
zoom:1
})
});
</script>
</body>
</html>
1、坐标系，
2、每个缩放级别的分辨率，
3、tileGrid，
4、tileUrlfunction
