OpenLayers中文文档1快速入门-CSDN博客

本文链接：https://blog.csdn.net/GAlbinus/article/details/130771525

OpenLayers 实例资源网

http://develop.smaryun.com:81/API/JS/OL3InterfaceDemo/index.htm

Quick Start 快速入门

This primer shows you how to put a map on a web page. The development setup uses Node (14 or higher) and requires that you have git installed.

这个入门读物向你展示了如何将地图放在网页上。开发设置使用Node（14或更高），并要求你安装了git。

建立一个新的项目

[Set up a new project] 建立一个新的项目

The easiest way to start building a project with OpenLayers is to run npm create ol-app:

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

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

The first command will create a directory called my-app (you can use a different name if you wish), install OpenLayers and a development server, and set up a basic app with index.html, main.js, and style.css files.

第一条命令将创建一个名为my-app的目录（如果你愿意，可以使用不同的名字），安装OpenLayers和一个开发服务器，并建立一个带有index.html、main.js和style.css文件的基本应用程序。

The second command (cd my-app) changes the working directory to your new my-app project so you can start working with it.

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

The third command (npm start) starts a development server so you can view your application in a browser while working on it. After running npm start, you’ll see output that tells you the URL to open. Open http://localhost:5173/ (or whatever URL is displayed) to see your new application.

第三条命令（npm start）启动一个开发服务器，这样你就可以在浏览器中查看你的应用程序，同时对其进行工作。运行npm start后，你会看到输出，告诉你要打开的URL。打开http://localhost:5173/（或显示的任何URL）来查看你的新应用程序。

探索部分

[Exploring the parts] 探索部分

An OpenLayers application is composed of three basic parts:

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

The HTML markup with an element to contain the map (index.html)
包含地图元素的HTML标记（`index.html’）。
The JavaScript that initializes the map (main.js)
用于初始化地图的JavaScript（main.js）。
The CSS styles that determine the map size and any other customizations (style.css)
决定地图大小和任何其他定制的CSS样式（style.css）。

标记 The markup

Open the index.html file in a text editor. It should look something like this:

在一个文本编辑器中打开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>

The two important parts in the markup are the <div> element to contain the map and the <script> tag to pull in the JavaScript. The map container or target should be a block level element (like a <div>) and it must appear in the document before the <script> tag that initializes the map.

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

The script

Open the main.js file in a text editor. It should look something like this:

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

Copy

OpenLayers is packaged as a collection of ES modules. The import lines are used to pull in the modules that your application needs. Take a look through the examples and API docs to understand which modules you might want to use.

OpenLayers被打包成一个ES模块的集合。import行是用来拉入你的应用程序需要的模块。看一下examples和API docs以了解你可能要使用的模块。

The import './style.css'; line might be a bit unexpected. In this example, we’re using Vite as a development server. Vite allows CSS to be imported from JavaScript modules. If you were using a different development server, you might include the style.css in a <link> tag in the index.html instead.

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

The main.js module serves as an entry point for your application. It initializes a new map, giving it a single layer with an OSM source and a view describing the center and zoom level. Read through the Basic Concepts tutorial to learn more about Map, View, Layer, and Source components.

main.js模块是你的应用程序的一个入口点。它初始化一个新的地图，给它一个带有OSM源的单一图层和一个描述中心和缩放级别的视图。阅读基本概念教程以了解更多关于地图'、视图’、图层'和源’组件。

The style

Open the style.css file in a text editor. It should look something like this:

在一个文本编辑器中打开style.css文件。它应该看起来像这样：

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

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

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

The first line imports the ol.css file that comes with the ol package (OpenLayers is published as the ol package in the npm registry). The ol package was installed in the npm create ol-app step above. If you were starting with an existing application instead of using npm create ol-app, you would install the package with npm install ol. The ol.css stylesheet includes styles for the elements that OpenLayers creates – things like buttons for zooming in and out.

第一行导入了ol.css文件，该文件来自ol包（OpenLayers在npm注册表中作为ol包发布）。ol包已经在上面的npm create ol-app步骤中安装。如果你从一个现有的应用程序开始，而不是使用npm create ol-app，你将用npm install ol来安装这个包。ol.css样式表包括OpenLayers创建的元素的样式–比如放大和缩小的按钮。

The remaining rules in the style.css file make it so the <div id="map"> element that contains the map fills the entire page.

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

部署你的应用程序

[Deploying your app]

You can make edits to the index.html, main.js, or style.css files and see the resulting change in your browser while running the development server (with npm start). After you have finished making edits, it is time to bundle or build your application so that it can be deployed as a static website (without needing to run a development server like Vite).

你可以对index.html、main.js或style.css文件进行编辑，并在运行开发服务器（使用npm start）时在浏览器中看到所产生的变化。完成编辑后，是时候捆绑或构建你的应用程序了，这样它就可以作为静态网站部署（不需要运行Vite这样的开发服务器）。

To build your application, run the following:

要构建你的应用程序，请运行以下程序