OpenLayers3, 设置地图背景
文章目录
- 一、前言
- 二、代码实现
- 三、总结
一、前言
本文基于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的IDtarget: '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>
效果如下：
三、总结
以上为基于openlayer3 实现设置地图背景图的简单案例，希望对您有帮助~