OpenLayers3, 设置地图背景

news2024/11/24 10:57:21

文章目录

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


一、前言

本文基于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的ID
            target: '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.coloradmin.cn/o/2086457.html

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

相关文章

封装string

仿照string类&#xff0c;实现mystring #include <iostream> #include<string.h> using namespace std;class MyString {private:char *str; //记录c风格的字符串int size0; //记录字符串实际长度public://无参构造&#xff1a;定义了一个字符串MyStri…

Noise, Dynamic Range and Bit Depth in Digital SLRs --- 数字单反相机中的噪点、动态范围和位深

系列文章目录 文章目录 系列文章目录前言数字单反相机中的噪点、动态范围和位深二、噪声的来源2.1 光子散粒噪声2.2 读出噪声2.3 模式噪声2.4 热噪声2.5 像素响应不均匀性&#xff08;PRNU&#xff09;2.5 量化误差 前言 Noise, Dynamic Range and Bit Depth in Digital SLRs …

golang私有仓库遇到的问题记录

问题1: is this a git repository? 原因&#xff1a;git保存了错误的用户名密码 我是mac系统&#xff0c;在启动台-》其他-》钥匙串&#xff0c;找到git的登录信息&#xff0c;将错误的钥匙串删除即可。 问题2: remote: The project you were looking for could not be found…

HarmonyOS鸿蒙开发( Beta5版)Navigation组件常规加载与动态加载

简介 应用在加载页面时&#xff0c;如果引入暂时不需要加载的模块&#xff0c;会导致页面加载缓慢和不必要的内存占用。例如当页面使用Navigation组件时&#xff0c;主页默认加载子页面&#xff0c;此时若子页面使用了Web组件&#xff0c;则会提前加载Web相关的so库&#xff0…

Mybatis:基础巩固-DQL

目录 一、概述二、数据准备三、基础查询四、条件查询五、聚合函数六、分组查询七、排序查询八、分页查询九、DQL执行顺序 一、概述 主要用于对数据的查询操作&#xff0c;使用的关键字SELECT SELECT 字段列表 FROM 表名 WHERE 条件列表 GROUP BY 分组字段 HAVING 分组后条件列表…

Renesa Version Board和微信小程序通信

目录 概述 1. 系统框架结构 1.1 功能介绍 1.2 系统框图 2 微信小程序开发 2.1 UI介绍 2.2 代码实现 3 功能实现 3.1 通信协议 3.2 系统测试 概述 本文主要介绍基于Renesa Version Board&#xff0c;采集多个传感器数据&#xff0c;并将这些数据通过蓝牙模块发送微信…

《黑神话悟空》:国产3A游戏的崛起与AI绘画技术的融合

一、游戏简介 近年来&#xff0c;国产3A游戏《黑神话悟空》以其精美的画面、丰富的剧情和独特的文化底蕴吸引了众多玩家的关注。这款游戏以中国古典名著《西游记》为背景&#xff0c;讲述了孙悟空历经磨难&#xff0c;最终成长为斗战胜佛的故事。在游戏制作过程中&#xff0c;开…

办公必备,免费的在线万能格式转换工具

在当今数字化时代&#xff0c;文件格式转换已成为办公和日常生活中不可或缺的一部分。随着各种文件格式的不断涌现&#xff0c;人们对于高效、便捷的文件转换工具的需求日益增长。小编将为大家介绍几款免费的在线万能格式转换工具&#xff0c;帮助大家轻松应对各种文件转换需求…

golang uint8 转int出现ascll码值

在Golang中&#xff0c;uint8类型被用来表示ASCII码值。 结果是51 如果是uint8(3)的话结果还是3 所以在我们想把一个uint8类型的字符数字转换为int类型时需要特殊处理 减去对应ASCII码’0’的值 结果就是3了

Python循环结束语句 break语句 continue语句

Python break 语句 Python break语句&#xff0c;就像在C语言中&#xff0c;打破了最小封闭for或while循环。 break语句用来终止循环语句&#xff0c;即循环条件没有False条件或者序列还没被完全递归完&#xff0c;也会停止执行循环语句。 break语句用在while和for循环中。 …

df的 一列,是文字, 比如 xxxxx-1, xxxx-2 , 最后有 -1 或者 -2,把最后的数字减去1,写道一个新的列里面

file_pathrf"D:\file\工作簿1-1.xlsx"# from stutil import PandasUtil import pandas as pd dfpd.read_excel(file_path) # PandasUtil. # df的 一列&#xff0c;是文字&#xff0c; 比如 xxxxx-1, xxxx-2 , 最后有 -1 或者 -2&#xff0c;把 -1 变成 -0&#xff…

【测试面试题】14题常见APP测试面试题(参考答案)

大家好&#xff0c;这份面试题不难&#xff0c;都是一些基础题。 先上一个面试题汇总图&#xff0c;建议大家可以先思考下如果是自己能不能回答全&#xff0c;再去对照看参考答案。 下面为参考答案&#xff1a; 一、基础篇 1、APP的测试流程&#xff1f; APP测试流程与web测…

数分基础(03-3)客户特征分析--Tableau

文章目录 客户特征分析 - Tableau1. 说明2. 思路与步骤3. 数据准备和导入3.1 用EXCEL初步检查和处理数据3.1.1 打开3.1.2 初步检查&#xff08;1&#xff09;缺失值检查缺失值处理 &#xff08;2&#xff09;格式化日期字段&#xff08;3&#xff09;其他字段数据类型 &#xf…

在离线环境中安装依赖包

在离线环境中安装依赖包的方法&#xff1a; 参考文章&#xff1a; 1.如何离线下载python依赖包 2.python 依赖包打包 离线下载 3.Python的国内安装源&#xff08;也称为镜像源&#xff09; 最终安装效果&#xff0c;有部分失败的&#xff0c;重新下载失败的再去试试

达梦数据库启动与停止

1.1.1数据库启停之菜单方式启动、停止达梦数据库 当数据库服务器是Windows时&#xff0c;开始-->达梦数据库-->点击“DM服务查看器”&#xff0c;找到 “DmService【数据库实例名】” -->右键启动或停止。 下图中数据库实例名是DMSERVER 当数据库服务器是Linux时&…

kali

目录 一、网络配置 二、nat模式 1.检查服务 2.创建虚拟网卡 3.创建kali的网卡信息 三、桥接模式 四、nmap的使用 1.端口扫描 1>扫描主机端口 2>扫描指定端口 2.主机扫描 3.服务识别 4.系统识别 5.漏洞检测 6.导出扫描结果 五、msfconsole的使用 1.简介 …

imFile:全平台下载工具的新星

在数字化时代&#xff0c;我们经常需要下载各种文件和数据。一款好的下载工具不仅能提高我们的工作效率&#xff0c;还能带来愉悦的用户体验。今天&#xff0c;电脑天空将为大家介绍一款基于Motrix开发的全平台下载工具——imFile。 imFile是一款功能强大的下载工具&#xff0…

网络爬虫--生成假数据

爬取网址中的数据。 下面3个分别是姓、女孩名字、男孩名字的网址。 String familyURLStr "http://www.baijiaxing.net.cn/";String girlNameURLStr "https://wannianli.tianqi.com/qiming/news/16536.html";String boyNameURLStr "https://wanni…

python脚本自动备份华为交换机配置,Console重置密码,升级系统文件

Python脚本自动备份华为交换机配置,Console重置密码,升级系统文件 1.说明2.Console口重置密码3.版本升级4.SSH配置5.python脚本—————————————————————————————————————————————————— 1.说明 恢复密码交换机型号:Quidwa…

YB2421E是一款专为降低电磁干扰特性而设计的降压型DC/DC转换器

现代生活中&#xff0c;我们离不开各种电子设备的陪伴&#xff0c;而这些设备的正常运行离不开稳定的电源供应。YB2421E同步降压电压转换器可以满足您对电源供应的需求。 YB2421E是一款专为降低电磁干扰特性而设计的降压型DC/DC转换器。它采用了单片集成电路的设计&#xff0c;…