Vue3 Openlayers 教程（一）Openlayers 简介与如何使用 Openlayers 地图加载一副基本的 OSM地图

1. Openlayers 简介

这是一段来自 Openlayers 官网的概述：
💡 OpenLayers 可以轻松地将动态地图放置在任何网页中。它可以显示从任何来源加载的地图瓦片、矢量数据和标记。OpenLayers 的开发是为了进一步使用各种地理信息。它是完全免费的开源 JavaScript，在 2-clause BSD License（也称为 FreeBSD）下发布。

简单说明：

Openlayers 是一个用于在网页上显示互动地图的开源 jsvaScript库，可以使用任何来源加载的地图瓦片数据（关于瓦片在文章后面会介绍）。

官网：

OpenLayers - Welcome

Openlayers 官网与文档：

Openlayers 官网：OpenLayers - Welcome
Openlayers api 文档: OpenLayers v10.2.1 API - Index
Openlayers 示例 : OpenLayers Examples

2. Openlayers 安装

使用 npm 命令安装 ol 包

arduino 复制代码

npm install ol   // 本文用到的 ol 版本为10.3.1\

3. 创建一个基础的地图与概念说明

简单的地图实例

先看效果图

💡

这是一个非常简单的地图实例，使用了 ol 自带的数据源 OSM 与 EPSG:4326 坐标系。一个地图由地图容器、地图视图、多个地图图层、地图控件、地图标记与交互构成。

这是代码，直接复制到 vue 文件中运行即可看到地图

xml 复制代码

<template>
    <div class="base-map">
        <div id="map" style="width: 800px; height: 600px;"></div>
    </div>
</template>

<script setup>
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import { OSM, XYZ } from 'ol/source';
import { onMounted } from 'vue';

var map = null;

onMounted(() => {
    initMap();
});

function initMap() {
    map = new Map({
    target: 'map', // 地图容器div的id
    layers: [ // 图层
        new TileLayer({
            source: new OSM() // 图层数据源 OSM为openlayer自带默认全球瓦片地图
        })
    ],
    view: new View({ // 地图视图
        center: [0, 0], // 地图中心点坐标
        projection: "EPSG:4326", // 坐标系，有EPSG:4326和EPSG:3857
        zoom: 2 // 地图默认缩放级别
    })
});
}

</script>

概念说明

Map 地图

map 是 Openlayers 的核心组件，表示地图容器。newMap 也就是创建一个地图容器，在 target 参数中绑定 dom 组件的 id 实现将地图挂载在该 dom 中，以此在界面中展示 map

在示例中 new Map 用到的属性:

target: 映射的容器，用于与dom进行绑定。可以是元素本身或元素的 ID。如果在构造时未指定，则必须调用 setTarget 才能渲染地图。
layers: 图层。如果未定义，则将渲染没有图层的地图。请注意，图层是按提供的顺序渲染的，顺序为 [最底部图层, ... , 最顶部图层]
view: 地图的视图。用于配制地图相关信息，如：中心点、缩放等级、透明度、坐标系规则、旋转角度等

其他 map 属性：

controls：地图控件。常用的地图控件有：缩放、定位、比例尺、旋转、图层切换、全屏等。
pixelRatio ：设备上物理像素与设备无关像素（dip）之间的比率。Openlayer 会自动调整，确保地图在高像素密度设备上不会模糊
interactions：与 Map 的交互。一般不用写，Openlayers 会使用一套默认的交互。
maxTilesLoading：要同时加载的最大瓦片数。默认为16
moveTolerance：光标必须移动的最小距离（以像素为单位），才能被检测为地图移动事件而不是单击。增加此值可以更轻松地在地图上单击。
keyboardEventTarget：要侦听键盘事件的元素

layers 图层

在 Map 中的图层，一个 Map 中可以有多个图层，所以这是个集合。在 ol 中，主要定义了四种图层类型，矢量瓦片图层 Vector Tile Layer、图片图层Image Layer、切片图层Tile Layer、矢量图层Vector Layer，它们都是继承 Layer 这个基类。

map 可以通过 addLayer() 将一个新的 layer 添加到集合末尾，也可以通过 removeLayer() 移除指定 layer

layer 的主要属性：

source ：图层的数据源，可以使用 ol 自带的OSM、天地图、百度、高徳等。
extent：图层渲染的边界范围。图层将不会在此范围之外进行渲染。
opacity：图层透明度
visible：图层是否可见
minZoom：图层最小缩放程度，如果地图缩放级别小于minZoom该图层将不显示
maxZoom：图层最大缩放程度，与上面同理
zIndex：图层层级，类型为 number 层级越大越靠上。默认为0

当前展示地图使用 Tile Layer 图层就可以，其他图层我会在之后的篇章说明

arduino 复制代码

  const layer = new TileLayer({
    source: new XYZ({
      url: `http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}`,
    }),
    // 设置图层展示范围 四个参数分别为左下角经度、左下角纬度、右上角经度、右上角纬度。
    // 注意：对于 EPSG:3857（Web Mercator 投影），extent 中的坐标值通常是以米为单位的平面坐标。
      extent: [14, -10, 36, 20], 
      projection: "EPSG:4326", // 图层坐标系，有EPSG:4326和EPSG:3857
      opacity: 0.9, // 图层透明度
      visible: true, // 图层可见性 可以通过 setVisible() 方法更改
      minZoom: 1, // 图层最小缩放级别
      maxZoom: 18, // 图层最大缩放级别
      zIndex: 0, // 图层层级

  });

  map.addLayer(layer);

View 视图

View 是地图视图的核心对象，用于控制地图的可视化状态和行为。它管理地图的 中心点、缩放级别、旋转角度、倾斜角度 等信息。

view 的主要属性：

center：地图中心位置，通常以经纬度表示。类型：[number, number]
zoom ：地图的缩放级别，通常是一个整数，0 为最小，28 为最大。
rotation：地图的旋转角度，类型为 number, 0表示无旋转， Math.PI /2 表示旋转90度。
maxZoom：地图的最大缩放级别，限制用户可以缩放的最大级别。默认为28。
minZoom地图的最小缩放级别，限制用户可以缩放的最小级别。默认为0。
resolution：地图的分辨率。
extent：地图的显示范围（区域），是地图视图所能显示的最小和最大经纬度范围。
state：state是一个对象，包含 content、zoom、rotation、projection属性。可以通过 view.getState() 获取

arduino 复制代码

  const view = new View({
    center: [0, 0], // 地图中心点坐标
    zoom: 2, // 地图默认缩放级别
    rotation: Math.PI / 6, // 旋转角度
    maxZoom: 18, // 最大缩放级别
    minZoom: 1, // 最小缩放级别
    resolution: 10000, // 分辨率 resolution 值较小，地图显示的区域更小，精度更高。
    extent: [-180, -90, 180, 90], // 显示范围 四个参数分别为左下角经度、左下角纬度、右上角经度、右上角纬度。
    projection: "EPSG:4326", // 地图的坐标系，有EPSG:4326和EPSG:3857
  });

  const state = view.getState();
  console.log(state);

  map.setView(view);

可以看到，由于设置了 rotation 的原因，整个地图就进行了旋转

state 的打印：

Source 数据源

Source 负责加载和提供图层所需的数据。它是一个抽象类，ol 使用其子类。这些子类可用于加载xyz、OpenStreetMap或高德、Bing、Goole街景、天地图、超图等免费和商业地图切片服务，"WMS"或"WMTS"等OGC源，以及"GeoJSON"或KML等格式的矢量数据。

projection 地图投影

地图投影是一个数学过程，它将地球表面的三维坐标（如经度、纬度）转换为平面上的二维坐标。因为地球是一个球形的对象，而屏幕显示的是二维图像，所以不同的投影方法用来平衡地理精度和显示需求。

OpenLayers 支持的投影包括经典的地理坐标系（如 EPSG:4326 ）和广泛用于网络地图的投影坐标系（如 EPSG:3857）。

OpenLayers 默认使用 EPSG:3857（Web Mercator）作为地图的投影，

投影坐标系选择：

数据源的要求 ：如果你使用的是全球性的地图数据（如 OSM、Google Maps），通常推荐使用 EPSG:3857。
地理数据的精度需求 ：如果你需要展示精确的地理位置（如 GPS 数据），并且不需要太多的缩放，EPSG:4326 可能是更合适的选择。
其他：每种投影都有其特定的属性，因此在某些特定区域，选择合适的投影可以提高地图的精度和表现效果。

使用多个投问题

在一个 Map 中只会使用一个投影，当 view 和 layer 使用不同的投影坐标系时，OpenLayers 会自动将图层的坐标转换为视图使用的投影坐标系。这使得在不同投影之间切换时，图层仍然能够正确渲染。
💡

注意：这也可能带来一些性能问题和精度问题，特别是在高纬度地区或精确度要求较高的情况下。因此，最好在设计地图时确保视图和图层使用相同或兼容的投影坐标系。

关于作者

如果文章中有错误或不够详细的地方，欢迎在评论区指出 😺。在下一篇文章中，我将介绍如何在 OpenLayers 中使用来自不同平台的数据源来创建瓦片图层 😎。

Vue3 Openlayers 教程（一）Openlayers 简介与如何使用 Openlayers 地图 加载一副基本的 OSM地图

1. Openlayers 简介

2. Openlayers 安装

3. 创建一个基础的地图与概念说明

简单的地图实例

概念说明

Map 地图

layers 图层

View 视图

Source 数据源

projection 地图投影

关于作者

Vue3 Openlayers 教程（一）Openlayers 简介与如何使用 Openlayers 地图加载一副基本的 OSM地图