OpenLayers3加载百度地图
博客专区 > RealPari 的博客 > 博客详情
OpenLayers3加载百度地图
RealPari 发表于7个月前
OpenLayers3加载百度地图
  • 发表于 7个月前
  • 阅读 277
  • 收藏 1
  • 点赞 0
  • 评论 0
摘要: OpenLayers3 + thymeleaf + 百度地图
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../../static/css/openlayers/ol.css" th:href="@{/css/openlayers/ol.css}" type="text/css"/>
<script src="../../static/js/openlayers/ol.js" th:src="@{/js/openlayers/ol.js}"></script>
</head>
<body>
<div id="map" style="width: 900px; height: 800px">
</div>
<script type="text/javascript">
    var projection = ol.proj.get("EPSG:3857");
    var tilegrid  = new ol.tilegrid.TileGrid({
        origin: [0,0],
        resolutions: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18]
      		.map(function(x) { return Math.pow(2, 18-x) })
    });

    var baiduSource = new ol.source.TileImage({
        projection: projection,
        tileGrid: tilegrid,
        tileUrlFunction: function(tileCoord, pixelRatio, proj){
            var z = tileCoord[0];
            var x = tileCoord[1];
            var y = tileCoord[2];
            return "http://online1.map.bdimg.com/onlinelabel/?qt=tile&x="+x+"&y="+y+"&z="+z+"&styles=pl&udt=20170301&scaler=1&p=1";
        }
    });

    var baidumap = new ol.layer.Tile({
        source: baiduSource
    });

    var center = [104.393345,36.521576];
    var map = new ol.Map({
        target: 'map',
        layers: [baidumap],
        view: new ol.View({
            center:  ol.proj.transform(center,'EPSG:4326', 'EPSG:3857'),
            zoom: 4
        })
    });
</script>
</body>
</html>

最终效果图(加到这里有点变形了。。。):

共有 人打赏支持
粉丝 2
博文 49
码字总数 15143
×
RealPari
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: