OpenLayers入门教程,OpenLayers6入门文档,OpenLayers6中文手册
前言
本篇作为OpenLayers入门教程的目录,用于整理汇总专栏所有文章,方便查找。
OpenLayers是前端最流行的JS二维地图引擎之一。
反馈建议
一、介绍
- OpenLayers介绍,相比较其他地图引擎有什么优点
四种流行地图引擎比较 - Gis开发入门,OpenLayers、Leaflet、Maplibre-gl和Cesiumjs地图引擎介绍以及几种地图服务vms、vmts介绍
二、入门
三、地图控件
- OpenLayers地图显示鹰眼控件
- OpenLayers添加地图缩放控件、比例尺控件和鼠标经纬度位置
- OpenLayers入门,OpenLayers使用全屏控件实现地图全屏和退出全屏操作
- OpenLayers入门,地图全图显示经纬度网格标记线
四、地图定位、缩放和可视范围跳转
无动画效果
10. Openlayers入门,Openlayers调整中心点坐标、Openlayers调整缩放级别、Openlayers调整地图可视角度和地图复位
11. Openlayers入门,Openlayers调整地图可视范围到多个点组成的多边形边界,可视范围缩放到多个点的中心点
平移效果
12. OpenLayers入门,OpenLayers平移地图到指定位置,地图平移动画效果
飞行效果
13. OpenLayers入门,OpenLayers视图飞行动画,OpenLayers飞行到指定经纬度位置
旋转效果
14. OpenLayers入门,OpenLayers旋转地图到移动到指定位置,旋转动画效果,边旋转边移动到指定位置
弹簧跳跃和弹跳效果
15. OpenLayers入门,OpenLayers使用弹跳动画和弹簧动画效果移动地图到指定位置,两种弹跳动画效果
五、事件监听
地图加载事件和加载完成事件
16. OpenLayers入门,OpenLayers如何监听加载事件和加载完成事件来实现加载瓦片时显示动图转圈加载进度条(loading spinner),加载完成后隐藏
瓦片加载事件
17. OpenLayers入门,OpenLayers使用瓦片加载事件实现瓦片加载进度条,进度条根据瓦片加载数量自动更新进度,加载完毕后隐藏进度条
鼠标移动事件
18. OpenLayers入门,OpenLayers鼠标移动事件使用,实现鼠标移动到点位上方后高亮显示点位要素
鼠标点击事件
19. OpenLayers入门,OpenLayers地图鼠标点击事件使用,点击地图后弹框并显示当前位置经纬度
六、图层管理
- Openlayers入门,OpenLayers多图层切换显示隐藏,支持多个Layer同时显示和隐藏,以百度地图和高德地图为例实现vue的Layer图层管理组件
- OpenLayers入门,OpenLayers懒加载瓦片,点击事件后才开始加载瓦片,初始化地图时不加载瓦片
七、各种类型地图瓦片图层加载(图片、xyz、超图、百度、高德、wmts、wms、tms和wfs等)
- OpenLayers入门,OpenLayers使用一张图片作为地图的基本底图
xyz(google、高德) - OpenLayers入门,OpenLayers如何加载xyz瓦片图层
WMTS - OpenLayers通过WMTSCapabilities.xml加载GeoServer发布的标准wmts地图服务
- Openlayers通过计算matrixIds和resolutions方式加载WMTS地图服务,不需要解析WMTSCapabilities文档方式加载WMTS地图服务
WMS - OpenLayers加载GeoServer发布的WMS地图服务作为底图
TMS - OpenLayers入门,OpenLayers如何加载TMS瓦片服务,以腾讯地图TMS图层为例
高德底图 - OpenLayers如何使用高德地图底图作为图层图源
百度底图 - OpenLayers使用百度地图底图作为图源,不需要地图开放平台token就可以访问
超图底图 - OpenLayers入门,OpenLayers如何使用超图地图(supermap)发布的地图服务作为基础图层
离线瓦片地图 - OpenLayers入门,OpenLayers加载离线瓦片xyz地图,vue项目如何使用离线瓦片
八、叠加热力图
九、点、线、多边形、图片、动态图片、点聚合等多种图形叠加
- OpenLayers入门,添加一个Image图片点要素到地图上
- OpenLayers入门,使用webgl图层叠加大量Point点要素,解决叠加超过一百万数据量点位导致浏览器卡住变慢的问题
- OpenLayers入门,使用OpenLayers叠加多边形、圆形、线段和点要素到地图上
- OpenLayers入门,使用webgl图层叠加超过一百万数据量图片到地图,解决叠加大量图片导致浏览器卡住变慢的问题
叠加Gif动态图片
点聚合(聚散点)
十、格式化数据叠加
(1)WFS数据叠加
(2)geojson数据叠加
- OpenLayers入门,OpenLayers如何加载GeoJson数据并叠加到OpenLayers矢量图层上
- OpenLayers入门,OpenLayers如何加载百万数据量的GeoJson点数据并叠加到webgl渲染图层上,百万海量点数据叠加不卡
- OpenLayers入门,OpenLayers如何加载GeoJson多边形、线段、点和区域范围等数据并叠加到OpenLayers矢量图层上
- OpenLayers入门,OpenLayers解析通过fetch请求的GeoJson格式数据,并叠加要素文字标注,以行政区划边界为例
(3)TopoJson数据叠加
- OpenLayers入门,OpenLayers加载TopoJson数据,使用行政区划边界作为示例
- OpenLayers入门,OpenLayers使用fetch加载并显示TopoJson格式区划边界数据并叠加文字标注,动态创建要素样式
十一、动画
- OpenLayers入门,OpenLayers动画效果实现,OpenLayers实现轨迹运动动画
- OpenLayers入门,OpenLayers实现多个轨迹运动动画效果,也可以实现二维地图迁徙图效果
- OpenLayers入门,OpenLayers实现地图原地旋转动画效果
十二、图形绘制编辑拖拽
- OpenLayers图形绘制,OpenLayers实现在地图上绘制线段、圆形和多边形
- OpenLayers入门,OpenLayers涂鸦手绘线条、圆形和多边形,涂鸦线条自动收尾连接成多边形
- OpenLayers选择拖拽,OpenLayers实现对地图上的任意要素进行选择和拖拽
十三、其他
End
以下为《Openlayers实战进阶》专栏推荐
定位
- Openlayers实战,Openlayers获取浏览器当前用户的经纬度位置并定位到对应位置
- OpenLayers实战,OpenLayers获取移动端精确定位,OpenLayers适配App混合H5方式调用手机定位位置并定位到指定点
动画特效
- Openlayers实战,Openlayers实现类似呼吸灯的闪烁圆圈特效,光晕扩散动画特效,可调光晕扩散速度,可调光晕圆圈大小
- Openlayers实战,OpenLayers实现定时闪烁动画效果,定时闪烁光晕特效
轨迹和迁徙图
- Openlayers实战,Openlayers一个车辆转向运动轨迹动画,支持根据轨迹运动方向自动改变车头转向角度,无需定时器,丝滑小车转向运动效果
- OpenLayers实战,OpenLayers实现多个车辆船舶运动轨迹动画和迁徙图效果,车头方向根据轨迹方向自动转向,无需定时器
- OpenLayers实战,OpenLayers实现多个轨迹运动动画,各个轨迹使用不同的运动速度,运动方向根据轨迹运动方向自动转向
特殊图形绘制
- OpenLayers实战,Openlayers实现绘制箭头,Openlayers绘制轨迹路径箭头,可调箭头角度和箭头长度
测量距离和测量区域面积 - OpenLayers实战,OpenLayers画线测量距离和画多边形测量区域面积
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)