快速入门
这个入门文档向您展示如何放一张地图在web网页上。
开发设置使用 NodeJS（至少需要Nodejs 14 或更高版本），并要求安装 git。
设置新项目
开始使用OpenLayers构建项目的最简单方法是运行：npm create ol-app
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)
markup（标记）
在文本编辑器中打开 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>
标记中的两个重要部分是<div>包含映射的元素和<script>要拉入 JavaScript 的标记。映射容器或目标应该是块级元素（如 <div>），并且必须出现在初始化<script>映射的标记之前。
script（脚本）
在文本编辑器中打开文件。它应该看起来像这样：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模块的集合。导入行用于拉入应用程序所需的模块。浏览示例和 API 文档，了解您可能想要使用哪些模块。
导入“./样式.css”;台词可能有点出乎意料。在此示例中，我们使用 Vite 作为开发服务器。Vite 允许从 JavaScript 模块导入 CSS。如果您使用的是其他开发服务器，则可以改为在索引的标记中包含样式.css.html。
main.js 模块用作应用程序的入口点。它初始化新地图，为其提供具有 OSM 源和描述中心和缩放级别的视图的单个图层。通读基本概念教程，了解有关地图、视图、图层和源组件的详细信息。
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 包发布）。ol 包安装在上面的 npm 创建 ol-app 步骤中。如果您从现有应用程序开始而不是使用 npm create ol-app，您将使用 npm install ol 安装包。ol.css样式表包括OpenLayers创建的元素的样式 - 例如用于放大和缩小的按钮。
样式.css文件中的其余规则使包含地图的<div id=“map”>元素填充整个页面。
部署应用
您可以编辑index.html、main.js或style.css文件，并在运行开发服务器（使用 npm start）时在浏览器中查看生成的更改。完成编辑后，是时候捆绑或构建应用程序了，以便可以将其部署为静态网站（无需运行像 Vite 这样的开发服务器）。
若要生成应用程序，请运行以下命令：
npm run build
这将创建一个 dist 目录.html其中包含构成应用程序的新索引和资产。这些 dist 文件可以与您的生产网站一起部署。
本文翻译自：https://openlayers.org/doc/quickstart.html
Vue+OpenLayers中文教程推荐，不同于OpenLayers官方文档使用html+js原生原生教程，博主专栏包含大量vue整合案例和实际开发案例，非常适合地图开发小白快速入门。文章来源：https://www.toymoban.com/news/detail-682937.html
- vue整合OpenLayers6入门教程：
《OpenLayers入门教程汇总目录，OpenLayers教程，OpenLayers中文文档，OpenLayers手册，OpenLayers6文档教程，OpenLayers中文手册》 - vue整合OpenLayers6实战中文教程，包含大量OpenLayers官方文档没有涉及到的实际开发案例：
《OpenLayers实战进阶专栏目录，OpenLayers实战案例，OpenLayers6实战教程》
end文章来源地址https://www.toymoban.com/news/detail-682937.html
到了这里，关于OpenLayers7官方文档翻译，OpenLayers7中文文档，OpenLayers快速入门的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
