【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
相关文章：
【01】mapbox js api加载arcgis切片服务
需求： 第三方的mapbox js api加载arcgis切片服务，同时叠加在天地图上，天地图坐标系web墨卡托。 效果图： 形如这种地址去加载http://zjq2022.gis.com:8080/demo/loadmapboxtdt.html 思路： 需要制作一个和天地图比例…...
图像分割实战-系列教程15：deeplabV3+ VOC分割实战3-------网络结构1
🍁🍁🍁图像分割实战-系列教程 总目录 有任何问题欢迎在下面留言 本篇文章的代码运行界面均在Pycharm中进行 本篇文章配套的代码资源已经上传 deeplab系列算法概述 deeplabV3 VOC分割实战1 deeplabV3 VOC分割实战2 deeplabV3 VOC分割实战3 dee…...
【Docker】安装nacos以及实现负载均衡
🥳🥳Welcome 的Huihuis Code World ! !🥳🥳 接下来看看由辉辉所写的关于Docker的相关操作吧 目录 🥳🥳Welcome 的Huihuis Code World ! !🥳🥳 前言 一.nacos单个部署 1.镜像拉取 …...
如何用数据赋能社媒营销决策？
在数字化时代，越来越多的商家开始意识到数据分析对于改善经营的重要性。 传统决策更多依赖过往经验、商业直觉、他人的思路模板等方法，或者依靠描述性统计、简单的数据分析。在数字时代，则通过精细化数据分析，做出更明智的营销决策…...
初识k8s(概述、原理、安装)
文章目录 概述由来主要功能 K8S架构架构图组件说明ClusterMasterNodekubectl 组件处理流程 K8S概念组成PodPod控制器ReplicationController（副本控制器）ReplicaSet （副本集）DeploymentStatefulSet （有状态副本集&#…...
【Java】Maven的基本使用
Maven的基本使用 Maven常用命令 complie：编译clean：清理test：测试package：打包install：安装 mvn complie mvn clean mvn test mvn package mvn installMaven生命周期 IDEA配置Maven Maven坐标 什么是坐标？…...
【RT-DETR有效改进】遥感旋转网络 | LSKNet动态的空间感受野网络（轻量又提点）
前言 大家好，我是Snu77，这里是RT-DETR有效涨点专栏。 本专栏的内容为根据ultralytics版本的RT-DETR进行改进，内容持续更新，每周更新文章数量3-10篇。 专栏以ResNet18、ResNet50为基础修改版本，同时修改内容也支持Re…...
【进阶之路】如何提升 Java 编程内力？
如何提升 Java 编程内力？ 可能很多初学者在学完 SpringBoot 之后，做了 1-2 个项目之后，不知道该去学习什么了，其实这时候需要去学习的东西还有很多，接下来我会列举一下主要需要从哪些方面来对 Java 编程深入学习&#…...
Git一台电脑 配置多个账号
Git一台电脑 配置多个账号 Git一台电脑 配置多个账号 常用的Git版本管理有 gitee github gitlab codeup ，每个都有独立账号，经常需要在一个电脑上向多个代码仓提交后者更新代码，本文以ssh 方式为例配置 1 对应账号 公私钥生成 建议&#…...
2024年华为OD机试真题-素数之积-Java-OD统一考试（C卷）
题目描述： RSA加密算法在网络安全世界中无处不在，它利用了极大整数因数分解的困难度，数据越大，安全系数越高，给定一个32位正整数，请对其进行因数分解，找出是哪两个素数的乘积。 输入描述： 一个正整数num 0 < num <= 2147483647 输出描述： 如果成功找到，以单个空…...
汤姆·齐格弗里德《纳什均衡与博弈论》笔记（2）
第三章 纳什均衡——博弈论的基础 冯诺伊曼没有解决的问题 博弈论在其建立初始也显现出了严重的局限性。冯诺伊曼解决了二人零和博弈，但对多人博弈问题仍无法解决。如果只是鲁宾逊克鲁索和星期五玩游戏，博弈论可以很好地被应用，但它无法精确…...
QT上位机开发（动态数据采集与监控）
【 声明：版权所有，欢迎转载，请勿用于商业用途。 联系信箱：feixiaoxing @163.com】 上位机开发中，有一种类型的应用软件很特殊，它几乎没有什么交互操作，主要的工作就是检测和显示。如果说在此基础上有什么扩展的话，可能就是安全监控和报警。所以，这个上位机软件…...
vue2 -- 截图工具html2canvas
文章目录 🍉需求描述🍉基础功能实现🍉下载另存为本地图片功能🍉需求描述 可以将网页中的指定元素或整个页面截取为图片，以便保存或分享。 🍉基础功能实现 在 Vue 中使用 html2canvas 实现 1：安装 html2canvas 库。你可以使用 npm 安装，命令如下： npm install …...
笔记-孙子兵法-第三篇-谋攻（1）-不战而屈人之兵，上兵伐谋，韩信之死
笔记-From 《华杉讲透孙子兵法》和《兵以诈立，我读孙子》 第三篇-谋攻（1）不战而屈人之兵 《孙子兵法》第一篇讲计，第二篇讲野战，第三篇就讲攻城。 《孙子》尚谋，认为最好是“不战而屈人之兵”࿰…...
kafka参数配置参考和优化建议 —— 筑梦之路
对于Kafka的优化，可以从以下几个方面进行思考和优化： 硬件优化：使用高性能的硬件设备，包括高速磁盘、大内存和高性能网络设备，以提高Kafka集群的整体性能。 配置优化：调整Kafka的配置参数，包括…...
如何本地搭建Splunk Enterprise数据平台并实现任意浏览器公网访问
文章目录 前言1. 搭建Splunk Enterprise2. windows 安装 cpolar3. 创建Splunk Enterprise公网访问地址4. 远程访问Splunk Enterprise服务5. 固定远程地址 前言 本文主要介绍如何简单几步，结合cpolar内网穿透工具实现随时随地在任意浏览器，远程访问在本地…...
FlinkAPI开发之状态管理
案例用到的测试数据请参考文章： Flink自定义Source模拟数据流 原文链接：https://blog.csdn.net/m0_52606060/article/details/135436048 Flink中的状态 概述 有状态的算子 状态的分类 托管状态（Managed State）和原始状态&…...
initdb: command not found【PostgreSQL】
如果您遇到 “initdb: command not found” 错误，说明 initdb 命令未找到，该命令用于初始化新的 PostgreSQL 数据库群集。这通常是因为 PostgreSQL 相关的工具未正确安装或者安装路径不在系统的 PATH 变量中。 以下是解决这个问题的一些建议：…...
QT第六天
要求：使用QT绘图，完成仪表盘绘制，如下图。 素材 运行效果： 代码： widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QPainter> #include <QPen>QT_BEGIN_NAMESPACE name…...
linux 安装 grafana
Ubuntu 和 Debian(64 位)SHA256： e551434e9e3e585633f7b56a33d8f49cda138d92ad69c2c29dcec2c3ede84607 sudo apt-get install -y adduser libfontconfig1 muslwget https://dl.grafana.com/enterprise/release/grafana-enterprise_10.2.3_amd64.debsudo dpkg -i gra…...
夺回社交主动权：iBeebo如何让微博回归纯粹体验
夺回社交主动权：iBeebo如何让微博回归纯粹体验 【免费下载链接】iBeebo 第三方新浪微博客户端 项目地址: https://gitcode.com/gh_mirrors/ib/iBeebo 你是否经历过这样的时刻？通勤路上想快速刷几条微博，却被开屏广告耽误了上车时间&am…...
SmartBMS：革新性开源智能电池管理系统技术解析
SmartBMS：革新性开源智能电池管理系统技术解析 【免费下载链接】SmartBMS Open source Smart Battery Management System 项目地址: https://gitcode.com/gh_mirrors/smar/SmartBMS 破解锂电池管理行业痛点：从安全隐患到性能瓶颈 在新能源技术飞…...
硬核盘点｜2026年好用AI论文写作工具榜单，毕业论文免费写还合规
2026 年实测 10 款主流 AI 论文工具，千笔AI以全流程覆盖 语义级降重 免费查重领跑综合榜；ThouPen 稳坐留学生毕业全流程工具头把交椅；免费工具中DeepSeek Scholar、豆包学术版表现亮眼，30 分钟即可生成万字高质量初稿࿰…...
手把手教你用丹青识画：智能影像雅鉴系统保姆级入门教程
手把手教你用丹青识画：智能影像雅鉴系统保姆级入门教程 1. 认识丹青识画系统 "以科技之眼，点画意之睛。"这句话完美诠释了丹青识画系统的核心理念。这是一款将人工智能技术与东方美学相结合的创新工具，能够自动分析图像内容并生成…...
Wan2.2-I2V-A14B部署教程：系统盘50GB+数据盘40GB最小化配置实操
Wan2.2-I2V-A14B部署教程：系统盘50GB数据盘40GB最小化配置实操 1. 镜像概述与核心特性 Wan2.2-I2V-A14B是一款专为文生视频任务优化的私有部署镜像，特别针对RTX 4090D 24GB显存显卡进行了深度优化。这个镜像最大的特点是开箱即用，内置了完整…...
ChatBI 开源产品实战解析：从语义层到Agent，如何选择你的AI数据助手？
1. 为什么企业需要AI数据助手？ 想象一下这个场景：市场部的小王需要统计上季度各区域的销售数据，他对着Excel表格里密密麻麻的数字发愁，不得不找IT部门帮忙写SQL查询。三天后拿到数据时，业务窗口期已经错过——这是很多…...
不止是收发数据：挖掘常兴串口调试助手V5.01的5个隐藏效率神器（自动回复/进制转换/批量发送）
挖掘常兴串口调试助手V5.01的5个隐藏效率神器 在嵌入式开发领域，串口调试工具早已超越了简单的数据收发功能。常兴串口调试助手V5.01作为一款专业级工具，集成了多项提升开发效率的实用功能。本文将深入解析五个常被忽视但极具价值的隐藏功能，…...
中国跨境电商大会代理授权机制与决策影响分析
对于众多寻求通过“中国跨境电商大会”精准撬动海外市场的企业而言，面对琳琅满目的代理商选择，决策过程本身就是一次关于市场洞察、风险评估与资源匹配的深度考验。一个优质的代理商，不仅是展位的“售票员”，更是企业出海战略的“…...
Spring PetClinic实战解析：从单体应用到云原生部署的5大架构亮点
Spring PetClinic实战解析：从单体应用到云原生部署的5大架构亮点 【免费下载链接】spring-petclinic A sample Spring-based application 项目地址: https://gitcode.com/gh_mirrors/sp/spring-petclinic 你是否遇到过这样的困境：在学习Spring框架…...
Qwen3.5-4B-Claude-Opus垂直场景：工业IoT设备告警根因的多条件推演
Qwen3.5-4B-Claude-Opus垂直场景：工业IoT设备告警根因的多条件推演 1. 工业IoT告警分析的挑战与机遇 在现代工业物联网环境中，设备告警分析面临着前所未有的复杂性。一个典型的制造工厂可能同时运行着数千台联网设备，每天产生数以万计的告警…...