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

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

082:vue+openlayers 右键菜单 (示例代码)

第082个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+openlayers中使用contextmenu扩展来改造添加右键菜单,可以实现多种功能。 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果; 注意如果OpenStreetMap无法加载,请加载其他地图来练习 示例效果 ...

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...

085:vue+openlayers加载gif图片动画 (示例代码)

第085个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+openlayers中通过gifler来添加gif文件。 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果; 注意如果OpenStreetMap无法加载,请加载高德或者百度地图来练习 示例效果 ...

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

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...

173:vue+openlayers:解决国内openstreetmap地图加载不出来的问题(代码示例)

第173个 点击查看专栏目录 近来写程序,发现openlayers用OSM方式来加载OpenStreetMap地图,一片爆红,瓦片加载不出来。 本示例的目的是介绍演示如何在vue+openlayers中解决OpenStreetMap地图在国内被DNS污染,加载不出来瓦片的问题,通常我们是直接引用OSM,这里采用的是XYZ方式来加载瓦片的路径,最重要是url的路径要稍加修改一点点,就能加载出来OpenStreetMap了。 直接复制下面的 vue+openlayers源代码,操作2...

084:vue+openlayers数据聚合 ( 代码示例 )

第084个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+openlayers中使用cluster,生成聚合的效果。 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果; 注意如果OpenStreetMap无法加载,请加载高德或者百度地图来练习 示例效果 配置方式 ...

130:vue+openlayers 加载中国边界JSON数据(EPSG:4326)

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

081:vue+openlayers: 抽稀算法,缩减点数展示运动轨迹(示例代码)

第081个 点击查看专栏目录 本示例的目的是介绍如何在vue+openlayers项目中使用抽稀算法,缩减点的数量,展示轨迹。 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果; 注意如果OpenStreetMap无法加载,请加载其他地图来练习 示例效果 ...

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

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...

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...

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

174:vue+openlayer: 经纬度坐标与屏幕坐标pixel转换,transformExtent将区间坐标由4326转换为3857

第174个 点击查看专栏目录 本示例的目的是介绍如何在vue+openlayer中使用draw来绘制矩形,获取到左上点的经纬度坐标和桌面坐标,并将extent的4326转换为3857坐标系 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果 示例效果 配置方式 1)查看基础设置:h...

175:vue+openlayers 给feature填充渐变色

第175个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+openlayers中加载解析json文件,同时给feature添加渐变颜色,呈现出绚丽的效果。 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果; 注意如果OpenStreetMap无法加载,请加载其他来练习 示例效果 ...

176:vue+openlayers 给feature填充pattern模式颜色

第176个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+openlayers中加载解析json文件,同时给feature添加渐变颜色,呈现出绚丽的效果。 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果; 注意如果OpenStreetMap无法加载,请加载其他来练习 示例效果 ...