00.OpenLayers快速开始

在星空下

于 2024-05-19 17:36:55 发布

阅读量860

点赞数 21

分类专栏： OpenLayers学习笔记文章标签： OpenLayers webgis

本文链接：https://blog.csdn.net/weixin_45213317/article/details/139045801

版权

OpenLayers学习笔记专栏收录该内容

19 篇文章 1 订阅

订阅专栏

00OpenLayers快速开始

官方文档：

快速开始：https://openlayers.org/doc/quickstart.html

需要node环境

一、设置新项目

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）以查看新应用程序。

如果你从一个已有的应用程序开始，而不是使用 npm create ol-app ，你应该使用 npm install ol 安装这个软件包。

二、组成部分

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

带有包含地图元素的HTML标记（ index.html ）
地图的JavaScript（ main.js ）
决定地图大小和任何其他自定义的CSS样式（ style.css ）

在文本编辑器中打开 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>元素和用于引入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模块。导入行用于引入应用程序所需的模块。浏览示例和API文档，了解您可能想要使用的模块。

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

main.js 模块用作应用程序的入口点。它创建了一个新的地图，给它一个带有OSM源的单层和一个描述中心和缩放级别的视图。阅读基本概念教程，了解有关 Map 、 View 、 Layer 和 Source 组件的更多信息。

在文本编辑器中打开 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 包）。在上面的 npm create ol-app 步骤中安装了 ol 软件包。 ol.css 样式表包括OpenLayers创建的元素的样式-例如用于放大和缩小的按钮。

保存并刷新浏览器可以看到：

三、部署应用

npm run build

‍

在星空下

关注

21
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
00.OpenLayers快速开始

介绍了如何使用OpenLayers创建一个基本的Web地图应用程序。通过设置新项目，包括HTML标记、JavaScript和CSS样式，您可以快速开始构建地图应用。文档提供了创建项目、组成部分和部署应用的步骤，包括示例代码和说明。通过npm命令创建项目，导入OpenLayers模块，设置地图视图和图层，以及部署应用。最后，通过npm run build命令进行应用程序的构建。
复制链接

扫一扫