00Workshop介绍

官方文档：https://openlayers.org/workshop/en/

openlayers官网Workshop学习。

通过官网Workshop，系统学习openlayers的使用。

基本设置

这些说明假定您从最新Workshop版本的 openlayers-workshop-en.zip​ 文件开始。此外，您还需要安装Node v16或更高版本才能为Workshop运行开发服务器。

资料下载地址：https://github.com/openlayers/workshop/releases

解压压缩包后，切换到 openlayers-workshop-en​ 目录并安装一些额外的依赖项：

npm install

现在您已经准备好启动workshop开发服务器了。除了为OpenLayers库提供一个模块编译器之外，它还提供了workshop开文档。

npm start

这将启动一个开发服务器，您可以在其中阅读研讨会文档并完成练习。您应该能够通过在http：//localhost：5173/上看到弹出的警报来确认事情正在工作。

还可以在http：//localhost：5173/doc/上阅读Workshop文档。（文档是英文的）

Overview 概述

该Workshop是作为一套模块提出的（模块化的）。在每个模块中，您将执行旨在实现该模块特定目标的任务。每个模块都建立在以前模块中学到的经验教训的基础上，旨在迭代地建立您的知识库。

本次Workshop将涵盖以下模块：

• 基础—了解如何将地图添加到网页。
• 1.矢量数据—使用矢量数据。
• 2.移动的地图和传感器—带GPS和指南针的移动的地图。
• 3.GeoTIFF渲染—从GeoTIFF源生成和可视化数据切片。
• 4.矢量瓦片和地图框样式—创建美丽的地图矢量瓦片 。
• 5.WebGL点渲染—使用WebGL渲染点。
• 7.部署—为生产构建应用程序。

1、矢量数据

在本模块中，将创建一个用于处理矢量数据的基本编辑器。功能包括让用户可以导入数据，绘制新的功能，修改现有的功能，并导出结果。我们将在本模块中使用GeoJSON数据，但如果您对使用其他源感兴趣，OpenLayers支持广泛的矢量格式。

1.1 渲染GeoJSON。介绍如何使用OpenLayers加载和渲染GeoJSON数据，并添加Link交互功能以保持地图视图稳定。
1.2交互-拖放文件.通过创建矢量源和图层，并配置拖放交互，用户可以将GeoJSON文件拖放到地图上进行渲染查看。
1.3交互-修改要素(features)。通过创建Modify交互对象并连接到矢量源，用户可以通过拖动要素的顶点来修改要素。
1.4 交互-绘制新要素。通过创建Draw交互对象并配置为绘制多边形，并将绘制的要素添加到矢量源中，用户可以在地图上绘制新的几何图形。
1.5交互-捕捉要素。通过配置Snap交互操作与矢量源一起工作，并添加到地图中，用户可以在编辑数据时捕捉要素的端点或交点，从而保持拓扑关系。
1.6下载要素，将要素数据序列化为 GeoJSON并下载。通过序列化要素数据为GeoJSON格式，并创建带有download属性的 <a>标签来触发文件下载对话框。同时，添加清除功能按钮以清除地图上的要素。
1.7美化map，使用样式类（设置style）。介绍了如何在OpenLayers中为要素添加样式，包括静态样式和动态样式。通过配置矢量图层的样式选项，可以控制要素的填充颜色、描边颜色等。此外，还介绍了根据几何区域面积来确定颜色的样式函数的实现方法。

2、移动端地图和使用手机传感器

3、GeoTIFF渲染

3.1-3.2彩色GeoTIFF图像渲染。 介绍了如何在OpenLayers中渲染Sentinel-2卫星任务收集的真彩色GeoTIFF图像。通过使用ol/source/GeoTIFF和ol/layer/WebGLTile组件，可以加载和渲染远程托管的GeoTIFF文件。通过配置地图视图的投影和范围，以及使用GeoTIFF源的getView()方法获取视图属性的promise，可以简化代码并实现更高效的地图渲染。
　　‍