![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
OpenLayer
文章平均质量分 57
hpugisers
每天进步一点点,美滋滋
展开
-
Openlayer加载切片地图改变地图样式
数据是GIS的灵魂,没有数据GIS一无用处。在我国对地理数据管控极为严格,购买数据也是及其昂贵的,在webgis开发的过程种,为了节省成本一般选择加载第三方的底图,力图天地图、谷歌、OSM等。但是这些底图已经渲染成样式了。我们如何在改变这些切片的样式。接下来讲一下实现的原理及其过程:一、原理及其实现过程1、原理逐像素获取切片的rgba值进行赋值,从而改变切片底图的样式。2、如何实现在...原创 2019-07-18 20:18:24 · 1863 阅读 · 1 评论 -
OL3实现空间查询的代码示例
前言:在左开发的时候我们会用到空间查询,尤其在poi范围内的查询,该功能在arcgis api中有专门的类封装该功能,OL3和OL4中针对WFS服务,也可以实现该功能,需要结合WFS 和Filter共同完成。先看张图片:空间查询示例:青海、西藏、新疆一、代码示例 $("#boxQuery").on("click", function () { ...原创 2018-10-13 14:45:42 · 1180 阅读 · 0 评论 -
WFS—GetFeature方法
前言:WFS服务,可以通过OL进行加载,加载有简单方式也有GetFeature方式,该种方式自由度更大,可以结合一些过滤条件,这样一方面可以提高加载数据的效率,也是业务的一种。来张图效果图:红色是通过GetFeature加载,轮廓线是简单加载的,北京市的道路也是简单方式加载的。一、GetFeature方式(核心代码) // 创建一个请求 var fe...原创 2018-10-12 19:49:05 · 5388 阅读 · 3 评论 -
OL4中添加图标的两种方式的比较
前言:在ol中我们也可以添加一些图标在地图上,用于展示效果,较早期的版本OL提供一个overlay覆盖物的方式,在OL3和OL4中这种用法不太多了,一个主要的原因它是通过HTML的方式的添加到地图上,这种方式有一个很大的问题就是偏移,随着你放大或者缩小可以看到图标的位置明显偏移。主要的问题是overlay(覆盖物)主要以HTML的方式叠加到地图上。一、overlay(覆盖物)1.demo示...原创 2018-09-13 20:51:20 · 3133 阅读 · 0 评论 -
OpenLayer4实现自定义标注
前言:OL可以让我们实现自定义的标注样式,用过CAD的同学应该都知道CAD中有上下文字中间用横线隔开的样式,这样标注让人一目了然的了解信息。给人以直观的的信息表达,本文实现就是分式的标注。先来张图: 一、关于ol.style.Icon类该类中有一个img参数,该参数非常好用,该参数的输入类型为Image | HTMLCanvasElement,第二个类型就是canvas标签,作...原创 2018-09-03 20:44:38 · 3551 阅读 · 2 评论 -
OL4两种绘制台风圈方式的比较
前言:今天在一个群里面看到台风圈的,感觉很好奇,就想着能否用canvas结合OL4实现下,何为台风圈先来张图:一、实现原理1、先画上半圆2、在下半圆3、最后画半圆相接线关于canvas画圆弧知识点 arc(x, y, r, startAngle, endAngle, anticlockwise): 以(x, y)为圆心,以r为半径,从 startAngle弧度开始...原创 2018-09-08 20:54:33 · 2139 阅读 · 0 评论 -
OpenLayer加载百度坐标偏移问题解决(方案二)
前言:上一篇文章介绍了百度坐标加载在,天地图,OSM像这类的非百度地图的第三方地图,本文主要讲述的用加载百度地图作为底图这样我们不再需要坐标转你,但是在使用WGS-84坐标的时候,我们需要把他们转到BD-9坐标系上才能加载到地图上的正确位置。上一篇文章中,我们只需要转换百度坐标到WGS-84。我们在网上找到的加载百度的代码,大多代码是切片是由偏移的,我们虽然能够加载百度和显示,然后因为偏移,所以我...原创 2018-08-21 19:56:29 · 2456 阅读 · 6 评论 -
关于用OpenLayer实现加载高德地图实时路况的一个尝试
更新于2019-03-04前言:前一段时间,我在一个交流群里发了一个关于用python爬取百度地图的一个poi点,群里有一个人说,如果你能爬取高德地图的车流量我可以帮你介绍工作,帮一个大学教授那工作,我当时就想笑,爬取高德地图的车流量,兄弟你想多了吧。人家付费一年收你几十万,你居然想爬取,高德地图的实时路况他没有数据,返回的是切片,高德地图官方连切片地址都不想让你找到。废话不多说开始尝试。...原创 2018-08-23 10:01:46 · 5659 阅读 · 8 评论 -
OpenLayer4结合高德API实现地图选点路径规划
前言:路径规划也是WebGIS一个特点,我们在做某些应用的时候可能会用到路径规划的功能,该功能我们也可以自己实现,利用数据等,但是OpenLayer一大特色就是加载在线地图,向高德,百度等,这些地图都提供一些api接口供大家调用获取数据,在做路径规划的时候,刚开始用的百度提供的api,发现这个路径规划的真烂你都不好意去吐槽,最后换成高德api总体效果还算满意。废话不多说进入正文。先来张图:...原创 2018-08-22 15:18:58 · 4118 阅读 · 6 评论 -
OpenLayer4实现自定义地图聚类图层
前言:一直感觉不论OL还是arcgis 这个地图聚类是真的丑,实在让人看不下去,反观leaflet插件的的聚合效果那叫一个好看,个人感觉好看多了去了,那么把这个聚合效果用到OL上面去啊,这个是一个很好玩的事,本篇文章用到了自定义的聚类的扩展图层,感谢@牛老师源代码启发,在此基础上进行进一步的封装。先来张效果图:这张照片整的感觉都变形很多。其实一点没变形一、自定义扩展图层下载(git...原创 2018-08-26 17:28:46 · 2035 阅读 · 5 评论 -
OpenLayer4与mapV结合蜂巢图效果
在这里mapV是一款数据可视化的软件,数据的展示的效果灰常炫酷,但是问题来了,mapV是百度出的,是基于百度地图api做的,百度地图api是不开源的,说到是不是感觉很绝望,如果想做到mapV和OpenLayer结合,我们可以超图的一款api基于openlayer开发的api,刚好该api也结合mapV,我们可以间接结合二者。原创 2018-08-16 21:12:32 · 3870 阅读 · 6 评论 -
OpenLayer加载百度坐标偏移问题解决(方案一)
思路:方案一的问题就是解决百度坐标加载OSM地图或者天地图偏移的问题,我们通过百度api获取的坐标,用OL去加载的时候有坐标偏移的问题,百度坐标获取的是BD-9经过二次加密的坐标系,而OL是WGS-84要想不偏移我们应该将BD-9转到WGS-84,在这里我们用到了一个大牛编写的转换插件。插件地址:https://github.com/wandergis/coordtransform坐标不转...原创 2018-08-19 12:08:24 · 2388 阅读 · 2 评论 -
OL3实现图例的创建
前言:无需多说,是非常重要的,OL中并没有实现图例的控件,arcgis api中倒是有图例的模板,其实制作图例并不是很困难,我们只要做些函数封装,和做一些简单css设置就行,今天领导给我说已经很久没有更新博客了,所以今天要写一篇,最近发现一个问题,别人给我评论的问题,让CSDN给吃了,我也是无语。来张图:一、CSS样式设置 .info { ...原创 2018-09-28 20:45:10 · 731 阅读 · 4 评论 -
OL实现属性查询的功能
属性查询是很平常的一个功能,在这里实现的查询功能还是结合WFS服务的filter完成,用到的filter是new ol.format.filter.equalTo('name', value),filter就是完成各种过滤去查询数据,可以满足基本的查询需求。用了好长时间的geoserver感觉虽然没法像arcserver那么方便,但是基本的功能都可以实现,毕竟是开源的。一、主要函数/...原创 2018-10-14 15:11:37 · 1230 阅读 · 0 评论 -
OpenLayer+Geoserver+postgis实现路径分析
这几天一直在研究关于路径规划的问题,postgis也是现学现用,由于SQL的语法掌握还不错,postgis仅需要熟悉常用的函数就行,关于常用的postgis函数,我已经结合网上的一些资料写了一篇文章,关于做一些GIS的空间分析,我们有两种选择,一是选择geotools,二结合postgis,两者选一个即可,我发现postgis+geoserver组合,本质上还是通过geotools来实现的,废话不...原创 2018-10-08 19:19:35 · 6378 阅读 · 10 评论 -
OpenLayer使用css3滤镜效果改变切片地图的样式
css3有一个属性很好玩,filter(滤镜属性),可以做一些图片的滤镜和ps相同的效果,但是还和ps效果有些差距,如何将filter滤镜属性用到OpenLayer中?下面讲一下如何让通过滤镜的效果来改变地图底图切片样式。一、效果图1、滤镜前2、滤镜后看了上面是不是感觉好神奇,我们竟然可以改变切片地图样式。二、css3的filter属性值1 grayscale灰度2 s...原创 2019-07-09 15:26:20 · 3337 阅读 · 16 评论 -
Openlayer3专题地图另一种表述
在webgis中如果遇到这样一种需求:同时展现一点的某一要素某一属性的大小和属于哪一类,这里面涉及两个属性值的表述,该如何去直观的表述出来,下面介绍一种表述方式。效果图:一、原理将要素的符号大小通过属性A的值表现出来,将要素填充的颜色按着属性B归类(下面代码为了方便只通过一个属性来控制)。二、ol.style.RegularShape 类介绍这里面几个中的参数fill:就是填充颜...原创 2019-06-27 21:39:43 · 723 阅读 · 2 评论 -
Openlayers利用kriging.js实现纯前端插值
关于空间插值这一块,也是GIS一个重要的分析。前端可以通过turf.js后端可以采用contour,如果仅有少量数据需要进行插值分析并进行展示,那应当如何做?可以采用turf.js但是turf.js插值效果是真的烂。通过检索发现可以通过kriging.js去做。kriging.js是基于canvas实现的在OL中可以通过imagecanvas来实现。一、关于kriging.js1、GitH...原创 2019-05-24 18:14:26 · 15498 阅读 · 7 评论 -
OL4如何以TMS服务调用WMTS服务的缓存切片
加载地图切片有两种方式,一种是TMS服务,一种是WMTS服务,两种方式加载WMTS服务各有不同,如何用TMS加载geoserver生成的切片呢?一、TMS和WMTS区别1、协议TMS仅支持RESTFULWMTS支持 RESTFUL、SOAP 、KVPRESUTFUL请求形式:http://localhost:8080/geoserver/gwc/service/tms/1.0.0/...原创 2019-04-19 21:37:45 · 864 阅读 · 1 评论 -
OL4使用mapV
mapV是一款基于百度地图的地理信息可视化开源库,以前我写一篇文章是基于超图封装mapV和OpenLayers的框架来使用mapV,mapV1.0版本好像不支持OL,现在2.0版本基本支持流行的地图框架例如(Openlayers、LeaFlet、maptalk等等)百度是终于干了一会人事。下面讲解主要怎么用。一、引言github地址核心类new mapv.OpenlayersLaye...原创 2019-04-23 15:35:41 · 2371 阅读 · 5 评论 -
OL4加载geowebcache 部署的离线切片
部署离线切片,我们部署到SQLite数据库或者mysql,在这里我们部署到本地切片,切片下载是用的基于Gmap.Net下载器开发的地图下载器,详细的部署及下载器的使用见webgis离线部署效果:代码:<!DOCTYPE html><html><head> <meta原创 2019-03-17 16:20:40 · 1006 阅读 · 0 评论 -
OL4通过ajax加载geoserver中WMS的GetFeatureInfo实现点击查询(解决跨域问题)
有时候我们不想加载WFS服务来获取要素的属性信息,我们就想加载WMS或者WMTS获取属性信息,geoserver客户端给我提供一种实现是返回html,这种方式受限太大,如果能返回json格式的数据那多好!这样我们就可以自己定义展示的效果了,在这里我首先想到的是通过点击事件配合Ajax 来加载WMS的GetFeatureInfo,但是发现总是提示跨域问题,明明我都已经配置了跨域,怎么还会报这个错呢...原创 2019-03-03 11:26:18 · 2196 阅读 · 3 评论 -
Coverage [minx,miny,maxx,maxy] is [12, 4, 13, 6, 3], index [x,y,z] is [2, 5, 3]错误原因及其解决方式
加载矢量切片的时候会出现上述错误,为什么会出现上述错误呢?以前我也遇到过,今天有个人问我就在这写一下供他人参考。主要的原因是map中设置的坐标系和请求url中坐标系不一致。Openlayers解决方案 var map = new ol.Map({ layers: [osm, vectorTile], target: 'map',...原创 2019-01-11 21:09:56 · 3128 阅读 · 4 评论 -
OpenLayer加载GeoServer发布的WMTS服务
Openlayer对加载切片地图还是很友好的,加载第三方切片地图,提供了XYZ方式加载,如果需要加载本地的切片提供了ol.source.WMTS类,该类可以满足加载利用Geoserver发布的切片服务。效果图:一、瓦片网格对象 //切片策略 var tilegrid = new ol.tilegrid.WMTS({ extent: ...原创 2018-11-29 09:54:00 · 6121 阅读 · 0 评论 -
openlayer加载矢量切片
数据是GIS的灵魂,没有数据也就谈不上GIS了,数据分为矢量数据和栅格数据,栅格数据也有一些短处,缺乏灵活性、实时性,数据完整性受损是比较突出的问题,矢量数据不同于栅格数据,比较灵活,数据完整,将两者结合诞生出—>矢量切片,不要被矢量这个词迷惑,矢量切片是不可被编辑的,不可编辑不代表不能获取其属性信息。矢量数据的优点:矢量切片可以以三种形式呈现:GeoJSON、TopoJSON...原创 2018-10-28 22:05:20 · 5629 阅读 · 6 评论 -
OpenLayer修改WFS中的要素
就像arcgis api一样既然我们加载要素图层服务,我们应该既然加载要素,有时候我们需要修改他,增加一些矢量数据或者修改矢量数据,在这里我写的如何去修改数据。代码参考扯淡大叔的修改WFS的代码,但是中间出现了了一些问题,在这里指出。出现的问题如下图: 解决方案:1、 2、添加新规则3、选择工作空间---->选择...原创 2018-10-19 15:13:14 · 1746 阅读 · 0 评论 -
OpenLayer4实现卷帘效果
一、用途:卷帘效果在多个图层叠加的时候会用到。但是还想两个图层相互切换或者两个图层在一块,这个时候就用到卷帘效果,我们可以把这个卷帘做成一个label可以来回拖动,这样既可以达到控制效果,也很美观。先来张效果图:二、全部源码<!DOCTYPE html><html><head> <title>地图卷帘效果</tit...原创 2018-08-08 20:55:52 · 2619 阅读 · 2 评论 -
OpenLayer4结合高德地图API实现交通态势的获取信息
前言:昨天申请了一个高德地图的key值,本来想用来用python爬取高德地图的交通态势信息存储到Excel表格中,但是感觉还不如直接利用高德api和OL4结合一下直接展示到地图上看看效果如何,感觉效果并不好,差别很大 ,感觉有用的不是道路的经纬度坐标集合,而是对道路畅通的状态,以及描述。先看两张图:一、关于高德Key值得申请地址:https://lbs.amap.com...原创 2018-08-15 12:18:04 · 3551 阅读 · 4 评论 -
OpenLayer学习之聚合标注和信息框弹出
首先感觉我做的这个Demo是真的烂,查资料都没有多少,自己摸索着做出来,虽然比较烂,但是毕竟是一种思路一、聚合图层的组成1、Vector的source,这里面主要放feature,这个source不是直接加载到Vector图层中的source for (var i = 0; i < dataSource.length; i++) { var coordi...原创 2018-07-01 16:16:45 · 5251 阅读 · 13 评论 -
OpenLayer加载WFS
更新于2019-03-06(下面的这种配置方式仅针对jetty-servlets-9.2.13.v20150730.jar这个版本,geoserver2.15、2.14、2.13版本都可以使用这个)关于使用Geoserver上传wfs数据,百度有许多教程在这里不在陈述,一、什么是跨域浏览器从一个域名的网页去请求另一个域名的资源时,域名、端口、协议任一不同,都是跨域域名:主域名不同 h...原创 2018-07-08 12:02:02 · 479 阅读 · 0 评论 -
OpenLayer 学习之自定义测量控件(目前ol3的版本不会抛异常)
一、自定义控件是在继承基类空间基础上实现的,控件不是我写的(毕竟技术有限)最近也在一直在研究源码进行模仿想写出自己的功能更为强大的控件。二、控件源码1、css样式设置.tooltip { position: relative; background: rgba(0, 0, 0, 0.5); border-radius: 4px; color: white; padding: 4...原创 2018-06-25 21:05:20 · 775 阅读 · 1 评论 -
OpenLayer学习之绘图与在线编辑
有时候找到真正想要的真的很难,凡事岂能两全,唉,你又能如何确定那个选择才是对的。开车开车,今天写的是将绘制几何图形和修改几何图形综合的一块。主要用到的是ol.interaction.Draw、ol.interaction.Select、ol.interaction.Modify三个交互。一、绘图函数封装function Draw() { var value = $("...原创 2018-06-30 18:01:28 · 2343 阅读 · 0 评论 -
OpenLayer扩展插件
OpenLayers 3 扩展插件Awesome-OpenLayersOL3扩展ol3-ext很酷的一组 OpenLayers 3 (ol3) 扩展: 编辑-选择控件、CSS popup(弹出信息框), Font Awesome 符号渲染, 地图统计图 (pie/bar),图层切换, wikipedia layer, 动画, canvas 过滤器等等.在线实例.Map-georeferencer ...转载 2018-06-18 21:13:52 · 3880 阅读 · 0 评论 -
OpenLayer中之ol.layer,group图层组学习
一、概念:字面上就是一组图层的集合, 用途;至于为什么要出这个这个类,我想应该为了有时候便捷管理好几个,例如在加载天地图的时候需要加载地图图层和注记图层,如果不想让地图图层和天地图注记图层不显示,我们需要分别设置,如果用到group感觉很方便,直接将group图层对象中visible属性设置为false即可。(个人想法,如有不对请指出)二、构造函数:经过学习一段时间OpenL...原创 2018-06-18 11:05:27 · 5140 阅读 · 0 评论 -
OpenLayer学习之ol.interaction.Select
人生最迷茫的不过于此,一堆选择放在你面前,你却不知道到底选择那个是最合适的,这点很尴尬,始终要戒备自己会不会被坑,唉好痛苦,最痛苦的莫过于此,挣扎,挣扎一、概念该交互仅针对于矢量服务,矢量服务,矢量服务,主要用于feature选中(点击、鼠标悬浮等),做出相应的操作,例如高亮显示什么的,改变渲染样式。二、构造函数addConditionconditionlayersstyleremoveCondi...原创 2018-06-29 10:48:57 · 8161 阅读 · 7 评论 -
OpenaLayer学习之图层探查
等待是最痛苦的事,有时候真的很迷茫,这学上的怀疑人生,这辈子遇见对的人真的很关键,唉,废话不说了开车,开车一、图层探查是一个功能型的小插件,当map加载多个图层的时候,有的图层被覆盖掉了,我们如果想看到图层就可以通过探查图层小插件,相当于将上面的图层裁剪一块。二、实现思路主要的运用图层的事件(precompose: 准备渲染,未渲染。postrender: 渲染全部结束。)三、图层代码 ...原创 2018-06-22 20:19:22 · 522 阅读 · 1 评论 -
OpenLayer学习之图文标注
一、图文标注分为两类,一类是通过ol.3中Overlayer,结合HTML的一个div或者img标签元素实现。另一类是通过矢量图层作为表现层,本文介绍的就是矢量图层,总体思路,创建矢量数据源,创建矢量图层,然后创建要素,将要素设置样式,添加到矢量数据源就行二、数据源、矢量图层、要素的声明var beijing = ol.proj.fromLonLat([116.28, 39.54]); //矢量...原创 2018-06-22 11:41:58 · 1750 阅读 · 0 评论 -
OpenLayer学习之style样式的学习笔记
前言:1. 可以配置的选项/** * @typedef {{geometry: (undefined|string|ol.geom.Geometry|ol.style.GeometryFunction), * fill: (ol.style.Fill|undefined), * image: (ol.style.Image|undefined), * stroke:...转载 2018-06-14 15:49:35 · 7178 阅读 · 8 评论 -
OpenLayer学习之矢量地图
一、首先了解下矢量地图和栅格地图矢量图使用直线和曲线来描述图形,这些图形的元素是一些点、线、矩形、多边形、圆和弧线等等,矢量地图放大和缩小不会失真(图片你要是放大一定程度明显可以看出一个一个小格→栅格地图的缺点)。为了便于存储,传递,使用,矢量地图会按照一定的格式来表达,比如常见的GeoJSON,TopoJSON,GML,KML,ShapeFile等等。 除了最后一个ShapeFile,其他几个格...原创 2018-06-13 20:48:14 · 1123 阅读 · 0 评论 -
OpenLayer学习之OGC数据
一、OGC简介 OGC是一个开源GIS公益行业协会,致力于促进采用新的技术和商业方式来提高地理信息的互操作性,OGC也推出了支持OGC规范的WebGIS产品。WebGIS 遵循OGC的规范已经成为地理信息系统的发展趋势。OGC在WebGIS 地理服务上,定义了抽象接口,其他类去继承该接口(在这里解释下接口的用处:约束,主要是为了约束,例如一个三年纪五班,这里的三年五班就是接口,班里面的每一个...原创 2018-06-27 10:37:32 · 1093 阅读 · 0 评论