【01】mapbox js api加载arcgis切片服务

需求:

第三方的mapbox js api加载arcgis切片服务,同时叠加在天地图上,天地图坐标系web墨卡托。

效果图:

形如这种地址去加载http://zjq2022.gis.com:8080/demo/loadmapboxtdt.html

思路:

需要制作一个和天地图比例尺级别以及切片大小等一样的切片方案,可以通过arcmap或者arcgispro制作。如图:

具体的切片信息参数参考链接:

arcgis javascript api4.x加载天地图web墨卡托(wkid:3857)坐标系_acrgis 加载墨卡托地图-CSDN博客

制作出的切片方案见链接:

链接:https://pan.baidu.com/s/1fezUPJnp-G0g6cpcbsOuEw 
提取码:gfwm 
使用该切片方案去切片。

切片之后的效果:

mapbox加载arcgis切片服务示例代码:

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>mapbox 添加arcgis rest切片地图服务</title><metaname="viewport"content="initial-scale=1,maximum-scale=1,user-scalable=no"/><script src="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js"></script><linkhref="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css"rel="stylesheet"/><script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script><style>body {margin: 0;padding: 0;}#map {position: absolute;top: 0;bottom: 0;width: 100%;}</style></head><body><div id="map"></div><script>const vecUrl ="http://t0.tianditu.com/vec_w/wmts?tk=317e52a409b6b382957e09003ee7e235";const cvaUrl ="http://t0.tianditu.com/cva_w/wmts?tk=317e52a409b6b382957e09003ee7e235";var tdtVec = {type: "raster",tiles: [vecUrl +"&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles",],tileSize: 256,};var tdtCva = {type: "raster",tiles: [cvaUrl +"&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles",],tileSize: 256,};mapboxgl.accessToken ="pk.eyJ1IjoibHh0aWFudGlhbiIsImEiOiJjaXd2ZjlkYnQwMTZvMnRtYWZnM2lpbHFvIn0.ef3rFZTr9psmLWahrqap2A";var map = new mapboxgl.Map({container: "map", // container idcenter: [114.32021, 30.578322], // starting positionstyle: {version: 8,glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",sources: {tdtVec: tdtVec,tdtCva: tdtCva,},layers: [{id: "tdtVec",type: "raster",source: "tdtVec",},{id: "tdtCva",type: "raster",source: "tdtCva",},],},zoom: 12, // starting zoomminZoom: 1,maxZoom: 18,});map.on("load", function () {map.addSource("arcgissource", {type: "raster",tiles: ["https://ncportal.geoscene.cn/server/rest/services/wuhan3857/MapServer/tile/{z}/{y}/{x}",],tileSize: 256,});map.addLayer({id: "tdt-img-tiles",type: "raster",minzoom: 0,maxzoom: 19,source: "arcgissource",});});// // 添加argis rest 动态地图服务// map.on("load", function () {//   map.addSource("city-source", {//     type: "raster",//     tiles: [//       "https://whgeoscene.hygt.com/server/rest/services/全国道路/MapServer/export?dpi=96&transparent=true&format=png8&layers=&bbox={bbox-epsg-3857}&f=image&bboxSR=102100&imageSR=102100",//     ],//     // 'tiles':['http://localhost:6080/arcgis/rest/services/MyMapService/MapServer/export?dpi=96&transparent=true&format=png8&layers=&bbox={bbox-epsg-3857}&f=image&bboxSR=3857&imageSR=3857'],//     // "tiles": ['http://221.239.0.144:6080/arcgis/rest/services/oceanname_vector/MapServer/export?bbox={bbox-epsg-3857}&f=image&transparent=true&format=png8&bboxSR=102100&imageSR=102100'],//     tileSize: 256,//   });//   map.addLayer({//     id: "sity-layer",//     type: "raster",//     source: "city-source",//   });// });</script></body>
</html>

参考资料:

Sources | Mapbox Style Spec | Mapbox

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/633128.shtml

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

相关文章

MetaHipMer2 - MHM2超算系统宏基因组短读长序列组装神器的介绍和使用

berkeleylab / mhm2 / Downloads — Bitbucket 文章&#xff1a; Terabase-scale metagenome coassembly with MetaHipMer | Scientific Reports MetaHipMer (MHM) 是一种从头开始的宏基因组短读组装器。这是版本 2 (MHM2)&#xff0c;完全用 UPC、CUDA 和 HIP 编写&#xf…

vscode配置web开发环境(WampServer)

这里直接去下载了集成的服务器组件wampserver&#xff0c;集成了php&#xff0c;MySQL&#xff0c;Apache 可能会出现安装问题&#xff0c;这里说只有图上这些VC包都安装了才能继续安装&#xff0c;进入报错里提供的链接 在页面内搜索相关信息 github上不去可以去镜像站 下载…

1206: Water problem

问题描述 给你n个数&#xff0c;找出与众不同的那一个 输入 输入一个数n&#xff08;3<n<1000&#xff09;&#xff0c;接下来输入n个数&#xff0c;数据保证这n个数中刚好有n-1个数相同&#xff0c;且每个数的绝对值都不大于1000000 输出 输出那个“另类”的数 样…

5G基站 储能发展新方向

基站储能行业的发展前景广阔&#xff0c;随着5G技术的普及&#xff0c;未来将需要更多的基站储能设备来支持网络信号的覆盖和传输。在这个背景下&#xff0c;储能用的硬件和软件设备也需要不断跟进和创新&#xff0c;以满足基站储能行业的需求。 首先&#xff0c;储能用的硬件设…

《Python数据分析技术栈》第01章 02 Jupyter入门(Getting started with Jupyter notebooks)

02 Jupyter入门&#xff08;Getting started with Jupyter notebooks&#xff09; 《Python数据分析技术栈》第01章 02 Jupyter入门&#xff08;Getting started with Jupyter notebooks&#xff09; Before we discuss the essentials of Jupyter notebooks, let us discuss…

C#,字符串匹配(模式搜索)RK(Rabin Karp)算法的源代码

M.O.Rabin Rabin-Karp算法&#xff0c;是由M.O.Rabin和R.A.Karp设计实现的一种基于移动散列值的字符串匹配算法。 通常基于散列值的字符串匹配方法&#xff1a;&#xff08;1&#xff09;首先计算模式字符串的散列函数&#xff1b;&#xff08;2&#xff09;然后利用相同的散…

【漏洞攻击之文件上传条件竞争】

漏洞攻击之文件上传条件竞争 wzsc_文件上传漏洞现象与分析思路编写攻击脚本和重放措施中国蚁剑拿flag wzsc_文件上传 漏洞现象与分析 只有一个upload前端标签元素&#xff0c;并且上传任意文件都会跳转到upload.php页面&#xff0c;判定是一个apache容器&#xff0c;开始扫描…

YoloV5改进策略:BAM瓶颈注意力模块|BAM详解以及代码注释|CBAM姊妹篇|有效涨点

论文:《BAM:瓶颈注意力模块》 https://arxiv.org/pdf/1807.06514.pdf 近期深度神经网络的进展主要通过架构搜索来增强其表示能力。在这项工作中,我们专注于注意力在一般深度神经网络中的作用。我们提出了一种简单而有效的注意力模块,名为瓶颈注意力模块(BAM),可以与任何…

IntelliJ IDEA 中输出乱码解决

最近tomcat突然在控制台输出乱码&#xff0c;各种乱码问题&#xff0c;查阅大量的资料&#xff0c;最终得以解决. IDEA控制台输出乱码 问题一&#xff1a;idea中tomcat控制台输出乱码 运行本地的tomcat\bin\start.bat文件页面显示正常 在idea中显示乱码 解决&#xff1a; 根…

WebRTC视频会议/视频客服系统EasyRTC进入会议室密码验证的开发与实现

基于WebRTC技术的EasyRTC视频会议系统&#xff0c;建设目标是让用户随时随地、快捷方便地进行视频会议&#xff0c;并根据行业需求有针对性地提供多样化、个性化功能&#xff0c;该系统是覆盖全球的实时音视频开发平台&#xff0c;支持一对一、一对多等视频通话&#xff0c;极大…

梳理从MVP变换到光栅化的过程

1.梳理从MVP变换到光栅化的过程 相关博客&#xff1a; 1.MVP变换 2.Rasterization&#xff08;光栅化&#xff09; 1.1 View/Camera transformation 此例中相机初始位置为&#xff08;0,0,5&#xff09;【备注&#xff1a;详见主函数中输入的值】经过 M view M_{\text{view}}…

python222网站实战(SpringBoot+SpringSecurity+MybatisPlus+thymeleaf+layui)-贴子列表分页显示实现

锋哥原创的SpringbootLayui python222网站实战&#xff1a; python222网站实战课程视频教程&#xff08;SpringBootPython爬虫实战&#xff09; ( 火爆连载更新中... )_哔哩哔哩_bilibilipython222网站实战课程视频教程&#xff08;SpringBootPython爬虫实战&#xff09; ( 火…

【算法题】61. 旋转链表

题目 给你一个链表的头节点 head &#xff0c;旋转链表&#xff0c;将链表每个节点向右移动 k 个位置。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5], k 2 输出&#xff1a;[4,5,1,2,3] 示例 2&#xff1a; 输入&#xff1a;head [0,1,2], k 4 输出&#xff1a…

使用 ClassFinal 对SpringBoot jar加密加固并进行机器绑定

写在前面&#xff1a;各位看到此博客的小伙伴&#xff0c;如有不对的地方请及时通过私信我或者评论此博客的方式指出&#xff0c;以免误人子弟。多谢&#xff01;如果我的博客对你有帮助&#xff0c;欢迎进行评论✏️✏️、点赞&#x1f44d;&#x1f44d;、收藏⭐️⭐️&#…

RabbitMQ扩展

系列文章目录 提示&#xff1a;这里可以添加系列文章的所有文章的目录&#xff0c;目录需要自己手动添加 RabbitMQ扩展 提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 系列文章目录前言一、高级特性消费端限流不公…

【正点原子STM32】初识STM32(芯片分类、资料下载、命名规则、选型)

一、STM32是什么 二、STM32芯片分类 三、STM32命名规则 四、STM32选型 五、总结 一、STM32是什么 STM32是STMicroelectronics&#xff08;意法半导体&#xff09;公司推出的一系列32位的嵌入式系统微控制器&#xff08;Microcontroller Unit&#xff0c;MCU&#xff09;产品。…

ThinkPHP6如何轻松集成缓存技术?

随着网络技术的不断发展&#xff0c;缓存技术已经成为了现代化网站、应用开发中必不可少的一项技术。ThinkPHP作为国内最为流行的PHP开发框架之一&#xff0c;在其最新版本ThinkPHP6中&#xff0c;已经集成了多种缓存技术。本文将介绍ThinkPHP6集成缓存技术的实践&#xff0c;让…

网络安全 | 苹果承认 GPU 安全漏洞存在,iPhone 12、M2 MacBook Air 等受影响

1 月 17 日消息&#xff0c;苹果公司确认了近期出现的有关 Apple GPU 存在安全漏洞的报告&#xff0c;并承认 iPhone 12 和 M2 MacBook Air 受影响。 该漏洞可能使攻击者窃取由芯片处理的数据&#xff0c;包括与 ChatGPT 的对话内容等隐私信息。 安全研究人员发现&#xff0c;…

策略模式在工作中的运用

前言 在不同的场景下&#xff0c;执行不同的业务逻辑&#xff0c;在日常工作中是很寻常的事情。比如&#xff0c;订阅系统。在收到阿里云的回调事件、与收到AWS的回调事件&#xff0c;无论是收到的参数&#xff0c;还是执行的逻辑都可能是不同的。为了避免&#xff0c;每次新增…

零售的数字化转型,利用AWS云服务资源如何操作?

国内市场趋于饱满&#xff0c;各行各业的发展接近瓶颈&#xff0c;就连零售行业都竞争激烈&#xff0c;随处可见的零售小店也预示着需要投入大量的人力&#xff0c;而且由于消费者的行为和预期已经发生了根本性变化&#xff0c;这迫使零售商不得不加速整个价值链的数字化转型&a…