OpenLayer3 and 4
文章平均质量分 57
主要是学习OpenLayer3 and 4的笔记
hpugisers
每天进步一点点,美滋滋
展开
-
OL4使用mapV
mapV是一款基于百度地图的地理信息可视化开源库,以前我写一篇文章是基于超图封装mapV和OpenLayers的框架来使用mapV,mapV1.0版本好像不支持OL,现在2.0版本基本支持流行的地图框架例如(Openlayers、LeaFlet、maptalk等等)百度是终于干了一会人事。下面讲解主要怎么用。一、引言github地址核心类new mapv.OpenlayersLaye...原创 2019-04-23 15:35:41 · 2392 阅读 · 5 评论 -
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 · 883 阅读 · 1 评论 -
OL4加载geowebcache 部署的离线切片
部署离线切片,我们部署到SQLite数据库或者mysql,在这里我们部署到本地切片,切片下载是用的基于Gmap.Net下载器开发的地图下载器,详细的部署及下载器的使用见webgis离线部署效果:代码:<!DOCTYPE html><html><head> <meta原创 2019-03-17 16:20:40 · 1021 阅读 · 0 评论 -
OL4通过ajax加载geoserver中WMS的GetFeatureInfo实现点击查询(解决跨域问题)
有时候我们不想加载WFS服务来获取要素的属性信息,我们就想加载WMS或者WMTS获取属性信息,geoserver客户端给我提供一种实现是返回html,这种方式受限太大,如果能返回json格式的数据那多好!这样我们就可以自己定义展示的效果了,在这里我首先想到的是通过点击事件配合Ajax 来加载WMS的GetFeatureInfo,但是发现总是提示跨域问题,明明我都已经配置了跨域,怎么还会报这个错呢...原创 2019-03-03 11:26:18 · 2229 阅读 · 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 · 3162 阅读 · 4 评论 -
OpenLayer加载GeoServer发布的WMTS服务
Openlayer对加载切片地图还是很友好的,加载第三方切片地图,提供了XYZ方式加载,如果需要加载本地的切片提供了ol.source.WMTS类,该类可以满足加载利用Geoserver发布的切片服务。效果图:一、瓦片网格对象 //切片策略 var tilegrid = new ol.tilegrid.WMTS({ extent: ...原创 2018-11-29 09:54:00 · 6169 阅读 · 0 评论 -
openlayer加载矢量切片
数据是GIS的灵魂,没有数据也就谈不上GIS了,数据分为矢量数据和栅格数据,栅格数据也有一些短处,缺乏灵活性、实时性,数据完整性受损是比较突出的问题,矢量数据不同于栅格数据,比较灵活,数据完整,将两者结合诞生出—>矢量切片,不要被矢量这个词迷惑,矢量切片是不可被编辑的,不可编辑不代表不能获取其属性信息。矢量数据的优点:矢量切片可以以三种形式呈现:GeoJSON、TopoJSON...原创 2018-10-28 22:05:20 · 5716 阅读 · 6 评论 -
OL实现属性查询的功能
属性查询是很平常的一个功能,在这里实现的查询功能还是结合WFS服务的filter完成,用到的filter是new ol.format.filter.equalTo('name', value),filter就是完成各种过滤去查询数据,可以满足基本的查询需求。用了好长时间的geoserver感觉虽然没法像arcserver那么方便,但是基本的功能都可以实现,毕竟是开源的。一、主要函数/...原创 2018-10-14 15:11:37 · 1260 阅读 · 0 评论 -
OpenLayer修改WFS中的要素
就像arcgis api一样既然我们加载要素图层服务,我们应该既然加载要素,有时候我们需要修改他,增加一些矢量数据或者修改矢量数据,在这里我写的如何去修改数据。代码参考扯淡大叔的修改WFS的代码,但是中间出现了了一些问题,在这里指出。出现的问题如下图: 解决方案:1、 2、添加新规则3、选择工作空间---->选择...原创 2018-10-19 15:13:14 · 1778 阅读 · 0 评论 -
OL3实现空间查询的代码示例
前言:在左开发的时候我们会用到空间查询,尤其在poi范围内的查询,该功能在arcgis api中有专门的类封装该功能,OL3和OL4中针对WFS服务,也可以实现该功能,需要结合WFS 和Filter共同完成。先看张图片:空间查询示例:青海、西藏、新疆一、代码示例 $("#boxQuery").on("click", function () { ...原创 2018-10-13 14:45:42 · 1196 阅读 · 0 评论 -
WFS—GetFeature方法
前言:WFS服务,可以通过OL进行加载,加载有简单方式也有GetFeature方式,该种方式自由度更大,可以结合一些过滤条件,这样一方面可以提高加载数据的效率,也是业务的一种。来张图效果图:红色是通过GetFeature加载,轮廓线是简单加载的,北京市的道路也是简单方式加载的。一、GetFeature方式(核心代码) // 创建一个请求 var fe...原创 2018-10-12 19:49:05 · 5446 阅读 · 3 评论 -
OpenLayer+Geoserver+postgis实现路径分析
这几天一直在研究关于路径规划的问题,postgis也是现学现用,由于SQL的语法掌握还不错,postgis仅需要熟悉常用的函数就行,关于常用的postgis函数,我已经结合网上的一些资料写了一篇文章,关于做一些GIS的空间分析,我们有两种选择,一是选择geotools,二结合postgis,两者选一个即可,我发现postgis+geoserver组合,本质上还是通过geotools来实现的,废话不...原创 2018-10-08 19:19:35 · 6414 阅读 · 10 评论 -
OL3实现图例的创建
前言:无需多说,是非常重要的,OL中并没有实现图例的控件,arcgis api中倒是有图例的模板,其实制作图例并不是很困难,我们只要做些函数封装,和做一些简单css设置就行,今天领导给我说已经很久没有更新博客了,所以今天要写一篇,最近发现一个问题,别人给我评论的问题,让CSDN给吃了,我也是无语。来张图:一、CSS样式设置 .info { ...原创 2018-09-28 20:45:10 · 738 阅读 · 4 评论 -
OL4中添加图标的两种方式的比较
前言:在ol中我们也可以添加一些图标在地图上,用于展示效果,较早期的版本OL提供一个overlay覆盖物的方式,在OL3和OL4中这种用法不太多了,一个主要的原因它是通过HTML的方式的添加到地图上,这种方式有一个很大的问题就是偏移,随着你放大或者缩小可以看到图标的位置明显偏移。主要的问题是overlay(覆盖物)主要以HTML的方式叠加到地图上。一、overlay(覆盖物)1.demo示...原创 2018-09-13 20:51:20 · 3161 阅读 · 0 评论 -
OL4两种绘制台风圈方式的比较
前言:今天在一个群里面看到台风圈的,感觉很好奇,就想着能否用canvas结合OL4实现下,何为台风圈先来张图:一、实现原理1、先画上半圆2、在下半圆3、最后画半圆相接线关于canvas画圆弧知识点 arc(x, y, r, startAngle, endAngle, anticlockwise): 以(x, y)为圆心,以r为半径,从 startAngle弧度开始...原创 2018-09-08 20:54:33 · 2164 阅读 · 0 评论 -
OpenLayer4实现自定义标注
前言:OL可以让我们实现自定义的标注样式,用过CAD的同学应该都知道CAD中有上下文字中间用横线隔开的样式,这样标注让人一目了然的了解信息。给人以直观的的信息表达,本文实现就是分式的标注。先来张图: 一、关于ol.style.Icon类该类中有一个img参数,该参数非常好用,该参数的输入类型为Image | HTMLCanvasElement,第二个类型就是canvas标签,作...原创 2018-09-03 20:44:38 · 3590 阅读 · 2 评论 -
OpenLayer4实现自定义地图聚类图层
前言:一直感觉不论OL还是arcgis 这个地图聚类是真的丑,实在让人看不下去,反观leaflet插件的的聚合效果那叫一个好看,个人感觉好看多了去了,那么把这个聚合效果用到OL上面去啊,这个是一个很好玩的事,本篇文章用到了自定义的聚类的扩展图层,感谢@牛老师源代码启发,在此基础上进行进一步的封装。先来张效果图:这张照片整的感觉都变形很多。其实一点没变形一、自定义扩展图层下载(git...原创 2018-08-26 17:28:46 · 2060 阅读 · 5 评论 -
关于用OpenLayer实现加载高德地图实时路况的一个尝试
更新于2019-03-04前言:前一段时间,我在一个交流群里发了一个关于用python爬取百度地图的一个poi点,群里有一个人说,如果你能爬取高德地图的车流量我可以帮你介绍工作,帮一个大学教授那工作,我当时就想笑,爬取高德地图的车流量,兄弟你想多了吧。人家付费一年收你几十万,你居然想爬取,高德地图的实时路况他没有数据,返回的是切片,高德地图官方连切片地址都不想让你找到。废话不多说开始尝试。...原创 2018-08-23 10:01:46 · 5710 阅读 · 8 评论 -
OpenLayer4结合高德API实现地图选点路径规划
前言:路径规划也是WebGIS一个特点,我们在做某些应用的时候可能会用到路径规划的功能,该功能我们也可以自己实现,利用数据等,但是OpenLayer一大特色就是加载在线地图,向高德,百度等,这些地图都提供一些api接口供大家调用获取数据,在做路径规划的时候,刚开始用的百度提供的api,发现这个路径规划的真烂你都不好意去吐槽,最后换成高德api总体效果还算满意。废话不多说进入正文。先来张图:...原创 2018-08-22 15:18:58 · 4176 阅读 · 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 · 2423 阅读 · 2 评论 -
OpenLayer加载百度坐标偏移问题解决(方案二)
前言:上一篇文章介绍了百度坐标加载在,天地图,OSM像这类的非百度地图的第三方地图,本文主要讲述的用加载百度地图作为底图这样我们不再需要坐标转你,但是在使用WGS-84坐标的时候,我们需要把他们转到BD-9坐标系上才能加载到地图上的正确位置。上一篇文章中,我们只需要转换百度坐标到WGS-84。我们在网上找到的加载百度的代码,大多代码是切片是由偏移的,我们虽然能够加载百度和显示,然后因为偏移,所以我...原创 2018-08-21 19:56:29 · 2481 阅读 · 6 评论 -
OpenLayer4与mapV结合蜂巢图效果
在这里mapV是一款数据可视化的软件,数据的展示的效果灰常炫酷,但是问题来了,mapV是百度出的,是基于百度地图api做的,百度地图api是不开源的,说到是不是感觉很绝望,如果想做到mapV和OpenLayer结合,我们可以超图的一款api基于openlayer开发的api,刚好该api也结合mapV,我们可以间接结合二者。原创 2018-08-16 21:12:32 · 3909 阅读 · 6 评论 -
OpenLayer4结合高德地图API实现交通态势的获取信息
前言:昨天申请了一个高德地图的key值,本来想用来用python爬取高德地图的交通态势信息存储到Excel表格中,但是感觉还不如直接利用高德api和OL4结合一下直接展示到地图上看看效果如何,感觉效果并不好,差别很大 ,感觉有用的不是道路的经纬度坐标集合,而是对道路畅通的状态,以及描述。先看两张图:一、关于高德Key值得申请地址:https://lbs.amap.com...原创 2018-08-15 12:18:04 · 3617 阅读 · 4 评论 -
OpenLayer4结合百度api实现动态加载省、市、县边界
更新:这篇文章的坐标转换还是有点问题,我在另一篇文章介绍了怎么进行坐标转换传送门百度地图API给我们提供了许多的接口,还有文档,我们可以将百度地图的数据获取到(本篇直接利用api获取边界),另做他用,当然我们在获取边界的经纬度的时候会发现这个即使我们已经做到了坐标系的转换,但是误差还是有的,如果不是要求特别高的精度,可以试试用这个方法去实现边界的实时加载到天地图或者OSM等,还是比较方便的。...原创 2018-08-09 16:31:13 · 1555 阅读 · 0 评论 -
OpenLayer4结合Echarts3一个简单的demo
在数据可视化上,用Ecahrts挺好的,今天做一个两者结合的简单demo做到专题地图的结果,下面直接看过程。先看看图:一、js和css设置 <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css"> <script src="h...原创 2018-08-12 10:33:48 · 2065 阅读 · 0 评论 -
OpenLayer4实现卷帘效果
一、用途:卷帘效果在多个图层叠加的时候会用到。但是还想两个图层相互切换或者两个图层在一块,这个时候就用到卷帘效果,我们可以把这个卷帘做成一个label可以来回拖动,这样既可以达到控制效果,也很美观。先来张效果图:二、全部源码<!DOCTYPE html><html><head> <title>地图卷帘效果</tit...原创 2018-08-08 20:55:52 · 2641 阅读 · 2 评论 -
python结合百度api进行地理编码和爬取POI点
最近一直比较忙老师让写一个时空大数据的申请项目书,我这脑子累成狗也不成啊,唉硬着头皮要上,今天偷点空闲一直想爬取百度地图的数据,一直也没做,今天主要爬取了POI点(北京四环以内的吃饭的地方)和利用python结合百度api进行地理编码的小程序,借鉴网上的大神写的,我python本身还不是够,做一些简单的小爬虫可以,仍然需要努力。关于百度api的ak申请打开下面的网址:http://lbsyun.b...原创 2018-08-07 21:55:23 · 1127 阅读 · 4 评论 -
OpenLayer3.x与4.x开发总结(持续更新)
最近来实习的地方,然后具体是好是坏也不知道,和自己想象的不一样,不知道是去是留,关于GIS开发的问题感觉不再是多大难度的问题,自己也也可以快速对api适应。平时遇到一些OL3的琐碎知识点进行整理。一、关于加载天地图的函数封装代码封装: function getTdtLayer(lyr) { var url = "http://t{...原创 2018-08-02 22:26:56 · 2101 阅读 · 1 评论 -
OpenLayer4加载svg
关于加载svg 的代码,网上是少之又少,牛老师博客倒是有,但是只是核心代码,并没有给出完整的demo,而且核心代码中有个问题对于这个ol渲染不太理解的话的话应该做不出来效果,就是关于坐标转屏幕坐标的问题,必须需要地图渲染完成之后才能拿到否则没法转换,得出转换为空的结果。放个图:一、原理通过静态加载图片的方式加载svg,给定初始化范围,更重要的是给定imageSize,关于image...原创 2018-08-01 14:01:17 · 3133 阅读 · 3 评论 -
OpenLayer3动态点线和动态点的扩散实现
无论动态点的实现还是动态线的实现大多依靠canvas去是是实现的,其实我们一直在独立的canvas 的做,OL3中vectorContext子类主要为渲染矢量元素,如果下点共运用map的postcompose事件就可以做许多的动态效果,例如下面这一段ol3给出代码示例:<!DOCTYPE html><html> <head> <titl...原创 2018-07-31 15:00:54 · 4687 阅读 · 11 评论 -
OpenLayer中的StyleFunction函数的妙用
StyleFunction函数能够让我们做一些复杂逻辑的渲染,Feature和图层都会用到StyleFunction,但事实上Feature要素用到的是ol.FeatureStyleFunction,函数仅带有一个参数resolution,而图层StyleFunction,含有两个参数,feature和resolution两者是不一样,关于返回值,ol3要求返回一个样式数组,但是返回一个单个样式,...原创 2018-07-26 15:29:53 · 5631 阅读 · 1 评论 -
Openlayer给定坐标进行绘制多边形
今天在绘制平谷区域用给定的坐标,绘制图形的,怎么调试都不知道,最后才发现是参数传错了,没仔细看api文档,真的很恶心啊。废话不多说看代码:先放张图: 一、坐标的转换 //声明一个新的数组 var coordinatesPolygon = new Array(); //循环遍历将经纬度转到"EPSG:4326"投影坐标系下 ...原创 2018-07-24 15:58:13 · 4919 阅读 · 0 评论 -
OpenLayer3实现分级渲染(初级版本)
ol2支持要素图层加载的时候进行各种渲染,例如唯一值、分级等,但是到OpenLayer3则不能进行这些操作,不知道为何。今天看官方文档的时候发现Feature类一个方法→get()方法可以获取指定属性的值,需要给该方法传进去一个字符串属性,看到这我眼前一亮,这不就是各种渲染主要的方法,废话不多说进入正题:一、思路1、首先我们要用到的是样式函数styleFunction,这个函数用处非常大,...原创 2018-07-18 21:34:24 · 3102 阅读 · 0 评论 -
OpenLayer仿天地图多时相
今天在仿写天地图的工具的时候的看见多时时相工具,说白了也就是两个地图设置相同的View这在Openlayer中很好的实现,只要声明两个map的容器,使用相同的视图即可先看看,天地图的效果:一、全部源码由于太简单了就不分析了就是加载个地图和卫星图,使用相同的视图即可<!DOCTYPE html><html xmlns="http://www.w3.org/199...原创 2018-07-17 15:29:24 · 1106 阅读 · 0 评论 -
浅谈WebGIS开放数据(矢量数据)
今天上午本来打算学习ol3的专题地图制作,查阅很多资料发现ol3并不支持专题制图制作,反观ol2却支持,专题地图用处很大,不知道为啥,ol3不支持了,看了一上午开放性数据,在这里聊聊我的看法。一、主流开放数据格式KML是一中文件格式GML是一种地理标记语言GPX是一种XML格式GeoJSON是一种地理对地理结构进行编码的格式以上四种是主流的开放格式ol3也都支持加载和解析二、客户端绘制和服务器端绘...原创 2018-07-15 15:18:39 · 1221 阅读 · 0 评论 -
浅析OpenLayer3加载WMS一些问题
前一段时间一直被一个问题所困扰,作为GIS开发我们的核心竞争力在哪,如果只是搞一些api可替代性太大了,毫不技术可言,问了好多人无果,说法各持一方,最近也感觉理论知识,用处真的很大,WebGIS并不只是做出来一些效果就证明你技术很厉害,需要理论的内涵支撑,废话不多说,开车开车。一、关于转换成tiff格式的一些问题geoserver不支持将png格式的图片发布为服务,需要将png格式图片通过arcm...原创 2018-07-11 17:18:19 · 1510 阅读 · 0 评论 -
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 · 488 阅读 · 0 评论 -
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 · 5293 阅读 · 13 评论 -
OpenLayer学习之绘图与在线编辑
有时候找到真正想要的真的很难,凡事岂能两全,唉,你又能如何确定那个选择才是对的。开车开车,今天写的是将绘制几何图形和修改几何图形综合的一块。主要用到的是ol.interaction.Draw、ol.interaction.Select、ol.interaction.Modify三个交互。一、绘图函数封装function Draw() { var value = $("...原创 2018-06-30 18:01:28 · 2359 阅读 · 0 评论 -
OpenLayer学习之ol.interaction.Select
人生最迷茫的不过于此,一堆选择放在你面前,你却不知道到底选择那个是最合适的,这点很尴尬,始终要戒备自己会不会被坑,唉好痛苦,最痛苦的莫过于此,挣扎,挣扎一、概念该交互仅针对于矢量服务,矢量服务,矢量服务,主要用于feature选中(点击、鼠标悬浮等),做出相应的操作,例如高亮显示什么的,改变渲染样式。二、构造函数addConditionconditionlayersstyleremoveCondi...原创 2018-06-29 10:48:57 · 8212 阅读 · 7 评论