openlayer调用百度地图
2020-06-19 本文已影响0人
Quasimodo_403c
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>叠加百度地图瓦片</title>
<style type="text/css">
html,
body,
#map {
margin: 0;
height: 100%;
width: 100%;
padding: 0;
}
</style>
<link rel="stylesheet" href="./ol.min.css">
<script src="./ol.min.js"></script>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var resolutions = [];
for(var i=0; i<= 18; i++) {
resolutions[i] = Math.pow(2, 18 - i);
}
var tileGrid = new ol.tilegrid.TileGrid({
origin:[0, 0],
resolutions: resolutions
});
var baiduSource = new ol.source.TileImage({
projection: "EPSG:3857",
tileGrid: tileGrid,
tileUrlFunction: function(tileCoord, pixelRatio, proj) {
if(!tileCoord){
return "";
}
var [z, x, y] = tileCoord;
if(x < 0) {
x = `M${-x}`;
}
if(y < 0) {
y = `M${-y}`;
}
var num = Math.floor(Math.random() * 5);
return `http://online${num}.map.bdimg.com/tile/?qt=tile&x=${x}&y=${y}&z=${z}&styles=pl&scaler=2&udt=20180303`;
}
});
var baiduLayer = new ol.layer.Tile({
source: baiduSource
});
var map = new ol.Map({
target:"map",
layers:[
baiduLayer
],
view: new ol.View({
center: ol.proj.fromLonLat([121.48, 31.22]),
zoom: 8
})
});
</script>
</body>
</html>
