openlayers示例教程100+【目录】

目前已完成220个示例

openlayers示例教程100+教程旨在为开发者提供简单快捷的代码示例，复制即可用。在每一个示例中，都凝练着简明扼要的代码，做到简易实现，轻松学会。

目录

综合应用

示例	示例
1	双向互动—列表与图层互相提示位置信息
2	实现地图地点搜索定位功能
3	简单实现聚合数据示例
4	显示indoor的各个楼层的商铺信息
5	获取使用者当前的地理位置
6	设置时间显示白天黑夜交替图
7	模仿共享单车，判断点是否放在规划的电子围栏内
8	控制蒙版层显示隐藏，蒙版中部挖空显示下面地图信息
9	根据卫星lat，lon，alt，俯仰角，方位角，绘制地面的拍摄的区域
10	动态位置高度角度，模拟卫星地面覆盖区域的大小
11	圆孔相机根据卫星经度、纬度、高度、半径比例推算绘制地面的拍摄的区域

交互Interaction、刻画Geom

类型	名标题
draw	绘制点，判断它是否在一个电子围栏之内
draw	使用draw画点、线、圆、多边形
draw	使用draw画正方形、矩形、六芒星
draw	使用draw画自由线段、自由多边形
draw	绘制draw多边形，并modify编辑图形
draw	绘制矩形，拖拽编辑Modify后仍然为矩形
draw	绘制矩形,截取对应部分的地图并保存
draw	利用createBox()，绘制矩形
draw	绘制正三角形，正方形，正五边形…
draw	绘制多边形，限定最小边数和最大边数
draw	直接画带有箭头的线段
Geom	利用turf绘制椭圆形
Geom	根据坐标显示点、线、圆、多边形
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格式文件
上传	上传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上显示图形
加载	加载热力图一（加载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呈现图形
加载	通过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	根据Resolution的不同，显示不同的地图
view	实时zoom，显示左下、左上、右上、右下的坐标
view	共享view，同步两个地图
extent	set extent 和 fit extent

元素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	显示不同颜色的坐标点
style	开发闪闪发光的点划线
style	地图中间位置闪烁点动画（封装代码版）
style	设置线段样式：粗细、渐变颜色、箭头及线头样式
style	多边形拐点用不同形状表示（圆形、三角形、矩形、正方形、星形…）
style	画多边形，每个转折点style用圆点标识
style	使用d3实现地图区块呈现不同颜色的效果
style	加载解析geojson文件，给每一个feature（非整体）添加渐变颜色
style	使用d3实现地图区块呈现不同颜色的效果
style	给feature填充pattern模式颜色
style	给feature填充渐变色（整体）
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的方法
事件	dblclick事件示例-显示品牌代言人信息
事件	pointermove事件示例-显示城市名片
事件	引用hover插件，展示各种鼠标cursor样式
事件	事件loadstart和loadend的示例
事件	编辑事件modifystart和modifyend
事件	click某点，获取当前坐标-多层重叠下的所有features信息

交互：canvas、turf、echarts，d3

类别	标题
canvas	添加canvas遮罩效果
canvas	实现探照灯效果
canvas	实现上卷帘效果
canvas	实现左卷帘效果
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方法
优化	抽稀算法，减少中间点数，显示新的轨迹

叠加层（Overlay）

序号	标题
1	Popup坐标信息新方法（引用扩展版）
2	使用overlay的setPosition来定位弹窗
3	经纬度动态赋值（EPSG:3857）
4	移动鼠标显示城市名片
5	点击鼠标显示企业名片
6	双击鼠标显示品牌代言人信息
7	鼠标点击point，弹出窗口播放视频