ol xyz 加载天地图_OpenLayers加载天地图方法——WMTS和XYZ
1、ol.layer.Tile及数据源类结构
openlayers中,图层(layer)不可缺少的组成部分是数据源(source),天地图是切片的数据服务,对应的图层是ol.layer.Tile,下图是其数据源对应的类结构图,红色部分是重点内容。
从图可以看到,加载天地图的数据源,可以是ol.source.WMTS(简称WMTS) 和 ol.source.XYZ(简称XYZ)。下面首先以实际的代码对分别使用WMTS和XYZ的方式加载天地图进行说明,然后总结他们的区别。
2、WMTS的方式加载天地图
//创建图层(WMTS方式)
function crtLayerWMTS(type, proj, opacity){
var projection = ol.proj.get(proj);
var projectionExtent = projection.getExtent();
var size = ol.extent.getWidth(projectionExtent) / 256;
var resolutions = new Array(19);
var matrixIds = new Array(19);
for (var z = 1; z < 19; ++z) {
// generate resolutions and matrixIds arrays for this WMTS
resolutions[z] = size / Math.pow(2, z);
matrixIds[z] = z;
}
var layer = new ol.layer.Tile({
opacity: opacity,
source: new ol.source.WMTS({
attributions: 'Tiles © 天地图',
url: 'http://t'+Math.round(Math.random()*7)+'.tianditu.com/'+type+'/wmts',
layer: type.substr(0, 3),
matrixSet: type.substring(4),
format: 'tiles',
projection: projection,
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projectionExtent),
resolutions: resolutions,
matrixIds: matrixIds
}),
style: 'default',
wrapX: true
})
});
layer.id = type;
return layer;
}
重要说明:
(1)天地图有7个服务节点,代码中没有固定使用哪个节点的服务,而是使用 Math.round(Math.random()*7)的方式随机决定从哪个节点请求服务,避免指定节点因故障等原因停止服务的风险。
(2)天地图服务分经纬度和墨卡托投影两种类型,所以url中地图类型的投影方式应与参数 projection中保持一致(EPSG4326或EPSG3857)。
(3)天地图切片服务共有18级,在计算分辨率时,最大计算到18级;经实验发现,若指定到19或更高级别,放大到对应级别后,地图出现空白。
(4)WMTS方式加载的参数中,layer、matrixSet的可取值见下面【天地图地图类型及url】,format的取值固定为tiles, style参数为天地图服务默认的’style’。
天地图的地图类型及url如下所示:
// 全球影像地图服务(经纬度) http://t0.tianditu.com/img_c/wmts
// 全球影像注记服务(经纬度) http://t0.tianditu.com/cia_c/wmts
// 全球影像地图服务(墨卡托投影) http://t0.tianditu.com/img_w/wmts
// 全球影像注记服务(墨卡托投影) http://t0.tianditu.com/cia_w/wmts
// 全球矢量地图服务(经纬度) http://t0.tianditu.com/vec_w/wmts
// 全球矢量注记服务(经纬度) http://t0.tianditu.com/cva_w/wmts
// 全球矢量地图服务(墨卡托投影) http://t0.tianditu.com/vec_c/wmts
// 全球矢量注记服务(墨卡托投影) http://t0.tianditu.com/cva_c/wmts
// 全球地形晕渲地图服务(经纬度) http://t0.tianditu.com/ter_c/wmts
// 全球地形晕渲注记服务(经纬度) http://t0.tianditu.com/cta_c/wmts
// 全球地形晕渲地图服务(墨卡托投影) http://t0.tianditu.com/ter_w/wmts
// 全球地形晕渲注记服务(墨卡托投影) http://t0.tianditu.com/cta_w/wmts
3、XYZ的方式加载天地图
//创建图层(xyz方式)
function crtLayerXYZ(type, proj, opacity){
var layer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://t'+Math.round(Math.random()*7)+'.tianditu.com/DataServer?T='+type+'&x={x}&y={y}&l={z}',
projection: proj
}),
opacity: opacity
});
layer.id = type;
return layer;
}
代码中应注意问题与上述WMTS加载方式(1)、(2)一致。
4、WMTS与XYZ方式比较
相同点:(1)不管采用哪种方式,显示的效果是一致的; (2)加载地图的类型参数应与投影参数保持一致。
不同点:(1)WMTS使用的数据源类型为ol.source.WMTS,XYZ方式使用的数据源类型为ol.source.XYZ;
(2)WMTS方式遵从标准的OGC规范,需要计算、指定分辨率、显示级别等,根据WMTS服务加载的标准规范加载天地图,XYZ方式只需根据天地图规定组装简单的url即可;
(3)实际使用中,难度上WMTS更繁琐,效率上XYZ更优。
结论:推荐使用XYZ的方式加载天地图服务(同时也是加载Google地图的首选)。
作者:顽劣的石头
原文:https://blog.csdn.net/shaxiaozilove/article/details/80371754
ol xyz 加载天地图_OpenLayers加载天地图方法——WMTS和XYZ相关推荐
- OpenLayers加载不同类类型的天地图(矢量图、影像图、地形图)并实现动态切换效果
前言 OpenLayers开发库如何实现加载不同类类型的天地图(矢量图.影像图.地形图)并实现动态切换效果,如下图所示. 一.涉及技术及数据 开发库:OpenLayers 6.Jquery 地图源:天 ...
- arcgis加载天地图_【arcgis地图实战】之天地图在线服务加载
经常用arcgis的童鞋都知道,元数据是基础也是数据分析的根本.而在线地图能够快速的显示数据所在的位置,是数据校验不可多得的工具.arcgis地图实战系列教程将就各种在线地图进行介绍和分享. 在线地图 ...
- 天地图引擎加载自定义WMTS图层
天地图引擎加载自定义WMTS图层 问题描述 最近在开发过程中碰到在天地图引擎中叠加自定义的WMTS图层,天地图官网API:天地图JavaScript API 4.0 在代码示例中添加自定义图层只有一行 ...
- Arcgis for android 加载谷歌、高德和天地图
1.加载谷歌地图 工具类: package com.chy.google;import com.esri.arcgisruntime.arcgisservices.LevelOfDetail; imp ...
- 【亲测可用→防止入坑Routes】设置angular10项目异步加载、惰性加载、懒加载路由
创建一个带路由的项目,依次执行下面每行代码 ng n RouingApp --routingcd RouingAppng g c components/firstng g c components/s ...
- Java动态加载一个类的几种方法以及invoke
一.加载一个类的几种方法 接口 IUser package org.me.javaapp;/**** @author Administrator*/ public interface IUser {} ...
- 照片墙瀑布流加载与阻止加载
网上大部分主流的瀑布流应用基本都是由后端在提供图片地址的同时提供图片宽高,这样,前端不必等待图片渲染完成,可以根据图片的宽高先把装载图片的容器或父节点先放上页面,完成基础性的布局,再让图片以渐变或其他 ...
- webpack v3 结合 react-router v4 做 dynamic import — 按需加载(懒加载)
为什么要做dynamic import? dynamic import不知道为什么有很多叫法,什么按需加载,懒加载,Code Splitting,代码分页等. 总之,就是在SPA,把JS代码分成N个页 ...
- javascript图片懒加载与预加载的分析
懒加载与预加载的基本概念. 懒加载也叫延迟加载:前一篇文章有介绍:JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片. 预加载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染. 两种技 ...
最新文章
- 在浏览器上也能训练神经网络?TensorFlow.js带你玩游戏~
- (转)jQuery选择器总结
- 初学python还是swift-iOS 将来 Swift 也许会取代 Python
- eclipse下安装PyDev不显示问题
- 二维动态规划降维误差一般为多少_动态规划 所有题型的总结
- STM32利用光敏二极管实现光度测量
- 现共收到 5 个分组,其目的地址分别为: (1) 128.96.40.10 (2) 128.96.41.12 (3) 128.96.41.151 (4) 192.4.123.17 (5) 192.4.
- 微型计算机原理与接口电子教案,《微型计算机原理与接口技术》电子教案研讨.ppt...
- nanopi制作个人服务器,NanoPi K2 服务器系统镜像
- spring MVC三种统一异常处理的方法
- 山东工商学院计算机2军训,第二课堂-山东工商学院计算机科学与技术学院
- SI4463实验笔记
- format mla_mlaformat是什么
- java 人脸活体检测_人脸识别活体检测测试案例
- python爬取电子书_python爬取计算机电子书(源码移步github)
- bulldog1——爆破、命令执行、pty提权
- 渣基础:比照Hawstein学Cracking the coding interview(2)
- 梦想汽车 NFT 系列
- vant 自义定 tabBar 图标和颜色
- linux运行md文件,Linux常用的18个命令.md
热门文章
- vs2013配置opencv2.4.9后出现找不到opencv_core249d.dll和opencv_highgui249d.dll问题
- Imbalanced class problem(ROC, Confusion Matrix)
- Change Value to Reference(将值对象改为引用对象)
- 12c oracle 激活_Windows运维之Windows server 2016 安装及ORACLE 12C 安装
- oracle中 使用不了,Oracle 中不使用NOT IN 和 NOT EXISTS的另一种方法
- log4j2到oracle,Log4j2进阶使用(更多高级特性)
- 测试身体素质健康的软件,《体质健康测试与评价》手机应用(App)的开发及应用...
- 如何查看mysql8.0的默认密码_MySQL8.0安装之后查找默认密码
- 二建施工管理思维导图_备考二建不丢分?二建思维导图全程指导,知识点记忆快、不分散...
- 如何写一个数据库中间件以及需要准备的知识储备