OpenLayer中之ol.layer,group图层组学习
一、概念:字面上就是一组图层的集合,
用途;至于为什么要出这个这个类,我想应该为了有时候便捷管理好几个,例如在加载天地图的时候需要加载地图图层和注记图层,如果不想让地图图层和天地图注记图层不显示,我们需要分别设置,如果用到group感觉很方便,直接将group图层对象中visible
属性设置为false即可。(个人想法,如有不对请指出)
二、构造函数:
经过学习一段时间OpenLayer给我最大的感受就是构造函数的填充,几乎每个类都要设置许多属性填充,来看下group的构造函数属性(最常用:layers
)
opacity
:透明度visible
:显示属性extent
:图层显示范围zIndex
:图层组索引位置,就像css设置相对定位时z-indexminResolution
maxResolution
layers
:图层数组,这个属性很重要,必须设置
三、使用示例
<!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="Script/ol.css" rel="stylesheet" />
<script src="Script/ol.js"></script>
<script src="Script/move-line.js"></script>
</head>
<body>
<div id="map"></div>
<script>
var vec_c = getTdtLayer("vec_w");
var cva_c = getTdtLayer("cva_w");
var layerGroup = new ol.layer.Group({
layers: [vec_c, cva_c]
});
var map = new ol.Map({
controls: ol.control.defaults({
attribution: false
}),
target: 'map',
layers: [layerGroup],
view: new ol.View({
center: [12967248.127726289, 4891245.816671869],
zoom: 9,
minZoom: 0,
maxZoom: 18
})
});
//天地图函数
function getTdtLayer(lyr) {
var url = "http://t{0-7}.tianditu.com/DataServer?T=" + lyr + "&X={x}&Y={y}&L={z}";
var layer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: url
})
});
return layer;
}
</script>
</body>
</html>
四、总结
觉得这个基类用处不是很大,可能有什么重要的功能,还有没有发现,等以后发现继续更新下,不得不吐槽OpenLayer的这个API。能不能在类的介绍中加点实例,希望以后改善一下。
转载自:https://blog.csdn.net/weixin_40184249/article/details/80722725