OpenLayers 加载山东天地图(WMTS)

最近在做一个项目使用的Openlayers。

<!doctype html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <meta name="keywords" content="天地图山东" /> 
    <title>天地图山东地图API-示例-WMTS图层加载</title> 
    <script src="http://www.sdmap.gov.cn/api/olapi/js/jquery-1.6.4.min.js"></script> 
    <script type="text/javascript" src="http://www.sdmap.gov.cn/api/olapi/ol/openlayers.js"></script> 
   <style type="text/css"> 
body{width: 100%;height: 100%;position: absolute;margin: 0;} 
#outter{height: 100%} 
#mapDiv{height: 100%;width: 100%} 
  
#describediv { 
    line-height: 26px; 
    padding: 10px; 
    font-size: 13px; 
    background-color: #FFF; 
    background-position: bottom left; 
    background-repeat: repeat-x; 
    background-image: url("http://www.sdmap.gov.cn/api/olapi/images/describebac.jpg"); 
    border: solid 1px #808080; 
    display: block; 
    position: absolute; 
    right: 36px; 
    top: 60px; 
    width: 260px; 
    z-index: 1001; 
    overflow-y: auto; 
    -webkit-box-shadow: #4E4B4B 0px 3px 6px; 
    -moz-box-shadow: #4E4B4B 0px 3px 6px; 
    box-shadow: #4E4B4B 0px 3px 6px; 
    z-index: 1003; 
} 
#reback{position: absolute;bottom: 10px;right: 100px;z-index: 1002;} 
#reback a{background-color: #7D7D7D; padding: 10px;color: #FFF;} 
 </style> 
    <script type="text/javascript"> 
        //定义地图对象 
        var map; 
        $(function () { 
            map = new OpenLayers.Map("mapDiv", { 
                allOverlays: true, 
                numZoomLevels: 19, 
                displayProjection: "EPSG:4490", 
                controls: [ 
                new OpenLayers.Control.Navigation(), 
                new OpenLayers.Control.ArgParser(), 
                new OpenLayers.Control.Attribution()] 
            }); 
            map.addLayer(new SDTDTLayer()); 
            map.setCenter(new OpenLayers.LonLat(119.00, 36.40), 8); 
        }); 
    </script> 
</head> 
<body> 
    <div id="outter"> 
        <div id="mapDiv"> 
        </div> 
        <div id="describediv"> 
            WMTS图层加载 
        </div> 
        <div id="close"> 
        </div> 
        <p id="reback"><a href="http://sdmap.gov.cn/API/olapi/api.html?index=1">返回所有范例列表</a></p> 
         </div></body> 
</html> 

转载自:https://blog.csdn.net/u010299411/article/details/73355168

You may also like...