![](https://img-blog.csdnimg.cn/direct/e9531dc2f998499f8a3a65e61f7a7e67.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
openlayers官网示例解析
文章平均质量分 58
解析openlayers示例
卷新心菜
这个作者很懒,什么都没留下…
展开
-
四十五、openlayers官网示例Icon modification解析——在地图上添加标记图形并随意移动它的位置
Modify的主要作用是修改图形,之所以可以随意移动图形的位置,是因为点或者圆形只有一个顶点坐标构成。如果Modify用在多边形或直线身上, 它会捕获构成图形的任意一个点,通过鼠标拖动来移动点的坐标从而改变形状。图形能移动的核心代码是Modify类,Modify类可以捕获矢量图形上的点,移动点的位置来改变矢量图形的位置,而hitDetection的作用则是使鼠标更容易捕获到图形上,当用户与地图进行交互(例如点击或拖动要素)时,如果命中,则触发相应的修改操作,允许用户拖动顶点或整个几何要素进行修改。原创 2024-06-14 23:30:00 · 212 阅读 · 0 评论 -
四十四、openlayers官网示例Geographic Coordinates解析——在地图上添加弹窗,点击显示图形信息
初始化图层的时候,添加一个矢量的点数据到地图上,在new Feature时添加一些自定义属性。创建overlay实例 ,offset是偏移量,根据写的元素大小调节。点击地图的时候,获取图形的信息并给 this.message赋值。使用Overlay在地图上添加弹窗,点击控制显隐。写一个元素,用来展示信息。原创 2024-06-08 12:15:00 · 174 阅读 · 0 评论 -
四十三、openlayers官网示例Freehand Drawing解析——在地图上自由绘制图形
想要在地图上绘制自由图形,只需要在new Draw的时候多加一个配置项就行。原创 2024-06-07 23:30:00 · 224 阅读 · 0 评论 -
四十二、openlayers官网示例Flight Animation扩展——在地图上绘制飞机航线、飞机随航线飞行效果
绘制线的思路是取坐标数组的第0个到第n个,每毫秒绘制不同的线。绘制点的思路则是直接取第n个点,每毫秒绘制不同的点,并且在n大于等于坐标数组之后又让n重新等于0,以此来实现循环的动画。因为图标需要随着航线的方向飞行,需要根据航线调整角度,因此在加载数据源的时候需要计算一下角度,绑在每个feature上。在航线绘制完成之后,添加一个飞机动画开始执行的标识flight,给feature设置一个初始的index值。上篇在地图上绘制了动态的飞机航线,于是我想着,能不能加个飞机的图标跟着航线飞行。原创 2024-06-07 23:45:00 · 190 阅读 · 0 评论 -
四十一、openlayers官网示例Flight Animation解析——在地图上绘制飞机航线、牵引线效果、动态动画
而绘制的线段点需要从coords坐标数组中取,每次都取0到index的坐标。elapsedPoints就是表示了当前需要取的index值,因为elapsedTime是毫秒值,会很快,所以没有直接使用elapsedTime去从数组里取值,而是乘以了一个系数const pointsPerMs = 0.02。绘制过程中需要实时设置一下绘制的样式,而绘制结束后,也需要保持线的样式,所以在图层里需要定义一个完成后的样式。animateFlights获取当前帧对象,利用时间差截取数组中的项,来实现线慢慢变长的效果。原创 2024-06-07 23:00:00 · 661 阅读 · 0 评论 -
四十、openlayers官网示例External map解析——打开一个外部小窗口展示地图
打开external-map-map.html页面之后需要监听一下DOMContentLoaded事件,使用setTarget把小窗口的map容器绑定到map实例上。这里的external-map-map.html页面我是从openlayers源码中复制出来放到了public下。使用window.open打开了一个html页面,使用window.open的参数对小窗窗口做一些设置。写一个延时器,如果点击之后小窗口没有加载出来就显示异常文字提醒。小窗关闭的时候需要重新加载一下大地图。原创 2024-06-06 23:15:00 · 413 阅读 · 0 评论 -
三十九、openlayers官网示例Extent Interaction解析——在地图上绘制范围并获取数据
在openlayers中可以使用ExtentInteraction添加交互事件,配合shiftKeyOnly实现按住shift键绘制边界区域。监听extentchanged事件,记录绘制的矩形数据。按住shift绘制矩形,按住shift键点击图形删除。原创 2024-06-06 22:00:00 · 286 阅读 · 0 评论 -
三十八、openlayers官网示例Earthquakes with custom symbols——将矢量数据渲染为自定义图形
symbol.map(scaleFunction)]生成出来的坐标数组并不是每个图形相对于整个canvas画布的坐标数组。而是相对于每个feature生成的画布的坐标数组。也就是说这个图形的坐标数组和feature的坐标是不一样的。上一篇我们使用星星表示了地震数据,能绘制星星图形主要依靠 openlayers中的RegularShape类,那如果想要绘制自定义图形该怎么写呢,这篇提供了解决方案。如果使用缩放前的坐标,每个图形会是一样大的。是一个坐标数组,定义了一个多边形的形状。在一个新的 HTML。原创 2024-06-05 23:30:00 · 888 阅读 · 0 评论 -
三十七、openlayers官网示例Earthquakes Heatmap解析——在地图上加载热力图
是一个用于在地图上显示热力图的图层类型,通常用于表示地理数据中的密度或强度。例如,它可以用来显示地震、人口密度或其他空间数据的热点区域。被用来显示从 KML 文件中提取的地震数据。这篇主要介绍了热力图HeatmapLayer。通过滑块的改变控制图层的半径和模糊度。原创 2024-06-05 22:45:00 · 206 阅读 · 0 评论 -
三十六、openlayers官网示例Earthquake Clusters解析——在聚合图层鼠标触摸显示五角星
首先是初始化地图,加载了一个KML格式的矢量数据源,extractStyles为false表示不从kml数据源中提取样式。使用calculateClusterInfo 函数计算圆圈的半径,将子feature的extent合并到了一起,结合分辨率算出半径。鼠标触摸的时候获取到feature自定义属性features取出来,把每一个子feature绘制成星星形状展示。createEarthquakeStyle是绘制星星的方法,主要用了RegularShape这个类。包含了所有特征的范围,即。原创 2024-06-05 23:00:00 · 700 阅读 · 0 评论 -
三十五、openlayers官网示例Dynamic Data——在地图上加载动态数据形成动画效果
绘制动画效果主要还是利用了postrender事件,其原理解析可以参考这篇。原创 2024-06-03 22:30:00 · 375 阅读 · 0 评论 -
三十四、openlayers官网示例Dynamic clusters解析——动态的聚合图层
这里的outerCircle定义为全局变量而并非局部变量,主要是因为clusterStyle函数是个高频触发函数,将outerCircle写成全局的可以不用new那么多次。计算凸包的算法通常基于点的排序和几何性质,可以有效地处理大规模的数据。有下级的时候图形是橙色发光的样式,没有下级的时候。方法根据聚类成员的数量、中心坐标和当前分辨率,生成一个圆周上的点坐标数组。先初始化地图 ,设置了地图视角的边界extent,限制了地图缩放的范围。点击事件时,获取当前点击的feature的边界值,定位到指定位置。原创 2024-06-03 22:00:00 · 735 阅读 · 0 评论 -
三十三、openlayers官网示例Drawing Features Style——在地图上绘制图形,并修改绘制过程中的颜色
根据下拉框中的值在styles对象中取对应的颜色对象,new Draw的时候将其设置为style参数。需要注意的是这个style是绘制过程中的颜色,如果需要设置绘制完成后的颜色还得在图层中设置。这篇讲的是使用Draw绘制图形时根据绘制形状设置不同颜色。原创 2024-05-29 23:00:00 · 1053 阅读 · 0 评论 -
三十二、openlayers官网示例解析Draw lines rendered with WebGL——使用WebGL动态修改多边形端点类型、连接类型、偏移量、虚线等设置
WebGL 是基于硬件加速的图形库,能够利用 GPU 来进行高效的并行计算。与传统的 2D 绘图方式(如 Canvas 2D API)相比,WebGL 可以处理更多的图形数据、更高的绘图复杂度,并且在高分辨率和高刷新率下保持流畅的性能。这对于需要渲染大量图形元素的应用尤为重要,例如地理信息系统(GIS)、数据可视化和复杂动画。在需要渲染和处理大量数据点的应用中,如地理信息系统、科学可视化和大数据分析,WebGL 的并行计算能力和高效的渲染管道使其能够在不牺牲性能的情况下处理大规模数据可视化。原创 2024-05-29 22:45:00 · 1245 阅读 · 0 评论 -
三十一、openlayers官网示例Draw Features解析——在地图上自定义绘制点、线、多边形、圆形并获取图形数据
已经绘制了一个图形,但是并没有获取到。this.vectorlayer.getSource().getFeatures()不能实时获取到绘制图形的数据,因为drawend事件里feature还没被加到图层上。features绑定的数组不是普通的数组,Collection是openlayers内部定义的一个类似数组的集合。总的来说,两种方法都可以,甚至可以定义一个数组,每次绘制完都push一下当前绘制的feature。想要在地图上绘制图形,需要用到一个交互类Draw,new Draw,设置绘制的图形类型。原创 2024-05-28 22:45:00 · 909 阅读 · 0 评论 -
三十、openlayers官网示例解析Double click, Drag and Zoom——第二次点击鼠标拖拽缩放地图效果、取消地图双击放大事件
interactions属性用来设置地图上的交互,DblClickDragZoom就是第二次按下鼠标拖拽缩放的类。这篇展示了如何在地图上添加第二次按下鼠标移动鼠标实现拖拽缩放地图效果。原创 2024-05-28 22:30:00 · 469 阅读 · 0 评论 -
二十九、openlayers官网示例DeclutterGroup解析——避免矢量图层的文字重叠
用于处理矢量图层上重叠的标注和符号,为true时启用去重叠功能。所有矢量特征的标注和符号都会被处理以避免重叠。false则与之相反。separate将标注和符号分别处理,避免它们之间的相互覆盖。这篇说的是如何设置矢量图层上多数据点文字不重叠。原创 2024-05-28 22:00:00 · 303 阅读 · 0 评论 -
二十八、openlayers官网示例Data Tiles解析——自定义绘制DataTile源数据
先来看一下什么是DataTile,这个源是一个数组,与我们之前XYZ切片源有所不同。DataTile主要适用于需要动态生成、处理或渲染瓦片数据的复杂场景。事实上,很多源都提供loader参数方便我们把获取的数据或地图路径经过二次处理之后再加载到地图上。是一个自定义数据加载函数,用于在需要时生成或获取瓦片数据。它的设计目的是为了处理动态生成的或特定格式的数据,比如在运行时计算或从非标准源获取的数据。这篇示例讲解的是自定义加载DataTile源格式的数据。先新建一个canvas,设置一下画布参数。原创 2024-05-27 22:30:00 · 218 阅读 · 0 评论 -
二十五、openlayers官网示例CustomOverviewMap解析——实现鹰眼地图、预览窗口、小窗窗口地图、旋转控件
因为地图设置了按住shift键旋转,所以这个小窗口也需要设置一下是否跟随旋转。new OverviewMap的className参数要么不传,要传自定义类名的话需要加上它的默认值.ol-overviewmap。首先加载了一个地图。翻看文档和源码后得知,展示/折叠的按钮点击事件中是通过是否加上ol-collapsed类名来控制小窗显隐的。而起隐藏作用的css是这样写的,带上了它原本的默认类名.ol-overviewmap。这个示例展示了如何在地图上增加一个小窗窗口的地图并跟随着地图的旋转而旋转视角。原创 2024-05-23 22:30:00 · 690 阅读 · 0 评论 -
二十四、openlayers官网示例Custom Interactions——自定义交互实现在地图上移动、拖拽feature
然后创建了一个类继承原本的PointerInteraction,将四个事件作为参数传递给PointerInteraction。这里移动要素用了一个geometry.translate()方法,如果我们自己写方法来完成移动的话会比较麻烦。重新定义了一个Drag类,我放在了utils下的Drag.js中便于多次使用。这个示例介绍了如何在地图上自定义一个交互实现在地图上拖拽、移动要素。首先是加载了三个要素到地图上,一个点、一个多边形、一条线。可以看下源码中PointerInteraction的定义。原创 2024-05-22 22:30:00 · 500 阅读 · 0 评论 -
二十、openlayers官方示例Custom Circle Render解析——自定义圆形渲染、绘制渐变色圆形
由于openlayers的style属性中,没有提供一个特定的api设置渐变色,因此我们在这里利用style中的renderer函数获取图形的坐标点,拿到canvas,自定义canvas的样式后显示在地图上来实现渐变色效果。参数coordinates是绘制图形的坐标数组,state是上下文。定义内外半径,渐变的内半径为0,外半径为圆的1.4倍。然后按照canvas绘制圆形的方式 绘制图层。这是一个在地图上绘制渐变圆形的示例。通过圆心和圆周点的坐标计算圆的半径。定义渐变的颜色停止点。原创 2024-05-20 20:45:00 · 497 阅读 · 0 评论 -
二十一、openlayers官网示例Custom Controls解析——自定义控件扩展Control类
首先创建了一个新的类继承了原本的Control,新增了一个button元素,然后调用了super方法将参数传给了父类。在点击事件里调用了openlayers的setRotation()方法控制视图倾斜角度。可以在node_moudles里面找到Control类的源码,看到父类需要的参数。如果style里面设置了scoped,样式代码这里需要使用样式穿透,否则不会生效。然后调了super方法将参数传递给父类。这个示例讲的是如何自定义控件。原创 2024-05-21 08:30:00 · 165 阅读 · 0 评论 -
十四、openlayers官网示例Cloud Optimized GeoTIFF (COG) from a Blob示例——加载blob格式GeoTIFF数据源
source.getView().then的回调里还可以获取到View对象,还可以更改属性。然后使用网络请求获取文件并且转为blob格式就可以加载到地图上啦。这篇讲的是加载blob格式的GeoTIFF数据源。我们找一个tif文件下载下来。原创 2024-05-14 20:00:00 · 221 阅读 · 2 评论 -
十九、openlayers官方示例Custom Canvas Tiles解析——自定义调试图层显示瓦片的索引信息(包括缩放级别、x 和 y 坐标)
MVT (Mapbox Vector Tile) 格式是一种用于存储地理数据的格式,特别适合用于在客户端渲染矢量地图。MVT 文件包含矢量数据的分块(tiles),这些块可以快速传输和渲染。MVT和GeoServer数据源的区别GeoServer通常提供 WFS (Web Feature Service) 或 WMS (Web Map Service) 数据。返回的 feature 通常是 GeoJSON 格式,包含丰富的属性信息和几何数据。数据交换。原创 2024-05-20 20:30:00 · 381 阅读 · 1 评论 -
二十三、openlayers官网示例Custom Hit Detection Render解析——使用hitDetectionRenderer优化在复杂地图应用中要素的点击检测性能
这个示例主要主要介绍了使用hitDetectionRenderer来优化点击检测的性能。原创 2024-05-21 21:15:00 · 465 阅读 · 0 评论 -
十八、openlayers官网示例Custom Animation解析——地图上添加自定义动画、圆圈涟漪效果
记录动画开始的时间,红色圈的动画执行是3秒 ,在annimate函数里实时获取动画执行的过程中的每一帧的当前时间,用当前时间减去初始的时间,算出已经过去的时间elapsed,当elapsed时间大于等于3000时终止函数。先来看一下一次动画的完整流程,每隔一秒地图上增加一个蓝色圈,蓝色圈上增加一个半径慢慢变大,透明度慢慢变小的红色圈,红色圈执行3秒,然后消失,下一个蓝色圈开始出现。首先定义一个动画执行的时间,克隆一个几何形状,并保证每一次添加蓝色圈后都绑定一次annimate事件。重点是红色圈的产生函数。原创 2024-05-19 11:18:14 · 356 阅读 · 1 评论 -
十七、openlayers官网示例Constrained Extent解析——设置地图拖动限制范围
new View的时候设置extent为中国,中心点设置为北京。缩小的时候就会发现不能拖到中国以外的地区啦。左上角的滑块是new Map的时候加上去的,是地图自带的控件,拖动它就可以放大缩小地图。又是一个轻松简单的示例~设定地图拖动的限制范围。原创 2024-05-17 20:30:00 · 218 阅读 · 2 评论 -
vue项目中编写一个脚本文件实现自动生成组件注册代码,自动注册组件
因为我最终需要的list文件中name和text属性并非完全一样,text属性中会加一些中文注释,所以我并不想每次执行脚本时所有组件都重新注册,只希望增加的组件自动注册。在list文件中需要增加// components-import-placeholder,// components-object-placeholder,// list-placeholder三个标志的占位符,这样每次只会在这三处占位符下面插入新的代码。或者是,在package.json中增加一个脚本指令generate。原创 2024-05-17 20:00:00 · 208 阅读 · 0 评论 -
十六、openlayers官网示例Color Manipulation解析——加载RasterSource数据源调整HCL色彩值修改栅格图层颜色
这个示例的核心逻辑是在RasterSource绑定了一个事件,这个事件是每次栅格操作之前都会触发,一开始也会触发,把初始的HCL的属性值值给data,然后在operation函数中就可以获取到data中的hcl值,进行颜色格式转化。在 HCL 颜色空间中,色相表示颜色的类型(如红色、绿色、蓝色等),色度表示颜色的饱和度或纯度,而亮度表示颜色的明亮程度。因为HCL 颜色本身在计算机中并不常见,因为它是一种人类感知的颜色空间,而不是计算机通常使用的 RGB(红绿蓝)颜色空间。首先定义一个初始的HCL颜色对象。原创 2024-05-16 21:15:00 · 190 阅读 · 0 评论 -
十五、openlayers官方示例Clustered Features——使用聚合加载大量点位数据
在实例化VectorLayer时加一个style配置,函数里会返回每一个feature,每一个feature上都有一个features属性,记录着它的下级features数组,聚合的原理就是把几个相邻的点通过计算合成一个feature,我猜features里面记录的就是合成这个feature所用的数组。这是因为聚合里面,图层上的feature本来就是根据缩放层级变化的,定位过程中刚刚点击的那个feature已经不见了。注册地图点击事件,点击每一个feature就会把地图视角定位到点击的feature处。原创 2024-05-14 21:30:00 · 348 阅读 · 2 评论 -
十三、openlayers官网示例Cloud Optimized GeoTIFF (COG)解析——加载GeoTIFF并使用QGIS查看TIF文件
这个示例乍一看很简单,不就是加载了一个GeoTIFF数据源的图层?代码还这么少,噢耶,轻松get。但是,细细来看,还是有许多小细节的地方值得深挖。加载这个图层为什么没传style?难道是有默认样式?初始化地图的view这里直接写的source.getView() 为什么?像之前一样写 new View再传递参数能行吗?答案是可以的,不过要注意坐标系是3857 而不是4326,写成4326图层是看不见的,这也就告诉我们,加载的数据源要和地图的View坐标系保持一致,否则是出不来的。原创 2024-05-13 21:30:00 · 1677 阅读 · 0 评论 -
十二、openlayers官网示例Change Tile Layer Style解析——修改WebGLTile图层样式
示例中下拉框的值改变后就可以用来切换地图的样式了,有一说一,这种切换颜色的方式真的太厉害啦,像我们之前,更改图层样式,前端需要重新请求一次geoserver,传递style字段,geoserver返回新的图片再绘制到地图上,不仅需要一次次请求,请求速度也比较慢。在这个配置中,NDVI 值被映射到一组颜色值,根据不同的 NDVI 值采用不同的颜色。WebGLTile 图层加载方式和之前我们加载的切片不同,XYZ请求的是png,WebGLTile 加载的是tif文件,我们可以看下网络请求。原创 2024-05-13 20:15:00 · 898 阅读 · 0 评论 -
十一、openlayers官网示例CartoDB source example解析——使用CartoDB加载地图
这是一篇从CartoDB加载地图的例子。原创 2024-05-13 20:15:00 · 269 阅读 · 0 评论 -
十、openlayers官网示例CanvasTiles解析——显示瓦片网格
瓦片地图是一种通过将地图切成小块(瓦片)并在需要时动态加载这些瓦片来呈现地图的技术。OpenLayers中的瓦片通常是PNG或JPEG格式的图片,它们组合在一起形成完整的地图。为了提高性能,OpenLayers通常会在用户浏览地图时缓存已经加载的瓦片。这样,当用户再次浏览同一区域时,OpenLayers可以直接使用缓存中的瓦片,而不需要重新下载。当用户在地图上进行平移或缩放操作时,OpenLayers会动态加载新的瓦片。在网络请求中也可以看见瓦片请求记录,地址中的2/0/3对应着z x y。原创 2024-05-12 10:30:00 · 348 阅读 · 0 评论 -
九、openlayers官网示例Box Selection解析——使用Select和DragBox选中矢量地块实现高亮并显示地块信息
接下来,添加选择器,select是在修改原有的feature的样式,所以这一步仍然需要动态设置每个feature的样式,这和利用点击事件拿取feature绘制新的高亮图层不同,使用点击事件绘制高亮效果是在原有的feature上面新建了一个图层新绘制了一个feature,设置feature的填充色位透明就可以刚好漏出来下面地块的颜色。同时,触发["add",]事件,将信息显示到页面上。获取 this.select上的所有feature,监听一个事件,方便把选中的feature上的信息实时显示到页面上。原创 2024-05-11 22:00:00 · 807 阅读 · 1 评论 -
八、openlayers官网示例Bing Maps解析——加载Bing地图
this.styles装了几个样式,这里循环把每个样式的图层都加载到地图上了,都设置了图层不显示visible: false,并且给每一个图层设置了一个name,方便后面切换。接下来来看一下如何加载BingMaps,首先需要去申请一个key,我申请了一下,流程不难,这里贴一个别人写的申请流程。如果在加载地图时设置placeholderTiles为false那地图就会拉伸图片来替代默认图片。加一个下拉框绑定事件,选择某一个样式时把其他图层隐藏,只显示当前这一个。Bing Maps地图使用。原创 2024-05-11 20:30:00 · 321 阅读 · 1 评论 -
六、openlayers官网示例Attributions解析——地图上添加版权信息并随窗口大小控制显隐
controls是地图上的默认控件,可以都设置为false,原本的attribution也设置为false。这里有个小坑,一开始我没有引入ol的样式文件,然后怎么设置都不成功,一直是这样。然后自己来创建一个Attribution,collapsible表示是否折叠。在地图上添加版权信息,地图容器大小小于600就隐藏,大于600才显示。所以要在main.js里加上ol样式的引入,大家记得引入哦,不要学我。就可以看到效果了,注意看右下角。今天来写个简单的例子。原创 2024-05-10 19:30:00 · 223 阅读 · 0 评论 -
七、openlayers官网示例Band Contrast Stretch解析——加载地图并修改颜色
但是之前工作中用另外一种方式修改了地图颜色,这里给大家也分享下,这种思路主要是在图层加载时,在tileLoadFunction函数里面拿到每个切片的图像src,手动绘制canvas把图片加上去,并通过context.filter给图片添加滤镜。我这里使用的底图是arcgis的,这里使用天地图、高德地图等其他地图也是可以的。通过计算图像的红、绿、蓝通道的值,以及设定的最大值,来确定图像的颜色。值得我们注意的是,不是所有地图都可以通过这种方式去修改颜色的,只有使用geotiff格式的地图才可以。原创 2024-05-10 19:45:00 · 480 阅读 · 0 评论 -
一、openlayers官网示例Accessible Map解析
openlayers官网的demo根本不适合小白,于是写了一系列解析文章。很多人打开openlayers官网第一个demo,兴致冲冲的copy下来代码,运行起来却发现,嗯?地图咋出不来?代码也看不太懂,这是啥情况?别慌,俺来带你解析一下~原创 2024-05-07 18:30:00 · 1390 阅读 · 1 评论 -
四、openlayers官网示例Animated GIF解析——地图上加载GIF动画
gifler(gifUrl).frames是gitler的一个方法,在里面打印会发现控制台会一直输出,看了下它的源码,大胆猜测一下,我感觉它是把gif的每一帧返回过来,然后通过canvas绘制图片的方法ctx.drawImage绘制到地图上,再调了map.render()实时渲染地图。这篇讲的是如何在地图上加载gif动画,因为openlayers本身是不支持插入gif动画的,因此我们要下一个gifler插件。然初始化一个map,这次用到的是StadiaMaps底图,我试了下应该是可以直接加载出来的。原创 2024-05-08 19:20:47 · 469 阅读 · 0 评论