注：当前使用的是 ol 5.3.0 版本，天地图使用的key请到天地图官网申请并替换为自己的key
1. 通过 Map 属性 layers 加载
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>加载显示天地图</title>
<meta charset="utf-8" />
<script src="./js/ol.js"></script>
<link rel="stylesheet" href="./css//ol.css">
<style>
* {
padding:0;
margin:0;
}
#map{
position:absolute;
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>
<script>
# 实例化地图对象
const map = new ol.Map({
target: "map", # 地图容器ID
loadTilesWhileInteracting: true,
layers: [
new ol.layer.Tile({
title: "天地图矢量图层",
source: new ol.source.XYZ({
url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2",
crossOrigin: "anoymous",
wrapX:false
})
}),
new ol.layer.Tile({
title: "天地图注记图层",
source: new ol.source.XYZ({
url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2",
attibutions:"天地图注记描述",
crossOrigin: "anoymous",
wrapX: false
})
})
],
view: new ol.View({
center: [0, 0],
zoom:3
})
})
</script>
2. 通过 Map 属性 addLayers 加载
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>加载显示天地图</title>
<meta charset="utf-8" />
<script src="./js/ol.js"></script>
<link rel="stylesheet" href="./css//ol.css">
<style>
* {
padding:0;
margin:0;
}
#map{
position:absolute;
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>
<script>
const map = new ol.Map({
target: "map",
loadTilesWhileInteracting: true,
view: new ol.View({
center: [0, 0],
zoom:3
})
})
const tdtLayer = new ol.layer.Tile({
title: "天地图矢量图层",
source: new ol.source.XYZ({
url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2",
crossOrigin: "anoymous",
wrapX:false
})
})
const tdtzjLayer = new ol.layer.Tile({
title: "天地图注记图层",
source: new ol.source.XYZ({
url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2",
attibutions:"天地图注记描述",
crossOrigin: "anoymous",
wrapX: false
})
})
map.addLayer(tdtLayer)
map.addLayer(tdtzjLayer)
</script>
原文始发于微信公众号（GIS之路）：OpenLayers 加载天地图
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/234744.html
