OpenLayers3, 设置地图背景

gis分享者

于 2024-08-29 14:37:14 发布

阅读量307

点赞数 10

分类专栏： gis工程师基础文章标签： openlayers 设置地图背景图

本文链接：https://blog.csdn.net/qq_28419035/article/details/141678188

版权

基础同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

gis工程师

24 篇文章 0 订阅

订阅专栏

文章目录

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

一、前言

本文基于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>