openlayers 入门教程（二）：map 篇

news2024/12/22 18:56:17

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；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 光标必须移动的最小距离（以像素为单位）才能被检测为地图移动事件，而不是单击。增大此值可以使单击地图更容易。