vue3对openlayers使用(加高德,天地图图层)

OpenLayers认识

WebGIS四大框架:== Leaflet、OpenLayers、Mapbox、Cesium ==

OpenLayers 是一个强大的开源 JavaScript 地图库,专注于提供可嵌入网页的交互式地图体验。作为一款地理信息系统(GIS)的前端开发工具,OpenLayers 提供了灵活的 API,允许开发者构建各种地图应用,从简单的地图显示到复杂的地理信息分析。

1.下载ol 插件

npm i ol

2.初始化

 const map = new Map({  target: mapElement.value,  layers: tiandilayers,  view: view});  
  • 1.参数target
    制定初始化的地图设置到html页面上的哪一个DOM元素上。

  • 2.参数layers
    一个map可以设置多个layer,图层是构成openlayers的基本单位,地图是由多个layer组成的。

  • 3.参数view
    视图是设置地图的显示范围,包括中心点,放大级别,坐标。

EPSG:4326 是一个GIS(地理信息系统) 中使用的坐标参考系代码,它表示一个地理坐标系,即使用经纬度表示地理位置。
EPSG:4326 常被用于在网络上传输地理位置信息,如在Web地图服务和地理位置Api等。
EPSG:4326 的经纬度范围:经度范围在-180°到180°之间,维度范围在-90°到90°之间。

区别:
EPSG:4326 表示一个地理坐标系,使用经纬度来表示地理位置,通常用于地理位置的显示和制图。
EPSG:3857表示一个Web墨卡托坐标系,使用平面墨卡托投影来表示地理位置。

3.结合高德地图

 <template>  <div id="map" ref="mapElement"></div>  </template> <script setup>  import Map from 'ol/Map';  import View from 'ol/View';  import TileLayer from 'ol/layer/Tile';  import XYZ from 'ol/source/XYZ';  import VectorLayer from 'ol/layer/Vector';  import VectorSource from 'ol/source/Vector';  import Feature from 'ol/Feature';  import Point from 'ol/geom/Point';import { fromLonLat } from 'ol/proj'; import { onMounted, ref } from 'vue';const mapElement=ref(null)const initMap=()=>{    // 创建高德地图的 XYZ 瓦片源  const amapSource = new XYZ({  url: 'http://webst0{1-4}.is.autonavi.com/appmaptile?style=7&x={x}&y={y}&z={z}&lang=zh_cn&scale=1&size=1',  // 高德地图的瓦片服务可能有不同的 URL 格式和参数,这里是一个示例  });  // 创建 OpenLayers 图层,使用上面创建的瓦片源  const amapLayer = new TileLayer({  source: amapSource,  });  // 创建 OpenLayers 地图实例  const map = new Map({  target: mapElement.value,  layers: [amapLayer],  view: new View({  center: fromLonLat([116.397428, 39.90923]), // 设置地图中心点坐标(例如:北京)  zoom: 8, // 设置初始缩放级别  // projection:"EPSG:4326"}), });  }onMounted(()=>{initMap()})</script>
<style scoped>  

4.结合天地图

//主要改变图层layers//图层数组 layers,天地图let tiandilayers= [new TileLayer({source: new XYZ({crossOrigin: 'anonymous',url: 'https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=你的key'})}),new TileLayer({source: new XYZ({crossOrigin: 'anonymous',url: 'https://t0.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=你的key'})})]const map = new Map({  target: mapElement.value,  layers: tiandilayers,  view: new View({  center: fromLonLat([116.397428, 39.90923]), // 设置地图中心点坐标(例如:北京)  zoom: 8, // 设置初始缩放级别  // projection:"EPSG:4326"}), });  //添加点图层const source = new VectorSource({  features: [new Feature(new Point(fromLonLat([116.485467, 39.907761])))], // 假设的点坐标(需转换为 OpenLayers 使用的坐标系统)  });  const vectorLayer = new VectorLayer({  source: source,  });  map.addLayer(vectorLayer); 

在这里插入图片描述

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

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

相关文章

关于php foreach函数和变量覆盖

foreach函数是PHP中用于遍历数组或对象的函数&#xff08;且仅用于数组的遍历&#xff09;。它允许循环遍历数组中的每个元素&#xff0c;并对每个元素执行相同的操作。foreach语句的基本语法如下&#xff1a; foreach ($array as $value) {//执行的操作 }在这个语法中&#x…

C++ Thread 源码 观后 自我感悟 整理

Thread的主要数据成员为_Thr 里面存储的是线程句柄和线程ID 先看看赋值运算符的移动构造 最开始判断线程的ID是否不为0 _STD就是使用std的域 如果线程ID不为0&#xff0c;那么就抛出异常 这里_New_val使用了完美转发&#xff0c;交换_Val和_New_val的值 _Thr _STD exchange(_…

回归预测 | Matlab基于SAO-LSTM雪消融算法优化长短期记忆神经网络的数据多输入单输出回归预测

回归预测 | Matlab基于SAO-LSTM雪消融算法优化长短期记忆神经网络的数据多输入单输出回归预测 目录 回归预测 | Matlab基于SAO-LSTM雪消融算法优化长短期记忆神经网络的数据多输入单输出回归预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab基于SAO-LSTM雪消融…

【Linux】进程的进一步认识

目录 进程的创建 fork函数初步认识 fork函数的返回值 写时拷贝 操作系统怎么知道什么时候要写时拷贝的呢&#xff1f; fork的常规用法 fork调用失败的原因 进程终止 进程的退出场景 进程常见退出方法 正常终止&#xff08;可以通过 echo $? 查看进程退出码&#xff…

Spring Boot从入门到实战

课程介绍 本课程从SpringBoot的最基础的安装、配置开始到SpringBoot的日志管理、Web业务开发、数据存储、数据缓存&#xff0c;安全控制及相关企业级应用&#xff0c;全程案例贯穿&#xff0c;案例每一步的都会讲解实现思路&#xff0c;全程手敲代码实现。让你不仅能够掌Sprin…

【Linux操作系统】:进程控制

目录 一、程序地址空间 1.C/C中的程序地址空间 2.进程地址空间 进程地址空间概念 什么是地址空间&#xff1f;什么是区域划分&#xff1f; 为啥要有地址空间&#xff1f; 地址空间的补充 二、进程创建 1.fork函数 2.写时拷贝 3.fork常规用法 4.fork调用失败的原因 …

Android冷启动优化

一、应用启动的三种状态 冷启动&#xff1a;系统不存在App进程&#xff08;APP首次启动或APP被完全杀死&#xff09;时启动APP&#xff0c;此时&#xff0c;APP的启动将经历两个阶段&#xff1a; 1、创建app进程&#xff1a;系统启动应用程序进程和虚拟机&#xff0c;创建app…

多线程(8)为什么需要Runnable接口

Runnable接口在Java中的多线程编程中起着关键作用&#xff0c;它提供了一种将执行代码与线程机制分离的方式。我们将通过分析Runnable接口的定义&#xff0c;以及如何与Thread类一起工作来详细解释它的必要性。 Runnable接口的定义&#xff1a; 在Java中&#xff0c;Runnable…

Linux 常用命令 1

Tips&#xff1a;终端热键ctrl shift 放大终端窗口的字体 ctrl - 缩小终端窗口的字体 注意区分大小写 查阅命令帮助信息&#xff1a; 1&#xff09;--help command –help(两个减号) 显示command命令的帮助信息 2&#xff09;man man command 查阅command命令的使…

MyEclipse打开文件跳转到notepad打开问题

问题描述 windows系统打开README.md文件&#xff0c;每次都需要右键选择notepad打开&#xff0c;感觉很麻烦&#xff0c;然后就把README.md文件打开方式默认选择了notepad&#xff0c;这样每次双击就能打开&#xff0c;感觉很方便。 然后某天使用MyEclipse时&#xff0c;双击RE…

分布式详解

文章目录 概述分布式开发优点和缺点分布式存在的作用分布式和集群的区别集群的特点集群脑裂BASE 理论BASE 理论的三要素CAP理论二段式满足cap理论的哪两个理论 分析下分布式强一致性、弱一致性、最终一致性衡量分布式系统的指标分布式下down机的处理⽅案分布式系统设计paxos和r…

matlab实现神经网络检测手写数字

一、要求 1.计算sigmoid函数的梯度&#xff1b; 2&#xff0e;随机初始化网络权重&#xff1b; 3.编写网络的代价函数。 二、算法介绍 神经网络结构&#xff1a; 不正则化的神经网络的代价函数&#xff1a; 正则化&#xff1a; S型函数求导&#xff1a; 反向传播算法&…

【Linux】Linux工具学习之git

&#x1f525;博客主页&#xff1a; 小羊失眠啦. &#x1f3a5;系列专栏&#xff1a;《C语言》 《数据结构》 《C》 《Linux》 《Cpolar》 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 文章目录 前言一、账号注册1.1 GitHub与Gitee 二、构建仓库三、安装git 四、配置git五、克…

详解库和程序运行过程

我最近开了几个专栏&#xff0c;诚信互三&#xff01; > |||《算法专栏》&#xff1a;&#xff1a;刷题教程来自网站《代码随想录》。||| > |||《C专栏》&#xff1a;&#xff1a;记录我学习C的经历&#xff0c;看完你一定会有收获。||| > |||《Linux专栏》&#xff1…

lvgl 窗口 windows lv_port_win_visual_studio 版本 已解决

不知道的东西&#xff0c;不知道lvgl窗口。一切从未知开始 lv_port_win_visual_studio 主分支 对应的分支 v7版本更新git submodule update --init --recursive同步 lvgl代码随后打开 visualSudio 打开.sln 文件 编译 release模式 允许 一切正常代码部分

perl:获取同花顺数据--业绩预告,送股派息

perldoc LWP::UserAgent 如果没有安装&#xff0c;则安装模块&#xff0c;运行 cpanm LWP::UserAgent 。 编写 get_yjyg_10jqka.pl 如下 #!/usr/bin/perl # perl 获取同花顺数据--业绩预告 use LWP::UserAgent; use Encode qw(decode encode); use POSIX; use Data::Dump…

JavaWeb——Servlet

请求转发是一次转发请求转发URL地址不会发生变化&#xff0c;会保留当前Servlet的资源访问路径共享同一个Request作用域&#xff0c;可用于多页面之间传递数据 getServletContext() 返回一个ServletContext()对象 获取请求头信息 getHeader(String key)根据key获取value 例如 r…

Element UI el-dialog自由拖动功能

1.创建drag .js文件 /*** 拖拽移动* param {elementObjct} bar 鼠标点击控制拖拽的元素* param {elementObjct} target 移动的元素* param {function} callback 移动后的回调*/ export function startDrag(bar, target, callback) {var params {top: 0,left: 0,currentX: …

学习资料记录

http://interview.wzcu.com/Golang/%E4%BB%A3%E7%A0%81%E8%80%83%E9%A2%98.html map底层 https://zhuanlan.zhihu.com/p/616979764 go修养 https://www.yuque.com/aceld/golang/ga6pb1#4b19dba5 https://golang.dbwu.tech/performance/map_pre_alloc/ https://juejin.cn/pos…

C++11新特性:sizeof... 运算符

在 C11 及其后续版本中&#xff0c;引入了一项新的语言特性——sizeof...运算符&#xff0c;这是一个与模板编程紧密相关的特性。 你没看错&#xff0c;sizeof 后面是三个点&#xff1a;sizeof... sizeof...运算符用于计算变参模板&#xff08;variadic template&#xff09;…