![](https://img-blog.csdnimg.cn/f4e0959540474e07b6a1f651986839b9.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
openlayers
文章平均质量分 66
整理的本人文章,非系统性教程.
liuqing0.0
这个作者很懒,什么都没留下…
展开
-
openlayers 绘制tin数据导文
为何会有此篇文章?因为其实陆陆续续有后来者踩到了这个地方。之前一段时间还需要关注我才能阅读的时候时不时的就有小红点提示。经过这么几个月的成长,我意识到里面仍有不少糟粕所在。起码来说,作为一个DEMO,你可以通过它去完成你的工作。但在实际应用上就会产生比较巨大的麻烦:各种意义上的。此篇作为导读,将在一个更高的层面上去理解、从我为什么如此想,以及代码里的优化处理。基本无代码,仅作为思路参考。如果你正在进行如题方面的研究、尝试,你应该会有所收获。...原创 2022-08-31 14:44:34 · 366 阅读 · 0 评论 -
openlayers、cesium 使用散列点数据绘制canvas图像
前言:我并不知道后端处理的是什么后缀的文件。我这里需要使用的只有一些属性值。形状如下。最终成品图如下:如你所见最终的结果是一个扇形图。这是由数据本身决定的。在进入正题之前,先说明这图着色的具体的原理。先上代码class ColorRangeMaker { option = {}; constructor(option) { let vRange = option.value[1] - option.value[0]; if (option.col原创 2021-12-26 17:39:45 · 1231 阅读 · 0 评论 -
openlayers 根据复选框 绘制台风路径 (阉割无特效版)
http://typhoon.zjwater.gov.cn/default.aspx首先先去别人的网站扒几个json文件下来测试。绘制台风路径/** * 画出台风路径 * @param {fakeData} 通过json文件的假数据 * @param {diff} 新增的台风名字 */ drawTyphoonPath: function (fakeData, diff) { console.log(fakeData); let原创 2021-04-02 12:00:57 · 868 阅读 · 0 评论 -
openlayers 在圆的边上添加文字
前言: 折磨了好几个小时,终于做出了正确的效果,如果你也受苦于使用circle 生成 通过offsetX或者Y 文字始终不能到他准确的位置,那先恭喜你,至少你获得了一种可以实现的方案。问题描述我们需要实现如图所示的范围扩散的圆,同时需要准确的显示在圆的边上的文字,至于颜色。。这个想必不用我多提。主要思路如果offsetX、offsetY 文字 不可以到达圆的边上也就是我们想要的准确的位置,那我们是否可以通过获取coordinator坐标,去通过这个坐标实现这个文字的正确显示位置,结论是可以,因为原创 2021-05-07 10:47:24 · 2627 阅读 · 0 评论 -
openlayers 关于使用EPSG:4326投影造成地图卡顿的解决方案
前言: 首先先说明场景,由原本的EPSG:3857投影,转换为EPSG:4326,本来感觉挺简单的,把View的projection这么一换不就成了么?结果,又发生了一些问题,原本的一些feature没被显示了。接着修改fromLonLat,把它去掉,接着问题就产生了,地图出现了严重的卡顿,于是乎一个一个查找,终于找到了问题所在。解决圆接收的coords得是3857,通过这个3857转换到4326投影出来。别问我为什么,我也不知道为什么这么改,反正他就是解决了。...原创 2021-05-20 18:15:19 · 1804 阅读 · 0 评论 -
openlayers 6+版本绘制风场粒子效果
杂话:虽然还是解决了问题了,写文章写博客还是不要做复读机了,给我恶心坏了。前言:需求不高,就是要做一个风场的粒子效果。大概长这样,线宽、颜色、快慢、数量等 都可以通过配置修改需知首先数据是要准确的。长这样。通常这种数据叫做gfs 。我会在本文底部提供一份测试数据。header 里面就是一系列的描述信息,接着 安装ol-wind 包。npm install ol-wind --save ORcnpm install ol-wind --savenpm包的示例如下上图取自h原创 2021-11-12 17:48:56 · 2405 阅读 · 9 评论 -
openlayers 给数据点(散点)添加点击事件 和hover事件
前言:由于本人也是最近才开始学习openlayers,如说明的有所不对,请在评论区指出。1、点击事件/** * 捕捉点击事件 */ featureClick(callback) { let _this = this; let selectPointerClick = new PointerInteraction({ handleDownEvent: function(ev){ let pixel = ev.pixel原创 2021-03-19 18:31:06 · 7636 阅读 · 2 评论 -
openlayers 结合echart 完成交互事件
前言:事先说明,以下相关代码实现了点击echart中的series line ,也就是那种标记点 包括label,然后在地图中显示该数据。同时由于封装有相关的方法我也不想写的又臭又长,希望你们能从代码中有些收获,你不能直接拿来就用,如果觉得我的思路还可以请结合自身业务进行改动,这里先交代一下我的业务:点击echart中的标记点后,在地图的要素位置中显示该数值。这其中由于这个feature里面已经存在text,所以得额外的去增加text,看图。这个实现的思路让我思考了几个小时,先说说思考的路程,首先我是打原创 2021-04-30 09:56:43 · 578 阅读 · 0 评论 -
openlayers 使用天地图 切换图层
前言: 刚开发完一个模块,主要的功能都是由openlayers实现的,写篇博客,一个是为后来者指引条明路(前端的大佬们都只喜欢讲理论,我不喜欢理论,我只喜欢实现的过程,所以这篇文章我只会告诉你怎么实现。同时作者的水平也不高,没有达到做封装的地步,如果你觉得简单,那就再好不过了。),二是给自己做个总结。看不懂?没关系,我也看不懂,但相信你有过openlayers的使用你应该能知道这个WMTS是什么。他在官网的有些实例加载地图的时候不是等到地图初始化完毕直接渲染的,而是通过一个一个预定义图块进行渲染的。了原创 2021-04-02 11:16:25 · 1763 阅读 · 0 评论 -
openlayers关于ol-wind的层级堆叠问题失效的解决方案
前言: 因为项目需求有洋流、海浪、风场,3种粒子效果,所以需要根据zIndex去判断当前粒子的层级是在底图上方还是在底图下方。但是这里会发现一个怪问题,按照正确的zIndex 去设置得不到正确的结果。不啰嗦,直接说解决方法来源: https://github.com/sakitam-fdd/wind-layer/issues/73解决方法在生成图层的时候显示的写上属性 className 即可。...原创 2021-11-15 17:54:01 · 900 阅读 · 0 评论 -
openlayers 其他坐标系散列点绘制图像
前言: 照道理来说应该是与昨天刚写的那个是差不多的。不过实现上略有曲折。上一个是以canvas为核心,先画出正确的图像再渲染至地图上,而这次是直接把这个由点组成得到图像绘制到地图上。所以不可避免的,我们只能使用ol原生提供的大量数据的渲染API。首先请确认你的版本存在WebGLPointsLayer ,在ol/layer目录下可以找到webGLPoints,就说明存在。https://openlayers.org/en/latest/examples/webgl-points-layer.html。从这原创 2021-12-27 15:20:43 · 616 阅读 · 0 评论 -
openlayers 雷达回波的实现
前言:本文不包含html 跟css代码 ,相关的样式调整自行编写并且处理,主要是实现一个完整的流程:点击播放,地图上响应得显示贴好的图片。首先给部分截图说明。这里稍微解释下为啥默认是最后一个,因为公司领导这么说,我也不知道就照着来呗,要改也不是什么难题。相关实现观察一下相关要素,有active-class , 动态生成的时间,上一个回波,下一个回波,开始播放。我们一个个介绍。首先该注意interval的处理,在interval 期间禁止再次点击避免过程中因为函数依赖于组件中的状态而导致出现bug。原创 2021-04-29 11:59:47 · 1580 阅读 · 4 评论 -
openlayers 视频图层加载
前言: 前段时间有看到高德地图上有个视频图层,而恰好OL上又没有的时候,突然萌生了一个写个插件怎么样的念头。于是乎,说干就干。 ol-video目前还不是一个涵盖有很多功能的ol插件,我应该会后续更新?os: 大概有鱼可摸的时候,恰好想到写了个这么玩意的时候。npm 地址https://www.npmjs.com/package/ol-videool-video 是基于HTML5 Video Element进行渲染至ol地图上的一个插件,因此所有对DOM的操作都会实时的反应到该视频图层中。 为此如果你需要对原创 2022-06-09 11:53:30 · 479 阅读 · 0 评论 -
openlayers 绘制动态迁徙线、曲线
前言:本来懒得写这个博客,实在深感无聊,没啥事情做,出篇博客让大家看看。文章会尽可能简短。掉帧属录屏效果,尚未测试过性能,因为这个可以看自己调节。以下为一条贝塞尔曲线分了180段的效果描述。颜色属于瞎编乱造,只为示例,不为效果负责。1、先生成起点与终点的表示点。这个很重要,原因在于:openlayers 会智能的检测图层中的数据源(source)是否有需要更新的features,如果你没有设置features,或者不在视图内,是不会触发渲染、因此,也就不会触发我们需要的prerender事件。2、监听原创 2022-06-23 17:51:17 · 4123 阅读 · 4 评论 -
openlayers结合原生webgl 图像的动态绘制tin数据保持清晰度(南极坐标系、北极坐标系的转换处理)
前言: 本文基于上篇文章的基础开始。如果没看过我的上篇文章,请移步。效果转换成webgl坐标系所需的地理知识南极坐标系如下图所示北极坐标系的 如理 相反北极坐标系如理相反也就是说 假如我们得到一个坐标系正确的结果,另一个就是调调正负号了。下面以南极坐标系为说明。经纬度坐标转换成南极坐标的显示坐标(将度数改为数字)计算原理如下图所示特别注意,以下代码只保证南极坐标系第四象限求得角度没问题,由于暂时我也只用到了第四象限得处理,所以没有对其他的去算角度。请跟着上图原理自行计算。或者根原创 2022-03-30 16:31:57 · 1168 阅读 · 0 评论 -
openlayers结合原生webgl 图像的动态绘制tin数据保持清晰度
前言:此文章的内容涉及两个部分内容,主体为webgl内容,主要提供一个思路、解决方案。相关的需求是这么回事: 地图放大缩小时,图像不能失真。即:缩放有图像颜色的那一部分时,不可以失真。也就是说不能贴一张静态的图片,而需要监听地图的缩放、拖拽,动态的绘制当前视口内的图像。下图为实际效果。转载请著名出处。原生webgl绘制tin数据一个webgl的渲染环境 应该包含:着色器的设置、缓冲数据的设置、根据数据绘制,渲染该图像。着色器设置以下代码做了:1、将着色器的代码赋给shader。2、编译原创 2022-03-25 10:54:07 · 1708 阅读 · 0 评论 -
openlayers 绘制台风风圈(准确版)
闲言: 这个问题的一开始是最近几天的那个啥子台风有登陆湛江,然后我负责的项目刚好处在上线边缘(就是能用跟不能用之间反复跳跃),风圈的实现一开始是跟着LZUGIS 大佬 的 思路写的,当然,我也不知道为啥这么写就行。然后我也发现了一个问题就是说,首先就是绘制的圆弧位置不对,第二个是准确度不够,不过这么一琢磨,人家也说了简单的实现算法,有点问题也属实正常。直到我搜索台风路径,发现嗯,我艹,好精准,秉着好奇的心F12,是用SVG写的,框架用的也不是ol。。。emmm,网上又没有相关的现成的,这里就得说一句了,ol原创 2021-07-24 23:44:53 · 2013 阅读 · 0 评论