OpenLayers Wiki

简体中文

English

简体中文

English

Appearance

快速入门 ​

本教程将向您展示如何在网页上放置地图。开发环境使用 Node (14 或更高版本)，并且需要安装 git。

创建新项目 ​

使用 OpenLayers 构建项目的最简单方法是运行 npm create ol-app：

bash
npm create ol-app my-app
cd my-app
npm start

第一条命令将创建一个名为 my-app 的目录（如果您愿意，可以使用其他名称），安装 OpenLayers 和开发服务器，并设置一个包含 index.html、main.js 和 style.css 文件的基本应用。

第二条命令（cd my-app）将工作目录更改为您的新 my-app 项目，以便您可以开始使用它。

第三条命令（npm start）启动开发服务器，以便您在开发时可以在浏览器中查看您的应用程序。运行 npm start 后，您将看到告诉您要打开的 URL 的输出。打开 http://localhost:5173/（或显示的任何 URL）以查看您的新应用程序。

了解各组成部分 ​

一个 OpenLayers 应用程序由三个基本部分组成：

  • 包含地图元素的 HTML 标记（index.html）
  • 初始化地图的 JavaScript（main.js）
  • 确定地图大小和其他自定义的 CSS 样式（style.css）

HTML 标记 ​

在文本编辑器中打开 index.html 文件。它应该类似于以下内容：

html
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>快速入门</title>
  </head>
  <body>
    <div id="map"></div>
    <script type="module" src="./main.js"></script>
  </body>
</html>

标记中的两个重要部分是用于包含地图的 <div> 元素和用于引入 JavaScript 的 <script> 标记。地图容器或目标应该是一个块级元素（如 <div>），并且它必须出现在初始化地图的 <script> 标记之前的文档中。

脚本 ​

在文本编辑器中打开 main.js 文件。它应该类似于以下内容：

js
import './style.css';
import Map from 'ol/Map.js';
import OSM from 'ol/source/OSM.js';
import TileLayer from 'ol/layer/Tile.js';
import View from 'ol/View.js';

const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM(),
    }),
  ],
  view: new View({
    center: [0, 0],
    zoom: 2,
  }),
});

OpenLayers 作为 ES 模块集合进行打包。import 行用于引入应用程序所需的模块。浏览 示例 和 API 文档 以了解您可能想要使用的模块。

import './style.css'; 这一行可能有点出乎意料。在此示例中，我们使用 Vite 作为开发服务器。Vite 允许从 JavaScript 模块导入 CSS。如果您使用的是不同的开发服务器，则可以在 index.html 中的 <link> 标签中包含 style.css。

main.js 模块作为应用程序的入口点。它初始化一个新地图，为其提供一个带有 OSM 源的图层和一个描述中心和缩放级别的视图。通读 基本概念教程 以了解更多关于 Map、View、Layer 和 Source 组件的信息。

样式 ​

在文本编辑器中打开 style.css 文件。它应该类似于以下内容：

css
@import "node_modules/ol/ol.css";

html,
body {
  margin: 0;
  height: 100%;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

第一行导入随 ol 包附带的 ol.css 文件（OpenLayers 在 npm 注册表中作为 ol 包 发布）。ol 包是在上面的 npm create ol-app 步骤中安装的。如果您是从现有应用程序开始而不是使用 npm create ol-app，则可以使用 npm install ol 安装该包。ol.css 样式表包含 OpenLayers 创建的元素的样式——例如用于放大和缩小的按钮。

style.css 文件中的其余规则使包含地图的 <div id="map"> 元素填满整个页面。

部署应用程序 ​

您可以编辑 index.html、main.js 或 style.css 文件，并在运行开发服务器（使用 npm start）时在浏览器中查看生成的更改。完成编辑后，就可以打包或构建应用程序，以便将其部署为静态网站（无需运行像 Vite 这样的开发服务器）。

要构建应用程序，请运行以下命令：

bash
npm run build

这将创建一个 dist 目录，其中包含构成应用程序的新 index.html 和资源。这些 dist 文件可以部署到您的生产网站。

Copyright © 2026 LZUGIS