目前已完成260个示例
openlayers示例教程100+教程旨在为开发者提供简单快捷的代码示例，复制即可用。在每一个示例中，都凝练着简明扼要的代码，做到简易实现，轻松学会。
文章目录
目录
综合应用
交互Interaction、刻画Geom
| 类型 | 名标题 |
|---|---|
| draw | 绘制点，判断它是否在一个电子围栏之内 |
| draw | 使用draw画点、线、圆、多边形 |
| draw | 使用draw画正方形、矩形、六芒星 |
| draw | 使用draw画自由线段、自由多边形 |
| draw | 绘制矩形，拖拽编辑Modify后仍然为矩形 |
| draw | 绘制矩形,截取对应部分的地图并保存 |
| draw | 利用createBox()，绘制矩形 |
| draw | 绘制多边形，drawend获取到多边形的所有点坐标 |
| draw | 绘制多边形，生成geojson数据，计算出面积 |
| draw | 绘制多边形，drawend获取最大幅宽 |
| draw | 绘制draw多边形，并modify编辑图形 |
| draw | 绘制一个多边形，避免线段交叉，drawend有交叉提示并重绘 |
| draw | 绘制多边形，限定最小边数和最大边数 |
| draw | 绘制正三角形，正方形，正五边形… |
| draw | 绘制扩展，弓形、曲线、扇形、双箭头、进攻方向… |
| draw | 直接画带有箭头的线段 |
| draw | 绘制带有径向渐变填充色的圆形 |
| Geom | 利用turf绘制椭圆形 |
| Geom | 根据坐标显示点、线、圆、多边形 |
| Geom | 根据坐标显示多边形（3857投影），计算出最大幅宽 |
| 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背景的方式 |
文件：上传 、导出、 加载
地图：切换，加载，问题解决
基础：layer，view, data，配置，坐标系
元素feature，样式Style
控件Control、事件Event
交互：canvas、turf、echarts，d3，插件
| 类别 | 标题 |
|---|---|
| canvas | 添加canvas遮罩效果 |
| canvas | 利用canvas绘制边线纹路 |
| canvas | 使用canvas，实现探照灯效果 |
| 插件 | 引用插件，实现探照灯效果 |
| canvas | 实现上卷帘效果 |
| canvas | 实现左卷帘效果 |
| canvas | 自定义js横向卷帘，图层名称跟着分割线移动 |
| 插件 | 利用swipe插件实现左卷帘功能 |
| canvas | 使用canvas个性化圆形 |
| canvas | 绘制矩形,截取对应部分的地图并保存 |
| canvas | 图片分解，颜色块渲染 |
| turf | 对矢量多边形进行旋转、平移、放缩处理 |
| turf | 获取两个多边形的交集、差集、并集 |
| turf | 绘制地图上多个点的信封envelope矩形 |
| turf | 根据多边形坐标，获取面积值 |
| turf | 绘制多边形，计算面积值 |
| turf | 绘制线段并生成贝塞尔曲线 |
| turf | 获取两点之间的距离，非getLength方法 |
| turf | 利用turf绘制椭圆形 |
| turf | 利用turf实现遮罩挖洞效果 |
| echarts | 地图上添加Echarts饼图 |
| echarts | 地图上Echarts模拟飞机循环飞行 |
| echarts | 地图上添加Echarts环形图 |
| echarts | 地图上添加Echarts柱状图 |
能力优化
| 类别 | 标题 |
|---|---|
| 能力 | 探究加载能力的极限，100万个点？ |
| 能力 | 添加海量点，使用WebGLPoints方法 |
| 能力 | 使用WebGLPoints显示数据，根据某属性值的不同阈值显示不同颜色点 |
| 能力 | vue+openlayers 通过webgl方式加载矢量图层 |
| 能力 | vue+openlayers: 显示海量多边形数据，10ms加载完成 |
| 优化 | 抽稀算法，减少中间点数，显示新的轨迹 |
叠加层（Overlay）
| 序号 | 标题 |
|---|---|
| 1 | Popup坐标信息新方法（引用扩展版） |
| 2 | 使用overlay的setPosition来定位弹窗 |
| 3 | 经纬度动态赋值（EPSG:3857） |
| 4 | 移动鼠标显示城市名片 |
| 5 | 点击鼠标显示企业名片 |
| 6 | 双击鼠标显示品牌代言人信息 |
| 7 | 鼠标点击point，弹出窗口播放视频 |
1759
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
