OpenLayers3, 设置地图背景

文章目录

  • 一、前言
  • 二、代码实现
  • 三、总结


一、前言

本文基于OpenLayers3,实现地图加入背景图的功能。

二、代码实现

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>设置地图背景</title><!--导入本页面外部样式表--><link href="../../css/style.css" rel="stylesheet" type="text/css" /><link href="../../libs/ol/ol.css" rel="stylesheet" type="text/css" /><script src="../../libs/ol/ol.js" type="text/javascript"></script><style type="text/css">#mapCon {width: 100%;height: 90%;position: absolute;}</style>
</head>
<body></div><div id="map" title="地图显示" style="padding: 5px"></div><script type="text/javascript">//实例化Map对象加载地图var tdttk = '*****' // 天地图认证tk, 秘钥var map = new ol.Map({//地图容器div的IDtarget: 'mapCon',//地图容器中加载的图层layers: [new ol.layer.Tile({title: "天地图矢量图层",source: new ol.source.XYZ({url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=" + tdttk,wrapX: false})}),new ol.layer.Tile({title: "天地图矢量注记图层",source: new ol.source.XYZ({url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=" + tdttk,wrapX: false})})],//地图视图设置view: new ol.View({//地图初始中心点center: [0, 0],//地图初始显示级别zoom: 1})});/*====================设置地图背景=====================*/function setBgImg() {//获取地图容器元素var div = document.getElementById('mapCon');//通过style的填充背景图属性设置背景div.style.backgroundImage = 'url(../../images/gis.jpg)';}setBgImg()</script>
</body>
</html>

效果如下:
在这里插入图片描述

三、总结

以上为基于openlayer3 实现设置地图背景图的简单案例,希望对您有帮助~

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

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

相关文章

QT学习ubuntu qt + desktop

环境搭建 ubuntu 安装QT 遇到kit 选择不了 通过sudo apt-get install qt5-default去安装SDK的时候报错&#xff1a; Package qt5-default is not available, but is referred to by another package. This may mean that the package is missing, has been obsoleted, or is …

Linux——nginx 负载均衡

常规的web服务器一般提供对于静态资源的访问&#xff0c;比如说&#xff1a;图片、web样式 网站提供的大部分交互功能都需要web编程语言的支持&#xff0c;而web服务对于程序的调用&#xff0c;不管编译型语言还是解释型语言&#xff0c;web服务同将对于应用程序的调用递交给通…

RedisMessageListenerContainer容器初始化

RedisMessageListenerContainer是Spring Data Redis提供的一个容器类&#xff0c;为Redis监听器提供异步处理能力&#xff0c;处理低级别消息、转换Redis的消息通道&#xff0c;它通常与MessageListenerAdapter和自定义的消息监听器一起使用。 一、RedisMessageListenerContain…

【机器学习】网络安全如何利用(行为分析)来确定可能表明内部威胁、APT 或零日攻击的可疑或异常事件。

网络安全如何利用&#xff08;行为分析&#xff09;来确定可能表明内部威胁、APT 或零日攻击的可疑或异常事件。 1. 行为分析的基本概念 2. 检测内部威胁 3. 检测高级持续性威胁 (APT) 4. 检测零日攻击 5. 实施行为分析的步骤 6. 行为分析的优势与挑战 7. 总结 &#x1…

(十七)Flink 容错机制

目录 分布式快照 Checkpoint Checkpoint 模式 Checkpoint 配置 非对齐 Checkpointing 状态存储 Savepoint 分配算子 ID Savepoint 操作 Checkpoint 与 Savepoint 区别 作业重启与故障恢复策略 重启策略 恢复策略 对于不间断 24 小时运行的程序来说,容错至关重要。…

在蓝桥云课ROS中快速搭建Arduino开发环境

普通方式 一步步慢悠悠的搭建和讲解需要5-6分钟&#xff1a; 如何在蓝桥云课ROS中搭建Arduino开发环境 视频时间&#xff1a;6分40秒 高效方式 如何高效率在蓝桥云课ROS中搭建Arduino开发环境 视频时间&#xff1a;1分45秒 配置和上传程序到开发板 上传程序又称为下载程序h…

html+css+js网页设计 婚庆网站8个页面

htmlcssjs网页设计 婚庆网站8个页面 网页作品代码简单&#xff0c;可使用任意HTML编辑软件&#xff08;如&#xff1a;Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad 等任意html编辑软件进行运行及修改编辑等操作&#xff09;。 获取源码 1&#xff…

打卡51天------图论(深搜/广搜应用题)

最近真的太忙了&#xff0c;没时间刷题&#xff0c;白天工作&#xff0c;我在church的Choir事工还不想停止&#xff0c;需要我在工作、生活、church做一个平衡&#xff0c;周六慢慢补上吧&#xff0c;交托给上Di。 一、岛屿数量-深搜 注意深搜的两种写法&#xff0c;熟练掌握这…

C#骑砍逻辑类Mod制作详细解说

前言&#xff1a; 最近在研究骑砍的mod&#xff0c;主要是想修改其中的逻辑部分&#xff0c;因此有了这篇帖子。 一&#xff0c;文件夹与XML配置 在Modules创建一个新文件夹&#xff0c;文件夹名称随意&#xff0c;不影响实际的读取。 文件夹下面的位置需要固定&#xff0c;因…

八股总结-----C++、数据结构、算法

1.内存基础 11.内存分区 代码区&#xff1a;存储可执行代码&#xff08;程序指令&#xff09;。 全局区&#xff1a;存储全局变量和静态变量&#xff08;已初始化和未初始化&#xff09;。 堆区&#xff1a;用于动态内存分配&#xff0c;由程序员管理。 栈区&#xff1a;存…

python:reportlab 生成PDF文件,生成基因图谱

reportLab是 python的一个第三方库&#xff0c;它能够用来生成PDF文件。这个库提供了一系列的工具&#xff0c;允许用户从简单的文档到复杂的多列布局进行PDF的创建和编辑。 使用 reportLab&#xff0c;你可以执行以下功能&#xff1a; 创建文本块、图片、图表等元素。 利用绘…

JS中【浅克隆】和【深克隆】方法解读

在JavaScript中&#xff0c;“克隆”指的是创建一个对象或数组的副本。克隆可以分为浅克隆和深克隆两种方式。了解这两种克隆的差异对编程非常重要。 浅克隆&#xff08;Shallow Clone&#xff09; 浅克隆会复制对象或数组的第一层属性&#xff0c;但对于嵌套的对象或数组&am…

如何通过rsync+sersync 实现同步备份

该文档是在很早之前写的&#xff0c;一直存在草稿箱中&#xff0c;最近在整理其它学习资料时发现还没有发布&#xff0c;内容和方法有可能和现在的操作系统版本有些不符合了&#xff0c;但处理思路没有变化&#xff0c;大家可以根据最新版本要求&#xff0c;参照该文档进行配置…

JVM调优原理

文章目录 引言I 调整JVM的默认堆内存配置1.1 java命令启动jar包时配置JVM 的内存参数1.2 基于Tomcat服务器部署的java应用,配置JVM 的内存参数II JVM GC 调优基本概念: 应用程序的响应时间(RT)和吞吐量(QPS)JVM调优原理调优思路调优方法JVM调优技巧建议引言 内存参数:ht…

南阳施工企业资质续期成本详解与节省策略

南阳施工企业资质续期费用涉及多个方面&#xff0c;包括官方收取的费用、咨询与代办费用、材料准备与审核费用等。以下是对这些费用的详细解析以及相应的节省方法&#xff1a; 一、费用详述 1. 官方收取的费用 延期申请费&#xff1a;这是办理资质续期时必须缴纳的费用&…

闲置物品|基于SprinBoot+vue的校园闲置物品交易平台(源码+数据库+文档)

校园闲置物品交易平台 目录 基于SprinBootvue的校园闲置物品交易平台 一、前言 二、系统设计 三、系统功能设计 5.1系统功能实现 5.2管理员模块实现 5.3用户模块实现 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xf…

项目:基于TCP的文件传输系统

项目介绍: 模拟FTP原理&#xff1a;客户端连接服务器后&#xff0c;向服务器发送一个文件。文件名可以通过参数指定&#xff0c;服务器端接收客户端传来的文件&#xff08;文件名随意&#xff09;&#xff0c;如果文件不存在自动创建文件&#xff0c;如果文件存在&#xff0c;…

PsConvertToGuiThread函数调用前传

PsConvertToGuiThread函数调用前传 第一部分&#xff1a;位置 chchenghaodeiMac base % grep "Kss_ErrorHandler" -nr ./ .//ntos/ke/i386/trap.asm:1026:Kss_ErrorHandler: .//ntos/ke/i386/trap.asm:1220: jae Kss_ErrorHandler ; if ae, try…

matlab 相位解缠

目录 一、功能概述1、相位解缠2、主要函数二、代码实现1、螺旋线的正确相位角2、使用不同阈值平移相位角3、将相移应用于矩阵三、参考链接本文由CSDN点云侠原创,原文链接。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的抄袭狗。 一、功能概述 1、相位解缠 对…

FPGA实现多功能SDI视频采集卡,基于GTX+RIFFA架构,提供2套工程源码和技术支持

目录 1、前言工程概述免责声明 2、相关方案推荐我已有的PCIE方案本博已有的 SDI 编解码方案 3、详细设计方案设计框图SDI 输入设备Gv8601a 均衡器GTX 解串与串化SMPTE SD/HD/3G SDI IP核BT1120转RGBFDMA图像缓存RIFFA用户数据控制RIFFA架构详解Xilinx 7 Series Integrated Bloc…