OpenLayers3, 设置地图背景

news2024/11/14 15:31:36

文章目录

一、前言
二、代码实现
三、总结

一、前言

本文基于OpenLayers3，实现地图加入背景图的功能。

二、代码实现

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>设置地图背景</title>
    <!--导入本页面外部样式表-->
    <link href="../../css/style.css" rel="stylesheet" type="text/css" />
    <link href="../../libs/ol/ol.css" rel="stylesheet" type="text/css" />
    <script src="../../libs/ol/ol.js" type="text/javascript"></script>
    <style type="text/css">
        #mapCon {
            width: 100%;
            height: 90%;
            position: absolute;
        }
    </style>
</head>
<body>
    </div>
    <div id="map" title="地图显示" style="padding: 5px">
    </div>
    <script type="text/javascript">
        //实例化Map对象加载地图
        var tdttk = '*****' // 天地图认证tk, 秘钥
        var map = new ol.Map({
            //地图容器div的ID
            target: 'mapCon',
            //地图容器中加载的图层
            layers: [
                new ol.layer.Tile({
                    title: "天地图矢量图层",
                    source: new ol.source.XYZ({
                        url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=" + tdttk,
                        wrapX: false
                    })
                }),
                new ol.layer.Tile({
                    title: "天地图矢量注记图层",
                    source: new ol.source.XYZ({
                        url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=" + tdttk,
                        wrapX: false
                    })
                })],
            //地图视图设置
            view: new ol.View({
                //地图初始中心点
                center: [0, 0],
                //地图初始显示级别
                zoom: 1
            })
        });

        /*====================设置地图背景=====================*/
        function setBgImg() {
            //获取地图容器元素
            var div = document.getElementById('mapCon');
            //通过style的填充背景图属性设置背景
            div.style.backgroundImage = 'url(../../images/gis.jpg)';
        }
        setBgImg()
    </script>
</body>
</html>