在联网的情况下，前端的地图展示如果需要底图，首先考虑的肯定是在线地图。
在线地图中优先级最高的当属无偏移的天地图。
现给出天地图的调用示例tianditu.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test </title>
<link rel="stylesheet" href="ol.css" type="text/css">
<style>
.map {
width: 100%;
height: 750px;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script src='ol.js'></script>
<script>
var basemap = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=134e6b671b2b1f64c383628fbe12b4d1'
}),
name: 'basemap'
}),
new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://t0.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=134e6b671b2b1f64c383628fbe12b4d1'
}),
name: 'basemap'
}),
],
target: 'map',
view: new ol.View({
projection: "EPSG:3857",
center: [12690421.950433187, 3796171.9350186167],
zoom: 9,
minZoom: 9,
maxZoom: 12,
extent:[12245143.987260092, 3503549.8435043739, 13135699.91360628, 4096139.0404472323],
constrainResolution: true,
})
})
</script>
</body>
</html>上述代码的目录下需包含ol.js和ol.css，其下载链接如下下载链接
https://github.com/openlayers/openlayers/releases/download/v6.9.0/v6.9.0-dist.zip
也可以直接下载 在线调用天地图.zip 里面包含ol.css、ol.js、tianditu.html
下面是效果图
