openlayer加载在线百度地图

最新推荐文章于 2023-12-20 17:11:46 发布

龙石月

最新推荐文章于 2023-12-20 17:11:46 发布

阅读量743

点赞数

原文链接：https://blog.csdn.net/zxc13552314286/article/details/79594357

版权


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Openlayer加载在线百度瓦片地图</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
    <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="baiduMap" style="width: 100%"></div>
</body>


<script>
    // 百度地图层
    var baiduMapLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            tilePixelRatio: 2,    //瓦片像素比
            tileUrlFunction: function (tileCoord) {  // 参数tileCoord为瓦片坐标
                var z = tileCoord[0];
                var x = tileCoord[1];
                var y = tileCoord[2];
 
                // 计算当前层级下瓦片总数的一半，用于定位整个地图的中心点
                var halfTileNum = Math.pow(2, z - 1);
                // 原点移到中心点后，计算xy方向上新的坐标位置
                var baiduX = x - halfTileNum;
                var baiduY = y + halfTileNum;
 
                // 百度瓦片服务url将负数使用M前缀来标识
                if (baiduX < 0) {
                    baiduX = 'M' + (-baiduX);
                }
                if (baiduY < 0) {
                    baiduY = 'M' + (-baiduY);
                }
 
                // 返回经过转换后，对应于百度在线瓦片的url
                return 'http://online2.map.bdimg.com/onlinelabel/?qt=tile&x=' + baiduX + '&y=' + baiduY + '&z=' + z + '&styles=pl&udt=20160321&scaler=2&p=0';
            }
        })
    });
 
    // 创建地图
    var map = new ol.Map({
        layers: [
            baiduMapLayer
        ],
        view: new ol.View({
            // 设置成都为地图中心
            center: [104.06, 30.67],
            projection: 'EPSG:4326',
            zoom: 4
        }),
        target: 'baiduMap'
    });
</script>
    var projection = ol.proj.get("EPSG:3857");
    var resolutions = [];
    for(var i=0; i<19; i++){
        resolutions[i] = Math.pow(2, 18-i);
    }
    var tilegrid  = new ol.tilegrid.TileGrid({
        origin: [0,0],
        resolutions: resolutions
    });
	/*
    var baidu_source = new ol.source.TileImage({
        projection: projection,
        tileGrid: tilegrid,
        tileUrlFunction: function(tileCoord, pixelRatio, proj){
            if(!tileCoord){
                return "";
            }
            var z = tileCoord[0];
            var x = tileCoord[1];
            var y = tileCoord[2];
			
			// 百度瓦片服务url将负数使用M前缀来标识
            if(x<0){
                x = "M"+(-x);
            }
            if(y<0){
                y = "M"+(-y);
            }
            //## 核心代码处，将百度地图的调用网址修改为离线的地图瓦片服务网址
            return "http://localhost:8003/Map/roadmap/"+z+"/"+x+"/"+y+".png"
        }
    });

    var baidu_layer = new ol.layer.Tile({
        source: baidu_source
    });
 */
 var baidu_layer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            tilePixelRatio: 2,    //瓦片像素比
            tileUrlFunction: function (tileCoord) {  // 参数tileCoord为瓦片坐标
                var z = tileCoord[0];
                var x = tileCoord[1];
                var y = tileCoord[2];
 
                // 计算当前层级下瓦片总数的一半，用于定位整个地图的中心点
                var halfTileNum = Math.pow(2, z - 1);
                // 原点移到中心点后，计算xy方向上新的坐标位置
                var baiduX = x - halfTileNum;
                var baiduY = y + halfTileNum;
 
                // 百度瓦片服务url将负数使用M前缀来标识
                if (baiduX < 0) {
                    baiduX = 'M' + (-baiduX);
                }
                if (baiduY < 0) {
                    baiduY = 'M' + (-baiduY);
                }
 
                // 返回经过转换后，对应于百度在线瓦片的url
                //return 'http://online2.map.bdimg.com/onlinelabel/?qt=tile&x=' + baiduX + '&y=' + baiduY + '&z=' + z + '&styles=pl&udt=20160321&scaler=2&p=0';
				return "http://localhost:8003/Map/roadmap/"+z+"/"+baiduX+"/"+baiduY+".png"
            }
        })
    });
/*    百度转换方法填入坐标系，地址统一为北客站
     var projection =new BMap.MercatorProjection();
                                                        百度地图拾取的坐标
     var point = projection.lngLatToPoint(new BMap.Point(108.94318,34.385242));
     x：12127631.28
     y:4056293.97
     */
    var map = new ol.Map({
        target: 'map',
        layers: [baidu_layer],
        view: new ol.View({
            center:[12127787.24,4056019],
            zoom: 15
        })
    });
    /*
    使用ol自带的转换使用方式,，因为地图是百度切片的原因出现比较大的偏差
     */
    var map = new ol.Map({
        target: 'map2',
        layers: [baidu_layer],
        view: new ol.View({
            //谷歌地图拾取的坐标
             center : ol.proj.transform([108.938981,34.375414], 'EPSG:4326', 'EPSG:3857'),
            zoom: 15
        })
    });
 
 
 
</script>
</html>

龙石月

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
openlayer加载在线百度地图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Openlayer加载在线百度瓦片地图</title> <link rel="stylesheet" href="https://openlayers.or...
复制链接

扫一扫