OpenLayers学习——Layer体系(一)

OpenLayers教程一:OpenLayers概述 目录 一、OpenLayers简介 二、OpenLayers的特征 三、OpenLayers的框架结构 一、OpenLayers简介 OpenLayers是一个用于开发WebGIS客户端的JavaScript包,最初基于BSD许可发行。 OpenLayers是一个开源的项目,其设计之意是为互联网客户端提供强大的地图展示功能,包括地图数据显示与相关操作,并具有灵活的扩展机... 阅读详情

为了看清楚OpenLayers的Layer结构体系,先看下面的UML图。


从上图可以看出,可以把图层分为四大类:

(1)矢量图层,Vector.矢量图层主要负责绘制矢量数据,一般是以Feature组织起来的数据。

(2)网格图层,Grid.网格图层几乎是所有瓦片地图图层的基类,主要完成瓦片数据的请求和绘制,如果我们使用自己定义的瓦片服务的话可以直接继承该类或者其子类来实现我们的服务图层的加载。

(3)标记图层,Markers,地图上的标记层。

(4)图像图层,Image.可以直接把加载网络图片,当做图层来使用。


以Grid图层来看整个图层的绘制过程:

(1)地图视图发生变化,相应的每一个图层数据和样式也要发生变化,调试源代码。

(2)调试跟踪到Map发现,几乎所有视图变化的操作都会触发“moveTo”函数,该函数计算了当前的比例尺等级和中心参考点,并排除参数的错误情况,然后会通过事件触发每一个Layer的MoveTo函数。

(3)在Grid的MoveTo函数中,首先针对当前的缓存数据进行模糊缩放,然后请求网络数据,继而根据结果创建一些绘制瓦片数据的DIV容器,最后更改这些DIV的Style显示图层。


这里最关心的问题就是:如何加载自定义的瓦片服务数据?

根据上面的分析,这里需要集成Grid类或者其子类来实现,具体继承那个类,要看服务接口。

如,不考虑偏移问题,我们加载高德地图,可以这样:

  
openlayers中实现点的拖拽(modify),在layer中增加修改删除point。 最近忙着整地图,都忘记了总结来沉淀自己,自我检讨一下。 总结一下最近使用openlayer时学习的内容,先说下我的业务逻辑吧,在室内地图中 1,点击新增在地图上新增一个可以拖拽的点,拖拽完成后确定位置,添加其他数据,保存入库。 2,增加后展示点,点上面有序号。 3,修改时,当选中一条记录的时候需要地图上面的点高亮,这个时候可拖动位置,修改表单数据,修改后保存。 4,删除也... 阅读详情

相关推荐

OpenLayers 6 核心四件套:用‘搭积木’的思维理解Map, View, Source和Layer

本文深入解析OpenLayers 6的核心四件套:Map、View、Source和Layer,通过'搭积木'的类比帮助开发者快速理解其架构。Map作为工作台,View控制视角,Source提供数据,Layer实现可视化,这种模块化思维简化了地图应用的开发流程。文章包含实用代码示例和优化技巧,是掌握OpenLayers的绝佳指南。

weixin_30614109的博客 361

Vue+OpenLayers6入门教程汇总目录,OpenLayers教程,Vue+OpenLayers中文文档,OpenLayers手册,OpenLayers6文档教程,OpenLayers中文手册

OpenLayers介绍,相比较其他地图引擎有什么优点四种流行地图引擎比较Gis开发入门,OpenLayers、Leaflet、Maplibre-gl和Cesiumjs地图引擎介绍以及几种地图服务vms、vmts介绍。

GIS技术方向,GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程),做最好的GIS地图开发教程。关注博主公众号:eguid 1万+

Openlayers入门教程 --- 万字长篇

也许你还不熟悉Openlayers,也许你是一个Openlayers小白,零基础没关系,这篇文章提供最基础的 Openlayers 教程,简单易学,贯穿整个Openlayers 知识体系。读完本文,您将会对 Openlayers 有一个全新的认识。

大剑师兰特的GIS世界 8872

openlayers全面教程306+【目录】

vue+openlayers系列教程旨在为开发者提供简单快捷的示例。在每一个示例中,解释相应的API知识点。

大剑师兰特的GIS世界 2万+

Openlayers源码实践系列:探索layer的渲染机制——从分析OpenLayers 6 的WebGLPointsLayer动画效果实现说起

最新的OpenLayers 6.1.1 中提供了一个基于WebGL用于渲染大量点要素并且支持类expressions语法描述的动画渲染。OpenLayers6之前的老版本是不支持动画渲染的,如果想要实现动画要素效果,需要利用OpenLayers的render机制来实现动画帧的渲染 ...

老胡的优快云博客 4748

YF-S401水流量传感器在STM32上的精准计量实现

本文详细介绍了YF-S401水流量传感器与STM32微控制器的集成应用,实现精准水流计量。通过外部中断和外部时钟两种脉冲计数方案,结合硬件配置、软件滤波和校准技巧,确保高精度流量测量。适用于智能家居和工业自动化中的水控系统,提升系统稳定性和测量准确性。

rainy的博客 896

open-web UI 实用指南

open-web UI 类似于chatgpt的界面,可以私有化模型本地部署,也可以用商业模型.本文只是用开源模型. 它以实现多模态AI聊天 , AI 翻译 , 语音转文本, 文本转语音, 文生图,代码助手,可谓利器。

szmars的博客 3万+

Python邮件自动化实战:基于imaplib和email库的高效邮件管理方案

本文详细介绍了如何使用Python的imaplib和email库实现高效邮件自动化管理。通过实战案例展示自动收取、解析邮件、下载附件等核心功能,帮助开发者快速构建企业级邮件处理系统,大幅提升工作效率。特别适合需要处理大量邮件的金融、数据分析等场景。

weixin_30500105的博客 618

解决vscode 连接服务器报错:The remote host may not meet VS Code Server‘s prerequisites for glibc and libstdc++

解决vscode远程连接服务器报错:The remote host may not meet VS Code Server's prerequisites for glibc and libstdc++ (The remote host does not meet the prerequisites for running VS Code Server)

qq_37200100的博客 9910

FPGA笔试题知识点汇总(21~40)

FPGA笔试题知识点汇总(21~40)

weixin_52487896的博客 5874

基于STM32+华为云设计的智慧农业灌溉系统(2023升级版)(158)

本项目设计一种基于STM32的智慧农业监测系统。该系统能够检测空气温度、湿度、光强度和土壤湿度等关键指标,并自动调节浇水量,实现作物生长环境的精细化管理。同时,本项目还支持本地LCD屏幕数据显示和通过ESP8266上传数据到华为云物联网平台,同时搭建流媒体服务器实现摄像头远程监控。最重要的是,本项目将利用Qt开发Android手机APP,使用户可以远程查看监测情况,了解农作物生成情况。

1万+

Vue - 简约大气 404 页面

效果图 实现代码 复制即可。 <template> <div> <div class="error"> <!-- 图片可保存到本地 --> <img src="https://img-blog.csdnimg.cn/20210715111039922.png"> <p>抱歉!你访问的页面不存在或已删除 :( </p> <span class="back" @click="go(

🏆 前端领域优质创作者 3370

拿下华为性格测试!

华为性格测试指南

weixin_41171614的博客 5271

Data-Structures-and-Algorithm-Analysis-in-Java.pdf

作者: Weiss, Mark A. 出版社: Addison Wesley Data Structures and Algorithm Analysis in Java is an “advanced algorithms” book that fits between traditional CS2 and Algorithms Analysis courses. In the old ACM Curriculum Guidelines, this course was known as CS7. This text is for readers who want to learn good programming and algorithm analysis skills simultaneously so that they can develop such programs with the maximum amo...

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

上一篇: OpenLayers学习——事件注册
下一篇: MySQL空间数据库学习
修哥
博客等级 码龄14年 71粉丝 25原创
评论 8
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值