openlayers示例教程100+【目录】
2024-04-17 00:37:17
目前已完成240个示例
openlayers示例教程100+教程旨在为开发者提供简单快捷的代码示例，复制即可用。在每一个示例中，都凝练着简明扼要的代码，做到简易实现，轻松学会。
文章目录
- 目录
- 综合应用
- 交互Interaction、刻画Geom
- 轨迹、动画
- 文件：上传 、导出、 加载
- 地图：切换，加载，问题解决
- 基础：layer，view, data，配置，坐标系
- 元素feature，样式Style
- 控件Control、事件Event
- 交互：canvas、turf、echarts，d3，插件
- 能力优化
- 叠加层（Overlay）
目录
综合应用
| 示例 | 示例 |
|---|---|
| 1 | 双向互动—列表与图层互相提示位置信息 |
| 2 | 实现地图地点搜索定位功能 |
| 3 | 简单实现聚合数据示例 |
| 4 | 显示indoor的各个楼层的商铺信息 |
| 5 | 获取使用者当前的地理位置 |
| 6 | 设置时间显示白天黑夜交替图 |
| 6 | 实现云雾缭绕，白鸽飞翔的效果 |
| 7 | 模仿共享单车，判断点是否放在规划的电子围栏内 |
| 8 | 控制蒙版层显示隐藏，蒙版中部挖空显示下面地图信息 |
| 9 | 根据卫星lat，lon，alt，俯仰角，方位角，绘制地面的拍摄的区域 |
| 10 | 动态位置高度角度，模拟卫星地面覆盖区域的大小 |
| 11 | 圆孔相机根据卫星经度、纬度、高度、半径比例推算绘制地面的拍摄的区域 |
交互Interaction、刻画Geom
| 类型 | 名标题 |
|---|---|
| draw | 绘制点，判断它是否在一个电子围栏之内 |
| draw | 使用draw画点、线、圆、多边形 |
| draw | 使用draw画正方形、矩形、六芒星 |
| draw | 使用draw画自由线段、自由多边形 |
| draw | 绘制矩形，拖拽编辑Modify后仍然为矩形 |
| draw | 绘制矩形,截取对应部分的地图并保存 |
| draw | 利用createBox()，绘制矩形 |
| draw | 绘制多边形，drawend获取到多边形的所有点坐标 |
| draw | 绘制多边形，生成geojson数据，计算出面积 |
| draw | 绘制draw多边形，并modify编辑图形 |
| draw | 绘制一个多边形，避免线段交叉，drawend有交叉提示并重绘 |
| draw | 绘制多边形，限定最小边数和最大边数 |
| draw | 绘制正三角形，正方形，正五边形… |
| draw | 绘制扩展，弓形、曲线、扇形、双箭头、进攻方向… |
| draw | 直接画带有箭头的线段 |
| draw | 绘制带有径向渐变填充色的圆形 |
| Geom | 利用turf绘制椭圆形 |
| Geom | 根据坐标显示点、线、圆、多边形 |
| Geom | 输入经纬度坐标，校验并在地图上标记点，enter提交 |
| Geom | 矢量图形的剪切、复制和粘贴 |
| Geom | 编辑矢量图形（放缩、平移、变形、旋转） |
| Geom | 实现多个图形的合并、交叉、差集等功能 |
| measure | 测量距离和面积（20行核心代码简化版） |
| measure | 测量距离和面积（引用封装代码版） |
| measure | 自定义组件（放大、缩小、长度测量、面积测量） |
| measure | 根据多边形坐标，利用turf获取面积值 |
| measure | 利用turf获取两点之间的距离 |
轨迹、动画
| 类型 | 标题 |
|---|---|
| 线段轨迹 | 抽稀算法，减少中间点数，展示新的轨迹 |
| 线段轨迹 | 显示带箭头的路线轨迹，箭头居中 |
| 位置定位 | 定位动画（平移-弹性平移-飞行） |
| 位置定位 | easing的API及在view.animation中使用示例 |
| 位置定位 | 地图旋转移动动画、CSS缩放动画，介绍animate的使用方法） |
| 点位移动 | 利用屏幕坐标，实现轨迹路线动画） |
| 点位移动 | 小汽车移动轨迹动画，带开始、暂停、结束控制键 |
| 点位移动 | 带开始、暂停、结束控制的轨迹动画，路过后轨道呈现不同颜色 |
| 点位移动 | 动态计算并显示单个卫星的位置及轨迹（EPSG:4326） |
| 点位移动 | 根据两行根数计算并显示卫星轨迹（EPSG:3857） |
| 点位移动 | 调整卫星运动的播放速度，展示运动轨迹（EPSG:3857） |
| 面位移动 | 实现风场快速移动效果 |
| 点位移动 | 游龙动画效果 |
| 面位移动 | 实现风场快速移动效果 |
| 线段扩展 | 动态迁徙曲线流动图 |
| 图片动画 | 使用gifler加载gif动画示例 |
| 图片动画 | 加载动画，采用css的@keyframes方式 |
| 图片动画 | 加载gif文件，采用CSS设置gif背景的方式 |
文件：上传 、导出、 加载
| 类别 | 名称 |
|---|---|
| 上传 | 上传KML文件，并在地图上展现 |
| 上传 | 上传KMZ文件，并解析在地图上 |
| 上传 | 上传GeoJSON文件，并解析在地图上 |
| 上传 | 本地上传shp文件，并解析在地图上 |
| 上传 | 上传包含shp的zip文件，解析并地图显示 |
| 上传 | 上传解析文件，支持.geojson .kml .shp格式 |
| 上传 | 上传CSV文件，导出Geojson格式文件 |
| 上传 | 上传CSV文件，在地图上显示信息 |
| 上传 | 上传GPX文件，导出geojson文件 |
| 上传 | 上传GeoJSON文件，导出CSV格式文件 |
| 导出 | 导出地图（image文件） |
| 导出 | 导出地图（pdf格式） |
| 导出 | 导出GeoJSON格式文件 |
| 导出 | 读取WKT数据，导出GML、Polyline、GeoJSON |
| 导出 | 使用draw绘制多边形，导出KML文件，自定义name和style |
| 导出 | 根据polygon信息显示多边形，导出KML文件，自定义name和style |
| 导出 | 3857坐标系项目下导出KML文件，自定义name和style |
| 导出 | 绘制自定义图形，导出为geojson文件 |
| 导出 | 加载geojson文件形成围栏，可添加、修改、删除feature，导出geojson |
| 加载 | 加载JSON数据示例（显示中国边界线 4326） |
| 加载 | 加载JSON数据示例（显示中国边界线 3857） |
| 加载 | 加载远程KML数据示例 |
| 加载 | 加载本地KML数据示例，解决KML文件不显示问题 |
| 加载 | 加载WKT数据，显示图形 |
| 加载 | 加载WKT数据，输出GML、Polyline、GeoJSON |
| 加载 | 加载WMS数据示例 |
| 加载 | 加载WMTS数据，显示图形 |
| 加载 | 加载远程shp数据，并在map上显示图形 |
| 加载 | 加载本地shp数据，并在map上显示图形 |
| 加载 | 加载热力图一（加载geojson数据） |
| 加载 | 加载热力图二（引用geoServer） |
| 加载 | 加载热力图三（引用gJSON数据，可以调节半径大小和模糊程度） |
| 加载 | 使用readFeatures加载GeoJSON文件 |
| 加载 | URL模式加载GeoJSON文件，注意跨域问题 |
| 加载 | 使用MVT格式读取矢量瓦片数据 |
| 加载 | 加载WKB数据，显示图形 |
| 加载 | 加载GPX数据，显示图形 |
| 加载 | 加载GPX数据，导出geojson文件 |
| 加载 | 加载CSV数据，显示图形 |
| 加载 | 加载geotiff文件，显示图形 |
| 加载 | 点击拖动地图播放mp3音频 |
地图：切换，加载，问题解决
| 序号 | 标题 |
|---|---|
| 问题解决 | 点击按钮，解决弹窗中的地图不显示的办法 |
| 问题解决 | 解决国内openstreetmap地图加载不出来的问题 |
| 切换 | 根据visible的值来更换底图，图片切换方式 |
| 切换 | 根据visible的值来更换底图，radio切换方式 |
| 切换 | 使用layerswitcher切换图层 |
| 加载 | 加载google地图（多种形式） |
| 加载 | 加载谷歌地图（另一种URL形式） |
| 加载 | 加载OpenStreetMap地图 |
| 加载 | 加载mapbox地图 |
| 加载 | 加载baidu地图 |
| 加载 | 加载arcGIS地图 |
| 加载 | 加载高德地图（多种形式） |
| 加载 | 加载天地图（多种形式） |
| 加载 | 加载bing地图（多种形式） |
| 加载 | 加载Stamen地图（多种形式） |
| 加载 | 加载maptiler地图（多种形式） |
| 加载 | 加载静态图片，变成地图一部分 |
| 加载 | 加载XYZ地图 |
| 加载 | 添加网格线示例 |
| 加载 | 加载多种形式Esri地图 |
| 加载 | 加载geoserver发布的遥感影像，开启关闭AOI及影像示例 |
| 加载 | 加载geoserver普通layer的数据示例 |
| 加载 | 加载geoserver的Tile caching中的数据示例 |
| 加载 | 加载geoserver数据，使用ImageWMS和ImageLayer呈现图形 |
| 加载 | 加载geoserver瓦片WMS数据，使用getFeatureInfoUrl获取瓦片数据信息 |
| 加载 | 通过WFS服务加载geoserver发布的geojson矢量数据 |
| 加载 | 使用new WFS加载数据，通过like,and,equalTo来过滤数据 |
| 加载 | 预加载preload瓦片地图，减少过渡期间的空白区域 |
| 调节 | 设置地图的原始图、模糊效果、色相翻转、阴影效果 |
| 调节 | 设置地图的反转色、复古色、灰度图、原始图 |
| 调节 | 调节地图的明亮度、对比度、饱和度 |
基础：layer，view, data，配置，坐标系
| 序号 | 标题 |
|---|---|
| 配置 | 从0到1搭建基础开发环境 |
| data | 认识常用的10多种数据格式 |
| data | 中国及各省市边界区划JSON数据 |
| layer | 显示设置图层的层级数 |
| layer | 清除所有图层的有效方式 |
| layer | 普通加载vector图层，根据设定名称添加移除图层 |
| layer | 动态添加layer到layerGroup，并动态删除 |
| layer | 从LayerGroup中添加删除Layer，显示、隐藏图层组 |
| layer | 使用declutter，避免文字标签重叠 |
| layer | 设定修改图层的透明度 |
| layer | 预加载preload瓦片地图，减少过渡期间的空白区域 |
| layer | 做蒙版过滤处理，实现剪切、遮罩效果 |
| layer | 画多边形，任意编辑，并做遮罩剪切处理 |
| source | 监听瓦片地图加载情况，200、403及其他状态码的处理示例 |
| 坐标系 | 3857坐标系和4326坐标系 |
| 坐标系 | EPS3857,4326,900913,CRS84坐标系 extent范围 |
| 坐标系 | 非4326,3857的投影示例 |
| 坐标系 | 经纬度坐标与屏幕坐标pixel转换，transformExtent将区间坐标由4326转换为3857 |
| view | 设置zoom范围，最大值和最小值 |
| view | 根据zoom的不同，显示不同的地图 |
| view | zoom大于5弹窗，点击关闭放大不再弹出；zoom小于5后再大于5,继续弹窗 |
| view | 根据Resolution的不同，显示不同的地图 |
| view | 实时zoom，显示左下、左上、右上、右下的坐标 |
| view | 共享view，同步两个地图 |
| extent | set extent 和 fit extent |
| extent | 设置extent:bbox，限制瓦片图的加载范围，不加载空白瓦片 |
元素feature，样式Style
| 类别 | 标题 |
|---|---|
| feature | 根据 feature来适配到相应的地图窗口 |
| feature | 绘制矩形，显示首尾点和中心点坐标值，同时获取所有点的经纬度 |
| feature | 单击某点，获取当前坐标-多层重叠下的所有features信息 |
| feature | 右键点击定位，获取某一点下多层features信息 |
| feature | 去掉默认右键菜单，rightclick获取feature信息 |
| feature | 画各种图形并获取各对应的feature信息 |
| feature | 选取feature，平移feature |
| feature | 选择feature，固定按钮删除selected feature |
| eature | 选择feature，动态弹窗按钮，删除所选feature |
| feature | 多边形的绘制，编辑feature，删除所选feature和清空功能 |
| feature | 滑动某feature高亮，修改此feature的样式 |
| feature | 解决drawend后不能获取当前feature的方法 |
| feature | 添加删除修改feature信息，双向不同颜色指示互动，固定删除按钮 |
| feature | 点击某feature，列表滑动，定位到相应的点的列表位置 |
| feature | 添加删除多边形，modify feature，双向互动颜色显示 |
| feature | 加载geojson文件形成围栏，可添加、修改、删除feature，导出geojson |
| style | 配置Icon和text的参数 |
| style | 解决setText不能立即更新文字的问题 |
| style | 显示不同颜色的坐标点 |
| style | 开发闪闪发光的点划线 |
| style | 地图中间位置闪烁点动画（封装代码版） |
| style | 设置线段样式：粗细、渐变颜色、箭头及线头样式 |
| style | 多边形拐点用不同形状表示（圆形、三角形、矩形、正方形、星形…） |
| style | 画多边形，每个转折点style用圆点标识 |
| style | 使用d3实现地图区块呈现不同颜色的效果 |
| style | 给feature填充pattern模式颜色 |
| style | 给feature填充渐变色（整体） |
| style | 加载解析geojson文件，给每一个feature（非整体）添加线性渐变颜色 |
| style | 绘制带有径向渐变填充色的圆形 |
| style | easing的API及在view.animation中使用示例 |
| style | 地图旋转移动动画、CSS缩放动画，介绍animate的使用方法 |
控件Control、事件Event
| 类别 | 标题 |
|---|---|
| 控制 | 地图状态与 URL 同步交互，显示地图中心点、放缩级别、旋转角度等 |
| 控制 | 控制条件-使用CRTL控制map拖拽和鼠标滚动 |
| 控制 | 拖拽实现放大区域的效果（DragPan） |
| 控制 | 拖拽实现放大区域的效果（DragZoom） |
| 控制 | 按住shift 拖拽，旋转放缩地图 |
| 控制 | Drag-and-Drop拖拽文件解析显示图形 |
| Control | 添加比例尺功能 |
| Control | 添加鹰眼功能 |
| Control | 修改自定义地图版权信息 |
| Control | 学习Attribution各种API，示例展示自定义版权信息 |
| Control | 添加旋转地图功能 |
| Control | 自定义地图放大缩小按钮功能 |
| Control | 添加缩放滑块控件ZoomSlider |
| Control | 显示鼠标经纬度信息 |
| Control | 添加全屏显示功能 |
| Control | 清除所有控件，按需添加Control |
| 事件 | select-modify-snap功能示例 |
| 事件 | 删除selected feature |
| 事件 | postrender事件 地图图像的滤镜处理 |
| 事件 | postcompose设置地图的原始图、模糊效果、色相翻转、阴影效果 |
| 事件 | postcompose设置地图的反转色、复古色、灰度图、原始图 |
| 事件 | postcompose调节地图的明亮度、对比度、饱和度 |
| 事件 | 点击旋转loading，postrender渲染后取消loading |
| 事件 | moveend事件获取地图左上和右下的坐标信息 |
| 事件 | 引用hover插件，展示各种鼠标cursor样式 |
| 事件 | singleclick事件示例-选择feature设置成特定的颜色 |
| 事件 | click事件示例-显示企业名片 |
| 事件 | 去掉默认右键菜单，rightclick获取feature信息 |
| 事件 | 右键点击定位，获取某一点下多层features信息 |
| 事件 | 引用插件处理右键弹出菜单，执行功能 |
| 事件 | 绘制矩形,drawend取消绘制锚点,屏蔽双击放大事件 |
| 事件 | 解决drawend后不能获取当前feature的方法 |
| 事件 | 绘制多边形，drawend获取到多边形的所有点坐标 |
| 事件 | dblclick事件示例-显示品牌代言人信息 |
| 事件 | pointermove事件示例-显示城市名片 |
| 事件 | 引用hover插件，展示各种鼠标cursor样式 |
| 事件 | 事件loadstart和loadend的示例 |
| 事件 | 编辑事件modifystart和modifyend |
| 事件 | click某点，获取当前坐标-多层重叠下的所有features信息 |
交互：canvas、turf、echarts，d3，插件
| 类别 | 标题 |
|---|---|
| canvas | 添加canvas遮罩效果 |
| canvas | 使用canvas，实现探照灯效果 |
| 插件 | 引用插件，实现探照灯效果 |
| canvas | 实现上卷帘效果 |
| canvas | 实现左卷帘效果 |
| canvas | 自定义js横向卷帘，图层名称跟着分割线移动 |
| 插件 | 利用swipe插件实现左卷帘功能 |
| canvas | 使用canvas个性化圆形 |
| canvas | 绘制矩形,截取对应部分的地图并保存 |
| canvas | 图片分解，颜色块渲染 |
| turf | 对矢量多边形进行旋转、平移、放缩处理 |
| turf | 获取两个多边形的交集、差集、并集 |
| turf | 绘制地图上多个点的信封envelope矩形 |
| turf | 根据多边形坐标，获取面积值 |
| turf | 绘制线段并生成贝塞尔曲线 |
| turf | 获取两点之间的距离，非getLength方法 |
| turf | 利用turf绘制椭圆形 |
| turf | 利用turf实现遮罩挖洞效果 |
| echarts | 地图上添加Echarts饼图 |
| echarts | 地图上Echarts模拟飞机循环飞行 |
| echarts | 地图上添加Echarts环形图 |
| echarts | 地图上添加Echarts柱状图 |
能力优化
| 类别 | 标题 |
|---|---|
| 能力 | 探究加载能力的极限，100万个点？ |
| 能力 | 添加海量点，使用WebGLPoints方法 |
| 能力 | 使用WebGLPoints显示数据，根据某属性值的不同阈值显示不同颜色点 |
| 优化 | 抽稀算法，减少中间点数，显示新的轨迹 |
叠加层（Overlay）
| 序号 | 标题 |
|---|---|
| 1 | Popup坐标信息新方法（引用扩展版） |
| 2 | 使用overlay的setPosition来定位弹窗 |
| 3 | 经纬度动态赋值（EPSG:3857） |
| 4 | 移动鼠标显示城市名片 |
| 5 | 点击鼠标显示企业名片 |
| 6 | 双击鼠标显示品牌代言人信息 |
| 7 | 鼠标点击point，弹出窗口播放视频 |
openlayers示例教程100+【目录】相关推荐
- leaflet 示例教程100+ 目录
目前已发表121篇文章 vue+leaflet系列教程旨在为开发者提供简单快捷的代码示例,复制即可用.在每一个示例中,解释相应的API知识点,做到简易实现,轻松学会. 文章目录 vue+leaflet ...
- HQL - Hibernate查询语言 - 示例教程
HQL - Hibernate查询语言 - 示例教程 HQL或Hibernate查询语言是Hibernate Framework的面向对象查询语言.HQL与SQL非常相似,只是我们使用Objects而 ...
- Hibernate Tomcat JNDI DataSource示例教程
Hibernate Tomcat JNDI DataSource示例教程 欢迎来到Hibernate Tomcat JNDI DataSource示例教程.我们已经看到如何在独立的Java应用程序中使 ...
- Android ActionBar示例教程
Today we will look into Android ActionBar. Action Bar is one of the important part of any applicatio ...
- Hibernate Tomcat JNDI数据源示例教程
Welcome to the Hibernate Tomcat JNDI DataSource example tutorial. We have already seen how to use Hi ...
- （转）网站推广优化教程100条(SEO，网站关键字优化，怎么优化网站，如何优化网站关键字)...
网站推广优化教程100条(完整版)下面介绍新手建站推广完美教程,各位根据自己的实际情况酌情选用: 1.准备个好域名.①.尽量在5位数内,当然也不一定,反正要让用户好记.(看个人):②.尽量用顶级的域名 ...
- java 设计模式 示例_Java中的访问者设计模式–示例教程
java 设计模式 示例 访客模式是行为设计模式之一 . 当我们必须对一组相似类型的对象执行操作时,将使用访问者模式. 借助访问者模式,我们可以将操作逻辑从对象移动到另一个类. 例如,假设有一个购物车 ...
- java设计模式迭代器模式_Java中的迭代器设计模式–示例教程
java设计模式迭代器模式 迭代器模式是一种行为模式,它用于提供遍历一组对象的标准方式. Iterator模式在Java Collection Framework中得到了广泛使用,其中Iterator ...
- Java中的访问者设计模式–示例教程
访客模式是行为设计模式之一 . 当我们必须对一组相似类型的对象执行操作时,将使用访问者模式. 借助访问者模式,我们可以将操作逻辑从对象移动到另一个类. 例如,假设有一个购物车,我们可以在其中添加不同类 ...
最新文章
- freemarker第三篇
- 解决：Sublime Text3 packagecontrol.io 无法访问的问题
- mysql 同步备份数据库
- 引导win7+linux系统安装,win7 + ubuntu16.04LTS双系统安装（Legacy引导模式）
- 每日程序C语言5-斐波那契兔子数
- matlab simulnk笔记07——模块（接地模块group、终止模块terminal、信号合并mux与分解模块demux）
- 一文读懂 .NET 中的高性能队列 Channel
- Springboot 读取配置文件
- 中缅边境电信网络诈骗活动严重区域微信、支付宝等被封停
- KVM虚拟化相关知识简介（脑补）
- ie6-7中会出现图片下有空隙
- Python实现社交网络可视化
- java类名不能以数字开头_java变量为什么不能以数字开头
- 【京东】商品评价采集
- 微软测试管理框架（Microsoft Test Manager）
- OGG FOR BIGDATA 安装(修正)
- 海康摄像头，设置了分辨率参数，保存后又自动恢复，怎么办
- Linux下conda安装caffe（超简单），pb转caffe
- C++中两个unsigned型数值相减
- 一起摇摆html5游戏,和transformjs一起摇摆