openlayers加载天地图在线瓦片
2018-06-13 本文已影响0人
木瓜香皂
openlayers加载天地图在线瓦片
方法（1）
<!DOCTYPE html>
<html>
<head>
<title>WMTS</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>
</head>
<style type="text/css">
body, #map {
border: 0px;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
font-size: 13px;
}
#map{
width:100%;
height:100%
border:1px solid red;
}
</style>
<body>
<div id="map" class="map"></div>
<script type="text/javascript">
(function(){
init();
})()
var map;
function init(){
var projection = new ol.proj.Projection({
code: 'EPSG:4326',
units: 'degrees'
});
var vec_c = getTdtLayer("vec_c");
var cva_c = getTdtLayer("cva_c");
//var center = ol.proj.transform([108.95, 34.28], "EPSG:4326", "EPSG:3857");
var map = new ol.Map({
controls: ol.control.defaults({
attribution: false
}),
target: 'map',
layers: [vec_c,cva_c],
view: new ol.View({
projection: projection,
center: [108.95, 34.28],
zoom: 6,
minZoom:2,
maxZoom:16
})
});
//map.getView().fitExtent(bounds, map.getSize());
}
function getTdtLayer(lyr){
//var url = "http://localhost:8081/lzugis/tdttile?T="+lyr+"&X={x}&Y={y}&L={z}";
var url = "http://t1.tianditu.com/DataServer?T="+lyr+"&X={x}&Y={y}&L={z}";//在线
var projection = ol.proj.get("EPSG:4326");
var projectionExtent = [ -180, -90, 180, 90 ];
var maxResolution = (ol.extent.getWidth(projectionExtent) / (256 * 2));
var resolutions = new Array(16);
var z;
for (z = 0; z < 16; ++z) {
resolutions[z] = maxResolution / Math.pow(2, z);
}
var tileOrigin = ol.extent.getTopLeft(projectionExtent);
var layer = new ol.layer.Tile({
extent: [ -180, -90, 180, 90 ],
source: new ol.source.TileImage({
tileUrlFunction: function(tileCoord) {
var z = tileCoord[0]+1;
var x = tileCoord[1];
var y = -tileCoord[2]-1;
var n = Math.pow(2, z + 1);
x = x % n;
if (x * n < 0) {
x = x + n;
}
return url.replace('{z}', z.toString())
.replace('{y}', y.toString())
.replace('{x}', x.toString());
},
projection: projection,
tileGrid: new ol.tilegrid.TileGrid({
origin: tileOrigin,
resolutions: resolutions,
tileSize: 256
})
})
});
return layer;
}
</script>
</body>
</html>
方法（2）
<!DOCTYPE html>
<html>
<head>
<title>WMTS</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>
</head>
<style type="text/css">
body, #map {
border: 0px;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
font-size: 13px;
}
#map{
width:100%;
height:100%
border:1px solid red;
}
</style>
<body>
<div id="map" class="map"></div>
<script>
var center = ol.proj.transform([103.3, 35.5], "EPSG:4326", "EPSG:3857");
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://t2.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}'
}),
isGroup: true,
name: '天地图路网'
}),
new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://t2.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}'
}),
isGroup: true,
name: '天地图文字标注'
})
],
view: new ol.View({
center: center,
zoom: 12
})
});
</script>
</body>
</html>
