OpenLayers 开源的Web GIS引擎 - 地图初始化

在线引用:

地址:OpenLayers - Get the Code

离线引用:

下载地址:Releases · openlayers/openlayers · GitHub

v10.0.0版本

地图初始化代码: 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!--在线引用ol3<script src="https://cdn.jsdelivr.net/npm/ol@v10.1.0/dist/ol.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v10.1.0/ol.css">   --><!--离线引用ol3--><script src="./v10.0.0-package/dist/ol.js"></script><link rel="stylesheet" href="./v10.0.0-package/ol.css"><title>初始化地图</title><style>*{margin:0;padding:0}#map{width:100vw;height: 100vh;}</style>
</head>
<body><div id="map"></div><script>/***初始化一个高德图层***/const gaodeLayer = new ol.layer.Tile({title:"高德地图",source:new ol.source.XYZ({url:'http://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}',wrapX:false})});const gaodemap = new ol.Map({target:"map",layers:[gaodeLayer],view:new ol.View({// EPSG:3857投影center:[13951671.781120978, 5449979.971864047],projection:'EPSG:3857',zoom:11,// EPSG:4326投影//center:[125.33,43.90],//projection:'EPSG:4326'})});</script></body>
</html>

坐标系转换: EPSG:3857 和 EPSG:4326 坐标系相互转换

 // EPSG:3857 转换经纬度(EPSG:4326)function mercatorTolonlat(mercator){var lonlat={x:0,y:0};var x = mercator.x/20037508.34*180;var y = mercator.y/20037508.34*180;y= 180/Math.PI*(2*Math.atan(Math.exp(y*Math.PI/180))-Math.PI/2);lonlat.x = x;lonlat.y = y;return lonlat;}// 经纬度(EPSG:4326)转换EPSG:3857function lonLat2Mercator(lonlat){var mercator = {x:0,y:0};var earthRad = 6378137.0;mercator.x = lonlat.lng * Math.PI / 180 * earthRad;var a = lonlat.lat * Math.PI / 180;mercator.y = earthRad / 2 * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a)));return mercator;}// 使用var lonlat={lat:43.90,lng:125.33}// 打印console.log( lonLat2Mercator(lonlat));

补充(坐标转换):

 const map = new ol.Map({target:"map",layers:[gaodeLayer],// 坐标转换也可以用如下方法view:new ol.View({//xy值转至经纬度//center:ol.proj.transform([13951671.781120978, 5449979.971864047], 'EPSG:3857','EPSG:4326' ),//projection:'EPSG:4326',// 经纬度转至xy值center:ol.proj.transform([125.33,43.90],'EPSG:4326', 'EPSG:3857' ),projection:'EPSG:3857',zoom:11})});

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

以STM32CubeMX创建DSP库工程方法二

以Keil创建DSP库工程方法二 Keil 中宏定义的添加 编译后直接报错高达420项&#xff0c;摘取一部分错误信息下来如下&#xff1a; D:\AppData\Local\Arm\Packs\ARM\CMSIS\5.7.0\CMSIS\DSP\Include\arm_math.h(6911): error: #757: function “int32_t” is not a type name 以…

【开源免费】基于SpringBoot+Vue.JS图书馆管理系统(JAVA毕业设计)

本文项目编号 T 044 &#xff0c;文末自助获取源码 \color{red}{T044&#xff0c;文末自助获取源码} T044&#xff0c;文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析5.4 用例设计 六、核…

数据结构:二叉树(一)

ps&#xff1a;偷懒了几天&#xff0c;接着更新 树的概念 树是一种非线性的数据结构&#xff0c;它是由n&#xff08;n>0&#xff09;个有限结点组成一个具有层次关系的集合。 把它叫做树是因为它看起来像一棵倒挂的树&#xff0c;也就是说它是根朝上&#xff0c;而叶朝下的…

银河麒麟高级服务器操作系统V10:提升普通用户操作权限

银河麒麟高级服务器操作系统V10&#xff1a;提升普通用户操作权限 1. 打开终端2. 切换到root用户&#xff08;可选&#xff09;3. 将用户加入到wheel组4. 验证用户组变更5. 使用sudo执行命令结论 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f4…

利用人工智能改变视频智能

人工智能视频分析正在将安全摄像头变成强大的传感器&#xff0c;可以改善您监控站点安全的方式。借助人工智能 (AI)&#xff0c;摄像头可以独立准确地检测威胁&#xff0c;而无需人工不断观看视频。 这并不奇怪——过去几年&#xff0c;这一直是安全行业协会 (SIA) 提出的几大…

软考高级:数据库关系模式推理规则 AI 解读

你提出的是关系模式中的一些经典推理规则&#xff0c;这些规则在数据库理论、函数依赖和范式相关的讨论中经常出现。我们可以通过以下方式深入理解这些规则&#xff0c;并且对其中的推理逻辑进行分解。 生活化例子 想象你在管理一家快递公司&#xff0c;货物需要从仓库&#…

低版本SqlSugar的where条件中使用可空类型报语法错误

SQLServer数据表中有两列可空列&#xff0c;均为数值类型&#xff0c;同时在数据库中录入测试数据&#xff0c;Age和Height列均部分有值。   使用SqlSugar的DbFirst功能生成数据库表类&#xff0c;其中Age、Height属性均为可空类型。   开始使用的SqlSugar版本较低&…

传奇外网架设全套图文教程-BLUE引擎

提示&#xff1a; 当你拿到一个BLUE引擎的版本&#xff0c;首先查看一下版本内文件是否完整&#xff0c;一个完整的BLUE版本包括&#xff1a;DBServer、LoginGate、LoginSrv、LogServer、Mir200、Mud2、RunGate、SelGate、网站和GameCenter.exe&#xff08;引擎&#xff09;&am…

群晖套娃:群晖+飞牛fnOS二合一,群晖nas安装飞牛fnOS系统实录(飞牛fnOS初体验,如何挂载网盘视频,轻松实现影视刮削)

文章目录 📖 介绍 📖🏡 演示环境 🏡📒 飞牛fnOS 📒📝 什么是飞牛fnOS?📝 准备工作📝 安装飞牛fnOS📝 影视刮削⚓️ 相关链接 ⚓️📖 介绍 📖 最近有一款很火的国产NAS系统吸引了不少用户的注意。你是否曾想过,将这种新兴系统安装到你的群晖设备上,实…

LLMs之MemLong:《MemLong: Memory-Augmented Retrieval for Long Text Modeling》翻译与解读

LLMs之MemLong&#xff1a;《MemLong: Memory-Augmented Retrieval for Long Text Modeling》翻译与解读 导读&#xff1a;MemLong 是一种新颖高效的解决 LLM 长文本处理难题的方法&#xff0c;它通过外部检索器获取历史信息&#xff0c;并将其与模型的内部检索过程相结合&…

Wpf使用NLog将日志输出到LogViewer

1 LogViewer LogViewer是通过UDP传输的高性能实时log查看器。 具有一下特性&#xff1a; 通过UDP读取日志通过文件导入日志导出日志到一个文件中排序、过滤&#xff08;日志树&#xff0c;日志等级&#xff09;和查找突出显示搜索文本从UPD接收日志时忽略IP地址列表多接收器支…

HTML5中新增元素介绍

引入了许多新元素&#xff0c;以增强网页的语义和功能。这些新元素大致可以按以下几类进行分类和介绍。 下面是对各标签的详解&#xff0c;section、header、footer、nav、article、aside、figure、code、dialog、meter、time、progress、video、audio、details、atagrid、menu…

数据库提权【笔记总结】

文章目录 UDF提权以有webshell只有数据库权限条件复现msf工具sql语句提权 MOF提权前言条件复现msf工具php脚本提权 sqlserver提权前言条件xp_cmdshell提权复现 沙盒提权介绍复现 Oracle提权靶场搭建执行任意命令复现 通过注入存储过程提权&#xff08;低权限提升至DBA&#xff…

深度学习之概率论预备知识点(3)

在深度学习中&#xff0c;概率论和数理统计是理解许多算法背后的理论基础。这些知识在处理不确定性、估计模型参数、理解数据分布等方面非常关键 1、概率 一种用来描述随机事件发生的可能性的数字度量&#xff0c;表示某一事件发生的可能性。 概率并不客观存在&#xff0c;是…

12. Inseq 特征归因:可视化解释 LLM 的输出

Feature Attribution&#xff08;特征归因&#xff09;&#xff1a;你可以将其当做对模型输出的解释&#xff0c;就像在图像分类中可视化模型关注的区域一样。 本文将介绍 Inseq&#xff0c;这是一个用于解释和可视化序列生成模型输出的工具。我们将通过翻译任务&#xff08;关…

【MySQL 01】数据库基础

目录 1.数据库是什么 2.基本操作 数据库服务器连接操作 数据库和数据库表的创建 服务器&#xff0c;数据库&#xff0c;表关系 数据逻辑存储 3.MySQL架构 4.SQL分类 5.存储引擎 1.数据库是什么 mysql&&mysqld&#xff1a; mysql&#xff1a;这通常指的是 MySQL …

C#描述-计算机视觉OpenCV(6):形态学

C#描述-计算机视觉OpenCV&#xff08;6&#xff09;&#xff1a;形态学 前言阈值化二值图像腐蚀与膨胀算法形态学滤波器开启和闭合运算原理概括 前言 这是本系列第六节&#xff0c;主要是介绍基础的形态学运用。 形态学主要是分析图像中不同主题的形态&#xff0c;它定义了一系…

基于redis的HyperLogLog数据结构实现的布隆过滤器在信息流中历史数据的应用

一、基于redis的HyperLogLog数据结构实现的布隆过滤器在信息流中历史数据的应用 做信息流服务端的左发一定会遇到用户历史数据的集合&#xff0c;对于一些有限信息流&#xff08;因DT数据中心的推荐数据变化较慢&#xff0c;推荐量不大&#xff09;&#xff0c;历史数据可以使用…

扎克伯格的未来愿景 用智能眼镜引领数字社交互动新时代

在即将召开的 Meta Connect 2024 大会之前&#xff0c;对公司创始人马克-扎克伯格&#xff08;Mark Zuckerberg&#xff09;进行了长达 90 分钟的播客采访&#xff0c;对 Meta 的未来发展方向和愿景进行了阐述。 这次访谈不仅为即将举行的会议预热&#xff0c;还深入探讨了 Met…

CAN通信技术入门篇

参考ISO 11898与BOSCH_CAN_V20 1.CAN通信技术概述 CAN ( Controller Area Network ) 即控制器局域网络。由于其高性能、高可靠性、及独特的设计,CAN越来越受到人们的重视。国外已有许多大公司的产品采用了这一技术。 CAN最初是由德国的BOSCH公司为汽车监测、控制系统而设计的…