035:vue+openlayers上传GeoJSON文件并解析(代码示例)

本示例的目的是介绍演示如何在vue+openlayers中本地上传GeoJSON文件,利用**new GeoJSON()**读取geojson数据,并在地图上显示图形。 点击查看本专栏内容目录列表 Openlayers示例教程100+目录 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果 示例效果 配置方式 1)查看基础设置:https://xiaozhuanlan.com/topic/1378924560 或者同样查看:https://blog.csdn.net/...

057:vue+openlayers地图图像的滤镜处理(示例代码)

本示例的目的是介绍演示如何在vue+openlayers中对地图的图像采取滤镜处理,手段包括模糊、锐化、浮雕、边缘化,阴影等。 点击查看本专栏内容目录列表 Openlayers示例教程100+目录 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果 示例效果 配置方式 1)查看基础设置:https://xiaozhuanlan.com/topic/1378924560 或者同样查看:https://blog.csdn.net/cuclife/article/detai...

025:vue+openlayers读取WKT数据显示图形(代码示例)

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

063:vue+openlayers绘制自由线段、自由多边形(代码示例)

本示例的目的是介绍演示如何在vue+openlayers项目中使用draw的属性freehand为true,来勾画自由线段和自由多边形。 点击查看本专栏内容目录列表 Openlayers示例教程100+目录 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果 示例效果 配置方式 1)查看基础设置:https://xiaozhuanlan.com/topic/1378924560 或者同样查看:https://blog.csdn.net/cuclife/article/...

061:vue+openlayer画点、线、圆、多边形( 代码示例 )

本示例的目的是介绍演示如何在vue+openlayers项目中使用draw的方式画点、线、圆、多边形。 点击查看本专栏内容目录列表 Openlayers示例教程100+目录 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果 示例效果 配置方式 1)查看基础设置:https://xiaozhuanlan.com/topic/1378924560 或者同样查看:https://blog.csdn.net/cuclife/article/details/126195754 2)将...

062:vue+openlayers绘制正方形、矩形、六芒星( 代码示例 )

本示例的目的是介绍演示如何在vue+openlayers项目中使用draw的方式画矩形、正方形、六星芒。 点击查看本专栏内容目录列表 Openlayers示例教程100+目录 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果 示例效果 配置方式 1)查看基础设置:https://xiaozhuanlan.com/topic/1378924560 或者同样查看:https://blog.csdn.net/cuclife/article/details/126195754 2)...

015:vue+openlayers 添加鹰眼效果( 代码示例 )

本示例的目的是介绍演示如何在openlayers中使添加使用鹰眼控件,呈现鹰眼的效果。 点击查看本专栏内容目录列表 Openlayers示例教程100+目录 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果 示例效果 配置方式 1)查看基础设置:https://xiaozhuanlan.com/topic/1378924560 或者同样查看:https://blog.csdn.net/cuclife/article/details/126195754 2)将上述的源...

017:vue+openlayer实现旋转地图效果( 代码示例 )

本示例的目的是介绍演示如何在vue+openlayers中控制旋转地图的视图,采用**getRotation()**获取旋转度。 点击查看本专栏内容目录列表 Openlayers示例教程100+目录 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果 示例效果 本专栏目标 在vue和openlayers联合技术栈的操控下,本专栏提供行之有效的源代码示例。 (1)提供各种地图的加载方式:baidu、高德、google,bing,OSM,stamen,maptiler,天...

040:vue+openlayers导出GeoJSON格式文件(代码示例)

本示例的目的是介绍演示如何在vue+openlayers中使用file-saver来导出geojson。 点击查看本专栏内容目录列表 Openlayers示例教程100+目录 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果 示例效果 安装依赖 npm install file-saver --save 配置方式 1)查看基础设置:https://xiaozhuanlan.com/topic/1378924560 或者同样查看:https://blog.csdn.n...

019:vue+openlayer:设置缩放滑块控件ZoomSlider (代码示例)

本示例的目的是介绍如何在vue+openlayers项目中设置缩放滑块控件 ZoomSlider。 点击查看本专栏内容目录列表 Openlayers示例教程100+目录 直接复制下面的 vue+openlayers示例源代码,操作2分钟即可运行实现效果 示例效果 ###配置方式 1)查看基础设置:https://xiaozhuanlan.com/topic/1378924560 或者同样查看:https://blog.csdn.net/cuclife/article/details/126195...

029:vue+openlayers:使用MVT格式读取瓦片数据(示例代码)

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

043:vue+openlayers利用canvas clip 实现探照灯效果(代码示例)

本示例的目的是介绍演示如何在vue+openlayers中实现探照灯的效果。 点击查看本专栏内容目录列表 Openlayers示例教程100+目录 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果 示例效果 实现思路 上下放置两个地图层,上面的地图利用canvas的clip功能,只显示选区内的信息。将鼠标放上去以后,画圆形,形成了选区,显示圆中的地图的信息。 图层渲染可以在precompose和postcompose事件处理程序中被控制,这两个事件处理程序的事件对象...

008:vue+openlayers加载6种形式google地图(代码示例)

本示例的目的是介绍演示如何在vue+openlayers中添加谷歌地图,体现了多种的形式。 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果 示例效果 配置方式 1)查看基础设置:https://xiaozhuanlan.com/topic/1378924560 或者同样查看:https://blog.csdn.net/cuclife/article/details/126195754 2)将上述的源代码,粘贴到src/views/Home.vue中,npm run...

011:vue+openlayers加载引用bing地图(多种形式)

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

012:vue+openlayers加载引用3种 Stamen地图(示例代码)

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

042:vue+openlayers实现canvas遮罩效果(代码示例)

本示例的目的是介绍演示如何在vue+openlayers中使用canvas,生成遮罩的效果。 点击查看本专栏内容目录列表 Openlayers示例教程100+目录 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果 示例效果 配置方式 1)查看基础设置:https://xiaozhuanlan.com/topic/1378924560 或者同样查看:https://blog.csdn.net/cuclife/article/details/126195754 2)将上述的源代...

010:vue+openlayer:加载天地图示例(多种形式)

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

009:vue+openlayer加载4种形式高德地图(代码示例)

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

030:vue+openlayers读取WKB数据(示例代码)

本示例的目的是介绍演示如何在vue+openlayers中读取WKB的数据,并显示图形。 点击查看本专栏内容目录列表 Openlayers示例教程100+目录 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果 示例效果 配置方式 1)查看基础设置:https://xiaozhuanlan.com/topic/1378924560 或者同样查看:https://blog.csdn.net/cuclife/article/details/126195754 2)将上述的...

014:vue+openlayers添加比例尺 (代码示例)

本示例的目的是介绍如何在openlayers中使添加使用比例尺控件,实现添加比例尺的效果。 点击查看本专栏内容目录列表 Openlayers示例教程100+目录 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果 示例效果 ###配置方式 1)查看基础设置:https://blog.csdn.net/cuclife/article/details/126195754 2)将上述的源代码,粘贴到src/views/Home.vue中,npm run serve 运行即可...

024:vue+openlayers加载远程KML文件(示例代码)

本示例的目的是介绍演示如何在vue+openlayers中添加远程KML数据,显示的是美国的边界线(EPSG:3857)。 点击查看本专栏内容目录列表 Openlayers示例教程100+目录 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果 示例效果 配置方式 1)查看基础设置:https://xiaozhuanlan.com/topic/1378924560 或者同样查看:https://blog.csdn.net/cuclife/article/details...

033:vue+openlayers上传KML文件并解析(示例代码)

本示例的目的是介绍演示如何在vue+openlayers中本地上传KML文件,利用**new KML()**读取KML数据,并在地图上显示图形。 点击查看本专栏内容目录列表 Openlayers示例教程100+目录 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果 示例效果 配置方式 1)查看基础设置:https://xiaozhuanlan.com/topic/1378924560 或者同样查看:https://blog.csdn.net/cuclife/arti...

028:vue+openlayers使用geojson数据加载热力图(示例代码)

本示例的目的是介绍演示如何在vue+openlayers中加载显示热力图,使用的是geojson数据。 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果 示例效果 配置方式 1)查看基础设置:https://xiaozhuanlan.com/topic/1378924560 或者同样查看:https://blog.csdn.net/cuclife/article/details/126195754 2)将上述的源代码,粘贴到src/views/Home.vue中,n...

020:vue+openlayers设置显示全屏功能(示例代码)

本示例的目的是介绍演示如何在openlayers中使添加使用全屏控件,呈现全屏和还原的效果。 点击查看本专栏内容目录列表 Openlayers示例教程100+目录 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果 示例效果 配置方式 1)查看基础设置:https://xiaozhuanlan.com/topic/1378924560 或者同样查看:https://blog.csdn.net/cuclife/article/details/126195754 2)将上...

018:vue+openlayers自定义地图放大缩小(代码示例)

本示例的目的是介绍如何在vue+openlayers项目中禁闭原有zoom控件,实现自定义地图放大缩小。 点击查看本专栏内容目录列表 Openlayers示例教程100+目录 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果 示例效果 ###配置方式 1)查看基础设置:https://xiaozhuanlan.com/topic/1378924560 或者同样查看:https://blog.csdn.net/cuclife/article/details/12619...

027:vue+openlayers加载远程shp数据(示例代码)

本示例的目的是介绍演示如何在vue+openlayers中利用shapefile读取远程shp数据,并在地图上显示图形。 点击查看本专栏内容目录列表 Openlayers示例教程100+目录 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果 示例效果 加载shapefile.js方式 (1)index.html中 引用js , 注意:本示例代码采用这种方式 <script src=https://unpkg.com/shapefile@0.6.6/dis...

007:vue+openlayers加载ArcGIS地图示例

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

023:vue+openlayers加载本地KML文件 (代码示例)

本示例的目的是介绍演示如何在vue+openlayers中添加本地KML数据,显示的是美国的边界线(EPSG:3857)。 点击查看本专栏内容目录列表 Openlayers示例教程100+目录 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果 示例效果 心得体会 制作本示例的时候,苦恼了半天,原来是将states.kml文件放在assets文件夹下,然后引用文件,怎么都不能显示kml文件的内容。后来放在public文件夹下,才得以正确的显示。 我猜想原因可能是,as...

026:vue+openlayers加载WMTS数据(示例代码)

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

053:vue+openlayers使用setPosition来定位弹窗(示例代码)

本示例的目的是介绍演示如何在vue+openlayers中实现popup弹窗,主要用setPosition的方式来定位弹窗,注意CSS的样式控制。 点击查看本专栏内容目录列表 Openlayers示例教程100+目录 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果 示例效果 配置方式 1)查看基础设置:https://xiaozhuanlan.com/topic/1378924560 或者同样查看:https://blog.csdn.net/cuclife/art...

036:vue+openlayers本地上传shp文件并解析(示例代码)

本示例的目的是介绍演示如何在vue+openlayers中本地上传shp文件,利用shapefile读取shp数据,并在地图上显示图形。 点击查看本专栏内容目录列表 Openlayers示例教程100+目录 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果 示例效果 加载shapefile.js方式 (1)index.html中 引用js <script src=https://unpkg.com/shapefile@0.6.6/dist/shapefile....

067:vue+openlayers显示带箭头的线段轨迹,箭头居中(示例代码)

本示例的目的是介绍如何在vue+openlayers项目中设置带有箭头的线段,箭头位于线段的中间位置。 点击查看本专栏内容目录列表 Openlayers示例教程100+目录 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果 示例效果 ###配置方式 1)查看基础设置:https://xiaozhuanlan.com/topic/1378924560 或者同样查看:https://blog.csdn.net/cuclife/article/details/126195...

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

第056个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+openlayers中使用wind插件来实现风场快速移动的效果。 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果; 注意如果OpenStreetMap无法加载,请加载其他来练习 示例效果 ...

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

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

第022个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+openlayers中添加JSON数据,显示的是中国的边界线(EPSG:3857)。 直接复制下面的 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 ...

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

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

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

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

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

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

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

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

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