目前已完成240个示例
openlayers示例教程100+教程旨在为开发者提供简单快捷的代码示例，复制即可用。在每一个示例中，都凝练着简明扼要的代码，做到简易实现，轻松学会。
目录
综合应用
交互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背景的方式 |
文件：上传 、导出、 加载
地图：切换，加载，问题解决
基础：layer，view, data，配置，坐标系
元素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
交互：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）
GIS前端交流，协助开发功能
微信名片
微信名片
评论记录：
回复评论：