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。

相关文章

SpringBoot项目启动后自动加载系统配置的多种实现方式

SpringBoot项目启动后自动加载系统配置的多种实现方式

《SpringBoot项目启动后自动加载系统配置的多种实现方式》：本文主要介绍SpringBoot项目启动后自动加载系统配置的多种实现方式,并通过代码示例讲解的非常详细,对大家的学习或工作有一定的... 目录1. 使用 CommandLineRunner实现方式：2. 使用 ApplicationRunne
阅读更多...
SpringBoot项目删除Bean或者不加载Bean的问题解决

SpringBoot项目删除Bean或者不加载Bean的问题解决

《SpringBoot项目删除Bean或者不加载Bean的问题解决》文章介绍了在SpringBoot项目中如何使用@ComponentScan注解和自定义过滤器实现不加载某些Bean的方法,本文通过实... 使用@ComponentScan注解中的@ComponentScan.Filter标记不加载。@C
阅读更多...
springboot 加载本地jar到maven的实现方法

springboot 加载本地jar到maven的实现方法

《springboot加载本地jar到maven的实现方法》如何在SpringBoot项目中加载本地jar到Maven本地仓库,使用Maven的install-file目标来实现,本文结合实例代码给... 在Spring Boothttp://www.chinasem.cn项目中，如果你想要加载一个本地的ja
阅读更多...
最好用的WPF加载动画功能

最好用的WPF加载动画功能

《最好用的WPF加载动画功能》当开发应用程序时,提供良好的用户体验（UX）是至关重要的,加载动画作为一种有效的沟通工具,它不仅能告知用户系统正在工作,还能够通过视觉上的吸引力来增强整体用户体验,本文给... 目录前言需求分析高级用法综合案例总结最后前言当开发应用程序时，提供良好的用户体验（UX）是至关重要
阅读更多...
MyBatis延迟加载的处理方案

MyBatis延迟加载的处理方案

《MyBatis延迟加载的处理方案》MyBatis支持延迟加载（LazyLoading）,允许在需要数据时才从数据库加载,而不是在查询结果第一次返回时就立即加载所有数据,延迟加载的核心思想是,将关联对... 目录MyBATis如何处理延迟加载？延迟加载的原理1. 开启延迟加载2. 延迟加载的配置2.1 使用
阅读更多...
Android WebView的加载超时处理方案

Android WebView的加载超时处理方案

《AndroidWebView的加载超时处理方案》在Android开发中,WebView是一个常用的组件,用于在应用中嵌入网页,然而,当网络状况不佳或页面加载过慢时,用户可能会遇到加载超时的问题,本... 目录引言一、WebView加载超时的原因二、加载超时处理方案1. 使用Handler和Timer进行超
阅读更多...
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类在线监测装置以其多核
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2