当前位置： 首页 > news >正文

OpenLayer创建第一个基础地图实例

news 2026/2/10 8:46:34

OpenLayers创建第一个基础地图实例

OpenLayers 是一个开源的 JavaScript 库，用于在网页上显示交互式地图。它支持多种地图源，包括 OpenStreetMap、Google Maps、Bing Maps 等。本文将介绍如何使用 OpenLayers 创建一个基础地图实例。

1. 准备工作

在开始之前，确保你已经具备以下条件：

  • 一个文本编辑器（如 VS Code、Sublime Text 等）。
  • 一个现代浏览器（如 Chrome、Firefox 等）。
  • 基本的 HTML 和 JavaScript 知识。

2. 创建 HTML 文件

首先，创建一个新的 HTML 文件，命名为 index.html。在这个文件中，我们将编写基本的 HTML 结构和引入 OpenLayers 库。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>OpenLayers 基础地图实例</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.3.0/ol.css"><style>#map {width: 100%;height: 100vh;}</style>
</head>
<body><div id="map"></div><script src="https://cdn.jsdelivr.net/npm/ol@v7.3.0/dist/ol.js"></script><script src="main.js"></script>
</body>
</html>

在这个 HTML 文件中，我们做了以下几件事：

  1. 引入了 OpenLayers 的 CSS 文件，用于地图的样式。
  2. 创建了一个 div 元素，用于承载地图，并设置了其样式为全屏显示。
  3. 引入了 OpenLayers 的 JavaScript 文件。
  4. 引入了一个 main.js 文件，我们将在其中编写地图的初始化代码。

3. 编写 JavaScript 代码

接下来，创建一个名为 main.js 的文件，并在其中编写 JavaScript 代码来初始化地图。

// 创建一个地图视图，设置中心点和缩放级别
const view = new ol.View({center: ol.proj.fromLonLat([116.3975, 39.9087]), // 北京市中心坐标zoom: 10 // 初始缩放级别
});// 创建一个地图实例
const map = new ol.Map({target: 'map', // 地图容器的IDlayers: [new ol.layer.Tile({source: new ol.source.OSM() // 使用OpenStreetMap作为地图源})],view: view // 设置地图视图
});

在这段代码中，我们做了以下几件事：

  1. 创建了一个 ol.View 对象，用于设置地图的初始视图。我们使用 ol.proj.fromLonLat 方法将经纬度坐标转换为 OpenLayers 使用的坐标系统。
  2. 创建了一个 ol.Map 对象，用于初始化地图。我们指定了地图的容器（target），并添加了一个 ol.layer.Tile 图层，使用 OpenStreetMap 作为地图源。
  3. 将 view 对象传递给 ol.Map，以设置地图的初始视图。

4. 运行地图

现在，你已经完成了所有的代码编写。打开 index.html 文件，你应该能够在浏览器中看到一个以北京市为中心的基础地图。

5. 进一步探索

OpenLayers 提供了丰富的功能和 API，你可以进一步探索以下内容：

  • 添加多个图层（如卫星图、地形图等）。
  • 添加标记（Marker）和弹出窗口（Popup）。
  • 处理用户交互（如点击、拖动等）。
  • 使用不同的地图源（如 Google Maps、Bing Maps 等）。

6. 总结

通过本文，你已经学会了如何使用 OpenLayers 创建一个基础地图实例。OpenLayers 是一个功能强大且灵活的地图库，适用于各种 Web 地图应用场景。希望本文能帮助你快速上手 OpenLayers，并为你的项目提供帮助。

如果你有任何问题或需要进一步的帮助，请参考 OpenLayers 官方文档 或在社区中寻求帮助。祝你编程愉快！

相关文章：

OpenLayer创建第一个基础地图实例

OpenLayers创建第一个基础地图实例 OpenLayers 是一个开源的 JavaScript 库&#xff0c;用于在网页上显示交互式地图。它支持多种地图源&#xff0c;包括 OpenStreetMap、Google Maps、Bing Maps 等。本文将介绍如何使用 OpenLayers 创建一个基础地图实例。 1. 准备工作 在开…...

编程日记 2025/2/16 0:32:22

Git命令摘录

使用 Git 升级软件通常是指通过 Git 仓库获取软件的最新版本或更新代码。以下是详细的步骤和方法&#xff1a; 1. 克隆软件仓库 如果这是你第一次获取软件代码&#xff0c;可以使用 git clone 命令将远程仓库克隆到本地。 git clone <仓库地址> 例如&#xff1a; git cl…...

编程日记 2025/2/16 0:27:12

windows 通过docker 安装mysql

参考&#xff1a;Docker安装并使用Mysql&#xff08;可用详细&#xff09;_docker 安装mysql-CSDN博客 1. 拉取镜像&#xff1a;docker pull mysql:5.7 2. 查看镜像&#xff1a;docker image 3. 创建mysql 容器实例&#xff0c;并将data 目录挂载到本地d盘上 docker run --n…...

编程日记 2025/2/16 0:24:07

实现Tree 树形控件的鼠标拖拽功能

1.element中的el-tree实现可拖拽节点 通过 draggable 属性可让节点变为可拖拽 <el-tree :data"data" node-key"id" default-expand-all node-drag-start"handleDragStart" node-drag-enter"handleDragEnter" node-drag-leave"…...

编程日记 2025/2/16 0:15:56

同为科技智能PDU助力Deepseek人工智能和数据交互的快速发展

1 2025开年&#xff0c;人工智能领域迎来了一场前所未有的变革。Deepseek成为代表“东方力量”的开年王炸&#xff0c;不仅在国内掀起了技术热潮&#xff0c;并且在全球范围内引起了高度关注。Deepseek以颠覆性技术突破和现象级应用场景席卷全球&#xff0c;这不仅重塑了产业格…...

编程日记 2025/2/16 0:12:49

硬件学习笔记--42 电磁兼容试验-6 传导差模电流干扰试验介绍

目录 电磁兼容试验-传导差模电流试验 1.试验目的 2.试验方法 3.判定依据及意义 电磁兼容试验-传导差模电流干扰试验 驻留时间是在规定频率下影响量施加的持续时间。被试设备&#xff08;EUT&#xff09;在经受扫频频带的电磁影响量或电磁干扰的情况下&#xff0c;在每个步进…...

编程日记 2025/2/16 0:08:45

基于 Filebeat 的日志收集

在现代分布式系统中&#xff0c;日志数据作为关键的监控与故障排查依据&#xff0c;越来越受到重视。本文将深入探讨 Filebeat 的技术原理、配置方法及在 ELK&#xff08;Elasticsearch、Logstash、Kibana&#xff09;生态系统中的应用&#xff0c;帮助开发者构建高效、稳定的日…...

编程日记 2025/2/16 0:06:41

Next.js 15【实用教程】2025最新版

官网 https://nextjs.org/docs/app/getting-started Next.js 简介 Next.js 由 Vercel 开发和维护&#xff0c;旨在解决单页应用&#xff08;SPA&#xff09;和多页应用&#xff08;MPA&#xff09;在性能和 SEO 上的不足。 核心特性 服务端渲染&#xff08;SSR&#xff09;--…...

编程日记 2025/2/16 0:02:37

vue学习10

1.GPT和Copilot Copilot Tab接受 删除键&#xff0c;不接受 ctrlenter更多方案 更适合的是修改方向 const submitForm async () > {//等待校验结果await formRef.value.validate()//提交修改await userUpdateInfoService(form.value)//通知user模块&#xff0c;进行数据更…...

编程日记 2025/2/16 0:01:32

redis 缓存击穿问题与解决方案

前言1. 什么是缓存击穿?2. 如何解决缓存击穿?怎么做?方案1: 定时刷新方案2: 自动续期方案3: 定时续期 如何选? 前言 当我们使用redis做缓存的时候,查询流程一般是先查询redis,如果redis未命中,再查询MySQL,将MySQL查询的数据同步到redis(回源),最后返回数据 流程图 为什…...

编程日记 2025/2/15 23:58:26

【Vue3 入门到实战】16. Vue3 非兼容性改变

目录 1. 全局 API 的变化 2. 模板指令的变化 2.1 组件v-model用法 2.2 template v-for用法 2.3 v-if 和v-for 优先级变化 2.4 v-bind"object" 顺序敏感 2.5 v-on:event.native 被移除 3. 组件的变化 3.1 功能组件只能使用普通函数创建 3.2 SFC弃用功能属性…...

编程日记 2025/2/15 23:56:24

20250214 随笔 Elasticsearch（ES）索引数据 vs. 业务数据库冗余双写

Elasticsearch&#xff08;ES&#xff09;索引数据 vs. 业务数据库冗余双写的区别、优缺点分析 在高并发数据查询场景下&#xff0c;Elasticsearch&#xff08;ES&#xff09; 和 业务数据库冗余双写 都是常见的数据同步方案。它们主要区别在于数据存储方式、查询性能、数据一…...

编程日记 2025/2/15 23:51:18

c# textbox 设置不获取光标

[DllImport("user32",EntryPoint "HideCaret")] private static extern bool HideCaret(IntPtr hWnd); //需引入命名空间using System.Runtime.InteropServices; private void Txt_RecInfo_MouseDown(object sender, MouseEventArgs e) { …...

编程日记 2025/2/15 23:49:09

中望CAD c#二次开发 ——VS环境配置

新建类库项目&#xff1a;下一步 下一步 下一步&#xff1a; 或直接&#xff1a; 改为&#xff1a; <Project Sdk"Microsoft.NET.Sdk"> <PropertyGroup> <TargetFramework>NET48</TargetFramework> <LangVersion>pr…...

编程日记 2025/2/15 23:48:07

anolis os 8.9安装jenkins

一、系统版本 # cat /etc/anolis-release Anolis OS release 8.9 二、安装 # dnf install -y epel-release # wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat-stable/jenkins.repo # rpm --import https://pkg.jenkins.io/redhat-stable/jenkins.…...

编程日记 2025/2/15 23:39:42

HtmlRAG：RAG系统中，HTML比纯文本效果更好

HtmlRAG 方法通过使用 HTML 而不是纯文本来增强 RAG 系统中的知识表示能力。通过 HTML 清洗和两步块树修剪方法&#xff0c;在保持关键信息的同时缩短了 HTML 文档的长度。这种方法优于现有基于纯文本的RAG的性能。 方法 其实主要看下围绕html提纯思路&#xff0c;将提纯后的…...

编程日记 2025/2/15 23:38:39

TypeScript 中的 reduce计算统计之和

1、计算字符串数组中最大的一项&#xff0c;比如数组&#xff1a;list ["家长会,柘城,喝士大夫","模压,手动阀,阿斯蒂"]&#xff0c;求出list中字符串长度之和最大的那项&#xff1a; // 初始化变量来存储字数之和最多的项及其字数之和let maxWord ;let…...

编程日记 2025/2/15 23:32:27

HTTP/2 由来及特性

HTTP/2 的由来 HTTP/1.x 的局限性 性能瓶颈 队头阻塞问题&#xff1a;在HTTP/1.x中&#xff0c;一个TCP连接在同一时间只能处理一个请求&#xff0c;后续请求必须等待前面的请求处理完成并收到响应后才能被处理。例如&#xff0c;当一个页面有多个资源&#xff08;如图片、脚…...

编程日记 2025/2/15 23:30:19

android 安装第三方apk自动赋予运行时权限

摘要&#xff1a;行业机使用场景点击运行时权限很麻烦&#xff0c;而随着android的演进&#xff0c;对于权限的管控越发严格。故本文通过对系统的修改实现第三方app在运行时直接获取全部权限。 通过属性ro.perms.force_grant控制功能开关。 Index: frameworks/base/services/…...

编程日记 2025/2/15 23:28:16

PyTorch Lightning LightningDataModule 介绍

LightningDataModule 是 PyTorch Lightning 提供的数据模块，用于统一管理数据加载流程（包括数据准备、预处理、拆分、批量加载等）。它的核心作用是将数据处理逻辑与模型解耦，提高代码的可复用性和可读性。 1. LightningDataModule 的作用 ✅ 封装数据预处理：数据下载、清…...

编程日记 2025/2/15 23:20:57

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

编程新知 2026/2/8 20:42:41

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（二）

HoST框架核心实现方法详解 - 论文深度解读（第二部分） 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章： 论文深度解读 + 算法与代码分析（二） 作者机构： 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题： 人形机器人…...

编程新知 2026/2/9 0:12:12

8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

编程新知 2026/1/25 13:18:12

ESP32 I2S音频总线学习笔记（四）： INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

编程新知 2026/2/9 20:01:01

Spring AI 入门：Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...

编程新知 2025/12/25 18:03:56

Java 二维码

Java 二维码 **技术&#xff1a;**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...

编程新知 2025/9/6 16:22:45

GitFlow 工作模式（详解）

今天再学项目的过程中遇到使用gitflow模式管理代码&#xff0c;因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式 我们在写代码的时候通常会进行网上保存&#xff0c;无论是github还是gittee&#xff0c;都是一种基于git去保存代码的形式&#xff0c;这样保存代码…...

编程新知 2026/1/26 12:37:40

push [特殊字符] present

push &#x1f19a; present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中&#xff0c;push 和 present 是两种不同的视图控制器切换方式&#xff0c;它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...

编程新知 2026/1/31 4:26:17

RabbitMQ入门4.1.0版本（基于java、SpringBoot操作）

RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发&#xff0c;后来由Pivotal Software Inc.&#xff08;现为VMware子公司&#xff09;接管。RabbitMQ 是一个开源的消息代理和队列服务器&#xff0c;用 Erlang 语言编写。广泛应用于各种分布…...

编程新知 2026/1/31 3:52:49

Unity UGUI Button事件流程

场景结构 测试代码 public class TestBtn : MonoBehaviour {void Start(){var btn GetComponent<Button>();btn.onClick.AddListener(OnClick);}private void OnClick(){Debug.Log("666");}}当添加事件时 // 实例化一个ButtonClickedEvent的事件 [Formerl…...

编程新知 2026/2/9 18:50:34