openlayers+vite+vue3加载离线地图并实现初始化(一)

前景提示:本文主要讲解使用vite工具构建的项目,利用openlayers实现离线地图的主要一些功能,包括初始化地图、打点、画线、弹窗等等,这些后续有时间会持续为大家更新,本文主要阐述如何实现其首要功能离线地图的初始化。

目录

一、环境搭建

1.使用vite创建一个vue项目

2.安装ol

二、开始编码、初始化地图

1.创建地图容器

2.引入ol

3.创建渲染地图的方法

3.初始化地图

4.在 onMounted 后渲染地图

三、全部代码

四、效果展示


一、环境搭建

1.使用vite创建一个vue项目

npm init vite@latest

输入以上命令后会有相应的提示,首先是输入项目名,后面是选择要使用的框架,这里选择 vue 即可。

Select a framework:vanillavuereactpreactlit-elementsvelte

然后进入项目,使用命令初始化项目

cd 你的项目名(我创建的是map-openlayers)
npm install

2.安装ol

待上述步骤实现完成后,需要安装ol

npm i ol 

然后启动项目

npm run dev

二、开始编码、初始化地图

1.创建地图容器

在项目中新建一个vue文件,然后创建地图容器,这一步关键的一点是地图容器需要一个id,另外一定要在css中设置地图的宽高,如果不设置将会出现地图不显示的现象。

<template><div id="container" class="map"></div>
</template>
<style lang="less" scoped>
#container {width: 100%;height: 100%;position: absolute;
}
</style>

2.引入ol

在<script>中引入以下方法,这个根据需要引入即可

import { onMounted, reactive, ref } from 'vue'
import 'ol/ol.css' // 地图样式
import TileLayer from 'ol/layer/Tile' // 瓦片渲染方法
import XYZ from 'ol/source/XYZ'
import { Map, View } from 'ol' // 地图实例方法、视图方法
import { fromLonLat } from 'ol/proj'

3.创建渲染地图的方法

let map = ref(null)//地图图层参数
const mapView = reactive({center: fromLonLat([120.299, 31.568]), // 地图中心点,这里我选用以无锡为例zoom: 10, // 初始缩放级别minZoom: 10, // 最小缩放级别maxZoom: 15 // 最大缩放级别
})
const mapUrl = ref('')//这里填写离线地图的瓦片地址,我这里就暂不展示了

3.初始化地图

// 初始化地图
const init = () => {// 使用瓦片渲染方法const tileLayer = new TileLayer({source: new XYZ({url: mapUrl.value})})map.value = new Map({layers: [tileLayer],view: new View(mapView),target: 'container'})
}

4.在 onMounted 后渲染地图

onMounted(() => {init()
})

三、全部代码

因为分阶段书写想让开始学习这个的小伙伴也能一步步了解,下面附上全部代码

<template><div id="container" class="map"></div>
</template>
<script setup>
import { onMounted, reactive, ref } from 'vue'
import 'ol/ol.css' // 地图样式
import TileLayer from 'ol/layer/Tile' // 瓦片渲染方法
import XYZ from 'ol/source/XYZ'
import { Map, View } from 'ol' // 地图实例方法、视图方法
import { fromLonLat } from 'ol/proj'
let map = ref(null)//地图图层参数
const mapView = reactive({center: fromLonLat([120.299, 31.568]), // 地图中心点zoom: 10, // 初始缩放级别minZoom: 10, // 最小缩放级别maxZoom: 15 // 最大缩放级别
})
const mapUrl = ref('')//这里是离线地图的瓦片地址
// 初始化地图
const init = () => {// 使用瓦片渲染方法const tileLayer = new TileLayer({source: new XYZ({url: mapUrl.value})})map.value = new Map({layers: [tileLayer],view: new View(mapView),target: 'container'})addGeoJson()
}onMounted(() => {init()
})
</script>
<style lang="less" scoped>
#container {width: 100%;height: 100%;position: absolute;
}
</style>

四、效果展示

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【python报错已解决】`Set PROTOCOL_BUFFERS_PYTHON_IMPLEMENTATION=python`

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 引言&#xff1a; 在开发过程中&#xff0c;环境配置常常会引发一些难以预料的报错。如何快速定位并解决这些问题&#xff0c;成…

借题《黑神话悟空》,聊聊UE5 游戏开发中基本的 C++ 概念

最近火的一塌糊涂的《黑神话悟空》就是用UE5引擎开发的。借题发挥&#xff0c;今天讲讲UE游戏开中的一些C基本概念&#xff1b; 编写代码与蓝图&#xff08;可视化脚本&#xff09;相结合具有独特的功能&#xff0c;您需要利用这些功能来实现两全其美。编程可以帮助创建更复杂…

在树莓派5上使用pytroch进行模型训练—全流程笔记

在树莓派上运行pytroch模型&#x1f680; 在完成了树莓派的一系列基础配置学习之后&#xff0c;按照规划&#xff0c;下一步要做的就是在树莓派上安装一个pytorch&#xff0c;尝试运行一下深度学习的模型&#xff0c;如果可以实现且准速度有一定保证的话&#xff0c;就可以作为…

linux(Ubuntu )搭C++ 最新版GDAL完整教程

在前面的文章中主要是介绍如何在windows系统下利用python安装gdal库&#xff0c;如下&#xff1a; 如何快速安装GDAL 在linux环境下python安装gdal也可以利用现成的whl文件&#xff0c;但是安装c GDAL环境的比较麻烦&#xff0c;目前网络上大多是安装的老版本的教程&#xff…

uniapp在线视频监控开发

我这里是uniapp开发的H5项目 视频流是flv模式 用到的插件是flv.js Flv.js Flv.js 是 HTML5 Flash 视频&#xff08;FLV&#xff09;播放器&#xff0c;纯原生 JavaScript 开发&#xff0c;没有用到 Flash。。由 bilibili 网站开源。 常见直播协议 RTMP: 底层基于TCP&…

安泰ATA-7015高压放大器在机器人测试中的应用研究

随着机器人技术的快速发展&#xff0c;机器人在各个领域的应用日益广泛。然而&#xff0c;要确保机器人能够稳定、准确地完成各种任务&#xff0c;就需要对其进行严格的测试和评估。在机器人测试过程中&#xff0c;高压放大器作为一种关键的测试设备&#xff0c;发挥着不可替代…

基于YOLOv8的无人机高空红外(HIT-UAV)检测算法,魔改SimAM注意力助力涨点(一)

&#x1f4a1;&#x1f4a1;&#x1f4a1;本文内容&#xff1a;针对基于YOLOv8的无人机高空红外&#xff08;HIT-UAV&#xff09;检测算法进行性能提升&#xff0c;加入各个创新点做验证性试验。 1&#xff09;魔改SimAM注意力&#xff0c;引入切片操作&#xff1a;mAP从原始的…

python-随机序列(赛氪OJ)

[题目描述] 小理的作业太多了&#xff0c;怎么也做不完。 小理的数学作业由 T 张试卷组成&#xff0c;每张试卷上有 n 个数 a1..n​ &#xff0c;小理需要算出这些数的极差和方差。极差是一个整数&#xff0c;方差是一个浮点数&#xff0c;要求保留到小数点后 3 位。虽然题目很…

第100+22步 ChatGPT学习:概率校准 Platt Scaling

基于Python 3.9版本演示 一、写在前面 最近看了一篇在Lancet子刊《eClinicalMedicine》上发表的机器学习分类的文章&#xff1a;《Development of a novel dementia risk prediction model in the general population: A large, longitudinal, population-based machine-learn…

Unet改进3:在不同位置添加NAMAttention注意力机制

本文内容:在不同位置添加NAMAttention注意力机制 目录 论文简介 1.步骤一 2.步骤二 3.步骤三 4.步骤四 论文简介 识别不太显著的特征是模型压缩的关键。然而,它在革命性的注意机制中尚未得到研究。在这项工作中,我们提出了一种新的基于归一化的注意力模块(NAM),它抑制…

2024/8/25 Nacos本机配置

目录 一、nacos下载 二、修改配置文件 2.1、配置数据库 2.2、配置鉴定密钥 2.3、配置启动脚本 三、nacos启动 3.1、启动运行脚本 3.2、新增配置 3.3、服务列表 记录一下本机nacos2.2.3配置全过程 一、nacos下载 下载地址&#xff1a;https://github.com/alibaba/nacos/r…

【通俗易懂】分库分表时分表字段应该如何选择?

目录 一、按买家ID分还是卖家ID分&#xff1f; 二、卖家查询怎么办&#xff1f; 三、订单查询怎么办&#xff1f; 在分库分表的过程中&#xff0c;我们需要有一个字段用来进行分表&#xff0c;比如按照用户分表、按照时间分表、按照地区分表。这里面的用户、时间、地区就是所…

MYSQL————数据库的约束

1.约束类型 1.not null&#xff1a;指示某列不能存储null值 2.unique&#xff1a;保证某列的每行必须有唯一值 3.default&#xff1a;规定没有给列赋值时的默认值 4.primary key&#xff1a;not null和unique的结合。确保某列&#xff08;或两个或多个列的结合&#xff09;有唯…

游戏开发设计模式之命令模式

目录 命令模式的定义和工作原理 应用场景 实现方式 优点 缺点 结论 命令模式在游戏开发中的具体实现案例是什么&#xff1f; 如何在Unity3D中有效地实现和管理命令模式以提高游戏性能&#xff1f; 命令模式与其他设计模式&#xff08;如观察者模式、状态模式&#xff…

2024前端面试题-js篇

1.js有哪些数据类型 基础数据类型&#xff1a;string,number,boolean&#xff0c;null&#xff0c;undefined&#xff0c;bigInt&#xff0c;symbol 引用数据类型&#xff1a;Object 2.js检测数据类型的方式 typeof&#xff1a;其中数组、对象、null都会被判断为object&…

多动症的孩子有哪些症状表现?

在星启帆自闭症儿童康复机构&#xff0c;我们不仅关注自闭症儿童的成长与康复&#xff0c;也深刻认识到多动症对儿童日常生活、学习和社交的深远影响。多动症&#xff0c;全称注意缺陷多动障碍&#xff0c;是一种常见于儿童时期的神经发育性疾病&#xff0c;其症状表现多种多样…

Python酷库之旅-第三方库Pandas(097)

目录 一、用法精讲 416、pandas.DataFrame.memory_usage方法 416-1、语法 416-2、参数 416-3、功能 416-4、返回值 416-5、说明 416-6、用法 416-6-1、数据准备 416-6-2、代码示例 416-6-3、结果输出 417、pandas.DataFrame.empty属性 417-1、语法 417-2、参数 …

FTP协议-匿名用户登录 从0到1

前言 日常大家可能接触web漏洞比较多而对其他端口及协议不那么了解&#xff0c;其实其他协议漏洞在渗透中也同样重要只是平时可能接触得不多。本文将介绍FTP协议、FTP匿名用户登录及其具体流程分析和自动化利用demo。 FTP简介 FTP是File Transfer Protocol&#xff08;文件传…

google浏览器chrome用户数据(拓展程序,书签等)丢失问题

一、问题背景 我出现这个情况的问题背景是&#xff1a;因为C盘块满了想清理一部分空间&#xff08;具体看这&#xff1a;windows -- C盘清理_c盘softwaredistribution-CSDN博客&#xff09;&#xff0c;于是找到了更改AppDatta这个方法&#xff0c;但因为&#xff0c;当时做迁移…

opencv-python图像增强十五:高级滤镜实现

文章目录 前言二、鲜食滤镜三、巧克力滤镜三&#xff0c;冷艳滤镜&#xff1a; 前言 在之前两个滤镜文章中介绍了六种简单的滤镜实现&#xff0c;它们大多都是由一个单独函数实现的接下来介绍五种结合了之前图像增强文章提的的算法的复合滤镜。本案例中的算法来自于文章一&…