Openlayers4笔记
文章平均质量分 95
此爱如少年
不学习就是落后
展开
-
openlayers调起WFS服务进行增、删、改操作及相关问题汇总
前言openlayers中提供了通过wfs服务操作后台数据的方法,对应的方法为ol.format.WFS类的writeTransaction方法。以下通过简单的示例来了解下。示例中的wfs服务来自geoserver一、简单示例-1、通过wfs服务获取数据// 服务配置,命名空间、图层、服务地址等var geoserverData = { wsName: 'topp', uri: 'http://www.openplans.org/topp', wfsURL: 'http://loca原创 2021-03-09 22:35:08 · 4728 阅读 · 2 评论 -
openlayers中巧用canvas滤镜,自由切换你的地图风格
前言高德地图、百度地图等等图商现在都提供一些自定义地图风格,用户可以自己设计地图样式,这样使得地图使用灵活了很多。百度地图个性化编辑平台高德地图自定义地图从openlayers3开始,其底层渲染从SVG切换到了canvas,据说渲染效率提高了不少。在canvas上,我们可以实现很多比较炫酷的可视化操作,如之前的空气质量态势图、动态风场等等。...原创 2019-08-21 22:27:23 · 4938 阅读 · 19 评论 -
分享自己最近做的一些前端地图可视化作品
1、动态风场核心算法来自网络上的leaflet风场插件,加以调整,迁移到openlayers地图中。2、空气质量渲染3、流线原创 2019-08-08 22:03:37 · 2469 阅读 · 4 评论 -
openlayers图层开关控件
openlayers2自带图层开关控件,但是自openlayers3后,不再有这个控件。但是,当了解了openlayers控件开发后,我们可以自己实现这个控件,实现起来也非常之简单。不多说,先看下结果:1、目标1)图层开关: 在控件上选中图层,对应的图层显示;取消选中,对应的图层关闭;2)图层增删联动: 当map中的图层有增删时,控件随之改动。2、控件开发1)继承图层开关控件类:ol...原创 2019-07-27 20:50:53 · 2101 阅读 · 0 评论 -
openlayers实现自定义绘图控件实现类似ArcGIS绘图工具条
接前一篇《》,绘图功能虽然实现了,但是仅仅开发到这里,做Demo还行,如果要应用到项目中,显然是不太灵活,因此,将绘图功能封装到控件中,作为工具,将更有利于我们来使用。文章目录1、ol.control.Control类2、需求3、代码实现1)、继承2)属性方法3)按钮样式4、结果先来看下openlayers自带的控件。1、ol.control.Control类openlayers中所有控...原创 2019-07-13 14:12:02 · 2235 阅读 · 0 评论 -
openlayers绘图功能实现画点、折线、圆、多边形、矩形
绘图是webgis前端开发中很多见的一个需求,在openlayers中,包含一个ol.interaction.Draw类,提供交互式绘图功能,用起来较为方便。1、ol.interaction.Draw类ol.interaction.Draw是openlayers交互式操作中的绘图操作类,支持绘制常见的一些几何图形,如点、折线、多边形、圆、矩形等等。先来看下实例化一个Draw类的参数。这里重...原创 2019-07-13 10:58:52 · 10618 阅读 · 12 评论 -
利用Openlayers4实现地图遮罩效果(二)
之前实现的遮罩效果,在深色背景的底图上,对要突出的区域采用半透明遮罩,以此来突出该区域。但是有时底图颜色偏白,这时候不再适合对要突出的区域采用遮罩,而是要对突出区域之外进行遮罩处理。两种效果的对比入下图:...原创 2019-06-27 22:23:00 · 5743 阅读 · 25 评论 -
openlayers4 自定义矢量图层的样式
点样式图标ol自带的简单符号字体标注样式线样式面样式原创 2019-02-19 22:48:32 · 6691 阅读 · 2 评论 -
openlayers4实现的点动态扩散
爽肤水原创 2019-01-06 12:45:09 · 1659 阅读 · 5 评论 -
利用Openlayers4简单实现地图遮罩效果(一)
地图遮罩通常用来突出显示某一块特定区域,先来看下效果。原理:在原地图上增加一个图层,并使用半透明的样式。var map,baseLayer;//定义图层样式var mystyle = new ol.style.fill({ fill: new ol.style.Fill({ color:"rgba(72,61,139, 0.2)", }), st...原创 2018-12-23 19:56:42 · 6581 阅读 · 3 评论 -
基于PostGIS+PgRouting的最短路径查询的实现(三):Openlayers篇
上一篇 完成了最短路径服务发布,接下来记录下Openlayers中如何使用该服务。其实这个服务同其他的Geoserver图层类似,只不过多带了两个参数。在请求地图服务时,只要把这两个参数传入即可。可以使用WMS服务直接加载图片来展示结果,也可以使用WFS服务,把数据取出来再进行渲染。以下介绍在Openlayers中如何进行传参调用,示例使用Openlayers4版本。WMS方式加载var ...原创 2018-12-22 19:22:42 · 1841 阅读 · 1 评论 -
Openlayer4中实现基于Geoserver的WFS服务GetFeature的查询请求
在使用地图时,有些图层,只有在有需要的时候才进行展示,甚至希望能将带坐标的地图数据从服务器上取到本地,进行操作,进行渲染等等。WFS服务可以满足这一需求。WFS服务怎么创建?其实同WMS一样,可以在Geoserver中进行发布。发布的过程,网上非常多。以下简单记录下,在服务发布后,使用Openlayers来调用WFS服务的方法。常用的有两种方法:1、利用Openlayers4封装的类ol.f...原创 2018-12-13 22:20:51 · 2244 阅读 · 2 评论 -
Openlayers4加载WMS地图
ol4加载地图最基本的方法准备工作1、shp文件2、geoserver发布图层var map,wmsLayer;function initMap(){ wmsLayer = new ol.layer.Tile({ source: new ol.source.TileWMS({ url: "http://localhost:8080/geos...原创 2018-12-13 21:25:02 · 6423 阅读 · 0 评论