openlayer 加载天地图
2022-05-24 本文已影响0人
A_slow_sparrow
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/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.5/build/ol.js"></script>
<style>
html,body,#map{width:100%;height:100%}
</style>
</head>
<body>
<div id="map" class="map"></div>
</body>
<script>
var tian_di_tu_satellite_layer = new ol.layer.Tile({
title: "天地图卫星影像",
// visible:false,
source: new ol.source.XYZ({
url: 'http://t3.tianditu.com/DataServer?T=img_w&tk=xxx&x={x}&y={y}&l={z}'
})
});
var tian_di_tu_road_layer = new ol.layer.Tile({
title: "天地图路网",
source: new ol.source.XYZ({
url: "http://t4.tianditu.com/DataServer?T=vec_w&tk=xxx&&x={x}&y={y}&l={z}"
})
});
var tian_di_tu_annotation = new ol.layer.Tile({
title: "天地图文字标注",
source: new ol.source.XYZ({
url: 'http://t4.tianditu.com/DataServer?T=cva_w&tk=xxx&&x={x}&y={y}&l={z}'
})
});
var map = new ol.Map({
target: 'map',
layers: [tian_di_tu_satellite_layer, tian_di_tu_annotation],
overlays: [],
view: new ol.View({
center: [106.52714, 29.62487],
projection: 'EPSG:4326',
zoom: 12
}),
//比例尺
controls: ol.control.defaults()
});
</script>
</html>
