openlayers6中地图覆盖物overlay的示例分析

发布时间:2021-09-15 14:59:37 作者:小新
来源:亿速云 阅读:184

这篇文章主要介绍openlayers6中地图覆盖物overlay的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

1. overlay 简述

overlay是覆盖物的意思,顾名思义就是在地图上以另外一种形式浮现在地图上,这里很多同学会跟图层layers搞混淆,主要是放置一些和地图位置相关的元素,常见的地图覆盖物为这三种类型,如:popup 弹窗label标注信息text文本信息等,而这些覆盖物都是和html中的element等价的,通过overlay的属性element和html元素绑定同时设定坐标参数——达到将html元素放到地图上的位置,在平移缩放的时候html元素也会随着地图的移动而移动。

下面我们在看下官网的描述,其实map默认是存在这个属性,跟前面写的文章,图层,控件,交互都一个性质,都是默认加载地图的情况下是允许设置默认的overlay覆盖物,也可以在某个事件或者方法触发的时候去单独添加覆盖物。这里可以看下前面的文章描述,具体不进行详细阐述。

openlayers6中地图覆盖物overlay的示例分析

2. overlay 属性

overlay初始化时可以接受很多的配置参数,这些配置参数是一个个的键值对,共同构成一个对象字面量(options),然后传递给其“构造函数”,如new ol.Overlay(options),此处的 options 便是参数键值对构成的对象字面量。可配置的键值对,定义如下:(红色为常用属性)

后面案例中使用。

2. overlay 事件

支持的事件主要是继承 ol.Object 而来的 change 事件,当 overlay 相关属性或对象变化时触发:

那么怎么绑定相应的事件呢?openlayers 绑定事件遵循一般的 dom 事件绑定规则,包括 DOM 2 级事件绑定,以下是一个例子,这个例子说明了 overlay 的位置变化时在浏览器的控制台输出字符串的例子。

var overlay = new ol.Overlay({
    // 创建 overlay ...省略
});
// 事件
overlay.on("change:position", function(){
    console.log("位置改变!");
})

4. overlay 方法

支持的方法这里我们只介绍 overlay 特有的方法,就不介绍其继承而来的方法了,主要是针对 overlay 的属性及其相关联对象的 getset方法。

以上是“openlayers6中地图覆盖物overlay的示例分析”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. 从json获取坐标,生成地图覆盖物
  2. vue百度地图 + 定位的示例分析

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

openlayer overlay

上一篇:如何使用StopWatch优雅替代currentTimeMillis计算程序执行耗时

下一篇:怎么获取所有spring管理的bean

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》