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

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

news 2026/2/10 5:30:47

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

屋顶变身“发电站” ，中天合创屋面分布式光伏发电项目顺利并网！

5月28日&#xff0c;中天合创屋面分布式光伏发电项目顺利并网发电&#xff0c;该项目位于内蒙古自治区鄂尔多斯市乌审旗&#xff0c;项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站&#xff0c;总装机容量为9.96MWp。 项目投运后&#xff0c;每年可节约标煤3670…...

编程新知 2026/2/9 17:55:49

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

编程新知 2026/2/6 7:30:33

RNN避坑指南：从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...

编程新知 2026/1/20 17:16:46

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

编程新知 2026/1/27 4:58:14

C# 求圆面积的程序（Program to find area of a circle）

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

编程新知 2026/2/8 9:34:11

九天毕昇深度学习平台 | 如何安装库？

pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子&#xff1a; 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...

编程新知 2026/1/31 2:13:57

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...

编程新知 2026/2/4 10:54:26

从“安全密码”到测试体系：Gitee Test 赋能关键领域软件质量保障

关键领域软件测试的"安全密码"&#xff1a;Gitee Test如何破解行业痛点 在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的"神经中枢"。从国防军工到能源电力&#xff0c;从金融交易到交通管控&#xff0c;这些关乎国计民生的关键领域…...

编程新知 2026/2/2 20:26:17

学习一下用鸿蒙​​DevEco Studio HarmonyOS5实现百度地图

在鸿蒙&#xff08;HarmonyOS5&#xff09;中集成百度地图&#xff0c;可以通过以下步骤和技术方案实现。结合鸿蒙的分布式能力和百度地图的API&#xff0c;可以构建跨设备的定位、导航和地图展示功能。 ​​1. 鸿蒙环境准备​​ ​​开发工具​​&#xff1a;下载安装 ​​De…...

编程新知 2025/11/13 2:37:01

ubuntu系统文件误删(/lib/x86_64-linux-gnu/libc.so.6)修复方案 [成功解决]

报错信息&#xff1a;libc.so.6: cannot open shared object file: No such file or directory&#xff1a; #ls, ln, sudo...命令都不能用 error while loading shared libraries: libc.so.6: cannot open shared object file: No such file or directory重启后报错信息&…...

编程新知 2026/2/5 14:35:21