快速入門(mén)
這個(gè)入門(mén)文檔向您展示如何放一張地圖在web網(wǎng)頁(yè)上。
開(kāi)發(fā)設(shè)置使用 NodeJS（至少需要Nodejs 14 或更高版本），并要求安裝 git。
設(shè)置新項(xiàng)目
開(kāi)始使用OpenLayers構(gòu)建項(xiàng)目的最簡(jiǎn)單方法是運(yùn)行：npm create ol-app
npm create ol-app my-app
cd my-app
npm start
-
第一個(gè)命令將創(chuàng)建一個(gè)名為 my-app 的目錄（如果您愿意，可以使用不同的名稱(chēng)），安裝 OpenLayers 和開(kāi)發(fā)服務(wù)器，并使用
index.html、main.js和style.css文件設(shè)置一個(gè)基本應(yīng)用程序。 -
第二個(gè)命令 （
cd my-app） 將工作目錄更改為新的 my-app 項(xiàng)目，以便您可以開(kāi)始使用它。 -
第三個(gè)命令 （
npm start） 啟動(dòng)開(kāi)發(fā)服務(wù)器，以便您可以在處理應(yīng)用程序時(shí)在瀏覽器中查看應(yīng)用程序。運(yùn)行npm start后，你將看到告訴你要打開(kāi)的 URL 的輸出。打開(kāi)http://localhost:5173/（或顯示的任何 URL）以查看新應(yīng)用程序。
探索組件
OpenLayers 應(yīng)用程序由三個(gè)基本部分組成：
- 帶有包含映射的元素的 HTML 標(biāo)記（
index.html） - 初始化地圖的 JavaScript（
main.js) - 確定地圖大小和任何其他自定義項(xiàng)的 CSS 樣式（
style.css)
markup（標(biāo)記）
在文本編輯器中打開(kāi) index.html 文件。它應(yīng)該看起來(lái)像這樣：
<!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>
標(biāo)記中的兩個(gè)重要部分是<div>包含映射的元素和<script>要拉入 JavaScript 的標(biāo)記。映射容器或目標(biāo)應(yīng)該是塊級(jí)元素（如 <div>），并且必須出現(xiàn)在初始化<script>映射的標(biāo)記之前。
script（腳本）
在文本編輯器中打開(kāi)文件。它應(yīng)該看起來(lái)像這樣：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模塊的集合。導(dǎo)入行用于拉入應(yīng)用程序所需的模塊。瀏覽示例和 API 文檔，了解您可能想要使用哪些模塊。
導(dǎo)入“./樣式.css”;臺(tái)詞可能有點(diǎn)出乎意料。在此示例中，我們使用 Vite 作為開(kāi)發(fā)服務(wù)器。Vite 允許從 JavaScript 模塊導(dǎo)入 CSS。如果您使用的是其他開(kāi)發(fā)服務(wù)器，則可以改為在索引的標(biāo)記中包含樣式.css.html。
main.js 模塊用作應(yīng)用程序的入口點(diǎn)。它初始化新地圖，為其提供具有 OSM 源和描述中心和縮放級(jí)別的視圖的單個(gè)圖層。通讀基本概念教程，了解有關(guān)地圖、視圖、圖層和源組件的詳細(xì)信息。
style（樣式風(fēng)格）
在文本編輯器中打開(kāi)樣式.css文件。它應(yīng)該看起來(lái)像這樣：
@import "node_modules/ol/ol.css";
html,
body {
margin: 0;
height: 100%;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
第一行導(dǎo)入 ol 包附帶的 ol.css 文件（OpenLayers 在 npm 注冊(cè)表中作為 ol 包發(fā)布）。ol 包安裝在上面的 npm 創(chuàng)建 ol-app 步驟中。如果您從現(xiàn)有應(yīng)用程序開(kāi)始而不是使用 npm create ol-app，您將使用 npm install ol 安裝包。ol.css樣式表包括OpenLayers創(chuàng)建的元素的樣式 - 例如用于放大和縮小的按鈕。
樣式.css文件中的其余規(guī)則使包含地圖的<div id=“map”>元素填充整個(gè)頁(yè)面。
部署應(yīng)用
您可以編輯index.html、main.js或style.css文件，并在運(yùn)行開(kāi)發(fā)服務(wù)器（使用 npm start）時(shí)在瀏覽器中查看生成的更改。完成編輯后，是時(shí)候捆綁或構(gòu)建應(yīng)用程序了，以便可以將其部署為靜態(tài)網(wǎng)站（無(wú)需運(yùn)行像 Vite 這樣的開(kāi)發(fā)服務(wù)器）。
若要生成應(yīng)用程序，請(qǐng)運(yùn)行以下命令：
npm run build
這將創(chuàng)建一個(gè) dist 目錄.html其中包含構(gòu)成應(yīng)用程序的新索引和資產(chǎn)。這些 dist 文件可以與您的生產(chǎn)網(wǎng)站一起部署。
本文翻譯自：https://openlayers.org/doc/quickstart.html
Vue+OpenLayers中文教程推薦，不同于OpenLayers官方文檔使用html+js原生原生教程，博主專(zhuān)欄包含大量vue整合案例和實(shí)際開(kāi)發(fā)案例，非常適合地圖開(kāi)發(fā)小白快速入門(mén)。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-682937.html
- vue整合OpenLayers6入門(mén)教程：
《OpenLayers入門(mén)教程匯總目錄，OpenLayers教程，OpenLayers中文文檔，OpenLayers手冊(cè)，OpenLayers6文檔教程，OpenLayers中文手冊(cè)》 - vue整合OpenLayers6實(shí)戰(zhàn)中文教程，包含大量OpenLayers官方文檔沒(méi)有涉及到的實(shí)際開(kāi)發(fā)案例：
《OpenLayers實(shí)戰(zhàn)進(jìn)階專(zhuān)欄目錄，OpenLayers實(shí)戰(zhàn)案例，OpenLayers6實(shí)戰(zhàn)教程》
end文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-682937.html
到了這里，關(guān)于OpenLayers7官方文檔翻譯，OpenLayers7中文文檔，OpenLayers快速入門(mén)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
