🚀 教程总览
欢迎来到 Vue3+Openlayers 系列教程,这里是我在 CSDN 编写的所有 Vue3+Openlayers 系列相关文章的索引页,适合初学者到进阶用户系统阅读。每篇文章都有配图 + 实战代码,建议收藏!
📘 Map篇
- 56.用moveend事件获取地图左上和右下的坐标信息
- 57.点击选择feature,并设置特定的颜色
- 75.点击旋转loading,渲染后取消加载
- 77.使用右键弹出菜单,执行功能
- 109.实现事件 loadstart 和 loadend
- 121.去掉鼠标右键默认菜单并显示 Feature 信息
- 129.点击获取重叠要素信息(支持多 Feature)
- 143.调节地图的明亮度、对比度、饱和度
- 144.设置地图的反转色、复古色、灰度图、原始图
- 145.设置原始图、模糊、色相翻转、阴影效果
🎨 View篇
- 87.设置zoom范围,最大值和最小值
- 88.根据zoom的不同,显示不同的地图
- 91.非4326,3847的投影示例
- 92.set extent 和 fit extent功能
- 95.共享view,同步两个地图
- 98.根据Resolution的不同,显示不同的地图
- 105.加载静态图片作为地图底图
- 106.动态添加 Layer 到 LayerGroup,并动态删除
- 107.视图联动功能
- 110.实时显示 zoom 及四角坐标
🧱 Layers篇
- 50.图层切换控件示例(引用layerswitcher扩展版)
- 51.根据visible来更换底图(radio切换方式示例)
- 89.地图上添加网格线
- 94.普通加载vector图层,根据设定名称添加/移除图层
- 101.使用 declutter 避免文字标签重叠
- 103.控制图层来显示/隐藏地图
- 108.加载 XYZ 地图的示例
- 115.解决弹窗中的地图不显示问题!
- 116.加载谷歌地图(另一种 URL 方式)
- 120.清空删除所有图层功能
- 122.图层层级控制(zIndex)显示与设置详解
- 132.做蒙版过滤处理,实现剪切、遮罩效果
- 133.画多边形,任意编辑,并做遮罩剪切处理
- 136.实现 GroupLayer 的添加、删除、显示、隐藏
- 140.使用缩略图切换底图
- 142.图层透明度调节
🌀 Sources篇
- 38.导出地图为 PDF
- 39.导出 GeoJSON 文件及详解 GEOJSON 格式
- 41.读取WKT数据,输出GML、Polyline、GeoJSON
- 63.画各种图形并获取feature信息
- 73.选取feature,平移feature示例
- 85.上传解析文件,支持.geojson .kml .shp格式
- 93.根据feature来适配到相应的地图窗口
- 112.加载 GeoJSON 数据(url 引用方式,非 readFeatures)
- 119.加载中国边界 JSON 数据(EPSG:4326)
- 138.绘制矩形并标记首尾点、中心点与所有经纬度坐标
📦 Controls篇
- 67. 测量距离和面积(引用封装代码版)
- 86. 自定义组件(放大、缩小、长度测量、面积测量)
- 113. 鼠标移动显示坐标信息
- 114.实现清除所有控件,按需添加 Control 控件
- 130.测量距离和面积(20行核心代码简化版)
- 131.测量长度和面积,modifyend后更改数值
🧭 Interactions篇
- 54.选择、修改、捕捉select-modify-snap功能展示
- 58.使用draw 画点、线、圆、多边形
- 59.使用draw绘制正方形、矩形、六芒星
- 60.使用draw绘制自由线段、自由多边形
- 65.绘制一条带有箭头的线
- 69.拖拽放大所选区域(DragPan)
- 70.拖拽放大所选区域(DragZoom)
- 71.按住Shift拖拽,旋转放缩地图(DragRotateAndZoom)
- 72.Drag-and-Drop拖拽文件解析显示图形
- 117.CTRL 控制拖拽和滚动缩放
- 118.绘制矩形、drawend 取消锚点、屏蔽双击放大事件
- 123.绘制 Draw 多边形并 Modify 编辑图形
- 124.编辑事件 modifystart 和 modifyend
- 126.绘制正方形、正三角形、正五边形
- 127.绘制矩形 —— 利用 createBox 来处理
- 128.绘制矩形截图并保存地图区域
- 134.根据坐标点数组值,绘制多边形,显示面积数
- 141.地图状态与 URL 同步交互,显示地图中心点、放缩级别、旋转角度等
- 149. 绘制多边形(限制最小边数和最大边数)
🧩 Geom篇
💻 Overlay篇
- 45.鼠标点击播放视频
- 46.双击鼠标显示品牌代言人名片
- 47.鼠标点击显示企业名片
- 48.鼠标悬停显示城市名片
- 49.鼠标单击地图获取坐标信息新方法(引用Popup扩展版)
- 52.使用overlay的setPosition来定位弹窗
- 53.点击地图获取经纬度赋值到输入框中示例(EPSG:3857)
- 100.使用 marker-feature 添加 Marker
📌 Style篇(静态、动态、其他)
- 62.设置不同的坐标点,用不同的颜色区分
- 66.显示闪闪发光的点划线
- 82.地图中间位置闪烁点动画(封装代码版)
- 99.配置Icon和text的参数
- 104.通过singleclick选择元素并更换样式
- 135.画多边形,并用圆点标识每个转折点
- 139.绘制多边形拐点(不同形状表示)
👀 动画交互篇(线段轨迹、定点动画、移动动画)
- 55.风场快速移动效果
- 64.显示带箭头的路线轨迹,箭头居中
- 68.轨迹路线动画
- 74.游龙动画效果
- 80.使用gifler加载gif动画
- 83.实时显示单个卫星的位置及轨迹
- 97.根据两行根数计算并显示卫星轨迹
- 102.定位动画(平移-弹性平移-飞行)
- 111.动态曲线流动图(类似 ECharts 迁徙状态)
🧑💻 与canvas,echarts,turf等交互
- 40.实现 canvas 遮罩效果
- 42.利用canvas clip 实现探照灯效果
- 43.利用 Canvas Clip 实现上卷帘功能
- 44.利用 Canvas Clip 实现左卷帘功能
- 90.使用canvas个性化圆形
- 146.在地图中添加ECharts 饼图
- 147.地图上 ECharts 模拟飞机循环飞行
- 148.在地图上添加 ECharts 柱状图
🧪 性能优化
📮 综合应用
- 76.获取使用者当前的地理位置
- 78.实现地图地点搜索定位功能
- 79.实现聚合数据
- 81.显示 Indoor 各个楼层的商铺信息
- 84.双向互动-列表与图层互相提示位置信息
- 137.实现蒙版图层遮罩挖空,显示底图图像
👀 更多教程正在持续更新中,欢迎关注我,一起探索 Openlayers 的强大魅力!
🔖 收藏本页,方便随时查阅 👇
👉 点我关注 + 收藏目录页