openlayers 入门教程(四):layers 篇

还是大剑师兰特:曾是美国某知名大学计算机专业研究生,现为航空航海领域高级前端工程师;CSDN知名博主,GIS领域优质创作者,深耕openlayers、leaflet、mapbox、cesium,canvas,webgl,echarts等技术开发,欢迎加底部微信(gis-dajianshi),一起交流。

在这里插入图片描述

No.内容链接
1Openlayers 【入门教程】 - 【源代码+示例300+】
2Leaflet 【入门教程】 - 【源代码+图文示例 150+】
3Cesium 【入门教程】 - 【源代码+图文示例200+】
4MapboxGL【入门教程】 - 【源代码+图文示例150+】
5前端就业宝典 【面试题+详细答案 1000+】

在这里插入图片描述

文章目录

    • 常用参数
    • 常用监听事件
    • OpenLayers中的图层类型
    • 按照渲染分类
    • 加载常用的地图底图
      • 1 加载谷歌地图
      • 2 加载OSM地图
      • 3 加载Bing地图
      • 4 加载Mapbox地图
      • 5 加载baidu地图
      • 6 加载Arcgis地图
      • 7 加载高德地图
      • 8 加载天地图

图层就像是含有文字或图形等元素的图片,一张张按顺序叠放在一起,组合起来形成页面的最终效果。
在这里插入图片描述

在 openlayers 中,图层是使用 layer 对象表示的,主要有 WebGLPoints Layer、热度图(HeatMap Layer)、图片图层(Image Layer)、切片图层(Tile Layer)和 矢量图层(Vector Layer)五种类型,它们都是继承 Layer 类的。

常用参数

source,指定了图层的数据来源,图层作用是以一定的样式渲染数据,source则指定了数据;
visible,是否可见;
zIndex,图层的叠加次序,默认是0,最底层,如果使用setMap方法添加的图层,zIndex值是Infinity,在最上层;
extent,图层渲染的区域,即浏览器窗口中可见的地图区域。extent 是一个矩形范围,格式是[number, number, number, number] 分别代表 [left, bottom, right, top] 。为了提升渲染效率和加载速度,extent范围之外的瓦片是不会请求的,当然也不会渲染;
className,图层各个元素的样式;
opacity,透明度,默认为 1 ,即完全透明;
minResolution,图层可见的最小分辨率;
maxResolution,图层可见的最大分辨率;
minZoom,图层可见的最小zoom level;
maxZoom,图层可见的最大zoom level

常用监听事件

• prerender 图层开始渲染之前。
• postrender 渲染完成之时。
• error 发生任何错误。
• change 图层发生修改。

OpenLayers中的图层类型

• Graticule,地图上覆盖的网格标尺图层。
• HeatMap,热力图。
• Vector,矢量图。
• VectorImage,单张的矢量图层。
• VectorTile,矢量瓦片图层。
• WebGLPoints,WebGL渲染的海量点图层。
• Tile,栅格图层。

按照渲染分类

图层按照渲染的位置分为两类,一类是在服务器端渲染好,以图片形式返回浏览器的, imagelayer 和 tilelayer 都是属于这种类型;另一类是在浏览器渲染的图层类型,vectorlayer 和 heatmaplayer 就是这种类型。

加载常用的地图底图

1 加载谷歌地图

示例:加载谷歌地图

2 加载OSM地图

示例:加载OSM地图

3 加载Bing地图

示例:加载Bing地图

4 加载Mapbox地图

示例:加载Mapbox地图

5 加载baidu地图

示例:加载baidu地图

6 加载Arcgis地图

示例: 加载Arcgis地图

7 加载高德地图

示例: 加载高德地图

8 加载天地图

示例:加载天地图

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/762998.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

广告增量实时索引构建实践

本期作者 1.前言 在广告检索系统中,增量索引(实时索引)是一类常见的技术,用于使广告信息的变更及时生效。其中一种主要的思路即由检索系统消费广告更新数据流,实时更新内存索引,对此行业中已有很多优秀方案…

OpenHarmony开发之图形UI组件解析

简介 图形UI组件实现了一套系统级的图形引擎。 该组件为应用开发提供UIKit接口,包括了动画、布局、图形转换、事件处理,以及丰富的UI组件。 组件内部直接调用HAL接口,或者使用WMS(Window Manager Service)提供的客户端与硬件交互&#xff…

数据结构之排序一

目录 1.排序 一.概念及其分类 二.排序的稳定性 2.插入排序 一.基本思想 二.插入排序的实现 复杂度 稳定性的分析 3.希尔排序 一.预排序代码的实现 二.希尔排序代码实现 复杂度分析 4.clock函数 1.排序 一.概念及其分类 说到排序,我们都不陌生&#x…

设计数据库之概念模式:E-R模型

Chapter3:设计数据库之概念模式:E-R模型 笔记来源:《漫画数据库》—科学出版社 设计数据库的步骤: 概念模式 概念模式(conceptual schema)是指将现实世界模型化的阶段进而,是确定数据库理论结构的阶段。 概念模式的设…

Ubuntu 安装 Carla仿真环境

1、系统要求 Ubuntu 16.04/18.04/20.04 CARLA 为 16.04 之前的 Ubuntu 版本提供支持。然而,Unreal Engine需要合适的编译器才能正常工作。 CARLA 服务器至少需要 6 GB GPU,但建议使用 8 GB。 2、安装NIVDIA驱动 BISO设置 开机F12,进入BIOS…

29-中断管理

中断管理 什么是中断管理? 用户可以自定义配置系统可管理的最高中断优先级的宏定义configLIBRARY_MAX_SYSCALL_INTERRUPT_PRIORITY(高四位有效),它是用于配置内核中的basepri 寄存器的,当 basepri 设置为某个值的时候…

org.springframework.boot:type=Admin,name=SpringApplication异常

javax.management.InstanceNotFoundException: org.springframework.boot:typeAdmin,nameSpringApplication 问题描述: IDEA 新建 SpringBoot 项目,启动时后台报错: javax.management.InstanceNotFoundException: org.springframework.boot…

基于springboot的牙科就诊管理系统

技术:springbootmysqlvue 一、系统背景 当前社会各行业领域竞争压力非常大,随着当前时代的信息化,科学化发展,让社会各行业领域都争相使用新的信息技术,对行业内的各种相关数据进行科学化,规范化管理。这样…

粤嵌6818开发板如何理解Linux文件IO?

一、文件IO的概述 1、什么是文件? Linux下一切皆文件。普通文件、目录文件、管道文件、套接字文件、链接文件、字符设备文件、块设备文件。 2、什么是IO? input output:输入输出 3、什么是文件IO? 对文件的输入输出,把…

轻松找回丢失数据EasyRecovery数据恢复软件让你无后顾之忧

轻松找回丢失数据,EasyRecovery数据恢复软件让你无后顾之忧,电脑数码行业必备工具,让你的数据安全有保障 ! 一、EasyRecovery数据恢复软件简介 在我们的日常生活中,无论是工作还是学习,都离不开电脑和数据…

Linux/Perfection

Enumeration nmap 用 nmap 扫描了常见的端口,发现对外开放了 22,80,扫描一下详细信息,如下所示 ┌──(kali㉿kali)-[~/vegetable/HTB/Perfection] └─$ nmap -sC -sV -p 22,80 10.10.11.253 -oA nmap Starting Nmap 7.93 ( https://nmap…

目标检测——DOTA航拍数据集

DOTA数据集是一个用于航空图像中目标检测的大规模数据集,旨在帮助研究人员开发和评估航空图像中的目标检测算法。该数据集具有广泛的应用价值,尤其在计算机视觉和遥感技术领域。 DOTA数据集的特点主要体现在以下几个方面:首先,其…

408学习笔记-14-C-数据在内存中的存储

1、整数型存储 整数型存储就是所有整型家族里的数据类型的存储方式,也就是说包含了字符类型的存储(因为字符的操作符的返回值是ASCII码值,故实际上存储的是整数)。 1.1、有符号整数 有符号整数包含char,short&#x…

如何做接口测试?

今天来聊聊接口测试,现在是2024年了,打开招聘网站随便点开一个招聘帖子,几乎都可以看到岗位JD要求写着有接口测试经验优先。其重要性可见一斑! 目前,凡是好一点稍具规模的公司哪怕是大厂外包也几乎都要求会接口测试&a…

QT(6.5) cmake构建C++编程,调用python

一、注意事项 explicit c中,一个参数的构造函数(或者除了第一个参数外其余参数都有默认值的多参构造函数),承担了两个角色,构造器、类型转换操作符, c提供关键字explicit,阻止转换构造函数进行的隐式转换的发生&#…

使用Docker搭建YesPlayMusic网易云音乐播放器并发布至公网访问

目录 ⛳️推荐 1. 安装Docker 2. 本地安装部署YesPlayMusic 3. 部署公有云YesPlayMusic播放器 3.1 安装cpolar内网穿透 3.2 固定YesPlayMusic公网地址 ⛳️推荐 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一…

【区间、栈】算法例题

目录 六、区间 48. 汇总区间 ① 49. 合并区间 ② 50. 插入区间 ② 51. 用最少数量的箭引爆气球 ② 七、栈 52. 有效的括号 ① 53. 简化路径 ② 54. 最小栈 ② 55. 逆波兰表达式求值 ② √- 56. 基本计算器 ③ 六、区间 48. 汇总区间 ① 给定一个 无重复元素 的 …

LeetCode # 199. 二叉树的右视图

199. 二叉树的右视图 题目 给定一个二叉树的 根节点 root,想象自己站在它的右侧,按照从顶部到底部的顺序,返回从右侧所能看到的节点值。 示例 1: 输入: [1,2,3,null,5,null,4] 输出: [1,3,4] 示例 2: 输入: [1,null,3] 输出: [1,3] 示例 3…

大规模电商平台数据采集难点分析♫

▁▃▅▇主要包括以下几方面: API工具 ◆◆数据量巨大 任何系统,在不同的数据量面前,需要的技术难度都是完全不同的。 如果单纯是将数据采到,可能还比较好完成,但采集之后还需要处理,因为必须考虑数据的规…

如何根据业务需求选择合适的电子合同平台?

在数字化转型的浪潮中,电子合同已经成为企业运营中不可或缺的一部分。然而,面对市场上众多的电子合同平台,企业如何根据自身的业务需求做出合适的选择呢?本文将为您一一解答。 在电子合同的签署过程中,数字证书颁发机…