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

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

news 2025/10/4 23:52:38

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

后进先出（LIFO）详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

编程新知 2025/10/4 22:38:36

智慧工地云平台源码，基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

编程新知 2025/9/29 10:06:14

从深圳崛起的“机器之眼”：赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

编程新知 2025/10/1 17:33:23

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

编程新知 2025/9/28 4:29:03

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

编程新知 2025/8/12 22:58:13

HTML前端开发：JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

编程新知 2025/7/8 23:32:56

让AI看见世界：MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

编程新知 2025/9/28 3:31:57

SpringTask-03.入门案例

一.入门案例 启动类&#xff1a; package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

编程新知 2025/9/30 15:22:41

2025季度云服务器排行榜

在全球云服务器市场&#xff0c;各厂商的排名和地位并非一成不变&#xff0c;而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势&#xff0c;对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析&#xff1a; 一、全球“三巨头”…...

编程新知 2025/9/28 3:34:15

中医有效性探讨

文章目录 西医是如何发展到以生物化学为药理基础的现代医学&#xff1f;传统医学奠基期&#xff08;远古 - 17 世纪&#xff09;近代医学转型期&#xff08;17 世纪 - 19 世纪末&#xff09;​现代医学成熟期&#xff08;20世纪至今&#xff09; 中医的源远流长和一脉相承远古至…...

编程新知 2025/9/28 5:15:34