OpenLayer创建第一个基础地图实例
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 文件中,我们做了以下几件事:
- 引入了 OpenLayers 的 CSS 文件,用于地图的样式。
- 创建了一个
div元素,用于承载地图,并设置了其样式为全屏显示。 - 引入了 OpenLayers 的 JavaScript 文件。
- 引入了一个
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 // 设置地图视图
});
在这段代码中,我们做了以下几件事:
- 创建了一个
ol.View对象,用于设置地图的初始视图。我们使用ol.proj.fromLonLat方法将经纬度坐标转换为 OpenLayers 使用的坐标系统。 - 创建了一个
ol.Map对象,用于初始化地图。我们指定了地图的容器(target),并添加了一个ol.layer.Tile图层,使用 OpenStreetMap 作为地图源。 - 将
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 库,用于在网页上显示交互式地图。它支持多种地图源,包括 OpenStreetMap、Google Maps、Bing Maps 等。本文将介绍如何使用 OpenLayers 创建一个基础地图实例。 1. 准备工作 在开…...
Git命令摘录
使用 Git 升级软件通常是指通过 Git 仓库获取软件的最新版本或更新代码。以下是详细的步骤和方法: 1. 克隆软件仓库 如果这是你第一次获取软件代码,可以使用 git clone 命令将远程仓库克隆到本地。 git clone <仓库地址> 例如: git cl…...
windows 通过docker 安装mysql
参考:Docker安装并使用Mysql(可用详细)_docker 安装mysql-CSDN博客 1. 拉取镜像:docker pull mysql:5.7 2. 查看镜像:docker image 3. 创建mysql 容器实例,并将data 目录挂载到本地d盘上 docker run --n…...
实现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"…...
同为科技智能PDU助力Deepseek人工智能和数据交互的快速发展
1 2025开年,人工智能领域迎来了一场前所未有的变革。Deepseek成为代表“东方力量”的开年王炸,不仅在国内掀起了技术热潮,并且在全球范围内引起了高度关注。Deepseek以颠覆性技术突破和现象级应用场景席卷全球,这不仅重塑了产业格…...
硬件学习笔记--42 电磁兼容试验-6 传导差模电流干扰试验介绍
目录 电磁兼容试验-传导差模电流试验 1.试验目的 2.试验方法 3.判定依据及意义 电磁兼容试验-传导差模电流干扰试验 驻留时间是在规定频率下影响量施加的持续时间。被试设备(EUT)在经受扫频频带的电磁影响量或电磁干扰的情况下,在每个步进…...
基于 Filebeat 的日志收集
在现代分布式系统中,日志数据作为关键的监控与故障排查依据,越来越受到重视。本文将深入探讨 Filebeat 的技术原理、配置方法及在 ELK(Elasticsearch、Logstash、Kibana)生态系统中的应用,帮助开发者构建高效、稳定的日…...
Next.js 15【实用教程】2025最新版
官网 https://nextjs.org/docs/app/getting-started Next.js 简介 Next.js 由 Vercel 开发和维护,旨在解决单页应用(SPA)和多页应用(MPA)在性能和 SEO 上的不足。 核心特性 服务端渲染(SSR)--…...
vue学习10
1.GPT和Copilot Copilot Tab接受 删除键,不接受 ctrlenter更多方案 更适合的是修改方向 const submitForm async () > {//等待校验结果await formRef.value.validate()//提交修改await userUpdateInfoService(form.value)//通知user模块,进行数据更…...
redis 缓存击穿问题与解决方案
前言1. 什么是缓存击穿?2. 如何解决缓存击穿?怎么做?方案1: 定时刷新方案2: 自动续期方案3: 定时续期 如何选? 前言 当我们使用redis做缓存的时候,查询流程一般是先查询redis,如果redis未命中,再查询MySQL,将MySQL查询的数据同步到redis(回源),最后返回数据 流程图 为什…...
【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弃用功能属性…...
20250214 随笔 Elasticsearch(ES)索引数据 vs. 业务数据库冗余双写
Elasticsearch(ES)索引数据 vs. 业务数据库冗余双写的区别、优缺点分析 在高并发数据查询场景下,Elasticsearch(ES) 和 业务数据库冗余双写 都是常见的数据同步方案。它们主要区别在于数据存储方式、查询性能、数据一…...
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) { …...
中望CAD c#二次开发 ——VS环境配置
新建类库项目:下一步 下一步 下一步: 或直接: 改为: <Project Sdk"Microsoft.NET.Sdk"> <PropertyGroup> <TargetFramework>NET48</TargetFramework> <LangVersion>pr…...
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.…...
HtmlRAG:RAG系统中,HTML比纯文本效果更好
HtmlRAG 方法通过使用 HTML 而不是纯文本来增强 RAG 系统中的知识表示能力。通过 HTML 清洗和两步块树修剪方法,在保持关键信息的同时缩短了 HTML 文档的长度。这种方法优于现有基于纯文本的RAG的性能。 方法 其实主要看下围绕html提纯思路,将提纯后的…...
TypeScript 中的 reduce计算统计之和
1、计算字符串数组中最大的一项,比如数组:list ["家长会,柘城,喝士大夫","模压,手动阀,阿斯蒂"],求出list中字符串长度之和最大的那项: // 初始化变量来存储字数之和最多的项及其字数之和let maxWord ;let…...
HTTP/2 由来及特性
HTTP/2 的由来 HTTP/1.x 的局限性 性能瓶颈 队头阻塞问题:在HTTP/1.x中,一个TCP连接在同一时间只能处理一个请求,后续请求必须等待前面的请求处理完成并收到响应后才能被处理。例如,当一个页面有多个资源(如图片、脚…...
android 安装第三方apk自动赋予运行时权限
摘要:行业机使用场景点击运行时权限很麻烦,而随着android的演进,对于权限的管控越发严格。故本文通过对系统的修改实现第三方app在运行时直接获取全部权限。 通过属性ro.perms.force_grant控制功能开关。 Index: frameworks/base/services/…...
PyTorch Lightning LightningDataModule 介绍
LightningDataModule 是 PyTorch Lightning 提供的数据模块,用于统一管理数据加载流程(包括数据准备、预处理、拆分、批量加载等)。它的核心作用是将数据处理逻辑与模型解耦,提高代码的可复用性和可读性。 1. LightningDataModule 的作用 ✅ 封装数据预处理:数据下载、清…...
屋顶变身“发电站” ,中天合创屋面分布式光伏发电项目顺利并网!
5月28日,中天合创屋面分布式光伏发电项目顺利并网发电,该项目位于内蒙古自治区鄂尔多斯市乌审旗,项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站,总装机容量为9.96MWp。 项目投运后,每年可节约标煤3670…...
现代密码学 | 椭圆曲线密码学—附py代码
Elliptic Curve Cryptography 椭圆曲线密码学(ECC)是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础,例如椭圆曲线数字签…...
RNN避坑指南:从数学推导到LSTM/GRU工业级部署实战流程
本文较长,建议点赞收藏,以免遗失。更多AI大模型应用开发学习视频及资料,尽在聚客AI学院。 本文全面剖析RNN核心原理,深入讲解梯度消失/爆炸问题,并通过LSTM/GRU结构实现解决方案,提供时间序列预测和文本生成…...
GC1808高性能24位立体声音频ADC芯片解析
1. 芯片概述 GC1808是一款24位立体声音频模数转换器(ADC),支持8kHz~96kHz采样率,集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器,适用于高保真音频采集场景。 2. 核心特性 高精度:24位分辨率,…...
C# 求圆面积的程序(Program to find area of a circle)
给定半径r,求圆的面积。圆的面积应精确到小数点后5位。 例子: 输入:r 5 输出:78.53982 解释:由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982,因为我们只保留小数点后 5 位数字。 输…...
九天毕昇深度学习平台 | 如何安装库?
pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子: 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...
蓝桥杯 冶炼金属
原题目链接 🔧 冶炼金属转换率推测题解 📜 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V,是一个正整数,表示每 V V V 个普通金属 O O O 可以冶炼出 …...
从“安全密码”到测试体系:Gitee Test 赋能关键领域软件质量保障
关键领域软件测试的"安全密码":Gitee Test如何破解行业痛点 在数字化浪潮席卷全球的今天,软件系统已成为国家关键领域的"神经中枢"。从国防军工到能源电力,从金融交易到交通管控,这些关乎国计民生的关键领域…...
学习一下用鸿蒙DevEco Studio HarmonyOS5实现百度地图
在鸿蒙(HarmonyOS5)中集成百度地图,可以通过以下步骤和技术方案实现。结合鸿蒙的分布式能力和百度地图的API,可以构建跨设备的定位、导航和地图展示功能。 1. 鸿蒙环境准备 开发工具:下载安装 De…...
ubuntu系统文件误删(/lib/x86_64-linux-gnu/libc.so.6)修复方案 [成功解决]
报错信息:libc.so.6: cannot open shared object file: No such file or directory: #ls, ln, sudo...命令都不能用 error while loading shared libraries: libc.so.6: cannot open shared object file: No such file or directory重启后报错信息&…...
