青波的博客
openLayers 快速入门
编辑
2024-01-08
前端开发
00

目录

对 openLayers 的基础学习和整理。

基础

几个核心概念：Map、Layer、Source、View、Control、Interaction.

  • 在 OpenLayers 的体系中：
  • 把整个地图看作一个容器 (Map)，
  • 容器中包含若干个图层 (Layer) 来展示区域和视角，
  • 每个图层有对应的数据源 (Source)。
  • 容器中还包括一些与用户交互的控件 (Control 和 Interaction)，
  • 另外，OpenLayers 还支持事件机制。

Map、View

在 OpenLayers 中，Map 和 View 之间存在一种包含关系。

  • Map（地图）是整个地图显示的容器。 它管理了所有的图层、交互行为以及地图的显示。
  • View（视图）定义了地图的可视化参数，如中心位置、缩放级别、投影方式等。 View 定义了用户在浏览地图时所见的区域和视角。
  • Map 包含了 View，并使用 View 来控制地图的显示。在创建地图时，你需要指定一个 View，并将这个 View 关联到 Map 上，以确定地图的初始显示状态。
js
// 创建一个视图（View）对象
const view = new View({
  center: [0, 0], // 初始中心点坐标
  zoom: 4, // 初始缩放级别
  // 其他视图参数……
});

// 创建一个地图（Map）并关联视图
const map = new Map({
  target: 'map', // HTML 元素 ID
  layers: [], // 地图图层
  view: view, // 地图的视图
  // 其他地图配置……
});

Layer、Source

在 OpenLayers 中，Layer 和 Source 是一种关联关系。一个 Layer 可以关联多个 Source，一个 Source 可以被多个 Layer 使用。

  • Layer
    • Layer 是可视化的地图图层。 它是地图上的可见内容，可以是地图、标记、矢量数据、图片、瓦片等。
    • 不同类型的 Layer 可以用于显示不同类型的数据。 例如，TileLayer 用于显示瓦片图像，VectorLayer 用于显示矢量数据，ImageLayer 显示图像数据。
  • Source
    • Source 是图层的数据源。 它包含了地图上要显示的实际地理数据，可以是瓦片图像、矢量数据、GeoJSON、WMS、WFS 等。
    • 不同类型的 Source 支持不同的数据格式和来源。 例如，TileImage Source 用于加载瓦片图像，Vector Source 用于加载矢量数据。
js
// 创建一个矢量图层（VectorLayer）并为其分配矢量数据源（Vector Source）
const vectorLayer = new VectorLayer({
  source: new VectorSource({
            // 数据源配置……
          })
})

// 创建一个瓦片图层（TileLayer）并为其分配瓦片图像源（TileImage Source）
const tileLayer = new TileLayer({
  source: new TileImage({
            url: 'https://example.com/{z}/{x}/{y}.png',
            // 数据源配置……
          })
})

// 将图层添加到地图中
const map = new Map({
  layers: [tileLayer, vectorLayer]
})

Control

Control（控件）： Controls 是用户界面上的可视化元素，用于控制地图的外观和行为。它们可以是缩放控件、比例尺控件、图例等。Controls 通常位于地图的边缘或角落，并允许用户对地图进行交互或控制。

js
// 创建一个缩放控件
const zoomControl = new ZoomControl();

// 将缩放控件添加到地图中
map.addControl(zoomControl);

Interaction

Interaction（交互）： Interactions 是地图上用户的交互行为，如缩放、平移、选择等。它们允许用户与地图进行互动并执行特定的操作。例如，拖拽地图、缩放地图等操作都是通过 Interactions 实现的。

js
// 创建一个拖拽交互
const dragInteraction = new DragPan();

// 将拖拽交互添加到地图中
map.addInteraction(dragInteraction);

进阶

format

通常需要与矢量数据源（VectorSource）一起使用，用于解析和序列化不同地理空间数据的格式。

在地理信息系统中，数据以不同的格式存储和表示，比如 GeoJSON、KML、GML 等。这些格式在表示空间数据时有着不同的结构和语法。ol/format 模块提供了一系列的类和方法，用于将这些不同格式的地理空间数据解析为 OpenLayers 的要素对象。

js
// 创建一个矢量数据源并使用 GeoJSON 格式解析数据
const vectorSource = new VectorSource({
  format: new GeoJSON(), // 使用 GeoJSON 格式
  url: 'your_geojson_data_url.geojson', // GeoJSON 数据的 URL
  // 其他数据源配置……
});

// 创建一个矢量图层，并将数据源设置为上面创建的 vectorSource
const vectorLayer = new VectorLayer({
  source: vectorSource,
  style: yourCustomStyle // 可以自定义样式
  // 其他图层配置……
});

// 将图层添加到地图中
const map = new Map({
  layers: [vectorLayer],
  // 地图配置……
});

geom

几何（Geometry）对象，是在使用矢量数据源 (VectorSource) 时用来自定义创建矢量元素的。

通常情况下，我们会创建一个 Geometry，然后将其包装在一个 Feature 中，最后将这个 Feature 添加到 VectorSource 中。这个 VectorSource 再被应用于 layer，以在地图上显示这些 Feature。

js
// 创建一个点要素的几何对象
const pointGeometry = new Point([10, 20]); // 假设经纬度坐标为 [10, 20]

// 创建一个矢量要素，将点要素的几何对象应用于该要素
const pointFeature = new Feature({
  geometry: pointGeometry
});

// 创建一个矢量数据源，并添加点要素
const vectorSource = new VectorSource({
  features: [pointFeature] // 添加点要素到数据源
});

// 创建一个矢量图层，并将数据源设置为上面创建的 vectorSource
const vectorLayer = new VectorLayer({
  source: vectorSource,
  // 其他图层配置。..
});

// 将图层添加到地图中
const map = new Map({
  layers: [vectorLayer],
  // 地图配置。..
});

style

style 用以自定义刚刚我们创建的 geom，可以自定义 Feature 在地图上的展示效果，包括颜色、形状、图标、文本标签等。

js
// 方式一：pointFeature.setStyle

// 创建一个矢量要素，将点要素的几何对象应用于该要素
const pointFeature = new Feature({
  geometry: pointGeometry
});

// 创建一个样式函数，定义点要素的样式
function pointStyleFunction(feature) {
  return new Style({
    image: new Circle({
      radius: 8,
      fill: new Fill({ color: 'rgba(255, 0, 0, 0.5)' }), // 半透明红色填充
      stroke: new Stroke({ color: 'red', width: 2 }) // 红色描边
    })
  });
}

// 将样式函数应用于点要素
pointFeature.setStyle(pointStyleFunction);

js
// 方式二：new Feature 时直接配置

// 创建一个矢量要素，将点要素的几何对象和样式直接配置到该要素
const pointFeature = new Feature({
  geometry: pointGeometry,
  style: new Style({
    image: new Circle({
      radius: 8,
      fill: new Fill({ color: 'rgba(0, 255, 0, 0.5)' }), // 半透明绿色填充
      stroke: new Stroke({ color: 'green', width: 2 }) // 绿色描边
    })
  })
});

layerGroup

Feature 只能添加到 VectorSource 中，而 VectorSource 又只能添加到 VectorLayer 中。如果想在 ImageLayer 中添加 Feature，可以使用 layerGroup 功能。

Group 是一个特殊的图层类型，可以将多个图层组合成一个单一的图层实体。这种图层可以包含多个子图层，从而能够在地图中以单个实体的形式对它们进行管理。

js
// 创建一个 Group 图层
const groupLayer = new LayerGroup({
  layers: [
    new TileLayer({
      source: /* 可能是 TileSource 或其它 TileLayer 支持的数据源 */,
      // 其他图层配置。..
    }),
    new VectorLayer({
      source: /* 可能是 VectorSource 或其它 VectorLayer 支持的数据源 */,
      // 其他图层配置。..
    }),
    // 可以添加更多的子图层
  ],
  // Group 图层配置。..
});

// 将 Group 图层添加到地图中
const map = new Map({
  layers: [groupLayer],
  // 地图配置。..
});

API 分类

按功能来分类，大概可以分成如下几类：

  • Map：Openlayers 的核心组件，一切的容器。
  • View：视图管理器，主要用来管理地图视图，分辨率或旋转，中心、投影、分辨率、缩放级别等。
  • Layers：图层管理类，用来管理图层信息。主要包括 Tile，Image，Vector，VectorTile 等图层。
  • Sources and formats：图层数据来源和格式转化，常用的图层数据来源包括
    • Tile sources 瓦片
    • Image sources 图像
    • Vector sources 矢量
    • Vector tile sources 矢量瓦片
  • Controls：UI 控制器，主要包括放大缩小控制、logo、属性等。
  • Interactions：交互操作，包括常用的拖拽、修改、绘制等交互操作。
  • Projections：投影坐标系转换相关的操作，默认的投影坐标系统为 EPSG:3857。
  • Observable objects：观察对象变化，源码中运用了很多的观察者模式。
  • Other components：其它组件。

导出模块

有了分类，但是写代码时不知道哪些模块从哪里引入？

index.js

js
/**
 * @module ol
 */

export {default as Collection} from './Collection.js';
export {default as Disposable} from './Disposable.js';
export {default as Feature} from './Feature.js';
export {default as Geolocation} from './Geolocation.js';
export {default as Graticule} from './layer/Graticule.js';
export {default as Image} from './Image.js';
export {default as ImageWrapper} from './Image.js';
export {default as ImageCanvas} from './ImageCanvas.js';
export {default as ImageTile} from './ImageTile.js';
export {default as Kinetic} from './Kinetic.js';
export {default as Map} from './Map.js';
export {default as MapBrowserEvent} from './MapBrowserEvent.js';
export {default as MapBrowserEventHandler} from './MapBrowserEventHandler.js';
export {default as MapEvent} from './MapEvent.js';
export {default as Object} from './Object.js';
export {default as Observable} from './Observable.js';
export {default as Overlay} from './Overlay.js';
export {default as Tile} from './Tile.js';
export {default as TileCache} from './TileCache.js';
export {default as TileQueue} from './TileQueue.js';
export {default as TileRange} from './TileRange.js';
export {default as VectorRenderTile} from './VectorRenderTile.js';
export {default as VectorTile} from './VectorTile.js';
export {default as View} from './View.js';

export {getUid, VERSION} from './util.js';

layer.js

js
/**
 * @module ol/layer
 */

export {default as Graticule} from './layer/Graticule.js';
export {default as Group} from './layer/Group.js';
export {default as Heatmap} from './layer/Heatmap.js';
export {default as Image} from './layer/Image.js';
export {default as Layer} from './layer/Layer.js';
export {default as Tile} from './layer/Tile.js';
export {default as Vector} from './layer/Vector.js';
export {default as VectorImage} from './layer/VectorImage.js';
export {default as VectorTile} from './layer/VectorTile.js';
export {default as WebGLPoints} from './layer/WebGLPoints.js';
export {default as WebGLTile} from './layer/WebGLTile.js';

source.js

js
/**
 * @module ol/source
 */

import LRUCache from './structs/LRUCache.js';
import {getIntersection} from './extent.js';

export {default as BingMaps} from './source/BingMaps.js';
export {default as CartoDB} from './source/CartoDB.js';
export {default as Cluster} from './source/Cluster.js';
export {default as DataTile} from './source/DataTile.js';
export {default as GeoTIFF} from './source/GeoTIFF.js';
export {default as IIIF} from './source/IIIF.js';
export {default as Image} from './source/Image.js';
export {default as ImageArcGISRest} from './source/ImageArcGISRest.js';
export {default as ImageCanvas} from './source/ImageCanvas.js';
export {default as ImageMapGuide} from './source/ImageMapGuide.js';
export {default as ImageStatic} from './source/ImageStatic.js';
export {default as ImageWMS} from './source/ImageWMS.js';
export {default as OGCMapTile} from './source/OGCMapTile.js';
export {default as OGCVectorTile} from './source/OGCVectorTile.js';
export {default as OSM} from './source/OSM.js';
export {default as Raster} from './source/Raster.js';
export {default as Source} from './source/Source.js';
export {default as StadiaMaps} from './source/StadiaMaps.js';
export {default as Tile} from './source/Tile.js';
export {default as TileArcGISRest} from './source/TileArcGISRest.js';
export {default as TileDebug} from './source/TileDebug.js';
export {default as TileImage} from './source/TileImage.js';
export {default as TileJSON} from './source/TileJSON.js';
export {default as TileWMS} from './source/TileWMS.js';
export {default as UrlTile} from './source/UrlTile.js';
export {default as UTFGrid} from './source/UTFGrid.js';
export {default as Vector} from './source/Vector.js';
export {default as VectorTile} from './source/VectorTile.js';
export {default as WMTS} from './source/WMTS.js';
export {default as XYZ} from './source/XYZ.js';
export {default as Zoomify} from './source/Zoomify.js';

export {createLoader as createWMSLoader} from './source/wms.js';
export {createLoader as createArcGISRestLoader} from './source/arcgisRest.js';
export {createLoader as createStaticLoader} from './source/static.js';
export {createLoader as createMapGuideLoader} from './source/mapguide.js';

export function sourcesFromTileGrid

format.js

通常需要与数据源（Source）一起使用，用于解析和序列化不同地理空间数据的格式。

在地理信息系统中，数据以不同的格式存储和表示，比如 GeoJSON、KML、GML 等。这些格式在表示空间数据时有着不同的结构和语法。ol/format 模块提供了一系列的类和方法，用于将这些不同格式的地理空间数据解析为 OpenLayers 的要素对象，或将 OpenLayers 的要素对象序列化为特定格式的地理空间数据。

js
/**
 * @module ol/format
 */

export {default as EsriJSON} from './format/EsriJSON.js';
export {default as GeoJSON} from './format/GeoJSON.js';
export {default as GML} from './format/GML.js';
export {default as GPX} from './format/GPX.js';
export {default as IGC} from './format/IGC.js';
export {default as IIIFInfo} from './format/IIIFInfo.js';
export {default as KML} from './format/KML.js';
export {default as MVT} from './format/MVT.js';
export {default as OWS} from './format/OWS.js';
export {default as Polyline} from './format/Polyline.js';
export {default as TopoJSON} from './format/TopoJSON.js';
export {default as WFS} from './format/WFS.js';
export {default as WKB} from './format/WKB.js';
export {default as WKT} from './format/WKT.js';
export {default as WMSCapabilities} from './format/WMSCapabilities.js';
export {default as WMSGetFeatureInfo} from './format/WMSGetFeatureInfo.js';
export {default as WMTSCapabilities} from './format/WMTSCapabilities.js';

control.js

js
/**
 * @module ol/control
 */

export {default as Attribution} from './control/Attribution.js';
export {default as Control} from './control/Control.js';
export {default as FullScreen} from './control/FullScreen.js';
export {default as MousePosition} from './control/MousePosition.js';
export {default as OverviewMap} from './control/OverviewMap.js';
export {default as Rotate} from './control/Rotate.js';
export {default as ScaleLine} from './control/ScaleLine.js';
export {default as Zoom} from './control/Zoom.js';
export {default as ZoomSlider} from './control/ZoomSlider.js';
export {default as ZoomToExtent} from './control/ZoomToExtent.js';
export {defaults} from './control/defaults.js';

interaction.js

js
/**
 * @module ol/interaction
 */
export {default as DoubleClickZoom} from './interaction/DoubleClickZoom.js';
export {default as DblClickDragZoom} from './interaction/DblClickDragZoom.js';
export {default as DragAndDrop} from './interaction/DragAndDrop.js';
export {default as DragBox} from './interaction/DragBox.js';
export {default as DragPan} from './interaction/DragPan.js';
export {default as DragRotate} from './interaction/DragRotate.js';
export {default as DragRotateAndZoom} from './interaction/DragRotateAndZoom.js';
export {default as DragZoom} from './interaction/DragZoom.js';
export {default as Draw} from './interaction/Draw.js';
export {default as Extent} from './interaction/Extent.js';
export {default as Interaction} from './interaction/Interaction.js';
export {default as KeyboardPan} from './interaction/KeyboardPan.js';
export {default as KeyboardZoom} from './interaction/KeyboardZoom.js';
export {default as Link} from './interaction/Link.js';
export {default as Modify} from './interaction/Modify.js';
export {default as MouseWheelZoom} from './interaction/MouseWheelZoom.js';
export {default as PinchRotate} from './interaction/PinchRotate.js';
export {default as PinchZoom} from './interaction/PinchZoom.js';
export {default as Pointer} from './interaction/Pointer.js';
export {default as Select} from './interaction/Select.js';
export {default as Snap} from './interaction/Snap.js';
export {default as Translate} from './interaction/Translate.js';

export {defaults} from './interaction/defaults.js';

geom.js

  • Circle： 创建一个圆形要素的几何对象。
  • Geometry： 几何对象的基类，其他所有的 Geometry 对象都继承自该类。
  • GeometryCollection： 定义了包含多个几何对象的集合。
  • LinearRing： 用于创建线性环（例如多边形的边界）的几何对象。
  • LineString： 创建线要素的几何对象，由一系列连接的线段组成。
  • MultiLineString： 用于创建多条线要素的几何对象。
  • MultiPoint： 创建多个点要素的几何对象。
  • MultiPolygon： 用于创建多边形要素的几何对象。
  • Point： 创建点要素的几何对象。
  • Polygon： 创建多边形要素的几何对象。

这些几何对象提供了方法来创建、编辑和操作地图要素的几何形状。可以使用这些对象来构建点、线、面等不同类型的要素，并将它们与样式对象（下面提到的 ol/style 中的样式对象）结合使用，以在地图上显示自定义样式的要素。

js
/**
 * @module ol/geom
 */

export {default as Circle} from './geom/Circle.js';
export {default as Geometry} from './geom/Geometry.js';
export {default as GeometryCollection} from './geom/GeometryCollection.js';
export {default as LinearRing} from './geom/LinearRing.js';
export {default as LineString} from './geom/LineString.js';
export {default as MultiLineString} from './geom/MultiLineString.js';
export {default as MultiPoint} from './geom/MultiPoint.js';
export {default as MultiPolygon} from './geom/MultiPolygon.js';
export {default as Point} from './geom/Point.js';
export {default as Polygon} from './geom/Polygon.js';
export {default as SimpleGeometry} from './geom/SimpleGeometry.js';

style.js

  • Circle： 定义用于表示点要素的圆形样式。
  • Fill： 设置填充样式，用于表示面要素的填充颜色。
  • Icon 和 IconImage： 定义用于表示点要素的图标样式。IconImage 是图标的图像信息。
  • Image： 用于表示线要素或面要素的图像样式。
  • RegularShape： 定义规则形状的样式，例如正多边形、星形等。
  • Stroke： 设置线要素的线条样式，包括颜色、宽度、虚线等。
  • Style： 是一个整合了上述样式选项的对象，用于应用于地图要素。
  • Text： 定义文本标签的样式，例如标签的字体、颜色、对齐方式等。

这些样式选项允许开发者根据自己的需求定义和配置地图要素的外观。通过创建样式对象并将其应用于地图要素，可以控制要素在地图上的展示效果，包括颜色、形状、图标、文本标签等。

js
/**
 * @module ol/style
 */

export {default as Circle} from './style/Circle.js';
export {default as Fill} from './style/Fill.js';
export {default as Icon} from './style/Icon.js';
export {default as IconImage} from './style/IconImage.js';
export {default as Image} from './style/Image.js';
export {default as RegularShape} from './style/RegularShape.js';
export {default as Stroke} from './style/Stroke.js';
export {default as Style} from './style/Style.js';
export {default as Text} from './style/Text.js';

本文作者:青波

本文链接:

版权声明:本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！