热门标签
热门文章
- 1解读全球十大公司物联网战略，一个万物智能的世界即将到来_全球十大公司物联网战略,一个万物智能的世界即将到来
- 2稳定排序和不稳定排序_稳定排序和不稳定排序的区别
- 3设计模式（十）——结构型模式——桥接模式（Bridge）_骨架类 桥接模式
- 4我的世界服务器无限时间,我的世界无限时间版本
- 5游戏盒子专用EMUELEC各种版本自选、联邦游电局（S905L3A镜像包）_emuelec游戏6万多个整合包
- 6关于操作系统的几个重要概念（三）_独占和分包
- 7基于springboot博客论坛系统设计与实现（源码+文档LW+数据库+报告）_博客论坛源码
- 8ENSP实验三：搭建VPN（GRE，未配置安全策略）_ensp的 gre隧道建立
- 9uni-app(三)扫码-scanCode_uni.scancode
- 10微信小程序云开发云函数总结_c# wx.cloud.init
当前位置: article > 正文
封装openlayers_三、Openlayers关键概念
作者：小丑西瓜9 | 2024-05-20 00:22:01
赞
踩
typescript 封装 openlayers 交互对象
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>声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/595223
推荐阅读
相关标签
