使用openlayers加载天地图的小demo。
运行效果
代码
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/openlayers/8.1.0/ol.min.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/openlayers/8.1.0/dist/ol.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
</body>
<script type="text/javascript">
let key = `这里填写你的天地图密钥，可自行去官网申请`
// _w表示球面墨卡托投影，_c表示经纬度投影
// 如img_w：影像底图球面墨卡托投影，img_c：影像底图经纬度投影
var img_w = new ol.layer.Tile({
title: "影像图",
source: new ol.source.XYZ({
url: "http://t{0-7}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=" + key + "",
http://t5.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX=7&TILEROW=12&TILECOL=92&tk=c3e13f43d5f380c070aaff0b2920fae8
}),
});
// var vec_w = new ol.layer.Tile({
// title: "矢量底图",
// source: new ol.source.XYZ({
// url: "http://t{0-7}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=" + key + "",
// }),
// });
// var ter_w = new ol.layer.Tile({
// title: "地形图",
// source: new ol.source.XYZ({
// url: "http://t{0-7}.tianditu.gov.cn/DataServer?T=ter_w&x={x}&y={y}&l={z}&tk=" + key + "",
// }),
// });
var cia_w = new ol.layer.Tile({
title: "影像图文字标注",
source: new ol.source.XYZ({
url: "http://t{0-7}.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=" + key + "",
}),
});
// var cva_w = new ol.layer.Tile({
// title: "矢量图文字标注",
// source: new ol.source.XYZ({
// url: "http://t{0-7}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=" + key + "",
// }),
// });
// var cva_w = new ol.layer.Tile({
// title: "地形图文字标注",
// source: new ol.source.XYZ({
// url: "http://t{0-7}.tianditu.gov.cn/DataServer?T=cta_w&x={x}&y={y}&l={z}&tk=" + key + "",
// }),
// });
// cva_w.setVisible(false); // 可以控制是否显示这个图层
// cia_w.setVisible(false);
let view = new ol.View({
center: ol.proj.fromLonLat([111.32034, 38.27778]),
zoom: 12,
// minZoom: 12,
// maxZoom: 18.5,
})
var map = new ol.Map({
target: 'map',
// logo: false, // 隐藏右下角的logo
layers: [img_w, cia_w],
view: view,
// 加载控件到地图容器中
// controls: ol.control.defaults({
// zoom: false, // 隐藏缩放按钮
// rotate: false, // 隐藏方向按钮
// attribution: false // 隐藏右下角logo
// })
});
</script>
</html>
