本系列教程是Openlayers的实战教程,介绍Openlayes的一些基础知识,并重点讲述哪些地方是openlayers项目中常用的,给出具体示例,起到一个很好的引导学习作用。
版本说明
Openlayers的实战教程 分为**图文版** 和 **视频版**, 这里的是图文版,包含基础知识介绍和*实战的源代码*,示例效果以gif动图的形式展现出来。 **视频版** 正在录制中,很快会上线,敬请期待~, 如有问题,可以加vx咨询 gis-dajianshi
学习大纲
map,view基础及常用实战
- Openlayer介绍及和leaflet如何选用?
- vue中安装加载Openlayers,从0到1做基础项目配置
- map三要素(view,target,layers),及其他参数属性方法介绍
- view三要素(zoom,center,projection),及其他参数属性方法介绍
- projection介绍及EPSG:4326和EPSG:3857的投射转换
- 引用proj4, 非EPSG:4326,EPSG:3857的投影示例
- extent介绍,set extent 和 fit extent示例
- setCenter和setZoom实战示例
layer基础及常用实战
- layer基础介绍,添加、删除layer核心代码
- layerGroup介绍,添加,删除示例演示
- 加载OpenStreetMap地图
- 加载天地图(多种形式)
- 加载百度地图
- 加载高德地图(多种形式)
- 加载google地图(多种形式)
- 加载bing地图(多种形式)
- 加载geoserver发布的地图
- 综合实战:地图底图切换
source基础及常用实战
- source基础及重点内容讲解
- geojson格式数据介绍及加载
- KML 格式数据介绍及加载
- SHP格式数据介绍及加载
- GPX格式数据介绍及加载
- CSV格式数据介绍及加载
- WKT 格式数据介绍及加载
- WMS格式数据介绍及加载
- WMTS格式数据介绍及加载
- 导出KML文件
- 导出geojson文件
- 导出CSV文件;
- 综合扩展:上传解析文件显示图形,支持.geojson .kml .shp格式
矢量图feature和style
- fill,stroke设置与示例
- icon及text设置与示例
- 选择feature设置成特定的颜色
control基础及常用实战
- control基础及重点内容讲解
- 禁用默认控件,清除所有controls示例
- 示例:比例尺scale,光标经纬度位置
- 示例:缩放滑块slider,缩放按钮zoom
- 示例:全屏fullscreen,鹰眼预览OverviewMap
- 示例:自定义版权信息
- 示例:自定义zoom放大缩小
- 综合扩展: 测量长度,测量面积
overlay基础及常用实战
- overlay基础及重点内容讲解
- 使用overlay的显示点击点的经纬度坐标
- 示例:点击企业坐标,显示企业名片信息
- 示例:点击某位置,弹出播放MP4视频
- 示例:全屏fullscreen,鹰眼预览OverviewMap
Interaction基础及常用实战
- Interaction基础及重点内容讲解
- draw画点、线、圆、多边形
- 绘制正多边形、矩形
- drawstart,drawend的使用
- modify介绍及 modifystart和modifyend的使用
- select知识介绍及示例演示
- 根据坐标信息来显示点、线段、圆形及多边形
- 使用WebGLPoints显示海量数据
- 扩展:绘制矩形,截取对应部分的地图并保存
map events常用实战
- 常用地图事件介绍
- postrender事件 地图图像的滤镜处理
- moveend事件获取地图左上和右下的坐标信息
- singleclick事件示例-选择feature设置成特定的颜色
- click单击事件示例-显示企业名片
- dblclick 双击事件示例-显示品牌代言人信息
- pointermove 移动事件示例-显示城市名片
- loadstart和loadend示例
-
取消鼠标右键默认菜单,右键点击获取feature信息
常用功能综合实战
- 点击某feature,列表滑动,定位到相应的点的列表位置
- 左键单击某点,获取多层重叠下的所有features信息
- 列表与图层互相提示位置信息示例
- 地图上添加Echarts饼图
- 地图卷帘示例
- 聚合数据示例
- 模仿共享单车,判断点是否放在规划的电子围栏内
- 实现地图地点搜索定位功能
一个大项目示例
- 水电站管道信息管理