<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[aaa_div的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/aaa_div</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; aaa_div]]></copyright><item><title><![CDATA[echarts主题切换、全局配置主题文件切换颜色、深色主题、浅色主题]]></title><link>https://blog.youkuaiyun.com/aaa_div/article/details/148422081</link><guid>https://blog.youkuaiyun.com/aaa_div/article/details/148422081</guid><author>aaa_div</author><pubDate>Wed, 04 Jun 2025 11:06:00 +0800</pubDate><description><![CDATA[本文介绍了Echarts主题切换的实现方案。作者通过官网主题编辑器配置并下载js主题文件，在main.js中导入后使用registerTheme注册主题。重点说明了切换主题时需要销毁实例并重新init，同时指出主题配置的局限性：不同图表类型需单独配置主题，且环形图等部分样式仍需单独设置。整体而言，主题切换仍存在一定繁琐性，作者希望寻求更优解决方案。]]></description><category></category></item><item><title><![CDATA[openlayers加载天地图改变颜色，添加滤镜 cesium加载天地图，添加滤镜]]></title><link>https://blog.youkuaiyun.com/aaa_div/article/details/148421292</link><guid>https://blog.youkuaiyun.com/aaa_div/article/details/148421292</guid><author>aaa_div</author><pubDate>Wed, 04 Jun 2025 10:28:50 +0800</pubDate><description><![CDATA[以下代码可以直接复制到html文件中运行，通过滑块调整获取 filter: grayscale(76%) sepia(55%) invert(100%) saturate(236%);几个参数的值，调整好以后，直接复制到代码中使用。2、天地图和ol的引用使用的都是在线地址，如果加载不出来，需要替换。如果要切换主题的话，要把之前的着色器代码保存一下，方便恢复。3、有跨域问题，可以直接用浏览器的非安全模式打开。1、这个里面需要替换为自己的token。通过css滤镜的方式改变地图颜色。天地图加载完之后调用。]]></description><category></category></item><item><title><![CDATA[使用openlayers给地图添加内发光、外发光、内外阴影、三维立体效果、3D效果]]></title><link>https://blog.youkuaiyun.com/aaa_div/article/details/141193308</link><guid>https://blog.youkuaiyun.com/aaa_div/article/details/141193308</guid><author>aaa_div</author><pubDate>Wed, 14 Aug 2024 21:00:00 +0800</pubDate><description><![CDATA[OpenLayers 虽然原生不支持 3D 效果，但可以通过 Canvas 的阴影属性实现立体视觉效果。利用 style 中的 renderer 函数获取 canvas 上下文，通过设置 shadowOffset、shadowBlur 等参数添加多层不同颜色的阴影堆叠，可创建 3D 立体效果。此外，使用 ol-ext 扩展库的 Mask 和 Crop 类也能轻松实现内发光、外发光等阴影特效。这两种方法突破了 OpenLayers 在视觉效果上的限制，为地图数据可视化提供了更多表现可能。]]></description><category></category></item><item><title><![CDATA[openlayers性能优化——开启图层预加载、减少空白等待时间]]></title><link>https://blog.youkuaiyun.com/aaa_div/article/details/139976218</link><guid>https://blog.youkuaiyun.com/aaa_div/article/details/139976218</guid><author>aaa_div</author><pubDate>Wed, 26 Jun 2024 22:00:00 +0800</pubDate><description><![CDATA[使用切片图层时、地图拖拽会有空白图片，为了减少空白等待时间，我们可以开始图层预加载。]]></description><category></category></item><item><title><![CDATA[openlayers禁用鼠标滚轮放大、拖拽事件并设置为只有按住Ctrl键才可以执行放大拖拽操作]]></title><link>https://blog.youkuaiyun.com/aaa_div/article/details/139960772</link><guid>https://blog.youkuaiyun.com/aaa_div/article/details/139960772</guid><author>aaa_div</author><pubDate>Tue, 25 Jun 2024 22:45:00 +0800</pubDate><description><![CDATA[或者设置只允许按住Ctrl键才可以操作。]]></description><category></category></item><item><title><![CDATA[五十七、openlayers官网示例Marker Animation解析——在地图上添加路径动画、沿路径往返运动]]></title><link>https://blog.youkuaiyun.com/aaa_div/article/details/139914340</link><guid>https://blog.youkuaiyun.com/aaa_div/article/details/139914340</guid><author>aaa_div</author><pubDate>Tue, 25 Jun 2024 21:30:00 +0800</pubDate><description><![CDATA[moveFeature函数中，通过时间和坐标的计算，每一毫秒在地图上绘制一个不同的点，随着时间推移，点的位置不断向前，形成了点向前运动的动画效果。是一种用于在地图上高效存储和传输折线（路径）的坐标数据的编码方法。这里的动画是往返的，如果想要 它每次都从起点开始，则需要在distance大于1之后，让它重新归零。解析完之后，可以直接创建为feature，同时，创建起点和终点以及运动中的图标feature。方法通常用于在预定义的路径上获取特定距离处的坐标 ，它的返回值在0-1之间。这篇绘制了一个运动轨迹动画。]]></description><category></category></item><item><title><![CDATA[五十八、openlayers官网示例Map Graticule解析——给地图添加经纬度网格线]]></title><link>https://blog.youkuaiyun.com/aaa_div/article/details/139865334</link><guid>https://blog.youkuaiyun.com/aaa_div/article/details/139865334</guid><author>aaa_div</author><pubDate>Mon, 24 Jun 2024 23:30:00 +0800</pubDate><description><![CDATA[之前一个项目需要展示这种经纬线，但是我不知道openlayers有这种图层，于是拿canvas画上去的。这篇没啥好说的，写出来完全是嘲笑一下自己蠢，以及，，，帮大家避个坑。很好，又是被自己蠢哭的一天。]]></description><category></category></item><item><title><![CDATA[五十七、openlayers官网示例Map Export解析——将地图导出为图片]]></title><link>https://blog.youkuaiyun.com/aaa_div/article/details/139862486</link><guid>https://blog.youkuaiyun.com/aaa_div/article/details/139862486</guid><author>aaa_div</author><pubDate>Mon, 24 Jun 2024 23:15:00 +0800</pubDate><description><![CDATA[然后绑定一个点击事件，使用this.map.renderSync()同步渲染一次地图，让地图触发rendercomplete事件。因为openlayers绘制的地图上有好几canvas画布，所以要把它们都拿到，并把图像绘制到一个新的canvas上。比如transform的matrix矩阵属性，若存在，需要将transform重新设置给新的mapContext。也就是说，只要写以下几行代码，就可以实现基本的导出功能。在canvas上绘制图形，并导出为图片。说地图导出前，我们先来看一个例子。]]></description><category></category></item><item><title><![CDATA[五十六、openlayers官网示例Magnify解析——在地图上实现放大镜效果]]></title><link>https://blog.youkuaiyun.com/aaa_div/article/details/139853849</link><guid>https://blog.youkuaiyun.com/aaa_div/article/details/139853849</guid><author>aaa_div</author><pubDate>Sat, 22 Jun 2024 15:00:00 +0800</pubDate><description><![CDATA[这篇讲了如何在地图上添加放大镜效果。首先加载底图鼠标移动的时候，调用render方法，触发postrender事件。postrender事件中可以获取到鼠标移动的位置，实时绘制圆形和放大后的图像。先用getRenderPixel将地理坐标转换为屏幕坐标，通过勾股定理（直角三角形的两条直角边的平方和等于斜边的平方）算出半径。获取放大镜范围内所需要的图像。然后开始创建放大后的图像数据。要看懂这段代码我们需要来好好分析一下。放大的关键在于dI / 2和dJ / 2的计算。]]></description><category></category></item><item><title><![CDATA[五十五、openlayers官网示例Loading Spinner解析——给地图添加loading效果，瓦片图层加载时等待效果]]></title><link>https://blog.youkuaiyun.com/aaa_div/article/details/139831310</link><guid>https://blog.youkuaiyun.com/aaa_div/article/details/139831310</guid><author>aaa_div</author><pubDate>Sat, 22 Jun 2024 13:00:00 +0800</pubDate><description><![CDATA[利用地图的loadstart和loadend事件，动态的添加和删除class名。这篇介绍了一个非常简单的loading效果。配合样式动画实现loading效果。]]></description><category></category></item><item><title><![CDATA[五十四、openlayers官网示例LineString Arrows解析——在地图上绘制箭头]]></title><link>https://blog.youkuaiyun.com/aaa_div/article/details/139829846</link><guid>https://blog.youkuaiyun.com/aaa_div/article/details/139829846</guid><author>aaa_div</author><pubDate>Fri, 21 Jun 2024 23:00:00 +0800</pubDate><description><![CDATA[绘制直线时，通过style函数将直线的末端添加箭头图标。通过forEachSegment 函数拿到箭头的起点和终点坐标，使用 Math.atan2计算出箭头图标的旋转角度。创建一个矢量数据源，将其绑定为draw的数据源并展示在矢量图层上。这篇介绍了在地图上绘制箭头。]]></description><category></category></item><item><title><![CDATA[五十三、openlayers官网示例Layer Spy解析——跟随鼠标透视望远镜效果、图层剪裁]]></title><link>https://blog.youkuaiyun.com/aaa_div/article/details/139824045</link><guid>https://blog.youkuaiyun.com/aaa_div/article/details/139824045</guid><author>aaa_div</author><pubDate>Fri, 21 Jun 2024 22:00:00 +0800</pubDate><description><![CDATA[通过map.render()触发prerender，postrender两个函数来完成裁剪，其原理和上篇的卷帘效果一样。这篇实现了鼠标跟随望远镜效果，鼠标移动时绘制一个圆形的剪裁区剪裁上层图层。]]></description><category></category></item><item><title><![CDATA[五十二、openlayers官网示例Layer Swipe解析——绘制卷帘效果地图、动态裁剪图层]]></title><link>https://blog.youkuaiyun.com/aaa_div/article/details/139808582</link><guid>https://blog.youkuaiyun.com/aaa_div/article/details/139808582</guid><author>aaa_div</author><pubDate>Fri, 21 Jun 2024 21:45:00 +0800</pubDate><description><![CDATA[卷帘效果绘制的过程和绘制圆形裁剪区的代码类似，卷帘是以滑块的值为界线将左边的图像进行裁剪，而且绘制的时候要先使用getRenderPixel把地理坐标转换为屏幕坐标。这时发现圆形只绘制出来了一小部分，这是因为绘制剪切圆形路径之后，将只能在圆形上绘制图像，如果绘制的图形超出了圆形范围，将不会显示出来。所谓的卷帘效果实际上是在地图上添加了两个不同的图层，通过滑块滑动实时剪裁上层图层的图像，漏出下层图层。这也是为什么我们的卷帘裁剪是在 prerender（图层渲染前）进行，而不是图层渲染后或其他时机。]]></description><category></category></item><item><title><![CDATA[五十一、openlayers官网示例Layer Min/Max Resolution解析——设置图层最大分辨率，超过最大值换另一个图层显示]]></title><link>https://blog.youkuaiyun.com/aaa_div/article/details/139803334</link><guid>https://blog.youkuaiyun.com/aaa_div/article/details/139803334</guid><author>aaa_div</author><pubDate>Thu, 20 Jun 2024 23:00:00 +0800</pubDate><description><![CDATA[使用minResolution、maxResolution分辨率来设置图层显示最大分辨率。]]></description><category></category></item><item><title><![CDATA[五十、openlayers官网示例JSTS Integration解析——使用JSTS 库来处理几何缓冲区并在地图上显示结果]]></title><link>https://blog.youkuaiyun.com/aaa_div/article/details/139801243</link><guid>https://blog.youkuaiyun.com/aaa_div/article/details/139801243</guid><author>aaa_div</author><pubDate>Thu, 20 Jun 2024 22:00:00 +0800</pubDate><description><![CDATA[几何缓冲（Geometric Buffering）是指在 GIS（地理信息系统）和计算几何中，围绕一个几何对象创建一个具有特定距离的区域。这种操作通常用于表示影响区域、保护区、可视范围等。例如，创建一个道路中心线的缓冲区，可以用于表示道路的影响范围。注入 OpenLayers 的几何类型到 JSTS 的解析器中。使用fetch请求json数据并创建一个矢量图层展示数据。这篇讲了如何在地图上添加缓冲图形。将每一个数据进行处理。]]></description><category></category></item><item><title><![CDATA[四十九、openlayers官网示例Immediate Rendering (Geographic)——在地图上绘制星空动画效果]]></title><link>https://blog.youkuaiyun.com/aaa_div/article/details/139798506</link><guid>https://blog.youkuaiyun.com/aaa_div/article/details/139798506</guid><author>aaa_div</author><pubDate>Wed, 19 Jun 2024 22:30:00 +0800</pubDate><description><![CDATA[然后利用postrender在地图上绘制动画效果，每次随机生成一个点，push进geometries数组中，同时将数组的第一个删除，使地图上的点动态的出现消失。是openlayers提供的缓动函数，创建动画效果。定义了动画的进度和速度曲线，使得动画效果更加平滑和自然。调整点的透明度和缩放比例，从而实现点的渐显渐隐效果。因为创建的点坐标是地理坐标，而地图默认是3857投影展示，所以使用 useGeographic()让所有坐标都直接使用地理坐标系（EPSG:4326）首先先创建1000个随机点，创建点对象。]]></description><category></category></item><item><title><![CDATA[四十八、openlayers地图调色总结——锐化、模糊、浮雕滤镜，调整地图色相、饱和度、亮度]]></title><link>https://blog.youkuaiyun.com/aaa_div/article/details/139792325</link><guid>https://blog.youkuaiyun.com/aaa_div/article/details/139792325</guid><author>aaa_div</author><pubDate>Wed, 19 Jun 2024 22:15:00 +0800</pubDate><description><![CDATA[这篇是对滤镜的总结，方便工作中直接使用。想要调整图层的颜色，有两种方法。加载图层时使用tileLoadFunction函数拿到context添加canvas滤镜效果。]]></description><category></category></item><item><title><![CDATA[自制调色小工具给图片加滤镜，修改图片红、绿、蓝通道及亮度，修改图片颜色]]></title><link>https://blog.youkuaiyun.com/aaa_div/article/details/139774142</link><guid>https://blog.youkuaiyun.com/aaa_div/article/details/139774142</guid><author>aaa_div</author><pubDate>Tue, 18 Jun 2024 22:45:00 +0800</pubDate><description><![CDATA[调整颜色只需要遍历图像数组，改对应的值就好。比如修改亮度，就是把数组中所有的红绿蓝颜色的值都加上滑块的值，数值越接近255越白，就显得图片越亮。图像数据的存储结构，每个像素占用 4 个连续的数组元素，分别表示该像素的红、绿、蓝和透明度（Alpha）值。每个像素占用 4 个连续的数组元素，分别表示该像素的红、绿、蓝和透明度（Alpha）值。核心原理就是图像结构，使用context.getImageData获取图像像素结构。上篇我们给地图添加了锐化、模糊等滤镜，这篇来写一个小工具给图片调色。]]></description><category></category></item><item><title><![CDATA[四十七、openlayers官网示例Image Filters——给地图添加锐化、浮雕、边缘等滤镜效果]]></title><link>https://blog.youkuaiyun.com/aaa_div/article/details/139768033</link><guid>https://blog.youkuaiyun.com/aaa_div/article/details/139768033</guid><author>aaa_div</author><pubDate>Tue, 18 Jun 2024 22:30:00 +0800</pubDate><description><![CDATA[卷积操作通过将这个卷积核在图像上滑动，将核矩阵与图像中的每个 3x3 区域逐个相乘，然后求和，生成新的像素值。卷积操作通过将这个卷积核在图像上滑动，将核矩阵与图像中的每个 3x3 区域逐个相乘，然后求和，生成新的像素值。这里有个小细节，我们在css中写颜色时透明度的取值是0-100，但实际上，计算机存储的时候范围是0-255，所以这里的透明度的取值是0-255。也就是说，我们得获取图像中的像素数据，然后通过卷积核一类的计算操作，将图像的存储数据进行修改，生成一个新图像，最终实现滤镜效果。]]></description><category></category></item><item><title><![CDATA[四十六、openlayers官网示例Icon Sprites with WebGL解析——使用WebGLPoints加载海量点数据。普通矢量图层加载点数据和webgl加载点数据性能对比]]></title><link>https://blog.youkuaiyun.com/aaa_div/article/details/139737994</link><guid>https://blog.youkuaiyun.com/aaa_div/article/details/139737994</guid><author>aaa_div</author><pubDate>Mon, 17 Jun 2024 23:00:00 +0800</pubDate><description><![CDATA[下拉框的筛选效果是通过在style中定义变量filterShape、feature中添加自定义属性shape、以及下拉框中的value值结合实现的。下拉框的改变会更改style.variables.filterShape的值，然后调用地图的render方法来更新地图。原本的style中的变量定义是WebGLPointsLayer的一些固定写法，和普通的矢量图层接受的style不一样。图层渲染出来之后，可以看到，放大缩小、筛选操作地图的表现是非常流畅的，基本没有卡顿。请求回来的数据是这样的。]]></description><category></category></item></channel></rss>