[epoch]OL3調用TMS服務

由於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>



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章