00.OpenLayers快速开始

news2025/3/16 10:01:08

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

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

image

三、部署应用

npm run build

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1694973.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【话题】我眼神的IT行业现状与未来趋势

目录 一、挑战 教学资源的重新分配 教师角色的转变 学生学习方式的改变 教育评价体系的挑战 二、机遇 个性化学习 跨学科学习 国际合作与交流 创新教育模式 三、如何培养下一代IT专业人才 更新教育理念 加强基础设施建设 整合课程资源 加强实践教学 培养跨学科…

Golang并发编程-协程goroutine任务取消(Context)

文章目录 前言一、单个任务的取消二、 所有任务取消三、Context的出现Context的定义Context使用 总结 前言 在实际的业务种&#xff0c;我们可能会有这么一种场景&#xff1a;需要我们主动的通知某一个goroutine结束。比如我们开启一个后台goroutine一直做事情&#xff0c;比如…

浅谈C++函数

目录 一、函数的概念二、调用函数的两个前提三、函数传参的三种形式四、函数返回类型 一、函数的概念 函数是C程序的基本模块&#xff0c;通常一个C程序由一个或多个函数组成。函数可以完成用户指定的任务&#xff0c;一般分为库函数和用户自定义的函数。函数由函数头和函数体…

AIGC-常见图像质量评估MSE、PSNR、SSIM、LPIPS、FID、CSFD,余弦相似度----理论+代码

持续更新和补充中…多多交流&#xff01; 参考: 图像评价指标PNSR和SSIM 函数 structural_similarity 图片相似度计算方法总结 MSE和PSNR MSE: M S E 1 m n ∑ i 0 m − 1 ∑ j 0 n − 1 [ I ( i , j ) − K ( i , j ) ] 2 MSE\frac{1}{mn}\sum_{i0}^{m-1}\sum_{j0}^{n-1}[…

重学java 43.多线程 多等待多唤醒案例

Fear never builds the future,but hope does. —— 24.5.25 多等待多唤醒问题 在多条线程同时消费同时等待时&#xff0c;会出现问题 BaoZiPu package S77ThreadMoreWait;/*count和flag可以定义成包装类&#xff0c;但要记得给count和flag手动赋值不然对于本案例来说&#xff…

C# MemoryStream流的详解与示例

文章目录 1. MemoryStream的基本介绍2. 创建MemoryStream对象无参构造函数带参构造函数 3. 向MemoryStream中写入数据写入字节数组写入字符串 4. 从MemoryStream中读取数据读取字节数组读取字符串 5. MemoryStream的实用辅助方法获取长度设置长度定位 6. 示例代码 在C#中&#…

JWT使用方法

目录 基础概念 依赖 生成令牌 工具类 控制层 解析令牌 工具类 网关过滤器 效果 基础概念 Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准&#xff08;(RFC 7519).该token被设计为紧凑且安全的&#xff0c;特别适用于分布式站点…

局域网桌面监控软件哪个好用?良心推荐

如何有效地监控和管理内部员工的计算机使用行为&#xff0c;防范潜在的安全风险&#xff0c;提高工作效率&#xff0c;是众多企业管理者关注的焦点。 而一款优秀的局域网桌面监控软件无疑能为企业的IT治理提供有力支撑。 小编在此给大家推荐一款好用的局域网桌面监控软件——域…

stm32H743不要将主频设置到480MHz

0 问题描述 本文使用的stm32H743是V版本&#xff0c;支持最高480MHz的主频。但在将主频设置为480MHz之后&#xff0c;使用FDCAN的回环模式出现了各种接收不到的异常问题。经过一番排查&#xff0c;将主频修改到400MHz&#xff0c;同时降低芯片内部LDO输出电压后恢复了正常。 …

深入理解NumPy与Pandas【numpy模块及Pandas模型使用】

二、numpy模块及Pandas模型使用 numpy模块 1.ndarray的创建 import numpy as np anp.array([1,2,3,4]) bnp.array([[1,2,3,4],[5,6,7,8]]) print(a) #[1 2 3 4] print(b) #[[1 2 3 4][5 6 7 8]] 1.1使用array()函数创建 numpy.array(object, dtype None, copy True, ord…

域内攻击 ----->约束非约束委派攻击

在域中&#xff0c;除了我们常见的横向移动以外&#xff0c;还有很多攻击&#xff0c;像什么kerberoasting&#xff0c;委派攻击&#xff0c;NTLMrelay啊...... 还有很多&#xff08;暂时只知道这些&#xff09; 以前在一篇公众号看到的一个笑话也荟萃了网安的一些攻击手法&am…

设计模式在芯片验证中的应用——单例

一、单例模式 单例模式(Singleton)是一种创建型设计模式&#xff0c;能够保证一个类只有一个实例&#xff0c; 并提供一个访问该实例的全局节点。验证环境配置(configuration)类、超时(timeout)处理类等可以使用单例实现。比如说验证环境需要在特定场景中监测特定接口上的超时事…

【机器学习300问】97、机器学习中哪些是凸优化问题,哪些是非凸优化问题?

在机器学习的领域中&#xff0c;多数模型的参数估计问题实质上可以转化为优化问题。鉴于机器学习模型的多样性&#xff0c;不同的模型会对应着不同的损失函数&#xff0c;进而形成各具特色的优化问题。了解优化问题的形式和特点&#xff0c;对于提升我们求解模型参数的效率和准…

在 Visual Studio 2022 (VS2022) 中删除 Git 分支的步骤如下

git branch -r PS \MauiApp1> git push origin --delete “20240523备份” git push origin --delete “20240523备份”

推荐五个线上兼职,在家也能轻松日入百元,适合上班族和全职宝妈

在这个瞬息万变的时代&#xff0c;你是否也曾考虑过在繁忙的工作之外&#xff0c;寻找一份兼职副业来补贴家用&#xff0c;同时保持生活的多样性&#xff1f;别急&#xff0c;现在就让我为你揭秘五个可靠的日结线上兼职岗位&#xff0c;助你轻松迈向财务自由之路&#xff01; 一…

地质考察AR远程交互展示系统辅助老师日常授课

广东这片充满活力的土地&#xff0c;孕育了一家引领ARVR科技潮流的杰出企业——深圳华锐视点&#xff0c;作为一家专注于VR/AR技术研究与业务开发的先锋公司。多年来&#xff0c;我们不断突破技术壁垒&#xff0c;将AR增强现实技术与各行各业的实际需求完美结合&#xff0c;助力…

基于分块贝叶斯非局部均值优化(OBNLM)的图像去噪算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 4.1 块定义与相似度计算 ​4.2 贝叶斯框架下的加权融合 4.3 加权最小均方误差估计 5.完整程序 1.程序功能描述 基于分块贝叶斯非局部均值优化(OBNLM)的图像去噪算法matlab仿真&#xff0c…

JAVA线程池的线程数量配置

一 JAVA线程池的线程数量配置 关于线程的配置&#xff0c;线程数量配置多少这个问题呢&#xff1f;往往不同的环境与不同的线程中的代码决定其配置的线程的数量。 二 常见的线程量配置 最常见的方式根据线程中处理的代码划分为CPU密集型或IO密集型&#xff1a; CPU密集型&…

react实现table可拖拽表头(给react-jss样式传递参数、滚动条样式)

目录 react实现table可拖拽表头安装依赖resizableTitle / index.tsxdrapTable.tsx使用DragTable 组件滚动条样式效果 react实现table可拖拽表头 安装依赖 yarn add react-resizable yarn add react-jssresizableTitle / index.tsx import { createUseStyles } from react-js…

【电子学会】2023年09月图形化一级 -- 保护环境

保护环境 1. 准备工作 &#xff08;1&#xff09;删除角色小猫&#xff0c;添加角色Wizard&#xff0c;Bear-walking&#xff1b; &#xff08;2&#xff09;添加背景Desert和Forest。 2. 功能实现 &#xff08;1&#xff09;调整魔法师和熊的大小为50&#xff1b; &…