iClient for OpenLayers之快速获取UGCV5,MVT出图参数
作者:yangjl
前言
最近还是有很多小伙伴们,一遇到非wgs84坐标的ugcv5或mvt切图瓦片发布的地图服务,便不能对接出图了,或者是出了图但是看着地图边界比较模糊。今天我在这里讲干货,让小伙伴们能快速的对接出图,让小伙伴不用为不会填写origin,resolution,scales,tilegrid等等参数而苦恼了。对于非epsg3857,4326的坐标系的地图服务,是需要利用proj4插件的,因为前文已有同事做个详细的说明,本章就不再赘述,感兴趣的同学可参考
https://blog.csdn.net/supermapsupport/article/details/88967390
此次我用epsg:4525坐标系的地图切ugcv5和mvt缓存,发布成地图服务,进行iClient for OpenLayers产品的对接,过程中讲述如何快速对接出图的方法。
使用proj4
完整包中已带有在线的proj4库,直接在代码第一行粘贴上面复制即可。
对接ugcv5
ugcv5的对接方式,其实非常的简单。当然你需要拿到地图服务的extent,center,origin,tilegrid,zoom等参数。很多小伙伴明白其含义但是往往不知道如何去获取参数,其实我们的iClient For OpenLayer提供了相关获取map信息以及瓦片信息的接口,但是往往被不太熟悉我们的产品的小伙伴所忽略。接口名称:ol.supermap.MapService,感兴趣的同学可以查看,此接口提供了getMapInfo以及getTilesets方法。话不多说,直接上代码,直接把需要的参数给拿出来。
function getMapInfo(url){var needInfo={};return new Promise(function(resolve){new ol.supermap.MapService(url).getMapInfo(function (serviceResult) {var mapJSONObj=serviceResult.result;var tileInfo=ol.source.TileSuperMapRest.optionsFromMapJSON(url, serviceResult.result);console.log(tileInfo)var bounds=mapJSONObj.bounds;needInfo.center=[mapJSONObj.center.x,mapJSONObj.center.y];needInfo.extent=[bounds.left,bounds.bottom,bounds.right,bounds.top];needInfo.origin=tileInfo.tileGrid.g;needInfo.tileGrid=tileInfo.tileGrid;resolve(needInfo);})})};
是不是很简单的就获取出参数了,只要有地图的url不管在哪直接复制代码直接拿出对接ugcv5的参数信息。拿到了这些个参数,剩下的实现就更加简单了,更具官网例子对接出图即可,如下文所示:
async function loadLayer(){proj4.defs("EPSG:4525","+proj=tmerc +lat_0=0 +lon_0=111 +k=1 +x_0=37500000 +y_0=0 +ellps=GRS80 +units=m +no_defs");var infoone=await getMapInfo(url);var projection = new ol.proj.Projection({code:"EPSG:4525",extent: infoone.extent,});var map = new ol.Map({target: 'map',view: new ol.View({center: infoone.center,zoom: infoone.minZoom,projection: projection,origin:infoone.origin})});var layer = new ol.layer.Tile({source: new ol.source.TileSuperMapRest({url:url,tileGrid:infoone.tileGrid,})});map.addLayer(layer);}
loadLayer()
对接mvt矢量瓦片
一般我们对接矢量瓦片时后是参考这个官网的例子的。
https://iclient.supermap.io/examples/openlayers/editor.html#mvtvectorlayer_mbstyle_landuse
如果我们仔细看下该示例,相比对接ugcv5瓦片的时候,无非是多了resolutions,tileType,以及format这三个参数。官网的例子中给出了一个如何解算resolution的函数,其原理就是以dpi96为准,通过某一级zoom以及相应的比例尺(可通过sci文件查看)得到出每个层级的分辨率。感兴趣的同学可以再网上搜索下根据分辨率与比例尺之间的相互转换。但今天的主题既然是快速的对接,那肯定是用最简单的方法来获取剩下需要的resolutions,tileType,以及format这三个参数。其方法如下,打开iserver预览mvt的页面,用谷歌浏览器,打开console控制台,再其中复制以下代码,因map为全局量,便可直接获取加载其中的layer的source属性,其中便有我们需要的全部参数。
map.values_.layergroup.values_.layers.array_[+""+0+""].state_.layer.values_.source
如果resolution过长不好复制,可以
右击该量,然后点击红框,存为全局量
即可拿到,然后复制到你的代码中即可。比起对接ugcv5,不过多用了一个接口ol.supermap.MapboxStyles和上述三个参数,其他使用方式都一致。附上代码:
var url ="http://localhost:8090/iserver/services/map-mvt-4525mvt/rest/maps/4525mvt";function getMapInfo(url){var needInfo={};return new Promise(function(resolve){new ol.supermap.MapService(url).getMapInfo(function (serviceResult) {var mapJSONObj=serviceResult.result;var tileInfo=ol.source.TileSuperMapRest.optionsFromMapJSON(url, serviceResult.result);var bounds=mapJSONObj.bounds;needInfo.center=[mapJSONObj.center.x,mapJSONObj.center.y];needInfo.extent=[bounds.left,bounds.bottom,bounds.right,bounds.top];needInfo.origin=tileInfo.tileGrid.g;needInfo.tileGrid=tileInfo.tileGrid;needInfo.minZoom=tileInfo.tileGrid.minZoom;needInfo.maxZoom=tileInfo.tileGrid.maxZoom;resolve(needInfo);})})};async function loadLayer(){var res=[39070.17862981005, 19535.089314905024, 9767.544657452512, 4883.772328726256, 2441.886164363128, 1220.943082181564, 610.471541090782, 305.235770545391, 152.6178852726955, 76.30894263634775, 38.154471318173876, 19.077235659086938, 9.538617829543469, 4.7693089147717345, 2.3846544573858672, 1.1923272286929336, 0.5961636143464668, 0.2980818071732334, 0.1490409035866167, 0.07452045179330835, 0.037260225896654176, 0.018630112948327088];proj4.defs("EPSG:4525","+proj=tmerc +lat_0=0 +lon_0=111 +k=1 +x_0=37500000 +y_0=0 +ellps=GRS80 +units=m +no_defs");var infoone=await getMapInfo(url);console.log(infoone,"infoone")var projection = new ol.proj.Projection({code:"EPSG:4525",extent: infoone.extent,});console.log(projection,"projection")var map = new ol.Map({target: 'map',view: new ol.View({center: infoone.center,zoom: infoone.minZoom,projection: projection,origin:infoone.origin,resolutions:res})});var style = new ol.supermap.MapboxStyles({map: map,url: url,// source: 'landuse',resolutions: res})style.on('styleloaded', function () {var vectorLayer = new ol.layer.VectorTile({//设置避让参数declutter: true,source: new ol.source.VectorTileSuperMapRest({url: url,projection: projection,tileGrid: infoone.tileGrid,tileType: 'ScaleXY',format: new ol.format.MVT()}),style: style.getStyleFunction()});map.addLayer(vectorLayer);})
}
loadLayer()
结语
本次文章主要目的是让小伙伴能学会快速拿到对接ugcv5,mvt的一系列相关参数,主要通过两种方式。1.通过ol.supermap.MapService接口拿到extent,center,origin,tilegrid,zoom等参数2.在iserver可以预览出mvt的情况下,直接在谷歌console拿到加载到map中的mvtlayer的属性,从而拿到resolutions,tileType,以及format这三个参数。
iClient for OpenLayers之快速获取UGCV5,MVT出图参数相关推荐
- SuperMap iClient for OpenLayers图层组控制实现方法
作者:Carlo 前景:在使用SuperMap iClient for JavaScript产品过程中,经常有一些小伙伴会问如何用iClient for OpenLayers实现类似于Classic官 ...
- 网络营销外包专员浅析网站网络营销外包如何快速获取关键词排名
企业网站正式上线后在激烈的行业竞争中理应思索如何做好网站推广工作,站长可根据企业品牌现状为网站指定相应的网站排名优化策略,为网站更好的呈现和展示在用户面前,争取能够获得搜索引擎和用户的喜爱.那么应该如 ...
- html中css路径和xpath路径,6.1 HTML的简单介绍和快速获取XPath和CSS路径
Web UI 自动化其实就是在页面元素,所以在真正进入页面元素操作之前,我们先认识下我们后面会用到的一些HTML相关知识. HTML的简单介绍 什么是HTML HTML(Hyper Text Mark ...
- Python实例 -- 如何快速获取列表中最大的三个元素
如何快速获取列表中最大的三个元素 最近在做实验,期间需要在一个列表中获取最大的三个元素,自己写的方法复杂度太高,放上大牛的方法,复杂度很低.多看几遍,才能体会到大概的精髓.这道题也是Python的面试 ...
- 过年装X神器,快速获取 wifi 密码!
祝各位朋友们新年快乐,牛年大吉???? 在春节期间,亲朋好友串个门聚一聚是难免的了,作为主人,被问 wifi 密码是常见的事,每次都需要给客人们一遍又一遍的说密码,感觉很low啊.作为程序员,这完全不 ...
- JS快速获取图片宽高的方法
JS快速获取图片宽高的方法 快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括I ...
- MS SQLSERVER中如何快速获取表的记录总数
(转自:http://www.cnblogs.com/pingkeke/archive/2006/05/29/411995.html) 在数据库应用的设计中,我们往往会需要获取某些表的记录总数,用于判 ...
- 29 | 堆的应用:如何快速获取到Top 10最热门的搜索关键词?
为什么评价算法性能是根据时间和空间复杂度,而不是别的参数?是因为计算机结构是冯诺依曼体系,除了输入输出设备和控制器,就剩下运算器和存储器了 问题引入 搜索引擎的热门搜索排行榜功能是如何实现的?搜索引擎 ...
- java快速获取大图片的分辨率(大图片格式JPG,tiff ,eg)
问题描述:怎样快速获取一个20MB图片的分辨率? 程序代码: 1 package test; 2 3 import java.awt.Dimension; 4 import java.awt.imag ...
最新文章
- linux 内核 netfilter 网络过滤模块 (2)-conntrack
- MATLAB机器学习系列-8 极限学习机(Extreme Learning Machine, ELM)原理及其代码实现
- QT的QGLFormat类的使用
- write up 杂项:啊哒
- ubuntu14测试mysql_在ubuntu14.04中安装Hammerora-2.10——测试mysql、oracle性能够的工具...
- 袜子商店应用:一个云原生参照应用
- python 图表美化_你的图表不美观怎么办,Python实现数据可视化帮你实现
- c语言状态机_【C语言】有限状态机FSM
- Linux 中断学习之前言篇---中断之原理篇
- mybatis 依赖于jdbc_面试BAT问的最多的27道MyBatis 面试题(含答案和思维导图总结)...
- 完美解决 fatal: unable to access ‘https://github.com/.../.git‘: Could not resolve host: github.com
- WinHex中文版下载 v16.9 汉化破解版
- 打开OpenProj 出现Your Java Vendor is Oracle Corporation. To run OpenProj, you need the Sun Java......
- 我就是为了小米刷机工具写的
- 出圈!迅镭激光切割设备亮相热播剧《麓山之歌》
- MySQL 5.7.17.0 下载安装笔记
- PMBOK(第六版) PMP笔记——《七》第七章(项目成本管理)
- java 线程与线程池详解
- FastJson的JSON.isValid()出现BUG!
- 那些移动端web踩过的坑2
热门文章
- 软件介绍: AFEPack 软件 (李若, 刘文斌)
- [机器学习与scikit-learn-4]:scikit-learn机器学习的一般流程与案例演示
- Metaverse 元宇宙入门-04-compute 计算与元宇宙
- 基于STM32的电阻、电容测量(NE555芯片RC振荡法)
- 一文回顾AI绘画的成长之路:从简笔画到真实人脸生成
- 荣耀v30鸿蒙系统怎么升级,荣耀v30pro怎么升级鸿蒙系统
- 搜狗输入法明明输入中文却显示英文怎么办
- 大乐透兑奖规则|规则图
- python中rim的用法_词汇精选:rim的用法和辨析
- echarts 设置平均线,警戒线markLine属性