Openlayers6 入门（一）加载天地图在线瓦片

2023-10-31 12:40
文章标签 加载 入门 在线 地图 瓦片 openlayers6

本文主要是介绍Openlayers6 入门（一）加载天地图在线瓦片，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

今天开始为大家带来零基础入门Openlayers的教程，轻松实现加载天地图瓦片。
一、准备工作
①到Openlayers官网下载Openlayers的API包。
下载地址：https://openlayers.org/download/

②创建一个Web工程，使用IDEA工具创建的Web工程

使用IDEA工具创建Web工程

③将API包放至工程lib文件夹下，并创建一个MapView.html

 

工程结构

④在MapView.html中，引入ol.css、ol.js文件 

<head><meta charset="UTF-8"><title>Openleyers</title><link rel="stylesheet" href="lib/openlayers-v6.5.0/ol.css"><script type="application/javascript" src="lib/openlayers-v6.5.0/ol.js"></script>
</head>

⑤到天地图官方网站申请开发者token
这个是天地图官网：
http://lbs.tianditu.gov.cn/
这个是官方指导（按照这个进行申请）：
http://lbs.tianditu.gov.cn/authorization/authorization.html#register

二、实现代码
①在MapView.html中创建一个Map的容器。用于之后创建Map对象，注意map的z-index需要设置高一些，防止其他要素遮挡地图。

<style>.map {z-index: 999;position: absolute;top: 0;left: 0;right: 0;bottom: 0;width: 100%;min-height: 100%;height: auto;}
</style>
<body><div id="map" class="map"></div>
</body>

 ②创建Map对象，在Layers数组中添加创建的天地图Layer,并设置地图中心点

var map =new ol.Map({target:"map",view:new ol.View({center:ol.proj.transform([116.40, 39.97], 'EPSG:4326', 'EPSG:3857'),zoom:10}),
});

③创建天地图瓦片方法：

/** 获取在线天地图* type:获取的瓦片类型，影像、矢量 * wkid:坐标系 * token:官网申请的开发者token*/
function getLayerUrlByData(type, wkid, token) {
var url ='', layerId, tileMatrixSetId;if (type ==='image') {url ='http://t{1-7}.tianditu.com/DataServer?';layerId ="img_";tileMatrixSetId = wkid ===4326 ?'c' :"w";}else if (type ==='label') {url ='http://t{1-7}.tianditu.com/DataServer?';layerId ="cia_";tileMatrixSetId = wkid ===4326 ?'c' :"w";}else if (type ==='street') {url ='http://t{1-7}.tianditu.com/DataServer?';layerId ="vec_";tileMatrixSetId = wkid ===4326 ?'c' :"w";}else if (type ==='street_label') {url ='http://t{1-7}.tianditu.com/DataServer?';layerId ="cva_";tileMatrixSetId = wkid ===4326 ?'c' :"w";}return url +'T=' + layerId + tileMatrixSetId +'&x={x}&y={y}&l={z}&tk=' + token;
}

④创建天地图Layer 

var wkid =4326;
//天地图官网申请的Token
var token =""; 
//创建天地图影像底图
var layerTianDiImg =new ol.layer.Tile({
source:new ol.source.XYZ({
url:getLayerUrlByData('image', wkid, token),projection:'EPSG:' +wkid,wrapX:true,crossOrigin:'anonymous'})
});
var layerTianDiImgLabel =new ol.layer.Tile({
source:new ol.source.XYZ({
url:getLayerUrlByData('label', wkid, token),projection:'EPSG:' +wkid,wrapX:true,crossOrigin:'anonymous'})
});//创建天地图矢量底图
var layerTianDi =new ol.layer.Tile({
source:new ol.source.XYZ({
url:getLayerUrlByData('street', wkid, token),projection:'EPSG:' +wkid,wrapX:true,crossOrigin:'anonymous'})
});var layerTianDiLabel =new ol.layer.Tile({
source:new ol.source.XYZ({
url:getLayerUrlByData('street_label', wkid, token),projection:'EPSG:' +wkid,wrapX:true,crossOrigin:'anonymous'})
});

⑤添加天地图Layer到Map中。 

        //添加天地图矢量底图map.addLayer(layerTianDi);map.addLayer(layerTianDiLabel);//添加天地图影像底图map.addLayer(layerTianDiImg);map.addLayer(layerTianDiImgLabel);

三、完整代码 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Openleyers</title><link rel="stylesheet" href="lib/openlayers-v6.5.0/ol.css"><script type="application/javascript" src="lib/openlayers-v6.5.0/ol.js"></script>
</head>
<style>.map {z-index: 999;position: absolute;top: 0;left: 0;right: 0;bottom: 0;width: 100%;min-height: 100%;height: auto;}
</style>
<body>
<div id="map" class="map"><script>var map = new ol.Map({target: "map",//layers: [layerTianDi, layerTianDiLabel],// layers: [layerTianDiImg, layerTianDiImgLabel],view: new ol.View({center: ol.proj.transform([116.40, 39.97], 'EPSG:4326', 'EPSG:3857'),zoom: 10}),});var wkid = 4326;var token = "";//创建天地图影像底图var layerTianDiImg = new ol.layer.Tile({source: new ol.source.XYZ({url: getLayerUrlByData('image', wkid, token),projection: 'EPSG:' + wkid,wrapX: true,crossOrigin: 'anonymous'})});var layerTianDiImgLabel = new ol.layer.Tile({source: new ol.source.XYZ({url: getLayerUrlByData('label', wkid, token),projection: 'EPSG:' + wkid,wrapX: true,crossOrigin: 'anonymous'})});//创建天地图矢量底图var layerTianDi = new ol.layer.Tile({source: new ol.source.XYZ({url: getLayerUrlByData('street', wkid, token),projection: 'EPSG:' + wkid,wrapX: true,crossOrigin: 'anonymous'})});var layerTianDiLabel = new ol.layer.Tile({source: new ol.source.XYZ({url: getLayerUrlByData('street_label', wkid, token),projection: 'EPSG:' + wkid,wrapX: true,crossOrigin: 'anonymous'})});map.addLayer(layerTianDi);map.addLayer(layerTianDiLabel);// map.addLayer(layerTianDiImg);// map.addLayer(layerTianDiImgLabel);/** 获取在线天地图* type:获取的瓦片类型，影像、矢量* wkid:坐标系* token:官网申请的开发者token*/function getLayerUrlByData(type, wkid, token) {var url = '', layerId, tileMatrixSetId;if (type === 'image') {url = 'http://t{1-7}.tianditu.com/DataServer?';layerId = "img_";tileMatrixSetId = wkid === 4326 ? 'c' : "w";} else if (type === 'label') {url = 'http://t{1-7}.tianditu.com/DataServer?';layerId = "cia_";tileMatrixSetId = wkid === 4326 ? 'c' : "w";} else if (type === 'street') {url = 'http://t{1-7}.tianditu.com/DataServer?';layerId = "vec_";tileMatrixSetId = wkid === 4326 ? 'c' : "w";} else if (type === 'street_label') {url = 'http://t{1-7}.tianditu.com/DataServer?';layerId = "cva_";tileMatrixSetId = wkid === 4326 ? 'c' : "w";}return url + 'T=' + layerId + tileMatrixSetId + '&x={x}&y={y}&l={z}&tk=' + token;}</script>
</div>
</body>
</html>

 

四、实现效果：

① 矢量瓦片

天地图矢量瓦片

 

② 影像瓦片 

天地图影像瓦片

 

 

 

 

这篇关于Openlayers6 入门（一）加载天地图在线瓦片的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/315427。

相关文章

Spring Security 从入门到进阶系列教程

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门（一）：登录与退出》 《Spring-Security-入门（二）：基于数据库验证》 《Spring-Security-入门（三）：密码加密》 《Spring-Security-入门（四）：自定义-Filter》 《Spring-Security-入门（五）：在 Sprin
阅读更多...
水位雨量在线监测系统概述及应用介绍

水位雨量在线监测系统概述及应用介绍

在当今社会，随着科技的飞速发展，各种智能监测系统已成为保障公共安全、促进资源管理和环境保护的重要工具。其中，水位雨量在线监测系统作为自然灾害预警、水资源管理及水利工程运行的关键技术，其重要性不言而喻。 一、水位雨量在线监测系统的基本原理 水位雨量在线监测系统主要由数据采集单元、数据传输网络、数据处理中心及用户终端四大部分构成，形成了一个完整的闭环系统。 数据采集单元：这是系统的“眼睛”，
阅读更多...
无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

墙体画线地图切分方案 针对问题：墙体两侧特征混淆误匹配，导致建图和定位偏差，表现为过门跳变、外月台走歪等 ·解决思路：预期的根治方案IGICP需要较长时间完成上线，先使用切分地图的工程化方案，即墙体两侧切分为不同地图，在某一侧只使用该侧地图进行定位 方案思路 切分原理：切分地图基于关键帧位置，而非点云。 理论基础：光照是直线的，一帧点云必定只能照射到墙的一侧，无法同时照到两侧实践考虑：关
阅读更多...
电力系统中的A类在线监测装置—APView400

电力系统中的A类在线监测装置—APView400

随着电力系统的日益复杂和人们对电能质量要求的提高，电能质量在线监测装置在电力系统中得到广泛应用。目前，市场上的在线监测装置主要分为A类和B类两种类型，A类和B类在线监测装置主要区别在于应用场景、技术参数、通讯协议和扩展性。选择时应根据实际需求和应用场景综合考虑，并定期维护和校准。电能质量在线监测装置是用于实时监测电力系统中的电能质量参数的设备。 APView400电能质量A类在线监测装置以其多核
阅读更多...
数论入门整理（updating）

数论入门整理（updating）

一、gcd lcm 基础中的基础，一般用来处理计算第一步什么的，分数化简之类。 LL gcd(LL a, LL b) { return b ? gcd(b, a % b) : a; } <pre name="code" class="cpp">LL lcm(LL a, LL b){LL c = gcd(a, b);return a / c * b;} 例题：
阅读更多...
Java 创建图形用户界面（GUI）入门指南（Swing库 JFrame 类）概述

Java 创建图形用户界面（GUI）入门指南（Swing库 JFrame 类）概述

概述 基本概念 Java Swing 的架构 Java Swing 是一个为 Java 设计的 GUI 工具包，是 JAVA 基础类的一部分，基于 Java AWT 构建，提供了一系列轻量级、可定制的图形用户界面（GUI）组件。 与 AWT 相比，Swing 提供了许多比 AWT 更好的屏幕显示元素，更加灵活和可定制，具有更好的跨平台性能。 组件和容器 Java Swing 提供了许多
阅读更多...
【IPV6从入门到起飞】5-1 IPV6+Home Assistant(搭建基本环境)

【IPV6从入门到起飞】5-1 IPV6+Home Assistant(搭建基本环境)

【IPV6从入门到起飞】5-1 IPV6+Home Assistant #搭建基本环境 1 背景2 docker下载 hass3 创建容器4 浏览器访问 hass5 手机APP远程访问hass6 更多玩法 1 背景 既然电脑可以IPV6入站，手机流量可以访问IPV6网络的服务，为什么不在电脑搭建Home Assistant（hass），来控制你的设备呢？@智能家居 @万物互联
阅读更多...
poj 2104 and hdu 2665 划分树模板入门题

poj 2104 and hdu 2665 划分树模板入门题

题意： 给一个数组n（1e5）个数，给一个范围（fr， to， k），求这个范围中第k大的数。 解析： 划分树入门。 bing神的模板。 坑爹的地方是把-l 看成了-1........ 一直re。 代码： poj 2104： #include <iostream>#include <cstdio>#include <cstdlib>#include <al
阅读更多...
MySQL-CRUD入门1

MySQL-CRUD入门1

文章目录 认识配置文件client节点mysql节点mysqld节点 数据的添加(Create)添加一行数据添加多行数据两种添加数据的效率对比 数据的查询(Retrieve)全列查询指定列查询查询中带有表达式关于字面量关于as重命名 临时表引入distinct去重order by 排序关于NULL 认识配置文件 在我们的MySQL服务安装好了之后, 会有一个配置文件, 也就
阅读更多...
Flutter 进阶：绘制加载动画

Flutter 进阶：绘制加载动画

绘制加载动画：由小圆组成的大圆 1. 定义 LoadingScreen 类2. 实现 _LoadingScreenState 类3. 定义 LoadingPainter 类4. 总结 实现加载动画 我们需要定义两个类：LoadingScreen 和 LoadingPainter。LoadingScreen 负责控制动画的状态，而 LoadingPainter 则负责绘制动画。
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2