00.OpenLayers快速开始

00OpenLayers快速开始

官方文档:

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

需要node环境

一、设置新项目

python 复制代码
npm create ol-app my-app
cd my-app
npm start
  • 第一个命令将创建一个名为 my-app 的目录(如果您愿意,可以使用其他名称),安装OpenLayers和开发服务器,并设置一个包含 index.htmlmain.jsstyle.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​ 文件。输入;

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​ 文件:

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文档,了解您可能想要使用的模块。

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

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

在文本编辑器中打开 style.css​ 文件:

javascript 复制代码
@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创建的元素的样式-例如用于放大和缩小的按钮。

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

三、部署应用

javascript 复制代码
npm run build

相关推荐
千汇数据的老司机5 小时前
webGIS在可视化大屏中的应用场景有哪些,有哪些类库
信息可视化·webgis·#web
ReBeX2 天前
【GeoJSON在线编辑平台】(1)创建地图+要素绘制+折点编辑+拖拽移动
前端·javascript·gis·openlayers·webgis
undefined&&懒洋洋3 天前
Cesium使用flyToBoundingSphere实现倾斜相机视角观察物体
前端·javascript·cesium·webgis
supermapsupport3 天前
SuperMap GIS基础产品FAQ集锦(20241104)
java·javascript·gis·supermap·webgis
纸飞机的旅行8 天前
如何快速使用Cesium完成项目
vue.js·webgis
qbbmnnnnnn13 天前
【WebGis开发 - Cesium】三维可视化项目教程---图层管理拓展图层顺序调整功能
vue.js·webgl·三维可视化·cesium·vue3.0·webgis·vuedraggable
T0uken1 个月前
【WebGIS】Cesium:Viewer 初始化、地图加载与基础交互
gis·cesium·webgis
qbbmnnnnnn1 个月前
【WebGis开发 - Cesium】三维可视化项目教程---图层管理基础
前端·wmts·cesium·vue3.0·webgis·3dtiles·图层管理
GIS开发特训营1 个月前
开源 Three.js 案例及入门教程
开发语言·javascript·gis·gis开发·webgis·三维gis
qbbmnnnnnn1 个月前
【WebGis开发 - Cesium】三维可视化项目教程---初始化场景
gis·三维可视化·cesium·webgis