还是大剑师兰特
曾是美国普渡大学计算机研究生,现为GIS领域高级前端开发工程师。深耕openlayers、leaflet、cesium、mapbox、echarts、threejs、webgl、canvas、svg等技术,目前正研究GIS大模型在低空经济领域的应用,拥有两项GIS方面的专利。
展开
-
Openlayers实战教程学习大纲及引导
本系列教程是Openlayers的实战教程,介绍Openlayes的一些基础知识,并重点讲述哪些地方是openlayers项目中常用的,给出具体示例,起到一个很好的引导学习作用。原创 2023-06-27 16:06:18 · 960 阅读 · 0 评论 -
Openlayers实战:启动、取消事件的监测
在Openlayers的实际项目中,我们会用到各种地图事件,比如click,dblclick,change,loadstart … 监测的时候往往用on(‘事件名称’,回调函数)来操作,但是取消这些事件的监控怎么做呢,请参考源代码。原创 2023-08-24 12:47:09 · 633 阅读 · 0 评论 -
Openlayers实战:select简介及select选择feature实战
Select是交互事件中的一种,用于选择矢量图层上的几何图形,添加选择交互事件后,点击地图上的几何图形或者将鼠标移动到几何图形上时,将获取到几何图形的相关信息,我们可以将选择的几何图形进行高亮显示。原创 2023-08-18 18:48:47 · 620 阅读 · 1 评论 -
Openlayers实战:移动鼠标至重叠几何图形上,获取多层所有features信息
在Openlayers的实际项目中,经常会出现在某个区域内有多个矢量层叠加的情况,这个时候点击内部一点,我们要获取到所有矢量层的信息。如果做到这一点呢,这个示例就演示了两个图层叠加,获取到全部信息的情形。原创 2023-08-18 11:38:44 · 484 阅读 · 1 评论 -
Openlayers实战:选择feature,列表滑动,定位到相应的列表位置
在Openlayers的实际项目中,点击某个图层的feature,在左侧的列表中显示出来,滚动条滑动,能显示在视觉区内,具体的方法请参考源代码。原创 2023-08-13 00:45:00 · 469 阅读 · 3 评论 -
Openlayers实战:列表与图层双向信息提示
在Openlayers的实际项目中,经常会在左侧列出信息列表,右边的地图上显示的是对应的图层内容,两边是一一对应的,为了看出来选择的是哪一个,就需要两边互相提示,本示例就很好的展示了这种效果,具体的方法请参考源代码。原创 2023-08-13 00:30:00 · 324 阅读 · 0 评论 -
Openlayers实战:水电站管道站点信息管理示例
本Openlayers实战示例是一个数据显示隐藏等功能的综合示例,用于管理水电站管道站点信息。背景:给出三条管道的坐标信息,给出每个压力监测点、处理站、液位监测点的坐标及其他描述信息。要求压力监测点、液位检测点、三条不同的管道可以分别控制关闭和显示。左侧的压力监测点、液位检测点关闭后,右边具体关联的压力监测点、液位检测也将关闭。点击右侧的具体压力监测点、液位检测点、处理站等,聚焦到那个位置,做放大处理。点击后,弹窗弹出相应的信息。具体的情形请看视频的操作效果。原创 2023-08-12 00:30:00 · 543 阅读 · 0 评论 -
Openlayers实战:界面控制综合演示
Openlayers项目中,有多种控制按钮,诸如底图切换,全屏、测量长度、测量面积、比例尺,经纬度显示、版权信息等。这里将这些功能汇集在一起,也是对很多项目中的控制按钮要点的诠释。原创 2023-08-11 14:37:27 · 784 阅读 · 0 评论 -
Openlayers实战:地理位置搜索定位
不论是google地图,异或是百度等其他地图,都有个搜索功能,可以填写搜索词做一个定位。本文调用一个插件,在openlayers中实现地理位置搜索定位,虽不是非常好用,但也能起到一定的帮助。原创 2023-08-11 00:30:00 · 1063 阅读 · 8 评论 -
Openlayers实战:多数据分散聚合
在飞机、轮船等地图显示的应用中,很多时候会用到数据聚合,Openlayers中提供了Cluster这个API,他作为souce的一部分,设定distance值,如果2个点的间距小于 distance 所设置的数时,就会以聚合的方式显示。从而解决了数据淤积显示的状态,非常实用。原创 2023-08-10 00:45:00 · 386 阅读 · 1 评论 -
Openlayers实战:fill,stroke,icon,text应用范例
Openlayers中加载或者绘制的数据,在layer上以矢量的形式展示,通过设置style,可以赋值填充色,边框大小颜色,文字,图片等。在本示例中,将这些基础的内容汇集在一起,做一个演示。原创 2023-08-10 00:30:00 · 612 阅读 · 0 评论 -
Openlayers实战:判断共享单车是否在电子围栏内
共享单车方便了我们的日常生活,解决了后一公里的行程问题。为了解决共享单车乱放的问题,运营部门规划出一些围栏,配合到电子地图上即为电子围栏,只有放在围栏内才能停车结算,在我们的Openlayers实战示例中,即模拟这一场景。原创 2023-08-09 00:45:00 · 421 阅读 · 0 评论 -
Openlayers实战:利用turf获取两个多边形的交集、差集、并集
在数据统计方面,通常会涉及到图形间的交集、并集、差集等。在Openlayers的实战中,我们显示两个多边形的交集、并集、差集的表现。通过turf的方式,可以快速的实现我们的数据处理,具体的请参考源代码。原创 2023-08-09 00:30:00 · 1188 阅读 · 0 评论 -
Openlayers实战:右键点击,弹出feature信息
鼠标作为一个重要的交互触发手段,不但有左点击,还有右点击。Openlayers开发的项目中,我们取消鼠标右键默认菜单,右击后获取到的feature的信息值。原创 2023-08-08 14:28:49 · 704 阅读 · 0 评论 -
Openlayers实战:使几何图形适配窗口
Openlayers开发的项目中,有一种应用非常重要,就是绘制或者显示出几何图形后,让几何图形居中并适配到窗口下,这样能让用户很好的聚焦到所要看的内容中去。这里使用了fit的这个view 的方法,具体的操作请参考示例源代码。原创 2023-08-08 11:48:51 · 1325 阅读 · 0 评论 -
Openlayers和leaflet如何选用?
Openlayers是一个基于Javacript开发,免费、开源的前端地图开发库,使用它,可以很容易的开发出WebGIS系统。目前Openlayers支持地图瓦片、矢量数据等众多地图数据格式,支持比较完整的地图交互操作。开始发布于2006年6月。官方网站:https://openlayers.orgOpenlayers采用面向对象程序设计(OOP)的思维方法进行设计、开发。把GIS系统中的属性、功能拆分成多个部分,为每一个部分抽象设计出对应的Class(类)。原创 2023-08-07 18:23:17 · 1610 阅读 · 3 评论 -
Openlayers实战:loadstart和loadend事件
Openlayers开发的项目中,loadstart和loadend事件能很好的显示地图的加载状态,给人明示地图的加载情况,做到不急躁。原创 2023-08-02 00:30:00 · 362 阅读 · 0 评论 -
Openlayers实战:moveend事件,利用calculateExtent获取地图左上和右下的坐标
Openlayers开发的项目中,有的时候会计算view窗口的左上和右下的坐标点,这里面涉及到calculateExtent的方法,属于extent的范围内。原创 2023-08-01 00:45:00 · 664 阅读 · 0 评论 -
Openlayers实战:绘制多边形,导出CSV文件
CSV(Comma-Separated Values)是一种常用的数据交换格式,是一种纯文本文件格式。在Openlayers的交互中,经常性的我们要导出一些数据,在这个实战中,演示的是导出CSV文件。原创 2023-07-31 16:29:18 · 314 阅读 · 20 评论 -
Openlayers实战:绘制图形,导出KML文件
KML 文件使用 XML 通过存储位置、图像叠加、视频链接以及线条、形状、3D 图像和点等建模信息来表达地理注释和可视化。在OPenlayers的交互中,经常性的我们要导出一些数据,在这个实战中,演示的是导出KML文件。原创 2023-07-31 15:15:30 · 861 阅读 · 1 评论 -
Openlayers实战:extent介绍及实际应用
Openlayers中,extent是重要的属性,它主要目的是圈定边界。setExtent方法可以设定边界的值;fit()方法可以适配狂口的位置。原创 2023-07-23 00:45:00 · 1374 阅读 · 0 评论 -
Openlayers实战:setCenter,setZoom设置跳转
Openlayers开发的项目中,经常会重新设定一个zoom,也会重新跳转到一个中心点。所用的方法就是setZoom和setCenter。在Openlayers实战中,我们做一个简单的设置,来很好的认识一下这个常用的方法。原创 2023-07-23 00:30:00 · 742 阅读 · 0 评论 -
Openlayers实战:绘制图形,导出geojson文件
GeoJSON格式数据在GIS中具有非常重要的地位,大多数时候都会用geojson来存储数据。在本Openlayer实战中,我们自己绘制矩形,然后通过file-saver导出数据。原创 2023-07-22 00:45:00 · 723 阅读 · 0 评论 -
Openlayers Source基础及重点内容讲解
Source按照字面意思就是数据源。在Openlayer中,简单理解就是在使用layers(图层)时,不同的图层需要传入不同的数据类型,才能渲染地图。它们需要的数据格式都是通过Source定义好的,我们只需要把现有的数据,按照规定传入数据源中,就不需要关心其他操作。原创 2023-07-22 00:30:00 · 336 阅读 · 0 评论 -
Openlayers实战:输入WKT数据,输出GML、Polyline、GeoJSON格式数据
在Openlayers的交互中,经常性的我们要加载一些数据,在这个实战中,演示的是输入WKT数据,输出GML、Polyline、GeoJSON格式数据地理位置标记语言 (GML) 是由 OpenGIS 协会 “地理位置标记语言 V2” 规范定义的地理信息的 XML 编码。在 databast 中提供了多个函数,用于从地理标记语言 (GML) 格式的数据生成几何图形。Polyline用于以编码折线算法格式读取和写入数据的特征格式。读取要素时,假定坐标为二维且按 [纬度、经度] 顺序。原创 2023-07-21 00:45:00 · 482 阅读 · 0 评论 -
Openlayers实战:加载WMTS数据
Web Map Tile Service(WMTS) 是 2010 年开发的相对较新的标准 Web 服务。此类Web 服务的理念类似于 WMS。但它是为 256 x 256 像素大小的 2D 平铺模式设计的协议使用 WMTS 的好处之一是可以在不同比例的服务器端地图切片上预染,并在客户端缓存.因此,这会导致更快的交付、更少的带宽以及更好的快速加载用户体验。在Openlayers实战中,我们用外部的一个服务器发布的WMTS来做示例演示,加载出瓦片数据。原创 2023-07-21 00:30:00 · 801 阅读 · 0 评论 -
Openlayers实战:加载geoserver发布的WMS数据
WMS(Web Map Service)是用于在 Web 上显示 GIS 数据的最广泛使用和最简单的形式它提供了多种优势,包括能够提供 GIS 数据的地理空间视图。WMS 通过 nternet 提供具有基本查询选项的可视化数据。WMS 提供基本的缩放、平移和帮助组织以快速染速度将 GIS数据作为图像提供。它是一个动态数据、定制地图(需结合SLD标准)的理想解决方案,根据请求范围在服务端动态生成数据渲染的图片返回客户端。原创 2023-07-20 00:45:00 · 711 阅读 · 0 评论 -
Openlayers实战:LayerGroup添加删除显示隐藏
不论是word,ppt等都存在分组的操作,Openlayers也同样可以图层分组LayerGroup,构造出一个图层组,往里面添加图层。LayerGroup可以设置透明度,显示隐藏状态等一些列合力属性,方便控制图层,展示一些内容。原创 2023-07-20 00:30:00 · 647 阅读 · 0 评论 -
Openlayers layer 基础及重点内容讲解
图层就像是含有文字或图形等元素的图片,一张张按顺序叠放在一起,组合起来形成页面的最终效果。在 openlayers 中,图层是使用 layer 对象表示的,主要有 WebGLPoints Layer、热度图(HeatMap Layer)、图片图层(Image Layer)、切片图层(Tile Layer)和 矢量图层(Vector Layer)五种类型,它们都是继承 Layer 类的。原创 2023-07-19 00:45:00 · 1436 阅读 · 0 评论 -
Openlayers实战:加载WKT文件
在OPenlayers的交互中,经常性的我们要加载一些数据,在这个实战中,演示的是加载WKT文件。WKT格式是一种文本格式,用于描述二维和三维几何对象的空间特征。WKT是“Well-Known Text”的缩写,是一种开放的国际标准,由Open Geospatial Consortium(OGC)定义和维护。WKT格式通常用于在计算机系统之间交换空间数据,例如在GIS(地理信息系统)软件和数据库之间。原创 2023-07-19 00:30:00 · 464 阅读 · 0 评论 -
Openlayers实战:加载GPX文件
在OPenlayers的交互中,经常性的我们要加载一些数据,在这个实战中,演示的是加载GPX文件。GPX(GPS eXchange Format,GPS交换格式)是一个XML格式,为应用软件设计的通用GPS数据格式。它可以用来描述路点、轨迹、路程。这个格式是免费的,可以在不需要付任何许可费用的前提下使用。它的标签保存位置,海拔和时间,可以用来在不同的GPS设备和软件之间交换数据。如查看轨迹、在照片的exif数据中嵌入地理数据。原创 2023-07-18 00:45:00 · 268 阅读 · 0 评论 -
Openlayers实战:加载CSV文件
在OPenlayers的交互中,经常性的我们要加载一些数据,在这个实战中,演示的是加载CSV文件。CSV(Comma-Separated Values)是一种常用的数据交换格式,是一种纯文本文件格式。CSV的格式很简单,以逗号为分隔符,在每行记录内按照一定顺序排列数据,每个数据之间都用逗号隔开,并且行与行之间用换行符(\n)分割。CSV格式的文件可以用纯文本编辑器打开,很容易处理、存储和传输。CSV格式广泛应用于电子表格软件、数据库、Web应用程序等领域,可以方便地将数据信息转移和共享。原创 2023-07-18 00:30:00 · 354 阅读 · 0 评论 -
Openlayers实战:加载SHP文件
在OPenlayers的交互中,经常性的我们要加载一些数据,在这个实战中,演示的是加载SHP文件。SHP 是用于表示 ESRI Shapefile 的主要文件类型之一的文件扩展名。它以矢量数据的形式表示地理空间信息,以供地理信息系统 (GIS) 应用程序使用。该格式已被开发为开放规范,以促进 ESRI 和其他软件产品之间的互操作性。原创 2023-07-17 14:37:36 · 1072 阅读 · 0 评论 -
Openlayers实战:加载GeoJSON
在OPenlayers的交互中,经常性的我们要加载一些数据,在这个实战中,演示的是加载GeoJSON文件。GeoJSON 是一种使用JavaScript 对象表示法(JSON) 对地理数据结构进行编码的格式。简而言之,GeoJSON 为你提供了一种简单的格式来表示简单的地理特征以及它们的非空间属性。原创 2023-07-17 11:51:12 · 739 阅读 · 0 评论 -
Openlayers实战:加载KML文件
在OPenlayers的交互中,经常性的我们要加载一些数据,在这个实战中,演示的是加载KML文件。具有 .KML 文件扩展名的文件是 Keyhole 标记语言文件。KML 文件使用 XML 通过存储位置、图像叠加、视频链接以及线条、形状、3D 图像和点等建模信息来表达地理注释和可视化。原创 2023-07-17 11:19:41 · 825 阅读 · 0 评论 -
Openlayers实战:多地图底图切换
在实际的地图项目中,不管是我们看到的百度地图还是高德地图等,都会有地图切换这一项。在Openlayers实战中,我们用三种地图做demo,分别是谷歌地图。Openstreetmap,stamen地图。切换的主要原则是设置三个底图层,设定其显示状态,用到了visible这一个属性。原创 2023-07-15 00:45:00 · 1306 阅读 · 3 评论 -
Openlayers实战:加载Bing地图
Bing地图在地图领域有一定的江湖地位,是微软公司的产品。在Openlayers其内置了Bing地图的方法,可以研究其API。我们的实战中是要其成为一个底图,很简单的就可以加载出来。原创 2023-07-15 00:30:00 · 273 阅读 · 0 评论 -
Openlayers实战:加载高德地图
在国内地图市场上,高德地图占据了重要的地位。Openlayers可以加载高德地图,这其中根据不同的参数,可以显示遥感地图,矢量地图等,可以显示中文,英文。原创 2023-07-14 00:45:00 · 1173 阅读 · 0 评论 -
Openlayers实战:加载天地图
国家地理信息公共服务平台“天地图”(以下简称“天地图“)是国家基础地理信息中心建设的网络化地理信息共享与服务门户。其属于国家队的,有一定的权威性。在Openlayers中如何加载天地图呢,方法很简单,用XYZ的形式。它分为底图和标注,可以灵活的做配合使用。原创 2023-07-14 00:30:00 · 1177 阅读 · 0 评论 -
Openlayers实战:加载google地图
google地图在业界一直是标杆的存在, 其zoomlevel超级大,可看到非常精细的程度。Openlayers中如何加载谷歌地图呢?同样是XYZ的挂载方式,根据参数的不同,可以显示不同状态的谷歌地图,如果矢量地图,瓦片遥感图片等。原创 2023-07-13 00:45:00 · 589 阅读 · 0 评论