openlayers 入门教程（二）：map 篇-编程知识

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

在这里插入图片描述

No.	内容链接
1	Openlayers 【入门教程】 - 【源代码+示例300+】
2	Leaflet 【入门教程】 - 【源代码+图文示例 150+】
3	Cesium 【入门教程】 - 【源代码+图文示例200+】
4	MapboxGL【入门教程】 - 【源代码+图文示例150+】
5	前端就业宝典【面试题+详细答案 1000+】

在这里插入图片描述

文章目录

- 一、创建地图对象
- 二、地图属性与方法
- - 属性
  - 常用方法
- 三、事件处理
- - 1， click 示例
  - 2， singleclick 示例
  - 3， dblclick 示例
  - 4， pointermove 示例
  - 5，右键点击示例
  - 6， movestart、moveend 示例
  - 7， loadstart、loadend 示例
  - 8， modifystart和modifyend 示例
  - 9， postrender 示例
- 四、扩展
- 五、Openlayers 入门教程 -系列文章列表

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);

在这里插入图片描述

二、地图属性与方法

属性

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 等交互