开源WebGIS开发——ol中的超类super class（Observable和Object）

YUANXLLL

于 2021-10-05 19:58:08 发布

阅读量461

点赞数 1

文章标签： html css

本文链接：https://blog.csdn.net/yl14774636230/article/details/120604897

版权

一、超类supei class

超类是ol中所有类的基础，研究好它们对后期的开发扩展十分有帮助，为ol中的类提供了大量的功能和方法。

（1）Observable是所有类的基类（ol的祖先），下方都是它的子类。

（2）Object类也是一个超类，绝大多数类都继承于它。

（3）collection类管理着ol中绝大多数类，如上节内容所讲的interaction、control、overlay等，都是通过collection类管理直接提供给地图（map）的。

二、Observable类

1、ol官网介绍：Abstract base class; normally only used for creating subclasses and not instantiated in apps. An event target providing convenient methods for listener registration and unregistration. （抽象基类；通常只用于创建子类，很少在代码中实例化，但在代码中不可避免的会使用它的属性和方法，因为几乎所有使用的类都是它的子类）

2、常用方法

（1）on(type, listener)

type是一个行为类型（move single click等是一个枚举类型枚举地图中所有可能出现的行为类型），listener监听on事件触发了之后需要干什么（function类型）。

（2）once（type, listener）只监听一次

比如地图移动，仅首次移动触发listener方法

（3）un（type, listener）取消监听

比如地图单击事件，当满足某个条件之后将这个事件注销

（上述三个方法都还有一个参数scope在ol官网没有给出）

3、代码实战

（1）给地图Map注册一个事件fires，即参数type所对应的值，Map类的事件列表如下，本节内容以moveend事件为例。

（2）on方法测试

   map.on("moveend",function(){
            console.log(this);
            console.log(this + "在移动哦");
        })

每次移动地图时输出结果：

（3）un方法测试（注销）

在注销之前需要把function单独写出来，不能像上边这样直接写在内部。


        //基类方法测试on un
        function onMove(){
            console.log(this);
            console.log(this + "在移动哦");
        }
        map.on("moveend",onMove);

        setTimeout(function(){
            console.log("移动被我注销了哦");
            map.un("moveend",onMove)//直接注销，可加入一个定时器判定是否起作用   
        },3000);

输出结果：

三、Object类（继承于Observable，拥有其方法）

1、Key-Value Observing（KVO）可观察属性

有一个对象中有一个字段name，原始属性值为jack，人为将jack改为jone，如何去监测它是否改变？——KVO 键值监测：可以去观察一个对象内部字段的值是否发生改变，改变了之后触发什么方法或者事件。

2、Object类的子类

3、Object中的方法

（1）get（key）获取一个键值

（2）getKeys（）获取所有键值

（3）getProperties（）获取所有属性 layer.getProperties（）获取图层的所有属性

（4）Observable类中的其它方法

（5）set（key，value，opt_silent）

（6）setProperties（values, opt_silent）设置属性

（7）unset（）取消键，删除

Object绝大多数方法都和属性相关，需要可观察属性KVO这个概念

4、练习代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="ol.css">
    <style>
         html,body{
            width: 100%;    
            height: 100%;
        } 
        .map{
            width: 80%;
            height: 80%;
            margin: auto;
            margin-top: 50px;
            border: red;
            border-style: double;
        }
        .beijing{
            width: 50px;
            height: 30px;
            background: url("timg.jpg") center center no-repeat;
            background-size: 100% 100%;
        }
        .showLayer{
            position: absolute;
            z-index: 1;
        }
    </style>
</head>
<body>
    <div class="map" id="map"> 
        <input type="button" value="图层属性观察" onclick="showLayer()" class="showLayer">

    </div>
    <div class="beijing" id="beijing"></div>

    <script src="ol-debug.js"></script>
    <script>
        //创建一个地图图层
        var osmLayer =  new ol.layer.Tile({
            source:new ol.source.OSM()
        });

        //创建一个地图控件 全屏展示
        var control = new ol.control.FullScreen();

        //创建一个地图视图，再创建地图视图之前需要确定中心点
        var beijing = ol.proj.transform([116.399669,39.921354],"EPSG:4326","EPSG:3857"); //经纬度投影代码为4326，转为墨卡托投影坐标系，代码为3857（坐标，源，目标）
        var view = new ol.View({
            center:beijing,
            zoom:5,
            maxZomm:10,
            minZoom:3
        });

        //创建一个交互控件
        var interaction = new ol.interaction.DragRotateAndZoom();
        var interactions = new ol.interaction.defaults().extend([interaction]);

        //创建一个悬浮控件 需要设置参数 用大括号
        var overlay = new ol.Overlay({
            position:beijing,
            element:document.getElementById("beijing")
        });

        //创建地图
        var map = new ol.Map({
            target:"map",
            view:view,
            layers:[osmLayer],
            interactions:interactions,
            controls:[control],
            overlays:[overlay]
        });


        // //基类方法测试on un
        // function onMove(){
        //     console.log(this);
        //     console.log(this + "在移动哦");
        // }
        // map.on("moveend",onMove);

        // setTimeout(function(){
        //     console.log("移动被我注销了哦");
        //     map.un("moveend",onMove)//直接注销，可加入一个定时器判定是否起作用   
        // },3000);
        

        //写触发函数showLayer
       // console.log(osmLayer.getProperties());
        function showLayer(){
            //给osm添加一个自己的属性 可以选择触发或者不触发事件on
            osmLayer.set("name","王小二",false)


    
           // console.log(osmLayer.getProperties());
        //    if(osmLayer.getVisible()){                //获取当前地图是否显示 返回布尔类型
        //         osmLayer.setVisible(false);          //get是获取 set是设置
        //    }else{
        //         osmLayer.setVisible(true);}
            // osmLayer.setOpacity(0.5);
           
        }

        //调用KVO可观察属性监听属性是否发生改变，监听有三种：change：监听指定属性是否发生改变；error：是否发生错误；propertychange：观察所有属性
        osmLayer.on("change:visible",function(){
            var visible = this.getVisible();
            if (visible){
                console.log("图层显示出来了");
            }else{
                console.log("图层被隐藏了"); 
            }
        })

        osmLayer.on("propertychange",function(e){       //观察所有属性
                 console.log("图层某个属性发生了改变")
                 console.log(e)
            // var visible = this.getVisible();
            // if (visible){
            //     console.log("图层显示出来了");
            // }else{
            //     console.log("图层被隐藏了"); 
            // }
        })
        
    </script>
</body>
</html>

四、Collection类

YUANXLLL

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
开源WebGIS开发——ol中的超类super class（Observable和Object）

一、超类supei class超类是ol中所有类的基础，研究好它们对后期的开发扩展十分有帮助，为ol中的类提供了大量的功能和方法。（1）Observable是所有类的基类（ol的祖先），下方都是它的子类。（2）Object类也是一个超类，绝大多数类都继承于它。（3）collection类管理着ol中绝大多数类，如上节内容所讲的interaction、control、overlay等，都是通过collection类管理直接提供给地图（map）的。二、Observable类1、ol.
复制链接

扫一扫