[epoch]OL3调用TMS服务

最新推荐文章于 2024-01-11 15:53:30 发布

阳光灼伤冷瞳

最新推荐文章于 2024-01-11 15:53:30 发布

阅读量1.2k

点赞数

分类专栏： 2015

本文链接：https://blog.csdn.net/dakjdfiue/article/details/47656925

版权

2015 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

阳光灼伤冷瞳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[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//E
复制链接

扫一扫