- 博客(63)
- 收藏
- 关注
RSS订阅原创 使用openlayers给地图添加内发光、外发光、内外阴影、三维立体效果
然后使用addOutlineShadow函数添加阴影。拿到canvas上下文了，就可以使用canvas的方法添加阴影效果了，最后再将拿到的坐标数组用canvas的方法绘制成多边形，就可以在地图上显示了。但是这种阴影不能调节偏移量，因此要设置阴影偏移量达到三维立体效果还需要利用canvas原理。给地图添加内阴影、外阴影效果，可以使用ol的扩展库ol-ext。Mask主要用来设置内阴影效果，外阴影则是由Crop设置。事实上，这种方法不仅能绘制阴影，还可以绘制其他效果。我这里堆叠了好几层阴影，这样看着更立体些。
2024-08-14 21:00:00
705
2
原创 openlayers性能优化——开启图层预加载、减少空白等待时间
使用切片图层时、地图拖拽会有空白图片，为了减少空白等待时间，我们可以开始图层预加载。
2024-06-26 22:00:00
508
原创 五十七、openlayers官网示例Marker Animation解析——在地图上添加路径动画、沿路径往返运动
moveFeature函数中，通过时间和坐标的计算，每一毫秒在地图上绘制一个不同的点，随着时间推移，点的位置不断向前，形成了点向前运动的动画效果。是一种用于在地图上高效存储和传输折线（路径）的坐标数据的编码方法。这里的动画是往返的，如果想要 它每次都从起点开始，则需要在distance大于1之后，让它重新归零。解析完之后，可以直接创建为feature，同时，创建起点和终点以及运动中的图标feature。方法通常用于在预定义的路径上获取特定距离处的坐标 ，它的返回值在0-1之间。这篇绘制了一个运动轨迹动画。
2024-06-25 21:30:00
821
原创 五十八、openlayers官网示例Map Graticule解析——给地图添加经纬度网格线
之前一个项目需要展示这种经纬线，但是我不知道openlayers有这种图层，于是拿canvas画上去的。这篇没啥好说的，写出来完全是嘲笑一下自己蠢，以及，，，帮大家避个坑。很好，又是被自己蠢哭的一天。
2024-06-24 23:30:00
322
原创 五十七、openlayers官网示例Map Export解析——将地图导出为图片
然后绑定一个点击事件，使用this.map.renderSync()同步渲染一次地图，让地图触发rendercomplete事件。因为openlayers绘制的地图上有好几canvas画布，所以要把它们都拿到，并把图像绘制到一个新的canvas上。比如transform的matrix矩阵属性，若存在，需要将transform重新设置给新的mapContext。也就是说，只要写以下几行代码，就可以实现基本的导出功能。在canvas上绘制图形，并导出为图片。说地图导出前，我们先来看一个例子。
2024-06-24 23:15:00
963
原创 五十六、openlayers官网示例Magnify解析——在地图上实现放大镜效果
这篇讲了如何在地图上添加放大镜效果。首先加载底图鼠标移动的时候，调用render方法，触发postrender事件。postrender事件中可以获取到鼠标移动的位置，实时绘制圆形和放大后的图像。先用getRenderPixel将地理坐标转换为屏幕坐标，通过勾股定理（直角三角形的两条直角边的平方和等于斜边的平方）算出半径。获取放大镜范围内所需要的图像。然后开始创建放大后的图像数据。要看懂这段代码我们需要来好好分析一下。放大的关键在于dI / 2和dJ / 2的计算。
2024-06-22 15:00:00
724
原创 五十五、openlayers官网示例Loading Spinner解析——给地图添加loading效果，瓦片图层加载时等待效果
利用地图的loadstart和loadend事件，动态的添加和删除class名。这篇介绍了一个非常简单的loading效果。配合样式动画实现loading效果。
2024-06-22 13:00:00
297
原创 五十四、openlayers官网示例LineString Arrows解析——在地图上绘制箭头
绘制直线时，通过style函数将直线的末端添加箭头图标。通过forEachSegment 函数拿到箭头的起点和终点坐标，使用 Math.atan2计算出箭头图标的旋转角度。创建一个矢量数据源，将其绑定为draw的数据源并展示在矢量图层上。这篇介绍了在地图上绘制箭头。
2024-06-21 23:00:00
467
原创 五十三、openlayers官网示例Layer Spy解析——跟随鼠标透视望远镜效果、图层剪裁
通过map.render()触发prerender，postrender两个函数来完成裁剪，其原理和上篇的卷帘效果一样。这篇实现了鼠标跟随望远镜效果，鼠标移动时绘制一个圆形的剪裁区剪裁上层图层。
2024-06-21 22:00:00
450
原创 五十二、openlayers官网示例Layer Swipe解析——绘制卷帘效果地图、动态裁剪图层
卷帘效果绘制的过程和绘制圆形裁剪区的代码类似，卷帘是以滑块的值为界线将左边的图像进行裁剪，而且绘制的时候要先使用getRenderPixel把地理坐标转换为屏幕坐标。这时发现圆形只绘制出来了一小部分，这是因为绘制剪切圆形路径之后，将只能在圆形上绘制图像，如果绘制的图形超出了圆形范围，将不会显示出来。所谓的卷帘效果实际上是在地图上添加了两个不同的图层，通过滑块滑动实时剪裁上层图层的图像，漏出下层图层。这也是为什么我们的卷帘裁剪是在 prerender（图层渲染前）进行，而不是图层渲染后或其他时机。
2024-06-21 21:45:00
502
原创 五十一、openlayers官网示例Layer Min/Max Resolution解析——设置图层最大分辨率，超过最大值换另一个图层显示
使用minResolution、maxResolution分辨率来设置图层显示最大分辨率。
2024-06-20 23:00:00
432
原创 五十、openlayers官网示例JSTS Integration解析——使用JSTS 库来处理几何缓冲区并在地图上显示结果
几何缓冲（Geometric Buffering）是指在 GIS（地理信息系统）和计算几何中，围绕一个几何对象创建一个具有特定距离的区域。这种操作通常用于表示影响区域、保护区、可视范围等。例如，创建一个道路中心线的缓冲区，可以用于表示道路的影响范围。注入 OpenLayers 的几何类型到 JSTS 的解析器中。使用fetch请求json数据并创建一个矢量图层展示数据。这篇讲了如何在地图上添加缓冲图形。将每一个数据进行处理。
2024-06-20 22:00:00
413
原创 四十九、openlayers官网示例Immediate Rendering (Geographic)——在地图上绘制星空动画效果
然后利用postrender在地图上绘制动画效果，每次随机生成一个点，push进geometries数组中，同时将数组的第一个删除，使地图上的点动态的出现消失。是openlayers提供的缓动函数，创建动画效果。定义了动画的进度和速度曲线，使得动画效果更加平滑和自然。调整点的透明度和缩放比例，从而实现点的渐显渐隐效果。因为创建的点坐标是地理坐标，而地图默认是3857投影展示，所以使用 useGeographic()让所有坐标都直接使用地理坐标系（EPSG:4326）首先先创建1000个随机点，创建点对象。
2024-06-19 22:30:00
432
原创 四十八、openlayers地图调色总结——锐化、模糊、浮雕滤镜，调整地图色相、饱和度、亮度
这篇是对滤镜的总结，方便工作中直接使用。想要调整图层的颜色，有两种方法。加载图层时使用tileLoadFunction函数拿到context添加canvas滤镜效果。
2024-06-19 22:15:00
1541
原创 自制调色小工具给图片加滤镜，修改图片红、绿、蓝通道及亮度，修改图片颜色
调整颜色只需要遍历图像数组，改对应的值就好。比如修改亮度，就是把数组中所有的红绿蓝颜色的值都加上滑块的值，数值越接近255越白，就显得图片越亮。图像数据的存储结构，每个像素占用 4 个连续的数组元素，分别表示该像素的红、绿、蓝和透明度（Alpha）值。每个像素占用 4 个连续的数组元素，分别表示该像素的红、绿、蓝和透明度（Alpha）值。核心原理就是图像结构，使用context.getImageData获取图像像素结构。上篇我们给地图添加了锐化、模糊等滤镜，这篇来写一个小工具给图片调色。
2024-06-18 22:45:00
531
原创 四十七、openlayers官网示例Image Filters——给地图添加锐化、浮雕、边缘等滤镜效果
卷积操作通过将这个卷积核在图像上滑动，将核矩阵与图像中的每个 3x3 区域逐个相乘，然后求和，生成新的像素值。卷积操作通过将这个卷积核在图像上滑动，将核矩阵与图像中的每个 3x3 区域逐个相乘，然后求和，生成新的像素值。这里有个小细节，我们在css中写颜色时透明度的取值是0-100，但实际上，计算机存储的时候范围是0-255，所以这里的透明度的取值是0-255。也就是说，我们得获取图像中的像素数据，然后通过卷积核一类的计算操作，将图像的存储数据进行修改，生成一个新图像，最终实现滤镜效果。
2024-06-18 22:30:00
1456
1
原创 四十六、openlayers官网示例Icon Sprites with WebGL解析——使用WebGLPoints加载海量点数据。普通矢量图层加载点数据和webgl加载点数据性能对比
下拉框的筛选效果是通过在style中定义变量filterShape、feature中添加自定义属性shape、以及下拉框中的value值结合实现的。下拉框的改变会更改style.variables.filterShape的值，然后调用地图的render方法来更新地图。原本的style中的变量定义是WebGLPointsLayer的一些固定写法，和普通的矢量图层接受的style不一样。图层渲染出来之后，可以看到，放大缩小、筛选操作地图的表现是非常流畅的，基本没有卡顿。请求回来的数据是这样的。
2024-06-17 23:00:00
536
原创 四十五、openlayers官网示例Icon modification解析——在地图上添加标记图形并随意移动它的位置
Modify的主要作用是修改图形，之所以可以随意移动图形的位置，是因为点或者圆形只有一个顶点坐标构成。如果Modify用在多边形或直线身上， 它会捕获构成图形的任意一个点，通过鼠标拖动来移动点的坐标从而改变形状。图形能移动的核心代码是Modify类，Modify类可以捕获矢量图形上的点，移动点的位置来改变矢量图形的位置，而hitDetection的作用则是使鼠标更容易捕获到图形上，当用户与地图进行交互（例如点击或拖动要素）时，如果命中，则触发相应的修改操作，允许用户拖动顶点或整个几何要素进行修改。
2024-06-14 23:30:00
456
原创 四十四、openlayers官网示例Geographic Coordinates解析——在地图上添加弹窗，点击显示图形信息
初始化图层的时候，添加一个矢量的点数据到地图上，在new Feature时添加一些自定义属性。创建overlay实例 ，offset是偏移量，根据写的元素大小调节。点击地图的时候，获取图形的信息并给 this.message赋值。使用Overlay在地图上添加弹窗，点击控制显隐。写一个元素，用来展示信息。
2024-06-08 12:15:00
315
原创 四十二、openlayers官网示例Flight Animation扩展——在地图上绘制飞机航线、飞机随航线飞行效果
绘制线的思路是取坐标数组的第0个到第n个，每毫秒绘制不同的线。绘制点的思路则是直接取第n个点，每毫秒绘制不同的点，并且在n大于等于坐标数组之后又让n重新等于0，以此来实现循环的动画。因为图标需要随着航线的方向飞行，需要根据航线调整角度，因此在加载数据源的时候需要计算一下角度，绑在每个feature上。在航线绘制完成之后，添加一个飞机动画开始执行的标识flight，给feature设置一个初始的index值。上篇在地图上绘制了动态的飞机航线，于是我想着，能不能加个飞机的图标跟着航线飞行。
2024-06-07 23:45:00
534
原创 四十三、openlayers官网示例Freehand Drawing解析——在地图上自由绘制图形
想要在地图上绘制自由图形，只需要在new Draw的时候多加一个配置项就行。
2024-06-07 23:30:00
308
原创 四十一、openlayers官网示例Flight Animation解析——在地图上绘制飞机航线、牵引线效果、动态动画
而绘制的线段点需要从coords坐标数组中取，每次都取0到index的坐标。elapsedPoints就是表示了当前需要取的index值，因为elapsedTime是毫秒值，会很快，所以没有直接使用elapsedTime去从数组里取值，而是乘以了一个系数const pointsPerMs = 0.02。绘制过程中需要实时设置一下绘制的样式，而绘制结束后，也需要保持线的样式，所以在图层里需要定义一个完成后的样式。animateFlights获取当前帧对象，利用时间差截取数组中的项，来实现线慢慢变长的效果。
2024-06-07 23:00:00
903
原创 四十、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
491
原创 三十九、openlayers官网示例Extent Interaction解析——在地图上绘制范围并获取数据
在openlayers中可以使用ExtentInteraction添加交互事件，配合shiftKeyOnly实现按住shift键绘制边界区域。监听extentchanged事件，记录绘制的矩形数据。按住shift绘制矩形，按住shift键点击图形删除。
2024-06-06 22:00:00
414
原创 三十八、openlayers官网示例Earthquakes with custom symbols——将矢量数据渲染为自定义图形
symbol.map(scaleFunction)]生成出来的坐标数组并不是每个图形相对于整个canvas画布的坐标数组。而是相对于每个feature生成的画布的坐标数组。也就是说这个图形的坐标数组和feature的坐标是不一样的。上一篇我们使用星星表示了地震数据，能绘制星星图形主要依靠 openlayers中的RegularShape类，那如果想要绘制自定义图形该怎么写呢，这篇提供了解决方案。如果使用缩放前的坐标，每个图形会是一样大的。是一个坐标数组，定义了一个多边形的形状。在一个新的 HTML。
2024-06-05 23:30:00
980
原创 三十六、openlayers官网示例Earthquake Clusters解析——在聚合图层鼠标触摸显示五角星
首先是初始化地图，加载了一个KML格式的矢量数据源，extractStyles为false表示不从kml数据源中提取样式。使用calculateClusterInfo 函数计算圆圈的半径，将子feature的extent合并到了一起，结合分辨率算出半径。鼠标触摸的时候获取到feature自定义属性features取出来，把每一个子feature绘制成星星形状展示。createEarthquakeStyle是绘制星星的方法，主要用了RegularShape这个类。包含了所有特征的范围，即。
2024-06-05 23:00:00
762
原创 三十七、openlayers官网示例Earthquakes Heatmap解析——在地图上加载热力图
是一个用于在地图上显示热力图的图层类型，通常用于表示地理数据中的密度或强度。例如，它可以用来显示地震、人口密度或其他空间数据的热点区域。被用来显示从 KML 文件中提取的地震数据。这篇主要介绍了热力图HeatmapLayer。通过滑块的改变控制图层的半径和模糊度。
2024-06-05 22:45:00
322
原创 三十五、openlayers官网示例Dynamic Data——在地图上加载动态数据形成动画效果
绘制动画效果主要还是利用了postrender事件，其原理解析可以参考这篇。
2024-06-03 22:30:00
482
原创 三十四、openlayers官网示例Dynamic clusters解析——动态的聚合图层
这里的outerCircle定义为全局变量而并非局部变量，主要是因为clusterStyle函数是个高频触发函数，将outerCircle写成全局的可以不用new那么多次。计算凸包的算法通常基于点的排序和几何性质，可以有效地处理大规模的数据。有下级的时候图形是橙色发光的样式，没有下级的时候。方法根据聚类成员的数量、中心坐标和当前分辨率，生成一个圆周上的点坐标数组。先初始化地图 ，设置了地图视角的边界extent，限制了地图缩放的范围。点击事件时，获取当前点击的feature的边界值，定位到指定位置。
2024-06-03 22:00:00
889
原创 三十三、openlayers官网示例Drawing Features Style——在地图上绘制图形，并修改绘制过程中的颜色
根据下拉框中的值在styles对象中取对应的颜色对象，new Draw的时候将其设置为style参数。需要注意的是这个style是绘制过程中的颜色，如果需要设置绘制完成后的颜色还得在图层中设置。这篇讲的是使用Draw绘制图形时根据绘制形状设置不同颜色。
2024-05-29 23:00:00
1243
原创 三十二、openlayers官网示例解析Draw lines rendered with WebGL——使用WebGL动态修改多边形端点类型、连接类型、偏移量、虚线等设置
WebGL 是基于硬件加速的图形库，能够利用 GPU 来进行高效的并行计算。与传统的 2D 绘图方式（如 Canvas 2D API）相比，WebGL 可以处理更多的图形数据、更高的绘图复杂度，并且在高分辨率和高刷新率下保持流畅的性能。这对于需要渲染大量图形元素的应用尤为重要，例如地理信息系统（GIS）、数据可视化和复杂动画。在需要渲染和处理大量数据点的应用中，如地理信息系统、科学可视化和大数据分析，WebGL 的并行计算能力和高效的渲染管道使其能够在不牺牲性能的情况下处理大规模数据可视化。
2024-05-29 22:45:00
2305
原创 三十一、openlayers官网示例Draw Features解析——在地图上自定义绘制点、线、多边形、圆形并获取图形数据
已经绘制了一个图形，但是并没有获取到。this.vectorlayer.getSource().getFeatures()不能实时获取到绘制图形的数据，因为drawend事件里feature还没被加到图层上。features绑定的数组不是普通的数组，Collection是openlayers内部定义的一个类似数组的集合。总的来说，两种方法都可以，甚至可以定义一个数组，每次绘制完都push一下当前绘制的feature。想要在地图上绘制图形，需要用到一个交互类Draw，new Draw，设置绘制的图形类型。
2024-05-28 22:45:00
1473
原创 三十、openlayers官网示例解析Double click, Drag and Zoom——第二次点击鼠标拖拽缩放地图效果、取消地图双击放大事件
interactions属性用来设置地图上的交互，DblClickDragZoom就是第二次按下鼠标拖拽缩放的类。这篇展示了如何在地图上添加第二次按下鼠标移动鼠标实现拖拽缩放地图效果。
2024-05-28 22:30:00
658
原创 二十九、openlayers官网示例DeclutterGroup解析——避免矢量图层的文字重叠
用于处理矢量图层上重叠的标注和符号，为true时启用去重叠功能。所有矢量特征的标注和符号都会被处理以避免重叠。false则与之相反。separate将标注和符号分别处理，避免它们之间的相互覆盖。这篇说的是如何设置矢量图层上多数据点文字不重叠。
2024-05-28 22:00:00
568
原创 二十八、openlayers官网示例Data Tiles解析——自定义绘制DataTile源数据
先来看一下什么是DataTile，这个源是一个数组，与我们之前XYZ切片源有所不同。DataTile主要适用于需要动态生成、处理或渲染瓦片数据的复杂场景。事实上，很多源都提供loader参数方便我们把获取的数据或地图路径经过二次处理之后再加载到地图上。是一个自定义数据加载函数，用于在需要时生成或获取瓦片数据。它的设计目的是为了处理动态生成的或特定格式的数据，比如在运行时计算或从非标准源获取的数据。这篇示例讲解的是自定义加载DataTile源格式的数据。先新建一个canvas，设置一下画布参数。
2024-05-27 22:30:00
302
原创 二十六、openlayers官网示例CustomPolygonStyles——使用样式数组将多边形顶点设置成圆点，深入理解geometry和renderer函数
官网demo地址：这篇讲的是如何通过Style同时给多边形和多边形的顶点设置不同的样式。首先实例化一个地图，将地图中心点设置为北京然后新增了一个对象，里面是GeoJSON格式的数据这段代码信息量可有点多。。。
2024-05-24 22:30:00
753
原创 二十五、openlayers官网示例CustomOverviewMap解析——实现鹰眼地图、预览窗口、小窗窗口地图、旋转控件
因为地图设置了按住shift键旋转，所以这个小窗口也需要设置一下是否跟随旋转。new OverviewMap的className参数要么不传，要传自定义类名的话需要加上它的默认值.ol-overviewmap。首先加载了一个地图。翻看文档和源码后得知，展示/折叠的按钮点击事件中是通过是否加上ol-collapsed类名来控制小窗显隐的。而起隐藏作用的css是这样写的，带上了它原本的默认类名.ol-overviewmap。这个示例展示了如何在地图上增加一个小窗窗口的地图并跟随着地图的旋转而旋转视角。
2024-05-23 22:30:00
916
原创 二十四、openlayers官网示例Custom Interactions——自定义交互实现在地图上移动、拖拽feature
然后创建了一个类继承原本的PointerInteraction，将四个事件作为参数传递给PointerInteraction。这里移动要素用了一个geometry.translate()方法，如果我们自己写方法来完成移动的话会比较麻烦。重新定义了一个Drag类，我放在了utils下的Drag.js中便于多次使用。这个示例介绍了如何在地图上自定义一个交互实现在地图上拖拽、移动要素。首先是加载了三个要素到地图上，一个点、一个多边形、一条线。可以看下源码中PointerInteraction的定义。
2024-05-22 22:30:00
694
原创 二十三、openlayers官网示例Custom Hit Detection Render解析——使用hitDetectionRenderer优化在复杂地图应用中要素的点击检测性能
这个示例主要主要介绍了使用hitDetectionRenderer来优化点击检测的性能。
2024-05-21 21:15:00
567
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人