- 博客(112)
- 收藏
- 关注
RSS订阅原创 OpenLayers 10.9.0 渲染架构分析
OpenLayers 10.9.0 渲染架构摘要 OpenLayers 10.9.0采用三层渲染架构：Map调度层负责动画帧管理和状态构建；CompositeMapRenderer合成层处理图层渲染和DOM管理；底层包含Canvas 2D和WebGL两套独立渲染管线。系统通过FrameState对象传递每帧状态，实现高效的瓦片队列管理和动态加载策略（交互时自动降级）。渲染流程包含矢量特征分派、Canvas共享、Declutter避让等核心机制，并通过事件系统实现渲染生命周期管理。WebGL和Canvas渲染
2026-06-05 09:12:10
355
原创 Openlayers图层按需分层渲染到不同Canvas画布
本文探讨了Openlayers中图层渲染的三种策略：默认合成渲染、分层渲染和按需分层渲染。在默认合成渲染下，所有图层会被合并到同一个Canvas画布中；而按需分层渲染则允许将特定图层单独渲染到不同Canvas画布，便于CSS样式控制。文章通过代码示例展示了如何通过设置图层类名、背景色或交替使用不同渲染管线来实现分层渲染，并对比了不同渲染方式在DOM结构上的差异。这种技术适用于需要对特定图层应用独立CSS效果（如选中高亮、透明度动画等）的场景。
2026-06-03 09:50:56
245
原创 Openlayers调用ArcGis要素服务之一 ——要素查询 (/query)
本文介绍了如何使用OpenLayers调用ArcGIS要素服务的查询功能。主要内容包括： 要素服务概述：通过REST API提供矢量要素数据的访问和编辑功能，支持查询、编辑、关联查询和统计分析。 核心接口说明：重点介绍了/query接口用于要素查询，以及其他如添加、更新、删除要素的接口。 服务信息查看：展示了如何查看ArcGIS官方示例服务的图层信息和查询能力。 OpenLayers实现：提供了Vue组件代码示例，演示如何加载要素服务数据并渲染到地图上，支持自定义图例和使用ESRI样式两种渲染方式。
2026-04-30 09:23:41
355
原创 Openlayers调用ArcGis影像服务之一动态地图、地图切片（/exportImage）
本文介绍了使用OpenLayers调用ArcGIS影像服务的两种方式：动态地图服务和地图切片服务。文章首先说明了影像服务的核心特点，包括动态处理、动态镶嵌、服务端栅格函数和缓存支持。然后对比了两种ArcGIS官方服务示例：无切片的NLCDLandCover2001服务（使用exportImage接口）和有切片的多伦多影像服务（使用瓦片拼接）。最后提供了Vue3组件代码示例，展示了如何通过OpenLayers的ImageArcGISRest和TileArcGISRest源分别加载这两种不同类型的影像服务。文章
2026-04-29 17:24:51
432
原创 Openlayers调用ArcGis地图服务之五 —— 要素识别(/identify)
摘要 本文介绍了如何在OpenLayers中调用ArcGIS地图服务的要素识别功能(/identify接口)。主要内容包括： 要素识别功能概述：通过点击地图查询某点或小区域内要素，支持跨图层查询，关键参数包括geometry(坐标)、geometryType(几何类型)、layers(查询图层)、tolerance(容差)等。 判断服务是否支持要素识别：检查ArcGIS服务页面"Supported Operations"中是否包含"Identify"操作。
2026-04-28 09:21:10
511
原创 Openlayers调用ArcGis地图服务之四 —— 要素查找(/find)
本文介绍了如何使用OpenLayers调用ArcGIS地图服务的要素查找(/find)接口。主要内容包括：1) 要素查找的功能介绍，支持跨图层关键字匹配；2) 判断服务是否支持find操作的方法；3) 在线调用演示；4) 通过Vue3+OpenLayers实现前端调用，包含搜索框、结果展示和地图渲染功能。示例代码展示了如何发送POST请求处理返回的点要素和多边形要素，并使用不同样式在地图上可视化显示。该功能适用于基于关键字的地图要素查询场景。
2026-04-27 14:22:51
183
原创 Openlayers调用ArcGis地图服务之三 —— 要素查询(/query)
本文介绍了使用Openlayers调用ArcGIS地图服务进行要素查询的方法。重点讲解了/query接口的核心功能，包括属性查询、空间查询、ID查询和统计查询四种模式。详细说明了查询参数配置，如where条件、geometry空间过滤、outFields返回字段控制等关键参数的使用方法。同时还介绍了返回内容控制参数和统计聚合参数，如returnGeometry、maxAllowableOffset、outStatistics等，这些参数可以优化查询性能和返回结果。
2026-04-23 11:01:27
469
原创 Openlayers调用ArcGis地图服务之二 —— 动态地图(/export)
摘要：本文介绍了如何使用OpenLayers调用ArcGIS动态地图服务(/export接口)。动态地图服务通过实时渲染返回地图图片，适合需要频繁更新的业务数据展示。文章详细说明了如何判断服务是否支持动态地图调用，并通过在线预览和调用演示了操作流程。重点展示了在OpenLayers中实现动态地图调用的代码示例，包括地图初始化、图层控制以及投影定义等关键步骤。通过调整LAYERS参数，可以实时控制不同图层的显示状态，实现灵活的交互式地图展示。
2026-04-22 09:51:27
471
原创 Openlayers调用ArcGis地图服务之一 —— 地图切片(/tile)
本文介绍了如何使用OpenLayers调用ArcGIS地图服务的切片功能。地图切片是预先缓存的静态瓦片地图，具有高性能、低服务器压力等特点。文章详细说明了判断服务是否支持切片的方法，包括查看Single Fused Map Cache和Tile Info字段。提供了两种实现方式：原生OpenLayers调用和Vue3-OpenLayers组件调用，核心代码展示了如何配置TileGrid、设置分辨率等关键参数。示例中使用了ArcGIS官方示例服务，通过XYZ格式的URL请求瓦片图片
2026-04-21 14:13:08
478
原创 ArcGis常用服务介绍及Arcgis,Openlayers,Leaflet加载
本文介绍了ArcGIS中常用的三种服务类型及其加载方法：地图服务(MapServer)提供电子地图浏览和查询功能；要素服务(FeatureServer)支持矢量数据操作与在线编辑；影像服务(ImageServer)实现栅格数据管理与分析。文章对比了ArcGIS API、OpenLayers和Leaflet三种地图库加载这些服务的技术方案，包括切片地图(TileLayer)、动态地图(MapImageLayer)和要素图层(FeatureLayer)的实现方式，并提供了示例代码片段。通过表格总结了不同服务类型
2026-04-11 16:54:13
561
原创 vant实现自定义日期时间选择器(年月日时分秒)
使用vant作为UI组件时，需要一个日期时间选择器，vant中有Dateicker和TimePicker，可以将两个组件组合封装使用，但是处理传入参数和传出参数稍显麻烦，所以使用Picker封装一个简单的日期时间选择器
2025-12-23 20:27:24
704
原创 GIS OGC之WMTS地图服务，通过Capabilities XML描述文档，获取matrixIds，origin，计算resolutions
需求：如何根据WMTS服务的Capabilities描述文档得到，openlayers调用wmts服务时的matrixIds，origin和resolutions参数
2024-09-18 22:26:47
3097
原创 CSS线性渐变拼接，一个完整的渐变容器(div),要拆分成多个渐变容器(div)，并且保持渐变效果一致
一个有渐变背景的div，需要替换成多个渐变背景div拼接，渐变效果需要保持一致（不通过一个大的div渐变，其他子的div绝对定位其上并且背景透明来解决）
2024-08-30 18:57:49
1650
原创 openlayers WebGLPoints图层应用（光环、光晕扩散收缩）
本篇介绍一下使用 openlayers WebGLPoints图层应用（光环、光晕扩散收缩）
2024-07-16 21:07:39
709
原创 vue3-openlayers WebGL切片图层样式修改（曝光度、对比度、饱和度、明暗度、颜色）
本篇介绍一下使用vue3-openlayers WebGL切片图层样式修改（曝光度、对比度、饱和度、明暗度、颜色）
2024-07-15 20:19:28
752
原创 openlayers WebGL 切片图层样式修改（曝光度、对比度、饱和度、明暗度、颜色）
本篇介绍一下使用 openlayers WebGL 切片图层样式修改（曝光度、对比度、饱和度、明暗度、颜色）
2024-07-15 20:17:05
1442
原创 vue3-openlayers WebGL裁剪图层，双图层拼接显示
本篇介绍一下使用vue3-openlayers WebGL裁剪图层，双图层拼接显示。
2024-07-11 18:25:14
475
原创 vue3-openlayers WebGL加载地图（栅格切片、矢量切片）
本篇介绍一下使用vue3-openlayers WebGL加载地图（栅格切片、矢量切片）
2024-07-10 18:03:12
782
原创 openlayers WebGL加载地图（栅格切片、矢量切片）
矢量切片使用VectorTile创建图层（它默认支持WebGL，所以不需要额外配置WebGL相关的参数，如果浏览器不支持WebGL，OpenLayers将回退到使用Canvas渲染）本篇介绍一下使用openlayers WebGL方式加载地图（栅格切片、矢量切片）栅格切片使用WebGLTile创建图层。
2024-07-10 18:02:49
1213
原创 vue3-openlayers 图标闪烁、icon闪烁、marker闪烁
本篇介绍一下使用vue3-openlayers 图标闪烁、icon闪烁、marker闪烁。
2024-06-28 23:19:33
1223
原创 vue3-openlayers 要素聚合（cluster）、icon聚合
本篇介绍一下使用vue3-openlayers 要素聚合（cluster），icon聚合。
2024-06-26 17:58:09
472
原创 vue3-openlayers marker 光晕扩散（光环扩散）（postrender 事件和 render 方法）
本篇介绍一下使用 vue3-openlayers marker 光晕扩散（光环扩散）（postrender 事件和 render 方法）
2024-06-25 18:43:14
755
原创 openlayers marker光晕扩散（光环扩散）（postrender事件和render方法）
本篇介绍一下使用openlayersmarker光晕扩散（光环扩散）（postrender事件和render方法）
2024-06-25 18:37:52
1712
1
原创 vue3-openlayers 轨迹回放（历史轨迹）（ol-animation-path实现）
轨迹回放（历史轨迹），一般是一次性拿到所有坐标点，使用ol-animation-path可以直接实现
2024-06-24 17:57:36
1044
原创 openlayers 轨迹回放（历史轨迹）（postrender事件和render方法）
上篇是使用定时器实现的，本篇使用postrender事件和render方法- 轨迹回放（历史轨迹），一般是一次性拿到所有坐标点，使用postrender事件和render方法> Map的render方法：当在下一个动画帧时渲染地图> Layer的postrender事件:图层被渲染后触发
2024-06-24 17:55:40
2441
原创 vue3-openlayers 点击多边形弹框，高亮多边形，自定义属性传递，鼠标悬浮多边形上动态修改鼠标样式
本篇介绍一下使用vue3-openlayers点击多边形弹框，高亮多边形，自定义属性传递，鼠标悬浮多边形上动态修改鼠标样式。
2024-06-19 17:31:03
630
原创 openlayers 点击多边形弹框，高亮多边形，自定义属性传递，鼠标悬浮多边形上动态修改鼠标样式
本篇介绍一下使用openlayers点击多边形弹框，高亮多边形，自定义属性传递，鼠标悬浮多边形上动态修改鼠标样式。
2024-06-18 18:15:17
884
原创 vue3-openlayers 使用tianditu,wmts和xyz等source加载天地图切片服务
加载注记图层后，切片虽然显示png，但是好像不是透明的,只能在注记图层增加透明度控制。主要是不同类型source的使用。
2024-06-18 14:01:45
1016
原创 openlayers 使用WMTS和XYZ加载天地图切片服务
WMTS：是一种由Open Geospatial Consortium (OGC)制定的开放标准，它定义了在Web上发布和使用预渲染地图瓦片的标准方法。这种标准化确保了不同厂商和平台之间的互操作性。XYZ：是一种更偏向于自定义的地图瓦片服务格式，通常用于OpenStreetMap和其他提供标准XYZ URL格式的地图服务。它没有像WMTS那样的严格标准，但提供了一种灵活的方式来提供地图瓦片。
2024-06-17 17:22:02
3541
原创 openlayers 绘图功能，编辑多边形，长度面积测量，tip提示（八）
主要是 vue3-openlayers 中 styleFunc 功能的使用。
2024-06-17 16:50:05
1090
原创 openlayers 绘图功能，编辑多边形，长度面积测量，tip提示（七）
主要是 openlayers 中 styleFunc 功能的使用，效果如下。
2024-06-14 19:52:41
1082
原创 openlayers 绘图功能，编辑多边形，select，snap组件的使用（六）
本篇介绍一下vue3-openlayers的select，snap的使用。
2024-06-13 18:03:18
1235
原创 openlayers 绘图功能，编辑多边形，select，snap组件的使用（五）
本篇介绍一下openlayers的select，snap的使用。
2024-06-13 17:46:51
988
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人