lz5211314121的博客

之前在cesium中做过多边形的填充使用渐变透明的效果，那个时候使用的是着色器，利用距离中心点的距离去写shader函数，距离中心越远颜色透明度越高，那么本文我们在openlayers中来实现这一过程。这篇文章我们重点说填充渐变的问题。实际上官网上关于填充渐变是有案例的。一文中已经讲过了，这篇就不讲了，感兴趣的可以去看看。好接下来开始讲述原理，首先关于边界发光的原理我在。但是官网的写的比较简单丑陋，

首先要清楚发光的原理是什么，所有发光都是相对的，首先要相对于较暗的环境，并且还得伴随着模糊的效果。解释一下，这个函数一共4个参数，当然你可以根据自己的喜好随意去修改，首先第一个参数map是你使用ol新建的那个map对象，第二个参数data是你要渲染的数据，第三个参数是你要发光的颜色，第四个参数是线条的粗细。目的很简单我们想在OpenLayers中实现类似于mapbox中的line-blur的效果，或者说时cesium中的glowpower的效果。底层是一个其他颜色的相对较宽的线条，上层是一个白色的线条。

我们本文使用到的核心原理也是通过setInterval不断的设置线条的偏移量lineDashOffset。不管在什么框架中让线条“动起来”都有很多种方式。但是无论使用什么方式，其原理都是。录屏2024-11-20 16.32.30。

所谓的重新渲染其实还是利用了裁剪的原理，比如当滑块滑动的时候，那么上层图层的宽是在不断变化的，然后根据这个变化利用图层的prerender和postrender事件，裁切掉原来宽度减去现在宽度的那一部分，那么就剩下了现在新的图层。另外使用到的核心原理其实还是裁剪。根据中间分割线的位置，计算位于上层的图层的宽高，然后重新渲染，这里的上层的意思就是按照zindex的顺序，位于上层的那个图层。那么根据这个原理我们还可以实现任意的裁切，比如我们如果想实现上下的卷帘对比也是相当的容易，只需要实时计算滑条的高度即可。

接下来我们需要准备一个用于“抠”地图的几何图形，通常这个几何图形数据都是geojson格式的，一般来说都是行政区划的geojson数据。1.这个裁剪的过程要发生在图层的预渲染阶段，也就是上面代码中监听的prerender，在栅格图层渲染之前，裁掉一部分无关紧要我们不关心的栅格。2.在进行裁剪之前要把用于裁剪几何图形的样式设置为透明的，因为如果不这样做，你会看到每次刷新页面都有颜色在闪烁，也就是图层预渲染阶段显示出了裁剪图形的颜色，这当然是要避免的。在这里我们就以天地图为例子来演示一下如何实现裁剪。

对于矢量图形的绘制渲染部分，底层调用的是canvas 的stroke(),fill()等方法，这些方法熟悉canvas的朋友都知道是用来绘制线条，绘制面的。相比于单纯的canvas，webGL拥有了三维空间的概念，可以设计出xyz的笛卡尔坐标系。包括前端现在最流行的开源三维框架cesium也是采用类似的架构，甚至cesium比mapbox在三维方面更加的精细和丰富其实有的时候渲染一幅地图也并不需要这么复杂的架构，只是简单的加载几个图片，简单的加载几个图形，其实像我们最初讲的使用svg也是够的。

geometry字段用来记录这个地理要素的图形信息，我们刚才在上面讲过，地理要素分三种：点，线，面，因此我们还需要一个字段来记录这个要素的类型，所以在geometry字段下面还有个type字段，点要素的type就是。geojson数据在我们的webgis领域扮演了非常重要的角色，从服务端数据存储，网络传输，前端数据渲染，贯穿了整个链路，geojson标准被所有的地图框架所支持，所有前端地图框架在渲染canvas图形的时候也是依据这个标准的，因此掌握geojson，理解透彻geojson是非常重要的。

如果你关注的是地图的美，前端渲染的炫酷，强调展示层面，那你选择mapbox准没错，如果你的地图应用有很多客户提出的个性化需求，对地图有很多频繁的操作需求，那你不妨试试ol，如果你要做移动端的app，可以使用leaflet，如果你要支持国产，那你也可以使用maptalk。maptalk的缺点在于稳定性不是很好，性能上与其他几个框架相比也稍微有点差，毕竟国内开源的，而且还是由个人编写的，背后没有资本的注入，确实没办法将框架有质的提升，不过对于新手练习，简单地图应用的构建还是完全够用的。

openlayers默认支持的坐标系有4326（基于美国wgs84坐标系）和3857（墨卡托投影）两种。但是我们国内在使用的时候非常的不便利，国内大多数的数据和产品大多是基于4490（GCGS2000坐标系）的，所以我们需要把openlayers进行扩展和变化，让其支持4490坐标系。...

这个方法很重要，而且经常用到，意思是飞行至某个要素feature，这个要素可以是一个点，一条线，一个面，如果是飞行至点就是点坐标，飞行至面或者线就是对应的面的extent，也就是范围坐标，在飞行的过程中还可以设置飞行动画时间duration，设置地图的缩放级别maxZoom或者maxResolution，注意这里只能是最大级别或者最大分辨率，也就是飞行结束时地图的级别或者分辨率。注意他的参数有两个，你可以以字符串的形式传入一个地图需要挂载的dom元素的id，也可以直接声明一个dom的js对象传入。.....

上篇文章介绍了Vue-cli工程如何与cesium框架做整合。这篇文章我们来介绍一下如何与OpneLayers做整合。安装node环境，搭建vuecli工程的过程和前一篇文章一样，如果不会可以戳这里。我们还是用vs code打开上篇文章中说的cesiumtext文件夹，先来一句命令把openlayers依赖包引入vue-cli工程里：npm install ol对，你没看错，就这么简单一个命令，就把ol引进来了，接下来我们用一个示例介绍一下具体的业务代码怎么写。我们打开openlaye

OpenLayers是一款开源的前端地图框架。它几乎能够解决绝大部分前端地图开发过程中的需求。这篇文章我为大家详细解读一下OpenLayers。首先，来看一张图，接下来我介绍的文字大家再阅读的时候可以对照着这幅图来理解。1.一副地图的核心当然是地图本身，任何框架和设计都是如此。OpenLayers（以下简称ol）也不例外。map类是整个框架的核心类，其余的类和接口都是围绕着map类来设计的。 如上图所示map包含了常用的6大方面，首先是view，视图。这个类相当于人的眼睛，它定义了...