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