077:vue+openlayers加载geoserver发布的遥感影像,开启关闭AOI及影像(示例代码)

第077个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+openlayers中加载geoserver发布的遥感影像数据,通过边界,创造出AOI边框,实现一个对照的效果。 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果; 注意如果OpenStreetMap无法加载,请加载其他地图来练习 示例效果 ...

vue后台系统管理项目-openlayers地图定位、港口数据标记功能

openlayers地图功能 使用openlayers开发实现查找的货源在地图的显示标注,点击货源图标进行当前港口信息显示; 通过查询的港口列表数据,点击当前港口在地图定位显示,添加港口选中标记功能; OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包,用于实现标准格式发布的地图数据访问。  OpenLayers是一个用于开发WebGIS客户端的JavaScript包。 在操作方面,OpenLayers 除了可以在浏览器中帮助开发者实现地...

openlayers示例教程100+【目录】

openlayers示例教程100+教程旨在为开发者提供简单快捷的代码示例,复制即可用。在每一个示例中,都凝练着简明扼要的代码,做到简易实现,轻松学会。 目录 综合应用 示例示例 抽稀算法,减少点数,展示轨迹 实现风场快速移动效果双向互动—列表与图层互相提示位置信息动态计算并显示单个卫星的位置及轨迹(EPSG:4326 计算并显示卫星轨迹(EPSG:3857) 使用右键弹出菜单,执行功能 实现地图地点搜索定位功能 显示带箭头的路线轨迹,箭头居中 使用gifler加载gif动画示例 简单实现聚合数据示...

129:vue+openlayers:extent 在EPSG:4326,EPSG:3857,EPSG:900913,CRS:84的范围值

第129个 点击查看专栏目录 openlayers中会使用extent来设定地图的显示范围。以下是一屏map的范围。 EPSG:4326 和 CRS:84 extent:[-180.0, -85.0511287798066, 180.0, 85.0511287798066] EPSG:3857 和 EPSG:900913 extent:[-20037508.342789244, -20037508.342789244, 20037508.342789244, 20037508.3...

125:解决vue+openlayers弹窗中的地图不显示的问题 ( 代码示例 )

第125个 点击查看专栏目录 本示例的目的是解决在vue+openlayers项目中弹窗里的地图不显示的问题。在vue+openlayer的开发的过程中,曾发现了这样的一个问题:点击button,弹出窗口,在弹窗内是加载了openlayers地图的代码,发现显示地图是一片空白,然后Ctrl+Shift+i ,进入调式窗口后,将弹窗的大小改变了,这时候才能正常加载出来地图。为了改变这种状态,采用updateSize()函数来强行挂在地图。 直接复制下面的 vue+openlayer...

118:vue+openlayers 加载geoserver普通layer的数据(示例代码)

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

126:vue+openlayers 加载谷歌地图(另一种URL方式)

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

165:vue+openlayers 利用turf实现遮罩挖洞效果

第165个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+openlayers项目中利用turf的方式来进行遮罩打洞,显示底部信息。 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果; 注意如果OpenStreetMap无法加载,请加载其他地图来练习 示例效果 ...

170:vue+openlayers 绘制地图上多个点的信封envelope矩形

第170个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+openlayers项目中如何根据多边形的几个坐标点来获取面积值。 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果; 注意如果OpenStreetMap等无法加载,请加载其他地图来练习 示例效果 <...

169:vue+openlayers 根据多边形坐标,获取面积值

第169个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+openlayers项目中如何根据多边形的几个坐标点来获取面积值。 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果; 注意如果OpenStreetMap等无法加载,请加载其他地图来练习 示例效果 ...

171:vue+openlayers 获取两个多边形的交集、差集、并集

第171个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+openlayers项目中获取两个多边形的交集、差集、并集。 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果; 注意如果OpenStreetMap等无法加载,请加载其他地图来练习 示例效果 <...

openlayers中的Features绑定id

发布时间:2022-11-11 OPENLAYERS VUE JAVASCRIPT
openlayers给每个Features绑定id //获取this.map.getLayers().forEach((layer)=>{ if( typeof layer ===undefined){} else{ var source = layer.getSource(); if(source instanceof VectorSource){ var features = source.get...

117:vue+openlayers: 实时显示zoom,并显示左下、左上、右上、右下的坐标 ( 示例代码 )

第117个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+openlayers中显示窗口中地图的左上、左下、右上、右下的坐标信息,并实时显示zoom的值。这里用到了moveend的事件。 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果; 注意如果OpenStreetMap无法加载,请加载其他地图来练习 示例效果 ...

123:vue+openlayers 动态显示鼠标位置坐标2 (示例代码)

第123个 点击查看专栏目录 本示例的目的是介绍演示如何在openlayers中添加鼠标的位置信息,动态的显示在地图上。 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果; 注意如果OpenStreetMap无法加载,请加载其他地图来练习 示例效果 配置方式 1&#x...

QGIS、Openlayers、proj4js使用地方坐标系

发布时间:2022-11-09 QGIS OPENLAYERS PROJ4JS GIS
本人经手一个内部使用的GIS系统,需要采用地方坐标系。 1、找遍各种资料,都说proj4js只能采用epsg定义好的(http://www.epsg.org/); 2、经过各种试验,这样来处理: 1)使用QGIS切片前,数据源要配置成地方坐标系。使用QGIS自带的切片工具进行。 2)在前端开发时,自己定义一个,大概如下: /*定义坐标系*/proj4.defs([SD1900, +proj=tmerc +lat_0=0 +lon_0=100.832 +k=1 +x_0=500000 +y_0=0 +ell...

Gis 之OpenLayers入门简介

发布时间:2022-11-17 OPENLAYERS 前端 GIS地图 ARCGIS
Gis 之OpenLayers入门简介 OpenLayers(openlayers.org/)是一个用来帮助开发Web地图应用的高性能的、功能丰富的JavaScript类库,可以满足几乎所有的地图开发需求。 API 文档: https://openlayers.org/en/latest/apidoc/ 例子: https://openlayers.org/en/latest/examples/ 要想在浏览器中显示交互式的地图很难,因为浏览器默认的只是显示静态的图片,如PNG、JPEG等格式,要交...

openlayers+turf.js绘制距离线段

发布时间:2022-11-18 封装好的函数 OPENLAYERS GIS
大家好,我是梦起,最近有一个在地图上绘制水平距离线段的要求,找遍网上资料都没发现有相关方法,只好自己查阅相关资料,然后自己写了个,如有大佬有更好方法,欢迎在评论区探讨。 思路:先计算出对应距离水平线段对应坐标点,再基于对应坐标点计算垂直上下两个坐标点,最后基于三个点计算出相应的距离线段 代码: /*** APIMethod:OpenLayers+turf绘制距离线段的接口扩展* @param origin 线段顶点* @param radius 线段距离* @returns {OpenLayers.Geo...

056:vue+openlayers风场快速移动效果(代码示例)

第056个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+openlayers中使用wind插件来实现风场快速移动的效果。 直接复制下面的 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)查...

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无法加载,请加载其他来练习 示例效果 ...

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

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

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

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

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.csdn.net/cuclife/article/details/126195754 ...

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无法加载,请加载其他来练习 示例效果 ...

046:vue+openlayers 点击某点播放视频(示例代码)

第046个 点击查看专栏目录 本示例的目的是介绍如何在vue+openlayers中点击point,弹出视频,直接播放。 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果; 注意如果OpenStreetMap无法加载,请加载其他来练习 示例效果 配置方式 1)...

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

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

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无法加载,请加载其他来练习 示例效果 ...

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

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

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(GPS eXchange Format,GPS交换格式)是一个XML格式,为应用软件设计的通用GPS数据格式。它可以用来描述路点、轨迹、路程。这个格式是免费的,可以在不需要付任何许可费用的前提下使用。它的标签保存位置,海拔和时间,可以用来在不同的GPS设备和软件之间交换数据。如查看轨迹、在照片的exif数据中嵌入地理数据。 直接复制下面的 vue+openla...

045:vue+openlayers利用canvas clip实现左卷帘功能(代码示例)

第045个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+openlayers中添加左卷帘功能。 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果 示例效果 实现思路 上下放置两个地图层,上面的地图利用canvas的...

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

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

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发布的数据,这里是加载Tile caching的缓存数据方法,具体的加载方式参考源代码。 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果; 注意如果OpenStreetMap无法加载,请加载其他地图来练习 示例效果 ...

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

第021个 点击查看专栏目录 本示例的目的是介绍如何在vue+openlayers项目中显示鼠标的经纬度坐标。 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果; 注意如果OpenStreetMap无法加载,请加载其他来练习 示例效果 配置方式 1)查看基础设置ÿ...

124:vue+openlayers:清除所有控件,按需添加Control

第124个 点击查看专栏目录 本示例的目的是介绍如何在vue+openlayer中清除所有的Control,并根据自己的需要来添加control。 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果; 注意如果OpenStreetMap无法加载,请加载其他地图来练习 示例效果 ...

060:vue+openlayers鼠标dblclick 显示品牌代言人名片(示例代码)

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

openlayers图层设置

发布时间:2022-11-11 OPENLAYERS VUE JS
需求:需要将特定的图层放在背景图同层,不遮挡其他图层 查阅官方文房,发现可以在layer处可以设置图层层级zIndex 设置图层的参数zIndex //demothis.baseLayer = new TileLayer({ source: new TileWMS({ ...... }), zIndex:-1 });...

OpenLayers 避免在双击结束绘制导致地图放大

发布时间:2022-11-16 OPENLAYERS JAVASCRIPT ECMASCRIPT 开发语言
Openlayers如何避免在绘制完成后双击地图放大 前言:最近开发中需要实现在地图上绘制矢量图形的功能,发现在绘制结束时,如果同时清除添加在地图上的绘制功能,双击地图时会触发地图默认的双击放大交互功能,故在此记录下解决思路,不记录完整代码。 问题描述: 绘制矢量图形时,有时会需要在绘制结束的同时,清除添加到地图上的绘制功能(即:点击一次进行一次绘制),故遇到了此问题,问题代码如下: beginDraw() { const drawSource = new VectorSource(); co...