openlayers全面教程284+【目录】

目前已完成284个示例

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

示例的相关数据文件请移步到 https://github.com/dajianshi/test-datas 下载

一、基础信息（配置、数据格式）

编号	功能	示例链接
001	配置	从0到1搭建vue+openlayers基础开发环境
003	数据	认识常用的10多种数据格式

二、综合应用

编号	示例链接
089	双向互动—列表与图层互相提示位置信息
232	选择左右两部分的地图，不重复，横向卷帘
083	实现地图地点搜索定位功能
084	简单实现聚合数据示例
086	显示indoor的各个楼层的商铺信息
080	获取使用者当前的地理位置
249	利用mapbox将经纬度坐标转化为地址信息，点击后在弹窗显示
184	设置时间显示白天黑夜交替图
148	控制蒙版层显示隐藏，蒙版中部挖空显示下面地图信息
194	根据卫星lat，lon，alt，俯仰角，方位角，绘制地面的拍摄的区域
207	动态位置高度角度，模拟卫星地面覆盖区域的大小
206	圆孔相机根据卫星经度、纬度、高度、半径比例推算绘制地面的拍摄的区域
256	利用高德逆地理编码，点击地图，弹出某点坐标和地址信息

三、Map 篇（属性、事件）

编号	功能	示例链接
079	事件	点击旋转loading，postrender 渲染后取消 loading
057	事件	postrender 事件 地图图像的滤镜处理
156	事件	postcompose 设置地图的原始图、模糊效果、色相翻转、阴影效果
155	事件	postcompose 设置地图的反转色、复古色、灰度图、原始图
154	事件	postcompose 调节地图的明亮度、对比度、饱和度
058	事件	moveend 事件获取地图左上和右下的坐标信息
059	事件	singleclick 事件示例-选择feature设置成特定的颜色
111	事件	通过singleclick 选择元素，更换样式
048	事件	click 事件示例-显示企业名片
139	事件	click某点，获取当前坐标-多层重叠下的所有features信息
060	事件	dblclick 事件示例-显示品牌代言人信息
049	事件	pointermove 事件示例-显示城市名片
116	事件	事件 loadstart 和 loadend 的示例
131	事件	右键：去掉默认右键菜单，rightclick获取feature信息
140	事件	右键 点击定位，获取某一点下多层features信息
082	事件	右键：引用插件处理右键弹出菜单，执行功能

四、View 篇（extent，坐标系，zoom，Resolution，同view、方法）

编号	功能	示例链接
098	extent	set extent 和 fit extent 的扩展实例
239	extent	设置extent:bbox，限制瓦片图的加载范围，不加载空白瓦片
264	坐标系	坐标转换 WGS84-GCJ02-BD09
263	坐标系	高德地图坐标转换 WGS84-GCJ02
002	坐标系	3857坐标系和4326坐标系
129	坐标系	EPS3857,4326,900913,CRS84坐标系 extent范围
097	坐标系	非4326,3857的投影示例
174	坐标系	经纬度坐标与屏幕坐标pixel转换，transformExtent将区间坐标由4326转换为3857
093	zoom	设置zoom范围，最大值和最小值
094	zoom	根据zoom的不同，显示不同的地图
225	zoom	zoom大于5弹窗，点击关闭放大不再弹出；zoom小于5后再大于5,继续弹窗
117	zoom	实时zoom，显示左下、左上、右上、右下的坐标
274	zoom	点图标的大小随着zoom的放大缩小而变化
102	同view	共享view，同步两个地图
114	同view	实现视图联动功能
101	Resolution	根据Resolution的不同，显示不同的地图
275	Resolution	点图标的大小随着分辨率 Resolution而变化
261	方法	使用setRotation旋转地图

五、Layers 篇（底图、geoserver、切换地图、解决问题、设置、图层组 ）

编号	功能	示例链接
008	底图	加载google地图（多种形式）
126	底图	加载谷歌地图（另一种URL形式）
004	底图	加载OpenStreetMap地图
005	底图	加载mapbox地图
258	底图	加载mapbox-style的地图
006	底图	加载baidu地图
007	底图	加载arcGIS地图
009	底图	加载高德地图（多种形式）
010	底图	加载天地图（多种形式）
011	底图	加载bing地图（多种形式）
012	底图	加载Stamen地图（多种形式）
013	底图	加载maptiler地图（多种形式）
253	底图	加载HERE多种地图（v2软件版本）
254	底图	加载HERE多种地图（v3软件版本）
255	底图	加载tomtom地图（多种形式）
112	底图	加载静态图片，变成地图一部分
248	底图	以静态图片作为底图，并在上面绘制矢量多边形
115	底图	加载XYZ形式的基础地图
095	底图	添加地图网格线示例
257	底图	实现动态点点网格地图
177	底图	加载多种形式Esri地图
125	问题解决	点击按钮，解决弹窗中的地图不显示的办法
173	问题解决	解决国内openstreetmap地图加载不出来的问题
110	切换	利用setSource来显示隐藏地图
151	切换	根据visible的值来更换底图，图片切换方式
052	切换	根据visible的值来更换底图，radio切换方式
051	切换	使用layerswitcher切换图层
077	geoserver	加载geoserver发布的遥感影像，开启关闭AOI及影像示例
118	geoserver	加载geoserver普通layer的数据示例
119	geoserver	加载geoserver的Tile caching中的数据示例
214	geoserver	加载geoserver数据，使用ImageWMS和ImageLayer呈现图形
221	geoserver	加载geoserver瓦片WMS数据，使用getFeatureInfoUrl获取瓦片数据信息
213	geoserver	通过WFS服务加载geoserver发布的geojson矢量数据
215	geoserver	使用new WFS加载数据，通过like,and,equalTo来过滤数据
132	layer设置	显示设置图层的层级数 zIndex
130	layer设置	清除所有图层的有效方式
100	layer设置	普通加载vector图层，根据设定名称添加移除图层
107	layer设置	使用declutter，避免文字标签重叠
153	layer设置	设定修改图层的透明度
266	layer设置	更改layer透明度，并用 change:opacity 进行监听获取值
197	layer设置	预加载preload瓦片地图，减少过渡期间的空白区域
143	蒙版遮罩	做蒙版过滤处理，实现剪切、遮罩效果
144	蒙版遮罩	画多边形，任意编辑，并做遮罩剪切处理
113	图层组	动态添加layer到layerGroup，并动态删除
147	图层组	从LayerGroup中添加删除Layer，显示、隐藏图层组

六、Sources 篇（监听、上传、导出、加载、Feature）

编号	功能	示例链接
208	监听	监听瓦片地图加载情况，200、403及其他状态码的处理示例
033	上传	上传KML文件，并在地图上展现
034	上传	上传KMZ文件，并解析在地图上
035	上传	上传GeoJSON文件，并解析在地图上
036	上传	本地上传shp文件，并解析在地图上
037	上传	上传包含shp的zip文件，解析并地图显示
091	上传	上传解析文件，支持.geojson .kml .shp格式
189	上传	上传CSV文件，导出Geojson格式文件
240	上传	上传CSV文件，在地图上显示信息
217	上传	上传GPX文件，导出geojson文件
188	上传	上传GeoJSON文件，导出CSV格式文件
038	导出	导出地图（image文件）
039	导出	导出地图（pdf格式）
040	导出	导出GeoJSON格式文件
242	导出	绘制点，导出CSV文件
041	导出	读取WKT数据，导出GML、Polyline、GeoJSON
162	导出	使用draw绘制多边形，导出KML文件，自定义name和style
163	导出	根据polygon信息显示多边形，导出KML文件，自定义name和style
164	导出	3857坐标系项目下导出KML文件，自定义name和style
178	导出	绘制自定义图形，导出为geojson文件
201	导出	加载geojson文件形成围栏，可添加、修改、删除feature，导出geojson
217	导出	上传GPX文件，导出geojson文件
188	导出	上传GeoJSON文件，导出CSV格式文件
189	导出	上传CSV文件，导出Geojson格式文件
121	加载	加载JSON数据示例（显示中国边界线 4326）
022	加载	加载JSON数据示例（显示中国边界线 3857）
250	加载	加载geotiff文件，并在地图上显示
218	加载	加载geotiff文件，显示图形
251	加载	加载geotiff的瓦片数据
024	加载	加载远程KML数据示例
023	加载	加载本地KML数据示例，解决KML文件不显示问题
025	加载	加载WKT数据，显示图形
041	加载	加载WKT数据，输出GML、Polyline、GeoJSON
118	加载	加载WMS数据示例（geoserver）
026	加载	加载WMTS数据，显示图形
027	加载	加载远程shp数据，并在map上显示图形
234	加载	加载本地shp数据，并在map上显示图形
028	加载	加载热力图一（加载geojson数据）
195	加载	加载热力图二（引用geoJSON数据，可以调节半径大小和模糊程度）
279	加载	使用readFeatures加载GeoJSON文件
122	加载	URL模式加载GeoJSON文件，注意跨域问题
029	加载	使用MVT格式读取矢量瓦片数据
030	加载	加载WKB数据，显示图形
031	加载	加载GPX数据，显示图形
216	加载	加载GPX数据，导出geojson文件
032	加载	加载CSV数据，显示图形
212	加载	点击拖动地图播放mp3音频
099	feature	根据 feature来适配到相应的地图窗口
149	feature	绘制矩形，显示首尾点和中心点坐标值，同时获取所有点的经纬度
139	feature	单击某点，获取当前坐标-多层重叠下的所有features信息
140	feature	右键点击定位，获取某一点下多层features信息
131	feature	去掉默认右键菜单，rightclick获取feature信息
066	feature	画各种图形并获取各对应的feature信息
076	feature	选取feature，平移feature
191	feature	选择feature，固定按钮删除selected feature
192	feature	选择feature，动态弹窗按钮，删除所选feature
193	feature	多边形的绘制，编辑feature，删除所选feature和清空功能
196	feature	滑动某feature高亮，修改此feature的样式
198	feature	解决drawend后不能获取当前feature的方法
199	feature	添加删除修改feature信息，双向不同颜色指示互动，固定删除按钮
205	feature	点击某feature，列表滑动，定位到相应的点的列表位置
200	feature	添加删除多边形，modify feature，双向互动颜色显示
201	feature	加载geojson文件形成围栏， 可添加、修改、删除feature，导出geojson

七、Controls篇（基础、扩展、测量、清除）

编号	功能	示例链接
014	基础	添加比例尺功能
015	基础	添加鹰眼功能
267	基础	关于OverviewMap出现透明问题的多种测试及临时解决办法
016	基础	修改自定义地图版权信息
204	基础	学习Attribution各种API，示例展示自定义版权信息
017	基础	添加旋转地图功能
018	基础	自定义地图放大缩小按钮（zoom）功能
019	基础	添加缩放滑块控件ZoomSlider
021	基础	显示鼠标经纬度信息
123	基础	动态显示鼠标位置坐标2
020	基础	添加全屏显示功能
280	基础	自定义上下左右移动键
222	扩展	实现云雾缭绕，白鸽飞翔的效果
141	测量	测量距离和面积（20行核心代码简化版）
070	测量	测量距离和面积（引用封装代码版）
092	测量	自定义组件（放大、缩小、长度测量、面积测量）
169	测量	根据多边形坐标，利用turf获取面积值
167	测量	利用 turf 获取两点之间的距离
142	测量	测量长度和面积，modifyend后更改数值
273	测量	显示流动轨迹并计算航向
272	测量	显示流动轨迹并计算流动速度
124	清除	清除所有控件，按需添加Control
265	清除	一次性清除所有控件（亲测好用）

八、Interactions篇（draw、modify、select、其他、扩展）

编号	功能	示例链接
179	draw	绘制点，判断它是否在一个电子围栏之内
180	draw	模仿共享单车，判断点是否放在规划的电子围栏内
231	draw	绘制点、点击此点弹出坐标复制和取消功能
068	draw	直接画带有箭头的线段
063	draw	使用draw画自由线段、自由多边形
235	draw	绘制带有径向渐变填充色的圆形
061	draw	使用draw画点、线、圆、多边形
062	draw	使用draw画正方形、矩形、六芒星
136	draw	绘制正三角形，正方形，正五边形…
238	draw	绘制扩展，弓形、曲线、扇形、双箭头、进攻方向…
209	draw	绘制矩形，拖拽编辑Modify后仍然为矩形
138	draw	绘制矩形,截取对应部分的地图并保存
137	draw	利用createBox()，绘制矩形
161	draw	绘制多边形，限定最小边数和最大边数
237	draw	绘制多边形，生成geojson数据，计算出面积
145	draw	根据坐标点数组值，绘制多边形，显示面积数
246	draw	绘制多边形，drawend获取最大幅宽
133	draw	绘制draw多边形，并modify编辑图形
224	draw	绘制一个多边形，避免线段交叉，drawend有交叉提示并重绘
128	draw	绘制矩形,drawend取消绘制锚点,屏蔽双击放大事件
198	draw	解决drawend后不能获取当前feature的方法
228	draw	绘制多边形，drawend获取到多边形的所有点坐标
233	draw	绘制渐变填充色的圆形、多边形
133	modify	绘制draw多边形，并modify编辑图形
209	modify	绘制矩形，拖拽编辑Modify后仍然为矩形
134	modify	编辑事件 modifystart 和 modifyend
055	select	select-modify-snap功能示例
191	select	select feature，删除 selected feature
152	其他	Link：地图状态与 URL 同步交互，显示地图中心点、放缩级别、旋转角度等
127	其他	MouseWheelZoom：控制条件-使用CRTL控制map拖拽和鼠标滚动
243	其他	MouseWheelZoom：更改鼠标滚轮缩放地图大小，每次缩放小一点
072	其他	DragPan：拖拽实现放大区域的效果
073	其他	DragZoom：拖拽实现放大区域的效果
074	其他	DragRotateAndZoom：按住shift 拖拽，旋转放缩地图
075	其他	Drag-and-Drop：拖拽文件解析显示图形
076	其他	Translate：选取feature，平移feature
223	扩展	实现探照灯效果
185	扩展	引用 hover 插件，展示各种鼠标cursor样式

九、Geom 篇（点、线、圆、椭圆、多边形、集合）

编号	示例链接
166	根据坐标利用 turf 绘制椭圆形
064	聚合：根据坐标显示点、线、圆、多边形
278	根据半径、起始角度、中心点绘制弧线
277	EPSG:3857投影下绘制半径为10Km的圆形
276	EPSG:4326投影下绘制半径为10Km的圆形
281	利用 Point 显示点
282	利用 LineString 显示线段
269	利用 MultiPoint 显示多点
268	利用 MultiLineString 显示多段线段
270	利用 MultiPolygon 显示多个多边形
271	Collection的应用方法演示
247	根据坐标显示多边形（3857投影），计算出最大幅宽
236	输入经纬度坐标，校验并在地图上标记点，enter提交
211	矢量图形的剪切、复制和粘贴
210	编辑矢量图形（放缩、平移、变形、旋转）
108	实现多个图形的合并、交叉、差集等功能

十、Overlay 篇

编号	示例链接
050	Popup坐标信息新方法（引用扩展版）
053	使用overlay的setPosition来定位弹窗
054	经纬度动态赋值（EPSG:3857）
049	移动鼠标显示城市名片
048	点击鼠标显示企业名片
060	双击鼠标显示品牌代言人信息
047	双击鼠标显示品牌代言人名片
046	鼠标点击point，弹出窗口播放视频
105	引用组件来添加marker

十一、Style 篇（静态、动态、其他）

编号	功能	示例链接
104	静态	配置Icon和text的参数
229	静态	解决setText不能立即更新文字的问题
065	静态	显示不同颜色的点
087	其他	地图中间位置闪烁点动画（封装代码版）
069	静态	开发闪闪发光的点划线
244	静态	显示滚动效果的线段Line
183	静态	设置线段样式：粗细、渐变颜色、箭头及线头样式
150	静态	多边形拐点用不同形状表示（圆形、三角形、矩形、正方形、星形…）
146	静态	画多边形，每个转折点style用圆点标识
182	静态	使用d3实现地图区块呈现不同颜色的效果
176	静态	给feature填充pattern模式颜色
175	静态	给feature填充渐变色（线性）
252	静态	给feature填充锥形渐变色
181	静态	加载解析geojson文件，给每一个feature（非整体）添加线性渐变颜色
235	静态	绘制带有径向渐变填充色的圆形
202	静态	easing的API及在view.animation中使用示例
203	静态	地图旋转移动动画、CSS缩放动画，介绍animate的使用方法

十二、动画交互（线段轨迹、定点动画、移动动画）

编号	功能	示例链接
081	线段轨迹	抽稀算法，减少中间点数，展示新的轨迹
067	线段轨迹	显示带箭头的路线轨迹，箭头居中
273	线段轨迹	显示流动轨迹并计算航向
272	线段轨迹	显示流动轨迹并计算流动速度
085	定点动画	使用gifler加载gif动画示例
220	定点动画	加载动画，采用css的@keyframes方式
219	定点动画	加载gif文件，采用CSS设置gif背景的方式
203	定点动画	地图旋转移动动画、CSS缩放动画，介绍animate的使用方法）
109	移动动画	定位动画（平移-弹性平移-飞行）
202	移动动画	easing的API及在view.animation中使用示例
071	移动动画	利用屏幕坐标，实现轨迹路线动画
186	移动动画	小汽车移动轨迹动画，带开始、暂停、结束控制键
187	移动动画	带开始、暂停、结束控制的轨迹动画，路过后轨道呈现不同颜色
088	移动动画	动态计算并显示单个卫星的位置及轨迹（EPSG:4326）
103	移动动画	根据两行根数计算并显示卫星轨迹（EPSG:3857）
190	移动动画	调整卫星运动的播放速度，展示运动轨迹（EPSG:3857）
056	移动动画	实现风场快速移动效果
078	移动动画	游龙动画效果
120	移动动画	动态曲线流动图，类似Echarts迁徙状态
222	移动动画	实现云雾缭绕，白鸽飞翔的效果

十三、与 canvas、echart，turf 等交互

编号	功能	示例链接
042	canvas	添加 canvas 心形遮罩效果
245	canvas	利用canvas绘制边线纹路
043	canvas	使用canvas，实现探照灯效果
044	canvas	canvas clip实现上卷帘效果
045	canvas	canvas clip实现左卷帘效果
227	canvas	自定义js横向卷帘，图层名称跟着分割线移动
226	canvas	利用swipe插件实现左卷帘功能
096	canvas	使用canvas个性化圆形
138	canvas	绘制矩形,截取对应部分的地图并保存
106	canvas	图片分解，颜色块渲染
172	turf	对矢量多边形进行旋转、平移、放缩处理
171	turf	获取两个多边形的交集、差集、并集
170	turf	绘制地图上多个点的信封envelope矩形
169	turf	根据多边形坐标，获取面积值
241	turf	绘制多边形，计算面积值
168	turf	绘制线段并生成贝塞尔曲线
167	turf	获取两点之间的距离，非getLength方法
166	turf	利用turf绘制椭圆形
165	turf	利用turf实现遮罩挖洞效果
157	echarts	地图上添加Echarts饼图
158	echarts	地图上Echarts模拟飞机循环飞行
159	echarts	地图上添加Echarts环形图
160	echarts	地图上添加Echarts柱状图

十四、性能优化

编号	示例链接
090	探究加载能力的极限，100万个点？
135	添加海量点，使用 WebGLPoints 方法
230	使用WebGLPoints显示数据，根据某属性值的不同阈值显示不同颜色点
260	vue+openlayers 通过webgl方式加载矢量图层
259	vue+openlayers: 显示海量多边形数据，10ms加载完成
081	抽稀算法，减少中间点数，显示新的轨迹