OpenLayers7官方文档翻译,OpenLayers7中文文档,OpenLayers快速入门

快速入门

这个入门文档向您展示如何放一张地图在web网页上。

开发设置使用 NodeJS (至少需要Nodejs 14 或更高版本),并要求安装 git

设置新项目

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

bash 复制代码
npm create ol-app my-app
cd my-app
npm start
  1. 第一个命令将创建一个名为 my-app 的目录(如果您愿意,可以使用不同的名称),安装 OpenLayers 和开发服务器,并使用index.htmlmain.jsstyle.css 文件设置一个基本应用程序。

  2. 第二个命令 (cd my-app) 将工作目录更改为新的 my-app 项目,以便您可以开始使用它。

  3. 第三个命令 (npm start) 启动开发服务器,以便您可以在处理应用程序时在浏览器中查看应用程序。运行 npm start 后,你将看到告诉你要打开的 URL 的输出。打开 http://localhost:5173/(或显示的任何 URL)以查看新应用程序。

探索组件

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

  • 带有包含映射的元素的 HTML 标记(index.html
  • 初始化地图的 JavaScript(main.js)
  • 确定地图大小和任何其他自定义项的 CSS 样式(style.css)

markup(标记)

在文本编辑器中打开 index.html 文件。它应该看起来像这样:

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

javascript 复制代码
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文件。它应该看起来像这样:

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.htmlmain.jsstyle.css文件,并在运行开发服务器(使用 npm start)时在浏览器中查看生成的更改。完成编辑后,是时候捆绑或构建应用程序了,以便可以将其部署为静态网站(无需运行像 Vite 这样的开发服务器)。

若要生成应用程序,请运行以下命令:

bash 复制代码
npm run build

这将创建一个 dist 目录.html其中包含构成应用程序的新索引和资产。这些 dist 文件可以与您的生产网站一起部署。


本文翻译自:https://openlayers.org/doc/quickstart.html


Vue+OpenLayers中文教程推荐,不同于OpenLayers官方文档使用html+js原生原生教程,博主专栏包含大量vue整合案例和实际开发案例,非常适合地图开发小白快速入门。

  1. vue整合OpenLayers6入门教程:
    《OpenLayers入门教程汇总目录,OpenLayers教程,OpenLayers中文文档,OpenLayers手册,OpenLayers6文档教程,OpenLayers中文手册》
  2. vue整合OpenLayers6实战中文教程,包含大量OpenLayers官方文档没有涉及到的实际开发案例:
    《OpenLayers实战进阶专栏目录,OpenLayers实战案例,OpenLayers6实战教程》

end

相关推荐
Smile_Gently2 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
luckycoke8 小时前
小程序立体轮播
前端·css·小程序
一 乐8 小时前
高校体育场管理系统系统|体育场管理系统小程序设计与实现(源码+数据库+文档)
前端·javascript·数据库·spring boot·高校体育馆系统
懒羊羊我小弟8 小时前
常用Webpack Loader汇总介绍
前端·webpack·node.js
祈澈菇凉9 小时前
ES6模块的异步加载是如何实现的?
前端·javascript·es6
我爱学习_zwj9 小时前
4.从零开始学会Vue--{{组件通信}}
前端·javascript·vue.js·笔记·前端框架
顾比魁9 小时前
XSS盲打:当攻击者“盲狙”管理员
前端·网络安全·xss
黑客老李9 小时前
新手小白如何挖掘cnvd通用漏洞之存储xss漏洞(利用xss钓鱼)
java·运维·服务器·前端·xss
晚风予星9 小时前
简记|LogicFlow自定义BPMN元素节点
前端
Json____10 小时前
使用html css js 开发一个 教育机构前端静态网站模板
前端·css·html·js·前端学习·企业站·教育机构网站