当前位置: 首页 > news >正文

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

需求:

第三方的mapbox js api加载arcgis切片服务,同时叠加在mapbox自带底图上

效果图:

形如这种地址去加载:

http://zjq2022.gis.com:8080/demo/loadmapbox.html

arcgis切片服务参考链接思路:【01】mapbox js api加载arcgis切片服务-CSDN博客

加载代码:

<!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>mapboxgl.accessToken ="pk.eyJ1IjoibHh0aWFudGlhbiIsImEiOiJjaXd2ZjlkYnQwMTZvMnRtYWZnM2lpbHFvIn0.ef3rFZTr9psmLWahrqap2A";var map = new mapboxgl.Map({container: "map", // container idstyle: "mapbox://sprites/mapbox/streets-v8",center: [114.32021, 30.578322], // starting positionzoom: 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>

相关文章:

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

需求&#xff1a; 第三方的mapbox js api加载arcgis切片服务&#xff0c;同时叠加在mapbox自带底图上 效果图&#xff1a; 形如这种地址去加载&#xff1a; http://zjq2022.gis.com:8080/demo/loadmapbox.html arcgis切片服务参考链接思路&#xff1a;【01】mapbox js api加…...

Vue四个阶段,八个钩子函数

- 创造阶段&#xff1a;创建Vue实例和初始化数据事件&#xff0c;数据代理&#xff0c;监测watch - beforeCreate&#xff0c;只是创建实例&#xff0c;不能this.$el,this.msg,this.方法名&#xff08;&#xff09; - created&#xff0c;数据代理了&#xff0c;能v…...

rancher和k8s接口地址,Kubernetes监控体系,cAdvisor和kube-state-metrics 与 metrics-server

为了能够提前发现kubernetes集群的问题以及方便快捷的查询容器的各类参数&#xff0c;比如&#xff0c;某个pod的内存使用异常高企 等等这样的异常状态&#xff08;虽然kubernetes有自动重启或者驱逐等等保护措施&#xff0c;但万一没有配置或者失效了呢&#xff09;&#xff0…...

idea编译打包前端vue项目

网上download了一个前端vue项目 第一次接触前端记录一下编译打包遇到的问题 1、idea前端项目打包一般是依赖 <groupId>org.codehaus.mojo</groupId> <artifactId>exec-maven-plugin</artifactId> <version>3.0…...

Unity中URP下的 额外灯 逐像素光 和 逐顶点光

文章目录 前言一、额外灯 的 逐像素灯 和 逐顶点灯1、存在额外灯的逐像素灯2、存在额外灯的逐顶点灯 二、测试这两个宏的作用1、额外灯的逐像素灯2、额外灯的逐顶点灯 前言 在之前的文章中&#xff0c;我们了解了 主光相关的反射计算。 Unity中URP下的SimpleLit的 Lambert漫反…...

《WebKit 技术内幕》学习之五(2): HTML解释器和DOM 模型

2.HTML 解释器 2.1 解释过程 HTML 解释器的工作就是将网络或者本地磁盘获取的 HTML 网页和资源从字节流解释成 DOM 树结构。 这一过程中&#xff0c;WebKit 内部对网页内容在各个阶段的结构表示。 WebKit 中这一过程如下&#xff1a;首先是字节流&#xff0c;经过解码之…...

Redis实战之-分布式锁-redission

一、分布式锁-redission功能介绍 基于setnx实现的分布式锁存在下面的问题&#xff1a; 重入问题&#xff1a;重入问题是指 获得锁的线程可以再次进入到相同的锁的代码块中&#xff0c;可重入锁的意义在于防止死锁&#xff0c;比如HashTable这样的代码中&#xff0c;他的方法都…...

离线数据仓库-关于增量和全量

数据同步策略 数据仓库同步策略概述一、数据的全量同步二、数据的增量同步三、数据同步策略的选择 数据仓库同步策略概述 应用系统所产生的业务数据是数据仓库的重要数据来源&#xff0c;我们需要每日定时从业务数据库中抽取数据&#xff0c;传输到数据仓库中&#xff0c;之后…...

09 STM32 - PWM

9.1 PWM简介 脉冲宽度调制(Pulse Width Modulation,简称PWM)&#xff0c;是利用微处理器的数字输出来对模拟电路进行控制的一种非常有效的技术。简单一点&#xff0c;就是对脉冲宽度的控制。 9.2 PWM波原理 如下图所示&#xff0c;使用定时器定时&#xff0c;从0开始&#x…...

三勾点餐系统java+springboot+vue3,开源系统小程序点餐系统

项目简述 前台实现&#xff1a;用户浏览菜单、菜品分类筛选、查看菜品详情、菜品多属性、菜品加料、添加购物车、购物车结算、个人订单查询、门店自提、外卖配送、菜品打包等。 后台实现&#xff1a;菜品管理、订单管理、会员管理、系统管理、权限管理等。 项目介绍 三勾点…...

《WebKit 技术内幕》学习之五(1): HTML解释器和DOM 模型

第五章 HTML 解释器和 DOM 模型 1.DOM 模型 1.1 DOM标准 DOM &#xff08;Document Object Model&#xff09;的全称是文档对象模型&#xff0c;它可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。这里的文档可以是 HTML 文档、XML 文档或者 XHTML 文档。D…...

小程序学习-21

目前小程序分包大小有以下限制&#xff1a; 整个小程序所有分包大小不超过 20M单个分包/主包大小不能超过 2M 独立分包&#xff1a;"independent": true...

Spring第七天(AOP)

简介 AOP(Aspect Oriented Programing)面向切面编程&#xff0c;一种编程范式&#xff0c;指导开发者如何组织程序结构 作用 在不惊动原始设计的基础上为其进行功能增强 Spring理念&#xff1a;无入侵式/无侵入式 基本概念 连接点(JoinPoint) : 程序执行过程中的任意位置&a…...

【0247】PG内核checkpoint实现机制分析(2)

文章目录 1. 前言2. checkpoint2.1 checkpoint工作机制2.2 项目实战3. 故障恢复(recovery)3.1 故障模拟3.2 规章恢复相关文章:...

单例模式分享

Java的单例模式详解与案例解析 单例模式是一种常见的设计模式&#xff0c;它确保一个类只有一个实例&#xff0c;并提供一个全局访问点。在Java中&#xff0c;实现单例模式有多种方式&#xff0c;我们将深入讨论其中的几种&#xff0c;并通过丰富的案例演示它们的用法。 1. 饿…...

Linux查找日志常用命令

tail tail命令常使用选项-f -f, --follow[{name|descriptor}]output appended data as the file grows;an absent option argument means descriptor例如&#xff1a; tail -1000f sys.log按回车键增加空白行&#xff0c;按Ctrl C 结束 vi / vim vi 文件名 如&#xff1a;…...

中国国际光伏展

中国国际光伏展是一个专注于光伏技术和行业的展览会。该展览会每年在中国举办&#xff0c;吸引了来自全球各地的光伏企业、专业人士和观众参加。 中国国际光伏展展览的主要内容包括光伏组件、光伏电池、光伏逆变器、光伏并网系统、光伏材料、光伏维护和管理等。展览会同时举办一…...

openai assistants api接入微信机器人,实现类GPTs功能

chatgpt网址:https://chat.xutongbao.top 比普通gpt多了代码解释器功能&#xff0c;和上传训练数据文件的功能&#xff0c;这两个功能就是GPTs拥有的&#xff0c;而普通gpt没有拥有的...

性能优化-OpenCL kernel 开发

「发表于知乎专栏《移动端算法优化》」 本文主要介绍OpenCL的 Kernel&#xff0c;包括代码的实例以及使用注意的详解。 &#x1f3ac;个人简介&#xff1a;一个全栈工程师的升级之路&#xff01; &#x1f4cb;个人专栏&#xff1a;高性能&#xff08;HPC&#xff09;开发基础教…...

systick定时器

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 例如&#xff1a;…...

美国不断自我革新的历史,为这个国家面对充满巨大机遇却又充满不确定性的未来提供了引人深思的经验教训

https://www.mckinsey.com/mgi/our-research/At-250-sustaining-Americas-competitive-edge 美国不断自我革新的历史&#xff0c;为这个国家面对充满巨大机遇却又充满不确定性的未来提供了引人深思的经验教训 这一切始于一场惊天动地的反抗行动。 1776年7月&#xff0c;来自13…...

InsForge:基于Python的Instagram内容自动化创作与发布工具全解析

1. 项目概述与核心价值最近在折腾一个挺有意思的开源项目&#xff0c;叫InsForge。这名字听起来有点“工业锻造”的味道&#xff0c;实际上&#xff0c;它是一个专注于Instagram内容创作与自动化的工具集。简单来说&#xff0c;它试图帮你解决在Instagram上创作、发布、管理内容…...

保姆级教程:在CentOS 7/8服务器上部署DrissionPage爬虫(含Chrome无头模式配置)

CentOS服务器上DrissionPage爬虫的工业级部署指南 1. 环境准备与Chrome浏览器安装 在CentOS服务器上部署基于DrissionPage的爬虫系统&#xff0c;首要任务是构建稳定可靠的浏览器运行环境。与个人开发环境不同&#xff0c;生产服务器通常需要面对无图形界面、资源受限等特殊场景…...

Kafka Connect集群部署踩坑实录:从单机到高可用的完整配置与监控方案

Kafka Connect生产级部署实战&#xff1a;高可用架构设计与监控体系构建 当数据管道成为企业核心基础设施时&#xff0c;Kafka Connect的稳定性直接关系到业务连续性。去年某电商大促期间&#xff0c;因单点故障导致数据同步延迟6小时的教训仍历历在目——这正是我们需要深入探…...

Kafka运维新选择:Offset Explorer(Kafka Tool)在Windows下的详细评测与实战技巧

Kafka运维新选择&#xff1a;Offset Explorer在Windows下的深度评测与高阶实战 当Kafka集群规模从几个节点扩展到数十甚至上百个Broker时&#xff0c;命令行工具kafka-topics.sh和kafka-console-consumer.sh开始显得力不从心。这时&#xff0c;一个得力的可视化工具就像黑暗中的…...

多模态AI实战:基于OpenGVLab/Ask-Anything构建视觉问答系统

1. 项目概述&#xff1a;当视觉大模型学会“看图说话”最近在折腾多模态AI应用&#xff0c;发现了一个挺有意思的开源项目&#xff0c;叫OpenGVLab/Ask-Anything。简单来说&#xff0c;它就像一个给AI装上了“眼睛”和“嘴巴”的系统&#xff0c;你给它一张图片或一段视频&…...

成本优化策略:降低云资源支出

成本优化策略&#xff1a;降低云资源支出 一、成本优化策略概述 1.1 成本优化策略的定义 成本优化策略是指通过各种技术和管理手段&#xff0c;降低云资源支出的策略和方法。它包括资源优化、成本监控、预算管理和采购策略等方面。 1.2 成本优化策略的价值 成本降低&#xff1a…...

Argo Workflows:Kubernetes原生工作流引擎从入门到生产实践

1. 项目概述&#xff1a;一个开源的容器化工作流引擎如果你在云原生、数据科学或者自动化运维领域摸爬滚打过一阵子&#xff0c;大概率听说过 Argo。它不是某个游戏里的角色&#xff0c;而是一个在 Kubernetes 生态中&#xff0c;用来编排和运行复杂工作流的强大引擎。简单来说…...

Deep Lake:AI数据湖与向量数据库一体化管理实践

1. 项目概述&#xff1a;当数据湖遇上深度学习如果你正在构建一个AI应用&#xff0c;无论是图像识别、自然语言处理还是多模态模型&#xff0c;数据管理绝对是你绕不开的“硬骨头”。数据分散在各个文件夹、云存储、数据库里&#xff0c;格式五花八门&#xff0c;加载速度慢&am…...

Arm Fast Models中VGIC架构与中断虚拟化解析

1. Arm Fast Models中的VGIC架构解析虚拟通用中断控制器(Virtual Generic Interrupt Controller, VGIC)是Armv7/v8架构虚拟化扩展的核心组件之一。在Fast Models仿真环境中&#xff0c;Iris组件通过精确建模实现了VGIC的完整功能&#xff0c;包括&#xff1a;物理中断与虚拟中断…...