021:vue+openlayer:显示经纬度坐标(代码示例)


在这里插入图片描述

第021个

点击查看专栏目录

本示例的目的是介绍如何在vue+openlayers项目中显示鼠标的经纬度坐标。

直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果; 注意如果OpenStreetMap无法加载,请加载其他来练习

示例效果

在这里插入图片描述

配置方式

1)查看基础设置ÿ

更多相关推荐


vue利用openlayers实现动态轨迹

发布时间:2022-11-13 VUE.JS JAVASCRIPT 前端
实现效果今天介绍一个有趣的gis小功能:动态轨迹播放!效果就像这样:这效果看着还很丝滑!别急,接下来教你怎么实现。代码示例基于parcel打包工具和es6语法,本文假设你已经掌握相关知识和技巧。gis初学者可能对openlayers(后面简称ol)不熟悉,这里暂时不介绍ol了,直接上代码,先体验下感觉。创建一个地图容器引入地图相关对象1234importMapfrom'ol/Map';import...

089:vue+openlayers列表与图层 提示交互( 代码示例 )

第089个点击查看专栏目录本示例的目的是介绍演示如何在openlayers中添加图层与列表的互相提示位置信息功能,做到点你看我,点我知道你的状态。直接复制下面的vue+openlayers源代码,操作2分钟即可运行实现效果;注意如果OpenStreetMap无法加载,请加载高德或者百度地图来练习示例效果由于未能够显示鼠标,稍有遗憾,基本动作还是能获悉的&#x...

086:vue+openlayers显示各个楼层地图信息 (示例代码)

第086个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers项目中调用openlayers-indoorequal,来展示不同楼层的商铺地图信息。直接复制下面的vue+openlayers源代码,操作2分钟即可运行实现效果;注意如果OpenStreetMap无法加载,请加载高德或者百度地图来练习...

088:vue+openlayers实时显示单个卫星的位置及轨迹 (示例代码)

第088个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers项目中计算并显示卫星的轨迹。直接复制下面的vue+openlayers源代码,操作2分钟即可运行实现效果;注意如果OpenStreetMap无法加载,请加载高德或者百度地图来练习示例效果...

127:vue+openlayers 使用CRTL控制map拖拽和鼠标滚动 (示例代码)

第127个点击查看专栏目录本示例的目的是介绍如何在vue+openlayers项目中设置控制条件,使用CRTL控制map拖拽和鼠标滚动。直接复制下面的vue+openlayers源代码,操作2分钟即可运行实现效果;注意如果OpenStreetMap无法加载,请加载其他地图来练习示例效果配置方式<...

078:vue+openlayers实现游龙动画效果(代码示例)

第078个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers中实现游龙动画的效果.直接复制下面的vue+openlayers源代码,操作2分钟即可运行实现效果;注意如果OpenStreetMap无法加载,请加载其他地图来练习示例效果配置方式1)查看基础设置...

068:vue+openlayers绘制带有箭头的线( 代码示例 )

第068个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers项目中使用draw的方式画带有箭头的线。直接复制下面的vue+openlayers源代码,操作2分钟即可运行实现效果;注意如果OpenStreetMap无法加载,请加载其他来练习示例效果配置方式1)查...

106:vue+openlayers 图片分解成颜色块渲染 (代码示例)

本示例的目的是介绍演示如何在vue+openlayers中图片分解,颜色块渲染。点击查看本专栏内容目录列表Openlayers示例教程100+目录直接复制下面的vue+openlayers源代码,操作2分钟即可运行实现效果示例效果安装依赖npminstallchroma-js--save引用的图片文件<...

037:vue+openlayers上传包含shp的zip文件并解析(代码示例)

第037个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers中本地上传shp文件,利用shapefile读取shp数据,并在地图上显示图形。直接复制下面的vue+openlayers源代码,操作2分钟即可运行实现效果;注意如果OpenStreetMap无法加载,请加载其他来练习</...

079:vue+openlayers点击旋转loading,渲染后取消加载

第079个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers中点击旋转loading,渲染后取消loading。直接复制下面的vue+openlayers源代码,操作2分钟即可运行实现效果;注意如果OpenStreetMap无法加载,请加载其他地图来练习示例效果配置方式1)查看基础设...

022:vue+openlayers加载中国边界JSON数据(代码示例)

第022个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers中添加JSON数据,显示的是中国的边界线(EPSG:3857)。直接复制下面的vue+openlayers源代码,操作2分钟即可运行实现效果;注意如果OpenStreetMap无法加载,请加载其他来练习示例效果...

080:vue+openlayers获取使用者当前的地理位置 (示例代码)

第080个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers中如何使用geoLocation定位使用者当前的位置。直接复制下面的vue+openlayers源代码,操作2分钟即可运行实现效果;注意如果OpenStreetMap无法加载,请加载其他地图来练习示例效果配置方式1)查看基础设置...

128:vue+openlayers 绘制矩形,drawend取消绘制锚点,屏蔽双击放大事件 (示例代码)

第128个点击查看专栏目录本示例的目的是介绍如何在vue+openlayers项目中绘制矩形,drawend取消绘制锚点,屏蔽双击放大事件。直接复制下面的vue+openlayers源代码,操作2分钟即可运行实现效果;注意如果OpenStreetMap无法加载,请加载其他地图来练习示例效果配置方式1...

133:vue+openlayers 绘制draw多边形,并modify编辑图形

第133个点击查看专栏目录本示例的目的是介绍如何在vue+openlayer中使用draw来绘制多边形,并通过modify修改多边形。同时设定了停止绘制和停止编辑的方法。直接复制下面的vue+openlayers源代码,操作2分钟即可运行实现效果示例效果配置方式1)查看基础设置:https://xiao...

075:vue+openlayers: Drag-and-Drop拖拽文件解析显示图形(代码示例)

第075个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers中采用Drag-and-Drop交互插件,拖拽文件到项目中,解析文件,显示图形。直接复制下面的vue+openlayers源代码,操作2分钟即可运行实现效果;注意如果OpenStreetMap无法加载,请加载其他来练习示例效果<...

095:vue+openlayers 地图上添加网格线 (示例代码)

第095个点击查看专栏目录本示例的目的是介绍如何在openlayers中使添加使用网格线,实现区划块的效果。直接复制下面的vue+openlayers源代码,操作2分钟即可运行实现效果;注意如果OpenStreetMap无法加载,请加载高德或者百度地图来练习示例效果配置方式1)查看基础设置...

096:vue+openlayers使用canvas个性化圆形 (示例代码)

本示例的目的是介绍演示如何在vue+openlayers中个性化style显示feature。点击查看本专栏内容目录列表Openlayers示例教程100+目录直接复制下面的vue+openlayers源代码,操作2分钟即可运行实现效果示例效果配置方式1)查看基础设置:https://xiaozhuanlan.com/topic/1378924560或者同样查看:https://blog.csdn...

066:vue+openlayers画各种图形并获取feature信息( 示例代码 )

第066个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers项目中使用draw的方式画点、线、圆、多边形等,点击获取feature,获取各自的信息。直接复制下面的vue+openlayers源代码,操作2分钟即可运行实现效果;注意如果OpenStreetMap无法加载,请加载其他来练习示例效果配置方式1...

013:vue+openlayers加载引用maptiler地图,多种展现形式

本示例的目的是介绍演示如何在vue+openlayers中添加maptiler地图,并含多种的表现形式。点击查看本专栏内容目录列表Openlayers示例教程100+目录直接复制下面的vue+openlayers源代码,操作2分钟即可运行实现效果示例效果配置方式1)查看基础设置:https://xiaozhuanlan.com/topic/1378924560或者同样查看:https://blog...

072:vue+openlayers拖拽放大所选区域(DragPan示例代码)

本示例的目的是介绍演示如何在vue+openlayers中通过DragPan方法拖拽实现放大所选区域的效果。操作方式:按住shift,然后用鼠标拖拽。点击查看本专栏内容目录列表Openlayers示例教程100+目录直接复制下面的vue+openlayers源代码,操作2分钟即可运行实现效果示例效果配置方式1)查看基础设置:https://xiaozhuanlan.com/topic/137892...

050:vue+openlayers使用Popup组件显示经纬度坐标(代码示例)

第050个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers中使用popup的形式来显示出经纬度坐标,本示例是采用引用扩展的方式,相比以往的添加方式,减少了不少的代码量。直接复制下面的vue+openlayers源代码,操作2分钟即可运行实现效果;注意如果OpenStreetMap无法加载,请加载其他来练习示例效果...

034:vue+openlayers上传KMZ文件并在map上解析(代码示例)

第034个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers中本地上传kmz文件,核心思路是利用jszip解压文件,读取kml数据,并在地图上显示图形。直接复制下面的vue+openlayers源代码,操作2分钟即可运行实现效果;注意如果OpenStreetMap无法加载,请加载其他来练习示例效果...

116:vue+openlayers的loadstart事件和loadend事件( 示例代码 )

第116个点击查看专栏目录本示例的目的是介绍如何在vue+openlayer中,使用loadstart和loadend事件的一个案例。注意点是,之前未深究是什么原因,openplayers版本6.12.0时候,这两个事件不出现效果。后来更换为7.0.0时候,好用。直接复制下面的vue+openlayers源代码,操作2分钟即可运行实现效果;注意如果OpenStreetMap无法加载,请加载其他地图...

070:vue+openlayers 引用封装js测量距离和面积(示例代码)

本示例的目的是介绍如何在vue+openlayers项目中测量长度和面积,本示例采用引用封装js的方式。直接复制下面的vue+openlayers示例源代码,操作2分钟即可运行实现效果示例效果配置方式1)查看基础设置:https://xiaozhuanlan.com/topic/1378924560或者同样查看:https://blog.csdn.net/cuclife/article/detai...

074:vue+openlayers 按住shift 拖拽,旋转放缩地图(示例代码)

第074个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers中实现拖拽旋转放缩的效果。操作方式:按住shift,然后用鼠标拖拉旋转。直接复制下面的vue+openlayers源代码,操作2分钟即可运行实现效果;注意如果OpenStreetMap无法加载,请加载其他来练习示例效果配置方...

039:vue+openlayers导出pdf格式地图(示例代码)

第039个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers中使用MVT读取矢量瓦片数据,并显示图形,点击导出地图,使用jsPDF导出pdf的地图。本示例仅为抛转引玉,生成的pdf大小位置还需要完善。直接复制下面的vue+openlayers源代码,操作2分钟即可运行实现效果;注意如果OpenStreetMap无法加载,请加载其他来练习示例效果...

134:vue+openlayers 编辑事件modifystart和modifyend(示例代码)

第134个点击查看专栏目录本示例的目的是介绍如何在vue+openlayer中使用draw来绘制多边形,并通过modify修改多边形。同时在modifystart和modifyend中设置了提示信息。直接复制下面的vue+openlayers源代码,操作2分钟即可运行实现效果示例效果配置方式1)查看基础设置ÿ...

058:vue+openlayers用moveend事件获取地图左上和右下的坐标信息(示例代码)

第058个点击查看专栏目录本示例的目的是介绍如何在vue+openlayers中使用extent,利用moveend事件获取地图左上和右下的坐标信息。直接复制下面的vue+openlayers源代码,操作2分钟即可运行实现效果;注意如果OpenStreetMap无法加载,请加载其他来练习示例效果配置方式<...

038:vue+openlayers导出 image 形式地图(示例代码)

本示例的目的是介绍演示如何在vue+openlayers中使用MVT读取矢量瓦片数据,并显示图形,点击导出地图,导出image的地图。点击查看本专栏内容目录列表Openlayers示例教程100+目录直接复制下面的vue+openlayers源代码,操作2分钟即可运行实现效果示例效果导出来的地图结果配置方式1)查看基础设置:https://xiaozhuanlan.com/to...

122:vue+openlayers 使用url引用方式加载Geojson数据 (示例代码)

第122个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers中添加显示本地GeoSON数据(EPSG:3857),采用的是URL引用的模式,非ReadFeatures的方式。直接复制下面的vue+openlayers源代码,操作2分钟即可运行实现效果;注意如果OpenStreetMap无法加载,请加载其他地图来练习示例效果...

031:vue+openlayers加载GPX数据(代码示例)

第031个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers中加载GPX数据,显示图形。GPX(GPSeXchangeFormat,GPS交换格式)是一个XML格式,为应用软件设计的通用GPS数据格式。它可以用来描述路点、轨迹、路程。这个格式是免费的,可以在不需要付任何许可费用的前提下使用。它的标签保存位置,海拔和时间,可以用来在不同的GPS设备和软件之间交换数据。如查看轨迹...

099:vue+openlayers根据 feature来扩展到一定的地图窗口大小(示例代码)

本示例的目的是介绍如何在vue+openlayers中使用extent,使用featurefit的方式来适配窗口。点击查看本专栏内容目录列表Openlayers示例教程100+目录直接复制下面的vue+openlayers源代码,操作2分钟即可运行实现效果示例效果配置方式1)查看基础设置:https://xiaozhuanlan.com/topic/1378924560或者同样查看:https:/...

132:vue+openlayers: 设置显示图层的层级数zIndex (示例代码)

第132个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers中设置显示层级数zIndex。每一个图层都像一张纸似的,叠加在一起,上面的层级数zIndex值高,下面的层级数小。直接复制下面的vue+openlayers源代码,操作2分钟即可运行实现效果示例效果配置方式...

101:vue+openlayers 根据Resolution的不同,显示不同的地图 (示例代码)

本示例的目的是介绍演示如何在vue+openlayers中根据Resolution的不同,显示不同的地图。点击查看本专栏内容目录列表Openlayers示例教程100+目录直接复制下面的vue+openlayers源代码,操作2分钟即可运行实现效果示例效果配置方式1)查看基础设置:https://xiaozhuanlan.com/topic/1378924560或者同样查看:https://blo...

052:vue+openlayers根据visible来更换底图(代码示例)

第052个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers中根据visible的值来显示不同的地图,hover按钮弹出切换弹窗。直接复制下面的vue+openlayers源代码,操作2分钟即可运行实现效果;注意如果OpenStreetMap无法加载,请加载其他来练习示例效果配置...

112:vue+openlayers 加载静态图片,变成地图一部分( 示例代码 )

本示例的目的是介绍如何在openlayers中使添加静态图片,变成地图一部分。点击查看本专栏内容目录列表Openlayers示例教程100+目录直接复制下面的vue+openlayers源代码,操作2分钟即可运行实现效果示例效果配置方式1)查看基础设置:https://xiaozhuanlan.com/topic/1378924560或者同样查看:https://blog.csdn.net/cuc...

097:vue+openlayers: 非4326,3857的投影方法 (示例代码)

本示例的目的是介绍演示如何在vue+openlayers中加载非4326,3857的投影的示例。点击查看本专栏内容目录列表Openlayers示例教程100+目录直接复制下面的vue+openlayers源代码,操作2分钟即可运行实现效果示例效果安装依赖npmiproj4--save配置方式1)查看基础设置:https://xiaozhuanlan.com/topic/1378924560或者同样...

051:vue+openlayers使用layerswitcher切换图层(示例代码)

第051个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers中使用layerSwitcher扩展来切换不同的图层,引用一个代码模块,简化代码量。直接复制下面的vue+openlayers源代码,操作2分钟即可运行实现效果;注意如果OpenStreetMap无法加载,请加载其他来练习示例效果...

048:vue+openlayers鼠标click显示企业名片(代码示例)

第048个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers中采用overlay实现企业名片的效果,鼠标点击到相应的位置点,出现企业的信息名片。直接复制下面的vue+openlayers源代码,操作2分钟即可运行实现效果;注意如果OpenStreetMap无法加载,请加载其他来练习示例效果配置...

119:vue+openlayers加载geoserver的Tile caching中的数据(示例代码)

第119个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers中加载geoserver发布的数据,这里是加载Tilecaching的缓存数据方法,具体的加载方式参考源代码。直接复制下面的vue+openlayers源代码,操作2分钟即可运行实现效果;注意如果OpenStreetMap无法加载,请加载其他地图来练习示例效果...

131:vue+openlayers 去掉鼠标右键默认菜单,rightClick显示feature信息 (示例代码)

第131个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers中取消鼠标右键默认菜单,并且右击后根据获取到的feature值来进行下一步动作,本示例为展示右键获取到的feature信息。直接复制下面的vue+openlayers源代码,操作2分钟即可运行实现效果示例效果配置方式1)查看基础设置&...

016:vue+openlayer修改自定义地图版权信息( 示例代码 )

本示例的目的是介绍如何在vue+openlayers项目中修改并自定义地图的版权信息。点击查看本专栏内容目录列表Openlayers示例教程100+目录直接复制下面的vue+openlayers源代码,操作2分钟即可运行实现效果配置方式1)查看基础设置:https://blog.csdn.net/cuclife/article/details/1261957542)将上述的源代码,粘贴到src/v...

139:vue+openlayers 单击某点,获取当前坐标-多层重叠下的所有features信息

第139个点击查看专栏目录本示例的目的是介绍如何在vue+openlayer中获取某个点坐标下所有的features。点击某一个点,获取位置pixel,根据pixel来获取所有的features。直接复制下面的vue+openlayers源代码,操作2分钟即可运行实现效果示例效果配置方式1)查看基础设...

140:vue+openlayers 右键点击定位,获取某一点下多层features信息

第140个点击查看专栏目录本示例的目的是介绍如何在vue+openlayer中右键点击获取某个点坐标下所有的features。右键点击某一个点,获取位置pixel,根据pixel来获取所有的features。直接复制下面的vue+openlayers源代码,操作2分钟即可运行实现效果示例效果配置方式1)...