00.OpenLayers快速开始

文本编辑器中打开 main.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,
  }),
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

OpenLayers被打包为一组ES模块。导入行用于引入应用程序所需的模块。浏览示例和API文档，了解您可能想要使用的模块。

​import './style.css'​可能有点出乎意料。在在这个例子中，我们使用Vite作为开发服务器。Vite允许从JavaScript模块导入CSS。如果您使用的是不同的开发服务器，则可以将 style.css​ 包含在 index.html​ 中的 ​ 标记中。

​main.js​ 模块用作应用程序的入口点。它创建了一个新的地图，给它一个带有OSM源的单层和一个描述中心和缩放级别的视图。阅读基本概念教程，了解有关 Map​ 、 View​ 、 Layer​ 和 Source​ 组件的更多信息。

在文本编辑器中打开 style.css​ 文件：

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

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

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

第一行导入 ol​ 包附带的 ol.css​ 文件（OpenLayers在npm注册表中发布为 ol​ 包）。在上面的 npm create ol-app​ 步骤中安装了 ol​ 软件包。 ol.css​ 样式表包括OpenLayers创建的元素的样式-例如用于放大和缩小的按钮。

保存并刷新浏览器可以看到：

​​

三、部署应用

npm run build
1

‍