<!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>
<style>
#Map,
body,
html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" type="text/css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
</head>
<body>
<div id="Map" ref="Map"></div>
<script>
let map = new ol.Map({
target: 'Map',
layers: [],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
})
function BaiduMap() {
let resolutions = []
for (let i = 0; i < 18; i++) {
resolutions[i] = Math.pow(2, 18 - i)
}
let tilegrid = new ol.tilegrid.TileGrid({
origin: [0, 0],
resolutions
})
let baiduSource = new ol.source.TileImage({
projection: 'BD09-MC',
tileGrid: tilegrid,
tileUrlFunction: function (tileCoord, pixelRatio, porj) {
let z = tileCoord[0]
let x = tileCoord[1]
let y = tileCoord[2] + 1
if (x < 0) {
x = 'M' + -x
}
y = -y
if (y < 0) {
y = 'M' + -y
}
let num = Math.ceil(Math.random() * 3)
return `http://maponline${num}.bdimg.com/onlinelabel/?qt=vtile&x=${x}&y=${y}&z=${z}&styles=pl&udt=20201110&scaler=2&p=0`
}
})
let baiduLayer = new ol.layer.Tile({
source: baiduSource
})
map.addLayer(baiduLayer)
}
BaiduMap()
</script>
</body>
</html>
openlayer 配置 百度地图
最新推荐文章于 2024-07-28 10:40:51 发布