封装openlayers_三、Openlayers关键概念

最新推荐文章于 2023-11-25 23:49:28 发布

律匠Matt

最新推荐文章于 2023-11-25 23:49:28 发布

阅读量700

点赞数

文章标签：封装openlayers

本文链接：https://blog.csdn.net/weixin_33022901/article/details/112733289

版权

openlayers是面向对象的。

面向对象三大特性：封装、继承、多态

面向对象语言：JAVA、C++、PHP、C#、Javascript、Python、Scala...

本章学习内容：

openlayers核心组件、事件、可观察属性、调试技术

openlayers核心组件

学习openlayers核心组件之前，了解：

1.类之间的关系

2.类之间的继承

1 核心组件ol.Map

1个ol.Map

0个或1个controls 控件集合
1个controls 控件集合类有0个或n个ol.control.Control控件类对象
0个或1个interactions 交互行为集合
1个 interactions 交互行为集合有0个或n个ol. interactions.Interaction交互类对象，如滚轮缩放MouseWheelZoom、选择Select
0个或1个layers图层集合
1个layers有0个或n个ol.layer.Base图层类对象
0个或1个overlays悬浮覆盖物集合
1个overlays有0个或n个ol.Overlay类对象
0个或n个view视图
1个地图ol.Map只能绑定一个ol.View视图类对象

openlayers code:

https://github.com/openlayers/openlayers

练习代码：

<html lang="en"> <head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>map和它的小伙伴title>    <link rel="stylesheet" href="ol/ol.css">    <style>        .map{            width: 100%;            height: 100%;            position: absolute;        }        .beijing{            width: 50px;            height: 30px;            background: url("flag.jpg") center center no-repeat;            background-size: 100% 100%;        }style>head><body>    <div class="map" id="map">div>    <div class="beijing" id="beijing">div>    <script src="ol/ol.js">script>    <script>        //创建一个openstreetmap地图图层         var osmLayer = new ol.layer.Tile({            source:new ol.source.OSM()        });        //创建一个地图控件        var control = new ol.control.FullScreen();        //创建一个视图        //墨卡托投影代码3857，经纬度WGS84坐标系代码4326        var beijing = ol.proj.transform([116.399669,39.921354],"EPSG:4326","EPSG:3857");        var view = new ol.View({            center:beijing,            zoom:5,            maxZoom:10,            minZoom:2        });        //创建一个交互控件        var interaction = new ol.interaction.DragRotateAndZoom();        var interactions = new ol.interaction.defaults().extend([interaction]);        //console.log(interactions);        //创建一个悬浮控件        var overlay = new ol.Overlay({            position:beijing,            element:document.getElementById("beijing")        });        //创建地图        var map = new ol.Map({            target:"map",//id            layers:[osmLayer],            view:view,            controls:[control],            interactions:interactions,            overlays:[overlay]        });        //console.log(map.getInteractions());script>body>html>

2 Console控制台调试

Elements

Console

Source 前后端交互

ol-debug.js ：调试版的ol.js，未压缩

引入ol-debug.js

在html中加debugger,进行调试

在Source中的代码可以加断点，进行调试

鼠标悬浮在代码中的对象名上可看对象属性

Console中可以写调试代码：

//查看地图的控件map.getControls();//对象赋值为默认控件controls = new ol.control.defaults();//或：//var controls = new ol.control.defaults();//console.log(controls);//添加控件到地图controls.forEach(map.addControl,map);//再查看一下地图的控件map.getControls();

3 openlayers中的超类/父类 super classs

继承关系

3.1 ol.Observable所有类的基类

方法

on(type, listener,scope) ：注册监听事件，type枚举所有类型，listener监听(function类型)，监听到事件后就会触发监听方法，scope告诉this是谁

once(type, listener,scope) ：只监听一次

un(type, listener,scope) ：注销监听事件，取消监听

unByKey(key)：key事件返回id,通过id将事件注销掉 (老版本)

练习代码：

<html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>map和它的小伙伴title>    <link rel="stylesheet" href="ol/ol.css">    <style>        .map {            width: 100%;            height: 100%;            position: absolute;        }        .beijing {            width: 50px;            height: 30px;            background: url("flag.jpg") center center no-repeat;            background-size: 100% 100%;        }style>head><body>    <div class="map" id="map">div>    <div class="beijing" id="beijing">div>        <script src="ol/ol-debug.js">script>    <script>        //创建一个openstreetmap地图图层         var osmLayer = new ol.layer.Tile({            source: new ol.source.OSM()        });        //创建一个地图控件        var control = new ol.control.FullScreen();        //创建一个视图        //墨卡托投影代码3857，经纬度WGS84坐标系代码4326        var beijing = ol.proj.transform([116.399669, 39.921354], "EPSG:4326", "EPSG:3857");        var view = new ol.View({            center: beijing,            zoom: 5,            maxZoom: 10,            minZoom: 2        });        //创建一个交互控件        var interaction = new ol.interaction.DragRotateAndZoom();        var interactions = new ol.interaction.defaults().extend([interaction]);        //console.log(interactions);        //创建一个悬浮控件        var overlay = new ol.Overlay({            position: beijing,            element: document.getElementById("beijing")        });        //创建地图        var map = new ol.Map({            target: "map",//id            layers: [osmLayer],            view: view,            controls: [control],            interactions: interactions,            overlays: [overlay]        });        //注册地图移动事件        // function onMove() {        //     console.log(this);        //     console.log(this + "移动了");        // }        // var key = map.on("moveend", onMove);        //注销事件        // setTimeout(function(){        //     console.log("移动事件被我注销了");        //     map.un("moveend",onMove);        // },3000);        //map.un("moveend",onMove);        //老版本注销事件,较新版本已无效        //map.unByKey(key);        var MyClass = function(label){            this.label = label;            this.onMoveEnd = function(){                console.log(this.label+"移动了");            }        }        var obj1 = new MyClass("label1");        var obj2 = new MyClass("label2");        map.on("moveend", obj1.onMoveEnd,obj1);        map.on("moveend", obj2.onMoveEnd,obj2);script>body>html>

3.2 类ol.Object

Key-Value Observing(KVO)

可观察属性/键值监测

练习代码：

<html lang="en"> <head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>object类和KVOtitle>    <link rel="stylesheet" href="ol/ol.css">    <style>        /* 消除间隔 */        *{            /* 内边距 */            padding: 0;            /* 外边距 */            margin: 0;        }        .map{            width: 100%;            height: 100%;            position: absolute;        }        .beijing{            width: 50px;            height: 30px;            background: url("flag.jpg") center center no-repeat;            background-size: 100% 100%;        }        .showLayer{           position: absolute;            /* 设置层级为2 */           z-index: 2;         }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/ol-debug.js">script>    <script>        //创建一个openstreetmap地图图层         var osmLayer = new ol.layer.Tile({            source:new ol.source.OSM()        });        //创建一个地图控件        var control = new ol.control.FullScreen();        //创建一个视图        //墨卡托投影代码3857，经纬度WGS84坐标系代码4326        var beijing = ol.proj.transform([116.399669,39.921354],"EPSG:4326","EPSG:3857");        var view = new ol.View({            center:beijing,            zoom:5,            maxZoom:10,            minZoom:2        });        //创建一个交互控件        var interaction = new ol.interaction.DragRotateAndZoom();        var interactions = new ol.interaction.defaults().extend([interaction]);        //console.log(interactions);        //创建一个悬浮控件        var overlay = new ol.Overlay({            position:beijing,            element:document.getElementById("beijing")        });        //创建地图        var map = new ol.Map({            target:"map",//id            layers:[osmLayer],            view:view,            controls:[control],            interactions:interactions,            overlays:[overlay]        });        //console.log(map.getInteractions());                function showLayer(){            //console.log(osmLayer.getProperties());            // if(osmLayer.getVisible()){            //     osmLayer.setVisible(false);            // }else{            //     osmLayer.setVisible(true);            // }            //osmLayer.setOpacity(0.5);            osmLayer.set("####","一个openstreetmap",false);//true不触发属性        }        //change:visible        osmLayer.on("change:visible",function(e){            var visible = this.getVisible();            if(visible){                console.log("图层显示");            }else{                console.log("图层隐藏");            }        });        //propertychange        osmLayer.on("propertychange",function(e){            console.log("图层某个属性发生改变");            console.log(e);//ol.Object.Event 属性改变前后的值        });script>body>html>

3.3 类ol.Collection

ol.Collection

在Console中调试：

//1.扩展控件map.getControls().extend([new ol.control.FullScreen()]);//2.查看控件集合map.getControls().getArray();//3.清空地图控件map.getControls().clear();//4.实例化Collectionvar collection = new ol.Collection([new ol.control.FullScreen()]);//5.添加控件collection.forEach(map.addControl,map);//6.查看collection.getArray();

练习代码:

<html lang="en"> <head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Collection类title>    <link rel="stylesheet" href="ol/ol.css">    <style>        .map{            width: 100%;            height: 100%;            position: absolute;        }        .beijing{            width: 50px;            height: 30px;            background: url("flag.jpg") center center no-repeat;            background-size: 100% 100%;        }style>head><body>    <div class="map" id="map">div>    <div class="beijing" id="beijing">div>        <script src="ol/ol-debug.js">script>    <script>        //创建一个openstreetmap地图图层         var osmLayer = new ol.layer.Tile({            source:new ol.source.OSM()        });               //创建一个视图        //墨卡托投影代码3857，经纬度WGS84坐标系代码4326        var beijing = ol.proj.transform([116.399669,39.921354],"EPSG:4326","EPSG:3857");        var view = new ol.View({            center:beijing,            zoom:5,            maxZoom:10,            minZoom:2        });        //创建一个交互控件        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",//id            layers:[osmLayer],            view:view,            interactions:interactions,            overlays:[overlay]        });             //监听地图控件集合长度变化        map.getControls().on("change:length",function(e){            console.log(e);            console.log("地图控件集合长度发生了变化");        });        //监听地图控件集合属性变化        map.getControls().on("propertychange",function(e){            console.log(e);            console.log("地图控件集合发生了变化");        });script>body>html>

律匠Matt

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
封装openlayers_三、Openlayers关键概念

openlayers是面向对象的。面向对象三大特性：封装、继承、多态面向对象语言：JAVA、C++、PHP、C#、Javascript、Python、Scala...本章学习内容： openlayers核心组件、事件、可观察属性、调试技术openlayers核心组件学习openlayers核心组件之前，了解： 1.类之间的关系 2.类之间的继承1 核心组件ol.Map1个ol.Ma...
复制链接

扫一扫