花生_TL007

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

热门标签

openlayers示例教程265+【目录】

作者：花生_TL007 | 2024-05-20 00:08:27

踩

openlayers

在这里插入图片描述

目前已完成265个示例

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

文章目录

一、综合应用

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

交互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背景的方式

文件处理

1，文件上传

类别	名称
1	上传KML文件，并在地图上展现
2	上传KMZ文件，并解析在地图上
3	上传GeoJSON文件，并解析在地图上
4	本地上传shp文件，并解析在地图上
5	上传包含shp的zip文件，解析并地图显示
6	上传解析文件，支持.geojson .kml .shp格式
7	上传CSV文件，导出Geojson格式文件
8	上传CSV文件，在地图上显示信息
9	上传GPX文件，导出geojson文件
10	上传GeoJSON文件，导出CSV格式文件

2，文件导出

类别	名称
1	导出地图（image文件）
2	导出地图（pdf格式）
3	导出GeoJSON格式文件
4	绘制点，导出CSV文件
5	读取WKT数据，导出GML、Polyline、GeoJSON
6	使用draw绘制多边形，导出KML文件，自定义name和style
7	根据polygon信息显示多边形，导出KML文件，自定义name和style
8	3857坐标系项目下导出KML文件，自定义name和style
9	绘制自定义图形，导出为geojson文件
10	加载geojson文件形成围栏，可添加、修改、删除feature，导出geojson

3，文件加载

类别	名称
1	加载JSON数据示例（显示中国边界线 4326）
2	加载JSON数据示例（显示中国边界线 3857）
3	加载geotiff文件，并在地图上显示
4	加载geotiff的瓦片数据
5	加载远程KML数据示例
6	加载本地KML数据示例，解决KML文件不显示问题
7	加载WKT数据，显示图形
8	加载WKT数据，输出GML、Polyline、GeoJSON
9	加载WMS数据示例
10	加载WMTS数据，显示图形
11	加载远程shp数据，并在map上显示图形
12	加载本地shp数据，并在map上显示图形
13	加载热力图一（加载geojson数据）
14	加载热力图二（引用geoServer）
15	加载热力图三（引用gJSON数据，可以调节半径大小和模糊程度）
16	使用readFeatures加载GeoJSON文件
17	URL模式加载GeoJSON文件，注意跨域问题
18	使用MVT格式读取矢量瓦片数据
19	加载WKB数据，显示图形
20	加载GPX数据，显示图形
21	加载GPX数据，导出geojson文件
22	加载CSV数据，显示图形
23	加载geotiff文件，显示图形
24	点击拖动地图播放mp3音频

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

序号	标题
问题解决	点击按钮，解决弹窗中的地图不显示的办法
问题解决	解决国内openstreetmap地图加载不出来的问题
切换	根据visible的值来更换底图，图片切换方式
切换	根据visible的值来更换底图，radio切换方式
切换	使用layerswitcher切换图层
加载	加载google地图（多种形式）
加载	加载谷歌地图（另一种URL形式）
加载	加载OpenStreetMap地图
加载	加载mapbox地图
加载	加载mapbox-style的地图
加载	加载baidu地图
加载	加载arcGIS地图
加载	加载高德地图（多种形式）
加载	加载天地图（多种形式）
加载	加载bing地图（多种形式）
加载	加载Stamen地图（多种形式）
加载	加载maptiler地图（多种形式）
加载	加载HERE多种地图（v2软件版本）
加载	加载HERE多种地图（v3软件版本）
加载	加载tomtom地图（多种形式）
加载	加载静态图片，变成地图一部分
加载	以静态图片作为底图，并在上面绘制矢量多边形
加载	加载XYZ地图
加载	添加网格线示例
加载	实现动态点点网格
加载	加载多种形式Esri地图
加载	加载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，同步两个地图
extent	set extent 和 fit extent
extent	设置extent:bbox，限制瓦片图的加载范围，不加载空白瓦片

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

交互：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，弹出窗口播放视频

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