weixin_40725706

这个屌丝很懒，什么也没留下！

热门标签

openlayers示例教程282+【目录】

作者：weixin_40725706 | 2024-08-01 09:27:38

踩

openlayers

在这里插入图片描述

目前已完成282个示例

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

抱歉，目录正在全新整理中，请各位先将就使用，完美的列表很快就会出炉。

零、综合应用

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

一、Map 篇

1，

2，地图事件

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

二、View 篇

1，extent

编号	示例链接
098	set extent 和 fit extent
239	设置extent:bbox，限制瓦片图的加载范围，不加载空白瓦片

三、Layers 篇

1，加载底图

编号	示例链接
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地图

四、Sources 篇

1，文件上传

编号	示例链接
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格式文件

2，文件导出

编号	示例链接
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格式文件

3，文件加载

编号	示例链接
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音频

4，Feature

编号	示例链接
099	根据 feature来适配到相应的地图窗口
149	绘制矩形，显示首尾点和中心点坐标值，同时获取所有点的经纬度
139	单击某点，获取当前坐标-多层重叠下的所有features信息
140	右键点击定位，获取某一点下多层features信息
131	去掉默认右键菜单，rightclick获取feature信息
066	画各种图形并获取各对应的feature信息
076	选取feature，平移feature
191	选择feature，固定按钮删除selected feature
192	选择feature，动态弹窗按钮，删除所选feature
193	多边形的绘制，编辑feature，删除所选feature和清空功能
196	滑动某feature高亮，修改此feature的样式
198	解决drawend后不能获取当前feature的方法
199	添加删除修改feature信息，双向不同颜色指示互动，固定删除按钮
205	点击某feature，列表滑动，定位到相应的点的列表位置
200	添加删除多边形，modify feature，双向互动颜色显示
201	加载geojson文件形成围栏，可添加、修改、删除feature，导出geojson

五、Controls篇

1，基础control

编号	示例链接
014	添加比例尺功能
015	添加鹰眼功能
016	修改自定义地图版权信息
204	学习Attribution各种API，示例展示自定义版权信息
017	添加旋转地图功能
018	自定义地图放大缩小按钮（zoom）功能
019	添加缩放滑块控件ZoomSlider
021	显示鼠标经纬度信息
020	添加全屏显示功能
280	自定义上下左右移动键
124	清除所有控件，按需添加Control
265	一次性清除所有控件（亲测好用）
222	实现云雾缭绕，白鸽飞翔的效果

2，测量功能

编号	示例链接
141	测量距离和面积（20行核心代码简化版）
070	测量距离和面积（引用封装代码版）
092	自定义组件（放大、缩小、长度测量、面积测量）
169	根据多边形坐标，利用turf获取面积值
167	利用 turf 获取两点之间的距离
263	显示流动轨迹并计算航向
262	显示流动轨迹并计算流动速度

六、Interactions篇

1，draw

编号	示例链接
179	绘制点，判断它是否在一个电子围栏之内
068	直接画带有箭头的线段
063	使用draw画自由线段、自由多边形
235	绘制带有径向渐变填充色的圆形
061	使用draw画点、线、圆、多边形
062	使用draw画正方形、矩形、六芒星136
238	绘制扩展，弓形、曲线、扇形、双箭头、进攻方向…
209	绘制矩形，拖拽编辑Modify后仍然为矩形
138	绘制矩形,截取对应部分的地图并保存
137	利用createBox()，绘制矩形
161	绘制多边形，限定最小边数和最大边数
237	绘制多边形，生成geojson数据，计算出面积
246	绘制多边形，drawend获取最大幅宽
133	绘制draw多边形，并modify编辑图形
224	绘制一个多边形，避免线段交叉，drawend有交叉提示并重绘
128	绘制矩形,drawend取消绘制锚点,屏蔽双击放大事件
198	解决drawend后不能获取当前feature的方法
228	绘制多边形，drawend获取到多边形的所有点坐标

2，modify

编号	示例链接
133	绘制draw多边形，并modify编辑图形
209	绘制矩形，拖拽编辑Modify后仍然为矩形
134	编辑事件 modifystart 和 modifyend

3，select

编号	示例链接
055	select-modify-snap功能示例
191	select feature，删除 selected feature

4、其他

编号	示例链接
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	聚合：根据坐标显示点、线、圆、多边形
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	双击鼠标显示品牌代言人信息
046	鼠标点击point，弹出窗口播放视频

九、Style 篇

1，基本样式

编号	示例链接
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的使用方法

2，函数式动态样式

编号	示例链接

十、动画交互

1，线段轨迹

编号	示例链接
081	抽稀算法，减少中间点数，展示新的轨迹
067	显示带箭头的路线轨迹，箭头居中
263	显示流动轨迹并计算航向
262	显示流动轨迹并计算流动速度

2，定点动画

编号	示例链接
085	使用gifler加载gif动画示例
220	加载动画，采用css的@keyframes方式
219	加载gif文件，采用CSS设置gif背景的方式
203	地图旋转移动动画、CSS缩放动画，介绍animate的使用方法）

3，移动动画

编号	示例链接
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 等交互

1，canvas

编号	示例链接
042	添加 canvas 心形遮罩效果
245	利用canvas绘制边线纹路
043	使用canvas，实现探照灯效果
044	canvas clip实现上卷帘效果
045	canvas clip实现左卷帘效果
227	自定义js横向卷帘，图层名称跟着分割线移动
226	利用swipe插件实现左卷帘功能
096	使用canvas个性化圆形
138	绘制矩形,截取对应部分的地图并保存
106	图片分解，颜色块渲染

2，turf

编号	示例链接
172	对矢量多边形进行旋转、平移、放缩处理
171	获取两个多边形的交集、差集、并集
170	绘制地图上多个点的信封envelope矩形
169	根据多边形坐标，获取面积值
241	绘制多边形，计算面积值
168	绘制线段并生成贝塞尔曲线
167	获取两点之间的距离，非getLength方法
166	利用turf绘制椭圆形
165	利用turf实现遮罩挖洞效果

3，echarts

编号	示例链接
157	地图上添加Echarts饼图
158	地图上Echarts模拟飞机循环飞行
159	地图上添加Echarts环形图
160	地图上添加Echarts柱状图

十二、其他插件

地图：切换，加载，问题解决

序号	标题
问题解决	点击按钮，解决弹窗中的地图不显示的办法
问题解决	解决国内openstreetmap地图加载不出来的问题
切换	根据visible的值来更换底图，图片切换方式
切换	根据visible的值来更换底图，radio切换方式
切换	使用layerswitcher切换图层
加载	加载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，同步两个地图
view	点图标的大小随着zoom的放大缩小而变化
view	共享view，同步两个地图

十二、性能优化

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/913405