从本节开始,我会陆陆续续的更新有关OL3的相关文章——OpenLayers3基础教程,欢迎大家关注我的博客,同时也希望我的博客能够给大家带来一点帮助。
OpenLayers(https://openlayers.org/)是一个用来帮助开发Web地图应用的高性能的、功能丰富的JavaScript类库,可以满足几乎所有的地图开发需求。
在前面《百度地图、ECharts整合HT for Web网络拓扑图应用》我们有介绍百度地图和 HT for Web 的整合,我们今天来谈谈 OpenLayers 和 HT for Web 的整合。 HT for Web作为逻辑拓扑图形组件自身没有GIS功能,但可以与各种GIS引擎即其客户端组件进行融合,各取所长实现逻辑拓扑和物理拓扑的无缝融合,本章将具体介绍HT for Web与开发免费的OpenLayers地图结合应用的关键技术点,该文介绍的结合的原理,其实还可推广到与ArcGIS、百度地图以及Googl
HT for Web作为逻辑拓扑图形组件自身没有GIS功能,但可以与各种GIS引擎即其客户端组件进行融合,各取所长实现逻辑拓扑和物理拓扑的无缝融合,本章将具体介绍HT for Web与开发免费的Ope
该文介绍了如何使用地图和图形组件库(如OpenLayers和React-Map-Gl)实现在网页上绘制中国省级区域并显示省级名称和首都信息。首先介绍了相关技术,然后描述了如何利用OpenLayers加载地图和图层,接着展示了如何通过React-Map-Gl绘制省级区域并显示相关信息。最后,介绍了如何实现点击省级区域后在OpenLayers地图上高亮显示省级名称和首都信息。
使用 Vite 初始化项目并安装 ol ,更详细做法可以查看 『Vite + Vue3 + OpenLayers 起步』
本文案例使用 Vite 搭建项目,在 Vue 3 的基础上使用 OpenLayers 。
在OpenLayers中加载Arcgis Server切片用XYZ图层,Arcgis Server的切片调用地址我们可以看到如下:
前面的文章中,讲述了Arcgis for js中聚类分析与展示,在本文,讲述如何在Openlayers2中聚类分析的实现。
前言 通过结合 HTML5 和 OpenLayers 可以组合成非常棒的一个电信地图网络拓扑图的应用,形成的效果可以用来作为电信资源管理系统,美食定位分享软件,片区找房,绘制铁轨线路等等,各个领域都能
在前两篇文章中讲到了echart在openlayers2中的应用,地图统计图与热力图的实现,在本文中介绍openlayers中结合echart实现航班的炫光特效展示。
theme: smartblue 本文简介 image.png 将地图切换到不同容器里展示。 不管在地图上做任何操作,切换容器后,操作过的内容也是会同步过去。 思路 使用 ol 提供的方法可以获取 当前地图所在容器 和 设置地图到新的容器 里。 Map.getTarget() 获取当前地图所在容器 Map.setTarget() 设置地图到指定容器 编码 <template> <div id=03
除了用鼠标滚轮在地图上缩放外,还可以使用 ol 提供的 api 设置地图缩放级别。
前段时间换了工作,从以前的 996 变成了现在的 965,周末有了一些空闲时间,于是就想着写一些文章和大家分享一下。思考了很久,最终确定了主题为前端高德地图的教程。
相比较Ol2的control,OL3显得特别少,下图分别为Ol2和Ol3的control:
在《HT for Web整合OpenLayers实现GIS地图应用》篇中介绍了HT for Web与OpenLayers的整合,不少朋友反应国内用得比较多的还是百度地图,虽然HT整合百度地图原理与Op
在前文中,讲到了oL2中唯一值渲染的实现方式,在本文讲述ol2中渐变色渲染的实现方式。
概述: 本文共享一个扩展后的测量工具,实现绘制时测量结果的实时展示。 效果: 测距 测面 实现: 1、扩展MeasureControl /** * Class: OpenLayers.Control
在实现的时候,参考了mygisforum的文章http://blog.csdn.net/mygisforum/article/details/7582449的内容,同时结合gwc的gridset,实现了google切片在Openlayers2中的调用与展示。
在前面的文章中,讲述了通过“抽稀+后台生成图片”的方式解决大量POI点展示的一种思路,后面看了tilestache的矢量切片方式,自己仔细思考了下,提出了本文大量POI点的展示解决方案。
在本文叙述如何在openlayers中实现鼠标经过某一对象时,对象高亮;点击某一对象时,弹出该对象的信息。重点为OpenLayers.Layer.Vector和OpenLayers.Control.SelectFeature,下面开始讲解。
通过OpenLayers.Control.DrawFeature和OpenLayers.Handler.Point实现在地图上画圆心。
在前面的博文中讲述过基于Arcgis for js如何实现聚类统计展示,在本文中讲述如何基于openlayers实现聚类统计的效果,Arcgis for js聚类统计的博文地址为:
Heatmap 是用来呈现一定区域内的统计度量,最常见的网站访问热力图就是以特殊高亮的形式显示访客热衷的页面区域和访客所在的地理区域的图示。Heatmap.js 这个 JavaScript 库可以实现各种动态热力图的网页,帮助您研究和可视化用户的行为。
概述 本文讲述Openlayers2中实现唯一值渲染。 效果 源代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"
在WebGIS开发中,经常会有用户提需求,要实现卷帘功能,卷帘功能主要是实现两张图之间的对比。在前文中,讲到了openlayers3以及Arcgis for js中卷帘的实现,在本文讲述如何在openlayers2中实现卷帘功能。
一直在寻求openlayers中wfs加载和属性查询的相关操作,功夫不负有心人,蓦然回首,那人却在灯火阑珊处,找到了这篇博文:http://blog.csdn.net/longshengguoji/article/details/39377931,试了下,在IE8中正常运行,但是在chrom中涉及到跨域的问题,待后期接解决吧。本文讲解如何通过wfs实现属性的查询与展示。
在前文中,有一篇文章讲述了Openlayers2结合Echart实现地图统计图,还以一篇文章讲述了结合heatmap.js实现Openlayers中热力图的展示。在本文,书接前文,讲述Openlayers如何结合Echart实现热力图。
在前面有篇博文讲述了基于Arcgis for js和wkt实现在线数据的采集和编辑功能,在本文讲述如何在openlayers实现类似的功能。上一篇博文的地址为:
为方便大家下载,我将所有软件上传的百度网盘里了,有需要的可以上网盘直接下载,地址为:http://pan.baidu.com/s/1ntJrf8P,此外,openlayers的下载地址为:http://pan.baidu.com/s/1kTBTCX5。
用过百度地图的童鞋一定很羡慕百度地图POi的展示,地图切片+事件响应,以前一直在考虑这个问题,今天,将我的思考结果做一个汇报给大家。下面,将我的实现思路说明一下:1、当图层添加完成或者图层添加完毕并地图四至发生变化时候,从后台获取当前视野内的POI点数据;2、注册mousemove事件,根据鼠标的位置生成一个很小的矩形框,判断POI点数据是否落在了该小矩形框内,是,将其高亮。
概述: 本文讲述在openlayers中如何实现多图联动。 思路: 1、判断鼠标在哪个地图上; 2、添加该地图的地图移动事件; 3、设置另外一个地图的bound为该地图的。 代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>openlayers map</title> <link rel="stylesheet" href="http://localhost/olapi/theme
概述 本文讲述如何结合高德地图API实现路径导航以及在Openlayers4中的展示。 效果 实现 获取数据 数据的获取是通过高德的API来实现,实现代码如下: <!doctype html> <
echart,一个由百度前端发起的canvas国产类库(官网:http://echarts.baidu.com/index.html)。echart其实是在canvas类库zrender的基础上做的主题图库,优点有数据驱动,图例丰富,功能强大,支持数据拖拽重计算,数据区域漫游等功能,不论是从使用便捷程度、美观程度等方面都是不错的选择,在本文讲述如何在Openlayers中结合echart实现地图统计图的展示。
在前文中,介绍了Arcgis for js和Openlayers3中统计图的实现,在本文,书接上文,介绍在Openlayers2中,统计图的实现。
上文中提到了在Arcgis for JS中实现百度地图ABCD的marker效果,在本文,讲述如何在OpenLayers2中实现类似的效果。
前面的有篇文章介绍了Openlayers 2.X下加载天地图,本节介绍Openlayers 2.X下加载高德地图。
本文讲述Arcgis Image Server相关以及在OL2中如何加载Arcgis Server发布的影像服务。
Arcgis Server的切片得要有Arcgis Server的支持才能使用,这样就显得比较麻烦,如果对于已经切好的切片怎么样通过自己写的程序来调用展示呢,本文讲解的内容就是这些。
经过一个春节的休整,今天终于开始了!不论什么时候,都不要忘记学习,学习是一辈子的事情!今天,我来说说如何实现天地图的离线以及Openlayers加载离线数据实现天地图数据的展示。
在Arcgis for js中,有一个图层FeatureLayer,能够很方便的实现点、线、面的高亮。FeatureLayer是GraphicsLayer图层的一个扩展,本文讲述如何在Openlayers中通过Vector的扩展实现FeatureLayer。
最近在做一个开源GIS的demo的工作,工作中涉及到了地图瓦片,选取的开发环境是geoserver+openlayers,那么地图瓦片自然而然也就使用geowebcache,geowebcache就相当于是openlayer和geoserver之间的中介,首先,geowebcache会根据你的配置信息,把相应的地图图层切好图,存放在磁盘中,然后在使用openlayer加载地图服务的时候,把地图服务的地址指向geowebcache,geowebcache接收到这些请求后,会根据请求的位置和比例尺在切片目录中找到对应的瓦片,然后返回给你,省去了动态生成地图的过程,速度大幅度提高,而且由于请求的图片资源是事先生成好的,浏览器加载这些图片之后,下一次再去请求同样的图片,就会从浏览器的缓存中拉去,速度进一步提高!
前天有网友提到了这样的需求:1、地图的统计图展示;2、统计图的聚类。统计图的展示非常好理解,但是什么是统计图的聚类的?所谓统计图的聚类是按照地图等级与数据等级,实现统计图的分级展示。鉴于此,趁着这个霾天,早起来给这位网友解下惑,并在此marker一下,有相同需求的筒子可以看过来^_^
在前面的章节,讲到了Arcgis for js加载天地图,在本节讲述如何在Openlayers 2.X的版本中加载天地图,并添加自己的wms服务。
在上文“ 大量POI点展示的一种解决方案”中,介绍了在在后台将POI生成图片在前台展示,文章中没有涉及到点的抽稀问题,也就是当点的数据量非常大的时候,这种展示方式还是会有一定的效率问题,在本文,书接上文,介绍一种点抽稀的算法,并结合上文,实现大量poi点的高效展示。
在最近的工作中遇到了这样一个问题:地图全屏后在地图上绘制,发现鼠标的位置和绘制点的位置发生了偏移,因此,花了半天的时间去解决这个BUG,所以在此标记一下。
在OL2中,鼠标默认是箭头,地图移动时,鼠标样式是移动样式;很多时候,为了形象起见,我们总是希望鼠标在地图上的时候和移动地图的时候鼠标的样式不是默认的效果,本文讲述如何实现这样的效果。
本文,牛老师给大家分享一些自己平常工作和学习常用的网站或资源,希望对大家有所帮助。
在前面有篇文章提到了OL3中的多地图联动展示,在本节中讲述在OL2中实现多地图的联动展示。
领取专属 10元无门槛券
手把手带您无忧上云