快速入门 | GIS学习笔记

原文链接及内容

原文链接：https://openlayers.org/doc/quickstart.html

这份入门教程将向你展示如何在网页中引入地图，开发需要使用到Node (推荐14或更高版本) ，并要求安装git。

创建一个新项目

使用OpenLayers来创建项目，最简单的方法便是运行npm create ol-app命令：

1
2
3

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文件,它应该看起来像这样：

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

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

JavaScript脚本

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

OpenLayers被打包为ES模块的集合，上述脚本中的导入行(import)用于引入应用程序所需的模块。请查看示例和API文档，以便了解你需要使用哪些模块。
import ./style.css;导入行可能显得有点出乎意料，在本例中，我们使用Vite作为开发服务器，Vite允许从JavaScript模块导入CSS。如果使用的是别的开发服务器，那么可以在index.html的<link >标记中引入style.css。
main.js模块作为应用程序的入口，它将初始化一个新的地图(对象)，并为它添加带有OSM数据源的单个图层(对象)和一个描述中心和缩放级别的视图(对象)。更多关于Map、View、Layer和Source组件的知识，请阅读教程。

CSS样式

在文本编辑器中打开style.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 package发布)。我们在上面运行npm create ol-app命令的步骤中会自动安装ol包。如果您是从现有的应用程序开始，而不是使用npm create ol-app来创建项目，那么您应该使用npm install ol命令安装ol包。ol.css样式表包括OpenLayers创建的元素的样式-包括诸如用于放大和缩小地图视图的按钮。
上述style.css文件中的其余规则使包含地图(对象)的<div id="map">标记元素填充满整个页面。

部署你的应用程序(项目)

你可以对index.html、main.js或style.css文件进行编辑，在运行项目(使用npm start)时，可以在浏览器中查看更改后的效果。在完成编辑之后，就可以打包或构建应用程序，以便将其部署为静态网站(无需运行Vite这样的开发服务器)。
要构建你的应用程序，请运行以下命令：