zoukankan      html  css  js  c++  java
  • 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。能不能在类的介绍中加点实例,希望以后改善一下。

  • 相关阅读:
    Linux临时增加swap空间
    Build RPM package from source code
    svn installation
    svn merge详解
    VMware DRS概述及功能
    VMware Fault Tolerance 概述及功能
    VMware HA 特性
    VMware Storage VMotion概述及功能
    Windows1小时后关机命令
    WINDOWS2008 KMS 服务器安装及激活
  • 原文地址:https://www.cnblogs.com/tuboshu/p/10752379.html
Copyright © 2011-2022 走看看