• OpenLayer中之ol.layer,group图层组学习


    一、概念:字面上就是一组图层的集合,

          用途;至于为什么要出这个这个类,我想应该为了有时候便捷管理好几个,例如在加载天地图的时候需要加载地图图层和注记图层,如果不想让地图图层和天地图注记图层不显示,我们需要分别设置,如果用到group感觉很方便,直接将group图层对象中visible属性设置为false即可。(个人想法,如有不对请指出)

    二、构造函数:

    经过学习一段时间OpenLayer给我最大的感受就是构造函数的填充,几乎每个类都要设置许多属性填充,来看下group的构造函数属性(最常用:layers)

    • opacity:透明度
    • visible:显示属性
    • extent:图层显示范围
    • zIndex:图层组索引位置,就像css设置相对定位时z-index
    • minResolution
    • 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。能不能在类的介绍中加点实例,希望以后改善一下。

  • 相关阅读:
    owlcar 用法心得 自定义导航
    placeholder 颜色
    图片加载完后执行事件
    针对动态创建的数据添加事件
    弹窗(遮罩层)
    [iOS]把16进制(#871f78)颜色转换UIColor
    [AFN]AFNetworking错误总结
    [iOS]如何给Label或者TextView赋HTML数据
    [iOS]解决模拟器无法输入中文问题
    [iOS]开发者证书和描述文件的作用
  • 原文地址:https://www.cnblogs.com/tuboshu/p/10752379.html
Copyright © 2020-2023  润新知