openlayers 入门教程（二）：map 篇_openlayers入门教程

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

---

OpenLayers 是一个开源的 JavaScript 库，用于在网页中构建交互式的地图应用程序。ol/Map 类是 OpenLayers API 中的核心组件之一，它负责创建和管理整个地图实例。

一、创建地图对象

创建一个新的地图实例通常从 ol/Map 类开始，示例代码如下：

import Map from 'ol/Map';
import View from 'ol/View';

// 创建一个地图视图，设置初始中心点与缩放级别
const view = new View({
  center: [0, 0], // 地图中心点，以经纬度表示
  zoom: 2, // 初始缩放级别
  projection: 'EPSG:3857' // 默认的Web Mercator投影
});

// 创建地图对象，指向HTML DOM元素作为地图容器
const map = new Map({
  target: 'map-container', // 容器ID或者DOM元素
  view: view, // 关联的地图视图
  layers: [], // 图层数组，可以为空，后续添加
});

// 添加图层到地图
const layer = new TileLayer({
  source: new XYZSource({
    url: 'https://a.tile.openstreetmap.org/{z}/{x}/{y}.png',
  }),
});
map.addLayer(layer);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

二、地图属性与方法

属性

• target 地图的容器，元素本身或id元素的 。必须指定，不指定无法加载地图。
• view 视图。需要在构造时或通过方法（setView）指定，否则不会加载图层。
• layers 图层。没定义图层，也会加载，显示空白图层。图层是按顺序加载的，想要在最上层需要放在最后面。
• controls 添加到地图上的控件。默认加载 ol/control 下 defaults，默认控件组。
• overlays 覆盖物。默认情况下，不添加任何覆盖物。
• pixelRatio 设备上物理像素与设备无关像素（下降）之间的比率。
• interactions 添加到地图的交互事件。默认加载 ol/interaction 下 defaults，默认交互组。
• keyboardEventTarget 监听键盘事件的元素。这决定了KeyboardPan和 KeyboardZoom互动的触发时间。例如，如果将此选项设置为 document键盘，则交互将始终触发。如果未指定此选项，则库在其上侦听键盘事件的元素是地图目标（即，用户为地图提供的div）。如果不是 document，则需要重点关注目标元素以发出关键事件，这要求目标元素具有tabindex属性。
• maxTilesLoading 同时加载的最大瓦片数。默认16。
• moveTolerance 光标必须移动的最小距离（以像素为单位）才能被检测为地图移动事件，而不是单击。增大此值可以使单击地图更容易。

常用方法

• on(type, listener) 侦听某种类型的事件。
• addControl(control) 添加控件。
• addInteraction(interaction) 添加交互。
• addLayer(layer) 添加图层。
• removeLayer(layer) 删除图层。
• addOverlay(overlay) 添加覆盖物。
• dispatchEvent(event) 调度事件并调用所有侦听此类型事件的侦听器。
• getOverlays() 获取所有覆盖物。
• removeOverlay(overlay) 删除指定覆盖物
• setTarget()：动态改变地图渲染的目标容器。
• getView()：获取当前关联的视图对象。
• updateSize()：当容器大小发生改变时，更新地图尺寸以适应新的容器大小。

三、事件处理

OpenLayers 提供丰富的事件系统，可以在地图上监听并响应各种事件，例如：

1， click 示例

示例：鼠标click显示企业名片

2， singleclick 示例

示例：singleclick点击选择feature，并设置特定的颜色

3， dblclick 示例

示例： dblclick事件示例-显示品牌代言人信息

4， pointermove 示例

示例：移动地图获取中心点经纬度信息

5， 右键点击示例

示例：右键点击定位，获取某一点下多层features信息

6， movestart、moveend 示例

示例：moveend事件获取地图左上和右下的坐标信息

7， loadstart、loadend 示例

示例：loadstart和loadend 旋转加载显示

8， modifystart和modifyend 示例

示例：modifystart和modifyend显示提示信息

9， postrender 示例

示例：postrender地图图像的滤镜处理

四、扩展

除了基础地图创建之外，还可以通过调用其他API方法来进一步定制地图行为，例如调整地图视图、添加自定义交互、加载不同来源的数据等。OpenLayers是一个高度模块化的库，允许开发者根据需求灵活组合不同的功能模块来构建复杂的WebGIS应用。

五、Openlayers 入门教程 -系列文章列表

• openlayers 入门教程（一）：应该如何学习openlayers
• openlayers 入门教程（二）：Map 篇
• openlayers 入门教程（三）：View 篇
• openlayers 入门教程（四）：Layers 篇
• openlayers 入门教程（五）：Sources 篇
• openlayers 入门教程（六）：Controls篇
• openlayers 入门教程（七）：Interactions篇
• openlayers 入门教程（八）：Geom 篇
• openlayers 入门教程（九）：Overlay 篇
• openlayers 入门教程（十）：Style 篇
• openlayers 入门教程（十一）：Formats篇
• openlayers 入门教程（十二）：定位与轨迹
• openlayers 入门教程（十三）：动画
• openlayers 入门教程（十四）：第三方插件
• openlayers 入门教程（十五）：与 canvas、echart，turf 等交互