由于OL3对openlayers进行重写,在OL2中存在的layer.TMS已经被删除,可以通过OL3中的ol.source.XYZ方法调用服务,URL格式需要自己拼接并以{z}/{x}/{y}.png或{z}/{x}/{-y}.png结束,具体ZXY信息由切分瓦片信息决定。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
#map{
height: 310px;
width: 512px;
}
</style>
<title>EPOCH TMS测试</title>
<script src="jq/jquery-1.10.2.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.7.0/ol.css" type="text/css">
<script src="openlayers/ol.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
</div>
<script type="text/javascript">
var view;
var layers;
layers = [
new ol.layer.Tile({
extent:ol.proj.transformExtent(
[73.44696044921875,3.408477306365967,135.08583068847656,53.557926177978516], 'EPSG:4326', 'EPSG:3857'),
source: new ol.source.XYZ({
url: 'http://127.0.0.1:8060/gisserver/tmsserver/china_tms/{z}/{x}/{-y}.png'
})
})
];
view = new ol.View({
center:ol.proj.transform(
[100, 40], 'EPSG:4326', 'EPSG:3857'),
zoom:3
});
var map = new ol.Map({
layers: layers,
target: 'map',
view:view
});
</script>
</body>
</html>