![](https://img-blog.csdnimg.cn/20190918140053667.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
openlayers开发
文章平均质量分 86
介绍基于openlayers的地图功能开发
此爱如少年
不学习就是落后
展开
-
openlayers中更简单的加载wfs服务的方式
注意:这时 bbox是放在CQL_FILTER参数里面的。即可以通过createXYZ生成瓦片区域,然后传到url函数里面,通过bbox参数加到url地址上。在之前我介绍过openlayers中通过wfs服务加载矢量数据的方法,通常我都是按照这种方法来使用。在翻看openlayer官方示例后,发现其实还有其它的方法。如果要加属性查询条件,可以给url上带上CQL_FILTER参数。openlayers中更简单的加载wfs服务的方式。直接给出url来加载。原创 2023-02-09 09:19:33 · 1648 阅读 · 0 评论 -
利用Openlayers4实现地图遮罩效果(三)
文章目录前言完整代码效果代码解读完整项目代码(含测试数据)前言之前写的关于利用openlayer创建遮罩的文章(原文),那篇文章主要是讲如何创建一个四周遮罩(即四周外围遮罩但露出目标中心区域)。后面有很多同学在留言,说按我的方法,遮罩出不来或者运行报错,甚至私信在线求解。的确,那篇文件的代码确实写的有一些漏洞,因为是作为示例给大伙演示,追求简单,希望大家明白实现原理,而没有对输入数据、地图坐标系等这些依赖用户环境的问题,进行统一处理。但是大伙在使用时,生搬代码,就很容易出错。因此,今天抽空升级下之前原创 2022-01-29 09:44:08 · 3279 阅读 · 7 评论 -
如何快速将openlayers6官网示例本地化
openlayers官方提供了很多示例,非常值得阅读学习。但是在学习过程中,如果光只是看它的代码,简单一些的示例还好,遇到复杂的示例,我们势必要通过代码调试工具,才能更加具体的了解到其背后的逻辑。目前,openlayers3、openlayer4、openlayer6官网示例页面都提供编辑功能,点击页面上的Edit可以打开在线编辑器,去编辑修改代码。openlayers5示例页面没看到Edit。在线编辑器虽然很方面,甚至不用注册也可以用。但偶尔会受网络的限制,甚至无法打开。从openlayrs5开始,原创 2021-11-10 17:59:38 · 793 阅读 · 0 评论 -
开源的前端GIS空间分析库介绍 (三)turf与ol结合
前言turf是mapbox出品的前端空间分析库,管网:http://turfjs.org/turf库中包含的空间分析计算功能比较多,也非常简单易用。相比于jsts,turf的官方文档维护的非常好,非常利用学习。turf读写数据采用的是标准的geojson格式,所以在余其它webgis的库做交互时也非常方便。接下来看下openlayers(简称ol)与turf结合使用的方法。安装和引用turf的安装引用可以参考《开源的前端GIS空间分析库介绍 (一)jsts与turf》openlayers的安原创 2021-10-04 21:43:20 · 3156 阅读 · 2 评论 -
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 · 4893 阅读 · 2 评论 -
vue项目中在openlayers地图上展示echarts图表
思路:1、创建一个地图组件mapView,使用openlayers进行地图展示2、创建一个图表组件chart,用于呈现图表3、创建一个overlay组件,在模板中使用chart组件;利用openlayers的ol.Overlay类来把overlay组件添加到地图上。示例代码1、数据以这次新冠病毒数据为例,这里是今年2月份全国新增新冠肺炎患者的数据(数据源来自百度),分为全国的新增数量和...原创 2020-03-07 22:47:15 · 2483 阅读 · 9 评论 -
Vue结合Openlayers示例
文章目录1、简单示例1.1创建一个mapView组件1.2 创建一个Vue实例,并注册mapView组件1.3在页面中应用2、地图配置3、npm 构建3.1 安装openlayers3.2 在mapView组建中导入相关模块1、简单示例先看下以引入< JavaScript >的方式的使用方法1.1创建一个mapView组件mapView.jsexport default {...原创 2019-10-19 11:13:58 · 8860 阅读 · 2 评论 -
openlayers图层开关控件
openlayers2自带图层开关控件,但是自openlayers3后,不再有这个控件。但是,当了解了openlayers控件开发后,我们可以自己实现这个控件,实现起来也非常之简单。不多说,先看下结果:1、目标1)图层开关: 在控件上选中图层,对应的图层显示;取消选中,对应的图层关闭;2)图层增删联动: 当map中的图层有增删时,控件随之改动。2、控件开发1)继承图层开关控件类:ol...原创 2019-07-27 20:50:53 · 2112 阅读 · 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 · 2256 阅读 · 0 评论 -
openlayers绘图功能实现画点、折线、圆、多边形、矩形
绘图是webgis前端开发中很多见的一个需求,在openlayers中,包含一个ol.interaction.Draw类,提供交互式绘图功能,用起来较为方便。1、ol.interaction.Draw类ol.interaction.Draw是openlayers交互式操作中的绘图操作类,支持绘制常见的一些几何图形,如点、折线、多边形、圆、矩形等等。先来看下实例化一个Draw类的参数。这里重...原创 2019-07-13 10:58:52 · 10673 阅读 · 12 评论 -
openlayers4 自定义矢量图层的样式
点样式图标ol自带的简单符号字体标注样式线样式面样式原创 2019-02-19 22:48:32 · 6735 阅读 · 2 评论 -
openlayers4实现的点动态扩散
爽肤水原创 2019-01-06 12:45:09 · 1672 阅读 · 5 评论 -
利用Openlayers4实现地图遮罩效果(二)
之前实现的遮罩效果,在深色背景的底图上,对要突出的区域采用半透明遮罩,以此来突出该区域。但是有时底图颜色偏白,这时候不再适合对要突出的区域采用遮罩,而是要对突出区域之外进行遮罩处理。两种效果的对比入下图:...原创 2019-06-27 22:23:00 · 5825 阅读 · 25 评论 -
利用Openlayers4简单实现地图遮罩效果(一)
地图遮罩通常用来突出显示某一块特定区域,先来看下效果。原理:在原地图上增加一个图层,并使用半透明的样式。var map,baseLayer;//定义图层样式var mystyle = new ol.style.fill({ fill: new ol.style.Fill({ color:&quot;rgba(72,61,139, 0.2)&quot;, }), st...原创 2018-12-23 19:56:42 · 6613 阅读 · 3 评论 -
Openlayer4中实现基于Geoserver的WFS服务GetFeature的查询请求
在使用地图时,有些图层,只有在有需要的时候才进行展示,甚至希望能将带坐标的地图数据从服务器上取到本地,进行操作,进行渲染等等。WFS服务可以满足这一需求。WFS服务怎么创建?其实同WMS一样,可以在Geoserver中进行发布。发布的过程,网上非常多。以下简单记录下,在服务发布后,使用Openlayers来调用WFS服务的方法。常用的有两种方法:1、利用Openlayers4封装的类ol.f...原创 2018-12-13 22:20:51 · 2288 阅读 · 2 评论 -
Openlayers4加载WMS地图
ol4加载地图最基本的方法准备工作1、shp文件2、geoserver发布图层var map,wmsLayer;function initMap(){ wmsLayer = new ol.layer.Tile({ source: new ol.source.TileWMS({ url: &amp;amp;amp;quot;http://localhost:8080/geos...原创 2018-12-13 21:25:02 · 6430 阅读 · 0 评论