`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹出框</title>
<script src="./v6.14.1/build/ol.js"></script>
<link rel="stylesheet" href="./ol.css">
<style>
html,
body {
height: 100%;
width: 100%;
}
#map {
height: 100%;
width: 100%;
}
#map1 {
width: 200px;
height: 90px;
background-color: rgba(65, 59, 59, 0.33);
line-height: 40px;
margin-left: 50px;
}
</style>
</head>
<body>
<div id="map">
</div>
<div id="map1">
</div>
<script>
var map1 = document.querySelector('#map1')
var layer = new ol.layer.Vector({
source: new ol.source.Vector()
})
var poper = new ol.Overlay({
element: map1,
autoPan: true,
autoPanAnimation: { // 底图移动动画
duration: 250
}
})
// 文字标注
var wenzi = new ol.layer.Tile({
title: "天地路线标注",
source: new ol.source.XYZ({
// 传递参数T=cva_w表示获取图层文字标注等
// url的参数问题（T可以表达不同的请求方式）
url: "http://t4.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=6fe5869a51bde830d36cd219886bff3f",
wrapX: false
}),
})
// 路线图
var luxian = new ol.layer.Tile({
title: "天地图文字标注",
source: new ol.source.XYZ({
// 传递参数T=vec_w表示获取单图层（比如单路线，单视图等）
url: 'http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=自己的'
}),
})
let map = new ol.Map({
target: 'map',
layers: [luxian, wenzi, layer],
overlays: [poper],
view: new ol.View({
center: [108.93060745, 34.16138567],
projection: 'EPSG:4326',
zoom: 11
})
})
map.on('singleclick', function (e) {
var coordinate = e.coordinate;
map1.innerHTML = '经度：' + coordinate[0].toFixed(4)
+
'</br>'
+ '纬度：' + coordinate[1].toFixed(4);
poper.setPosition(coordinate);
})
map.on('pointermove', function (e) {
})
</script>
</body>
</html>
`
