Openlayers实战教程学习大纲及引导

左手的ㄟ右手 2024-03-16 23:59 65阅读 0赞

![d06c579b19064f47a06b6282dabc23ea.png][]

本系列教程是Openlayers的实战教程，介绍Openlayes的一些基础知识，并重点讲述哪些地方是openlayers项目中常用的，给出具体示例，起到一个很好的引导学习作用。

### 版本说明 ###

Openlayers的实战教程 分为\*\***图文版**\*\* 和 \*\***视频版**\*\*， 这里的是图文版，包含基础知识介绍和\*实战的源代码\*，示例效果以gif动图的形式展现出来。 \*\*视频版\*\* 正在录制中，很快会上线，敬请期待~， 如有问题，可以加vx咨询 **gis-dajianshi**

### 学习大纲 ###

#### map，view基础及常用实战 ####

1.  [Openlayer介绍及和leaflet如何选用？][Openlayer_leaflet]
2.  [vue中安装加载Openlayers，从0到1做基础项目配置][vue_Openlayers_0_1]
3.  [map三要素（view，target，layers），及其他参数属性方法介绍][map_view_target_layers]
4.  [view三要素（zoom，center，projection），及其他参数属性方法介绍][view_zoom_center_projection]
5.  [projection介绍及EPSG:4326和EPSG:3857的投射转换][projection_EPSG_4326_EPSG_3857]
6.  [引用proj4， 非EPSG:4326,EPSG:3857的投影示例][proj4_ _EPSG_4326_EPSG_3857]
7.  [extent介绍，set extent 和 fit extent示例][extent_set extent _ fit extent]
8.  [setCenter和setZoom实战示例][setCenter_setZoom]

#### layer基础及常用实战 ####

1.  [layer基础介绍，添加、删除layer核心代码][layer_layer]
2.  [layerGroup介绍，添加，删除示例演示][layerGroup]
3.  [加载OpenStreetMap地图][OpenStreetMap]
4.  [加载天地图（多种形式）][Link 1]
5.  [加载静态图片作为底图][Link 2]
6.  [加载高德地图（多种形式）][Link 3]
7.  [加载google地图（多种形式）][google]
8.  [加载bing地图（多种形式）][bing]
9.  [加载geoserver发布的地图][geoserver]
10. [综合实战：地图底图切换][Link 4]

#### source基础及常用实战，features，style应用 ####

1.  [source基础及重点内容讲解][source]
2.  [geojson格式数据介绍及加载][geojson]
3.  [KML 格式数据介绍及加载][KML]
4.  [SHP格式数据介绍及加载][SHP]
5.  [ GPX格式数据介绍及加载][GPX]
6.  [CSV格式数据介绍及加载][CSV]
7.  [ WKT 格式数据介绍及加载][WKT]
8.  [WMS格式数据介绍及加载][geoserver]
9.  [WMTS格式数据介绍及加载][WMTS]
10. [导出KML文件][KML 1]
11. [导出geojson文件][geojson 1]
12. [ 导出CSV文件；][_CSV]
13. [上传解析文件显示图形，支持.geojson .kml .shp格式][.geojson .kml .shp]
14. [多数据聚合显示][Link 5]

1.  [fill，stroke，icon及text 设置与示例][fill_stroke_icon_text]
2.  [使geometry适配窗口][geometry]

#### control基础及常用实战 ####

1.  [control基础及重点内容讲解，禁用默认控件，清除所有controls示例][control_controls]
2.  [示例：比例尺scale][scale]
3.  [示例：光标经纬度位置][Link 6]
4.  [示例：全屏fullscreen][fullscreen]
5.  [示例：自定义版权信息][Link 7]
6.  [示例：自定义zoom放大缩小，显示zoom等级][zoom_zoom]
7.  [综合扩展： 测量长度，测量面积][Link 8]
8.  [综合扩展：地图地点搜索定位][Link 9]

#### overlay基础及常用实战 ####

1.  [overlay基础及重点内容讲解][overlay]
2.  [示例: 单击某位置，弹出经纬度坐标][Link 10]
3.  [示例：双击名片坐标，显示名片信息][Link 11]
4.  [示例：点击位置点，弹出播放MP4视频][MP4]

#### Interaction基础及常用实战 ####

1.  [Interaction基础及重点内容讲解][Interaction]
2.  [draw画点、线、圆、多边形][draw]
3.  [绘制正多边形、矩形，正六边形][Link 12]
4.  [drawstart，drawend的使用 ][drawstart_drawend_]
5.  [绘制带有箭头的线 ][Link 13]
6.  [modify介绍及 modifystart和modifyend的使用][modify_ modifystart_modifyend]
7.  [select知识介绍及示例演示][select]
8.  [根据坐标信息来显示点、线段、圆形及多边形][Link 14]
9.  [回显多点、多线段、多多边形][Link 15]
10. [使用WebGLPoints显示海量数据][WebGLPoints]

#### map events常用实战 ####

1.  [常用地图事件介绍][Link 16]
2.  [moveend事件获取地图左上和右下的坐标信息][moveend]
3.  [singleclick事件示例-显示经纬度坐标][Link 10]
4.  [click单击事件示例-点击后显示视频][MP4]
5.  [dblclick 双击事件示例-显示信息名片][Link 11]
6.  [pointermove 移动事件示例-获取多层的多个features信息][pointermove _-_features]
7.  [loadstart和loadend示例][loadstart_loadend]
8.  [右键点击获取feature信息][feature]  
    [9.Openlayers实战：启动、取消事件的监测][9.Openlayers]

#### 多数据交互综合实战 ####

1.  [选择某feature，列表滑动，定位到相应的点的列表位置][feature 1]
2.  [鼠标pointermove某点，获取多层重叠下的所有features信息][pointermove _-_features]
3.  [列表与图层双向信息提示][Link 17]
4.  [利用turf获取两个多边形的交集、差集、并集][turf]
5.  [模仿共享单车，判断点是否放在规划的电子围栏内][Link 18]

#### 综合项目示例 ####

1.  [界面控制综合演示][Link 19]
2.  [水电站管道站点信息管理][Link 20]

###  ###

### 教程指引 ###

######    根据课程大纲，提炼核心要点，重点讲解，视频版中会反复强调哪些是重点。 ######

[d06c579b19064f47a06b6282dabc23ea.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/75245542a638468a8599f4dcda569a43.png
[Openlayer_leaflet]: https://dajianshi.blog.csdn.net/article/details/132151813
[vue_Openlayers_0_1]: https://dajianshi.blog.csdn.net/article/details/131440074
[map_view_target_layers]: https://dajianshi.blog.csdn.net/article/details/131440986
[view_zoom_center_projection]: https://dajianshi.blog.csdn.net/article/details/131441679
[projection_EPSG_4326_EPSG_3857]: https://dajianshi.blog.csdn.net/article/details/131516208
[proj4_ _EPSG_4326_EPSG_3857]: https://dajianshi.blog.csdn.net/article/details/131609618
[extent_set extent _ fit extent]: https://dajianshi.blog.csdn.net/article/details/131858109
[setCenter_setZoom]: https://dajianshi.blog.csdn.net/article/details/131857914
[layer_layer]: https://dajianshi.blog.csdn.net/article/details/131772306
[layerGroup]: https://dajianshi.blog.csdn.net/article/details/131785928
[OpenStreetMap]: https://dajianshi.blog.csdn.net/article/details/131638353
[Link 1]: https://dajianshi.blog.csdn.net/article/details/131645393
[Link 2]: https://dajianshi.blog.csdn.net/article/details/131637932
[Link 3]: https://dajianshi.blog.csdn.net/article/details/131701711
[google]: https://dajianshi.blog.csdn.net/article/details/131639172
[bing]: https://dajianshi.blog.csdn.net/article/details/131702234
[geoserver]: https://dajianshi.blog.csdn.net/article/details/131787854
[Link 4]: https://dajianshi.blog.csdn.net/article/details/131703604
[source]: https://dajianshi.blog.csdn.net/article/details/131791182
[geojson]: https://dajianshi.blog.csdn.net/article/details/131763114
[KML]: https://dajianshi.blog.csdn.net/article/details/131762038
[SHP]: https://dajianshi.blog.csdn.net/article/details/131765753
[GPX]: https://dajianshi.blog.csdn.net/article/details/131767264
[CSV]: https://dajianshi.blog.csdn.net/article/details/131766518
[WKT]: https://dajianshi.blog.csdn.net/article/details/131768219
[WMTS]: https://dajianshi.blog.csdn.net/article/details/131788867
[KML 1]: https://dajianshi.blog.csdn.net/article/details/132022984
[geojson 1]: https://dajianshi.blog.csdn.net/article/details/131793864
[_CSV]: https://dajianshi.blog.csdn.net/article/details/132024895
[.geojson .kml .shp]: https://dajianshi.blog.csdn.net/article/details/131789937
[Link 5]: https://dajianshi.blog.csdn.net/article/details/132172622
[fill_stroke_icon_text]: https://dajianshi.blog.csdn.net/article/details/132172223
[geometry]: https://dajianshi.blog.csdn.net/article/details/132163765
[control_controls]: https://dajianshi.blog.csdn.net/article/details/131481864
[scale]: https://dajianshi.blog.csdn.net/article/details/131538031
[Link 6]: https://dajianshi.blog.csdn.net/article/details/131540387
[fullscreen]: https://dajianshi.blog.csdn.net/article/details/131548561
[Link 7]: https://dajianshi.blog.csdn.net/article/details/131555811
[zoom_zoom]: https://dajianshi.blog.csdn.net/article/details/131549315
[Link 8]: https://dajianshi.blog.csdn.net/article/details/131611457
[Link 9]: https://dajianshi.blog.csdn.net/article/details/132172928
[overlay]: https://dajianshi.blog.csdn.net/article/details/131592441
[Link 10]: https://dajianshi.blog.csdn.net/article/details/131599492
[Link 11]: https://dajianshi.blog.csdn.net/article/details/131600578
[MP4]: https://dajianshi.blog.csdn.net/article/details/131601901
[Interaction]: https://dajianshi.blog.csdn.net/article/details/131519159
[draw]: https://dajianshi.blog.csdn.net/article/details/131561773
[Link 12]: https://dajianshi.blog.csdn.net/article/details/131568919
[drawstart_drawend_]: https://dajianshi.blog.csdn.net/article/details/131569736
[Link 13]: https://dajianshi.blog.csdn.net/article/details/131613415
[modify_ modifystart_modifyend]: https://dajianshi.blog.csdn.net/article/details/131593956
[select]: https://dajianshi.blog.csdn.net/article/details/132367315
[Link 14]: https://dajianshi.blog.csdn.net/article/details/131596645
[Link 15]: https://dajianshi.blog.csdn.net/article/details/131597552
[WebGLPoints]: https://dajianshi.blog.csdn.net/article/details/131609284
[Link 16]: https://dajianshi.blog.csdn.net/article/details/131608398
[moveend]: https://dajianshi.blog.csdn.net/article/details/132027168
[pointermove _-_features]: https://dajianshi.blog.csdn.net/article/details/132358513
[loadstart_loadend]: https://dajianshi.blog.csdn.net/article/details/132028015
[feature]: https://dajianshi.blog.csdn.net/article/details/132166110
[9.Openlayers]: https://dajianshi.blog.csdn.net/article/details/132471885
[feature 1]: https://dajianshi.blog.csdn.net/article/details/132237826
[Link 17]: https://dajianshi.blog.csdn.net/article/details/132236878
[turf]: https://dajianshi.blog.csdn.net/article/details/132168510
[Link 18]: https://dajianshi.blog.csdn.net/article/details/132170046
[Link 19]: https://dajianshi.blog.csdn.net/article/details/132230735
[Link 20]: https://dajianshi.blog.csdn.net/article/details/132233928