![](https://img-blog.csdnimg.cn/630236f0048244b694b5c75021a26037.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
OpenLayers入门与实践
半路学习入门webgis,自学了gis知识,非相关专业毕业,有不对的地方多多理解,感谢指正。本专题为OpenLayers的入门知识及部分在实际工作中的应用总结,一是归纳总结自用,二是希望能帮到后来者入门并应用。
阿发博客
.net c# arduino java Android webgis
展开
-
openlayers-20-根据特征元素(多边形等)将地图缩放至合适大小,使得所有特征元素在地图上可见
当进行拉框查询,或者生成了某些多边形后,往往需要将地图的缩放层级和视角跳转至查询结果处,或者是将地图缩放至合适的层级和位置以是的生成或绘制的多边形在窗口中显示适中。主要是借助于fit()方法,该方法用于调整地图的视图范围以适应给定的地理范围或一系列要素。该方法会计算给定的范围,并更改地图的缩放级别和中心,以便所有内容都可见。原创 2023-12-12 22:33:40 · 1079 阅读 · 0 评论 -
openlayers-19-分屏对比
分屏对比实现很简单,定义两个map对象,然后让这两个map对象共用一个view即可。//ol.layer.Tile:是一个瓦片图层类,用于显示瓦片资源。//source是必填项,用于为图层设置来源。//地图初始中心点(经纬度)//实例化Map对象加载地图。//创建天地图矢量注记图层。//地图容器div的ID。//地图容器中加载的图层。//地图容器div的ID。//地图容器中加载的图层。//创建天地图矢量图层。"天地图矢量注记图层"//创建天地图影像图层。//地图初始显示级别。原创 2023-12-11 22:27:45 · 1024 阅读 · 0 评论 -
openlayers-18-聚合显示补充(切换聚合与非聚合状态)
openlayers 实现落点聚合,并能切换 聚合与非聚合状态原创 2023-09-28 22:36:27 · 569 阅读 · 0 评论 -
openlayers-17-卷帘对比
实现卷帘对比功能,没有进一步测试版本兼容问题,不错从ol的官网来看,ol5之前的版本的示例与ol5及其之后的版本示例并不相同。看下图,对canvas进行clip的时期不一致。原创 2023-09-17 01:47:58 · 292 阅读 · 0 评论 -
openlayers-16-添加一组轨迹动画
下面的代码仅作为思路参考,还欠缺很多细节,比如在进行插值计算时,还需要判断经纬度坐标差,选择差值大的作为已知项计算插值,这样会避免一些bug并让计算的插值数据更平滑。还有如何把示例中的圆点改为箭头,并计算箭头的方向与线的走向一致等等一些问题。如果有时间,后期会整理一个更加具体的,可以直接移植使用的demo。实现一组动画,即根据一组只有起止点坐标的线段,实现点在这些线段上较为平滑的移动,移动速度和平滑程度均可控制。原创 2023-09-01 22:20:03 · 551 阅读 · 0 评论 -
openlayers-15-坐标添加带箭头的线
ol的官网示例中有绘制带箭头的线的demo,那个是交互式绘制,而不是根据经纬度坐标添加,在其基础上稍作修改,即可转为通过经纬度添加带箭头的线的功能,线和箭头的粗细大小样式都可以自定义。原创 2023-08-31 22:39:24 · 679 阅读 · 0 评论 -
openlayers-13-轨迹回放
openlayers实现 轨迹线的加载、轨迹跟随播放、速度控制、暂停播放、继续播放的功能。原创 2023-05-16 00:05:27 · 924 阅读 · 0 评论 -
openlayers-12-标注动画(报警点扩散显示)
本章节在第9章节-添加图文标注的基础上进行了修改,标注动画,尤其是作为预警预报标记是一个不可或缺的功能,这里借助于现有的 flash-marker.js 库来实现,这个js文件是未压缩的,可以自行修改内部代码,闪烁的原理就是通过canvas绘制图形,进行循环删除重绘。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8JrQ4Ufo-1684166832589)(/upload/2023/02/%E9%97%AA%E7%83%81%E6%A0%87%E6%B3%A8.png)]原创 2023-05-16 00:04:16 · 537 阅读 · 0 评论 -
openlayers-11-聚合显示
聚合显示的关键在,ol.source.Cluster,这是聚合标注图层,需要先实例化该类在添加图文标注的基础上,添加一个中间数据源,即聚合标注类,添加图文标注中,是先创建矢量标注数据源(vectorSource),然后创建矢量标注图层(vectorLayer),最后将矢量标注数据源添加到矢量标注图层,也可以在创建矢量标注图层时制定source属性为矢量标注数据源,具体请看 添加图文标注 章节。总的来说就是。原创 2023-05-16 00:01:51 · 719 阅读 · 0 评论 -
openlayers-10-点击图文标注显示pop弹窗
该功能依赖于Overlay对象,即一个覆盖层,首先需要在实例化Overlay对象时,指定一个html元素作为承载体,该html元素的样式及内容都可以自定义,内容也可以根据被点击对象的不同动态修改,其实就是通过js或jq操作dom对象。具体的直接看代码吧。依托上一章节中说到的图文标注,鼠标左键点击该标注,弹出一个窗口出来用于介绍展示被点击元素的详情。原创 2023-05-16 00:01:17 · 936 阅读 · 0 评论 -
openlayers-09-添加标注(文字+图片)
以上顺序也可以进行调整,可以先实例化标注对象,在实例化矢量图层时直接将 标注对象放在矢量图层源的features属性中,而不是调用addFeature()方法,后期进行添加。同理,在实例化map对象时,直接将矢量图层添加到map对象的layers属性中,而不是在后面调用map的addLayer()方法添加图层。在地图上添加标注,大概分为三步。原创 2023-05-16 00:00:33 · 3328 阅读 · 0 评论 -
openlayers-08-交互式绘制-任意绘制(徒手绘制)
任意绘制与上一章节的绘制图形的区别就是,任意绘制图形是按住鼠标拖动直接形成绘制的元素,而绘制图形是预先设置好要绘制的集合图形,比如长方形,只能绘制长方形。在代码上的区别就是是否开启freehand 属性。原创 2023-05-15 23:59:13 · 175 阅读 · 0 评论 -
openlayers-07-交互式绘制-绘制图形
openlayers交互式绘制-绘制图形。原创 2023-05-15 23:58:36 · 264 阅读 · 0 评论 -
openlayers-06-坐标添加点、线、面
openlayers坐标添加点、线、面。原创 2023-05-15 23:57:27 · 2737 阅读 · 0 评论 -
openlayers-05-地图基础操作
【代码】openlayers-05-地图基础操作。原创 2023-05-15 23:56:32 · 806 阅读 · 0 评论 -
openlayers-04-地图控件
ol提供的地图控件比较常用的包括:鼠标位置、比例尺、鹰眼、图层缩放滑块。注释中有详细的介绍,不再赘述,有问题留言吧。直接通过代码来讲解体会一下会更加直观。原创 2023-05-15 23:54:40 · 472 阅读 · 0 评论 -
openlayers-03-引入地图
目前我工作中的主力使用的版本是ol5.3,这个版本可以直接在html中使用script引入ol的完整的js包,后期的。ol6.x-ol7.x 从6.0开始,ol不再向后兼容,组件化,降低内存,更多的webgl的支持等等。在网页上加载显示天地图,天地图对于搞gis的各位来说应该不算陌生,我就不介绍了。从版本4.x-7.x基本逻辑架构其实还是一样的,只是组织实现形式不同。ol2 最早也是流行很广的一个版本,不过这个版本随着js的不断迭代,已经显得力不从心了;开始之前,先介绍下当前ol的各个版本的不同。原创 2023-05-15 23:54:13 · 603 阅读 · 0 评论 -
openlayers-02-认识OpenLayers
openlayers是什么原创 2023-05-15 23:39:58 · 87 阅读 · 0 评论 -
openlayers-01-写在最前
本专题计划以openlayers的入门知识为主,并穿插一些在实际工作中遇到的一些问题的解决方法。计划有如下内容,后续会继续补充。原创 2023-05-15 23:34:10 · 69 阅读 · 0 评论