【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切片服务
需求： 第三方的mapbox js api加载arcgis切片服务，同时叠加在mapbox自带底图上 效果图： 形如这种地址去加载： http://zjq2022.gis.com:8080/demo/loadmapbox.html arcgis切片服务参考链接思路：【01】mapbox js api加…...
Vue四个阶段，八个钩子函数
- 创造阶段：创建Vue实例和初始化数据事件，数据代理，监测watch - beforeCreate，只是创建实例，不能this.$el,this.msg,this.方法名（） - created，数据代理了，能v…...
rancher和k8s接口地址，Kubernetes监控体系，cAdvisor和kube-state-metrics 与 metrics-server
为了能够提前发现kubernetes集群的问题以及方便快捷的查询容器的各类参数，比如，某个pod的内存使用异常高企 等等这样的异常状态（虽然kubernetes有自动重启或者驱逐等等保护措施，但万一没有配置或者失效了呢）࿰…...
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、额外灯的逐顶点灯 前言 在之前的文章中，我们了解了 主光相关的反射计算。 Unity中URP下的SimpleLit的 Lambert漫反…...
《WebKit 技术内幕》学习之五（2）： HTML解释器和DOM 模型
2.HTML 解释器 2.1 解释过程 HTML 解释器的工作就是将网络或者本地磁盘获取的 HTML 网页和资源从字节流解释成 DOM 树结构。 这一过程中，WebKit 内部对网页内容在各个阶段的结构表示。 WebKit 中这一过程如下：首先是字节流，经过解码之…...
Redis实战之-分布式锁-redission
一、分布式锁-redission功能介绍 基于setnx实现的分布式锁存在下面的问题： 重入问题：重入问题是指 获得锁的线程可以再次进入到相同的锁的代码块中，可重入锁的意义在于防止死锁，比如HashTable这样的代码中，他的方法都…...
离线数据仓库-关于增量和全量
数据同步策略 数据仓库同步策略概述一、数据的全量同步二、数据的增量同步三、数据同步策略的选择 数据仓库同步策略概述 应用系统所产生的业务数据是数据仓库的重要数据来源，我们需要每日定时从业务数据库中抽取数据，传输到数据仓库中，之后…...
09 STM32 - PWM
9.1 PWM简介 脉冲宽度调制(Pulse Width Modulation,简称PWM)，是利用微处理器的数字输出来对模拟电路进行控制的一种非常有效的技术。简单一点，就是对脉冲宽度的控制。 9.2 PWM波原理 如下图所示，使用定时器定时，从0开始&#x…...
三勾点餐系统java+springboot+vue3，开源系统小程序点餐系统
项目简述 前台实现：用户浏览菜单、菜品分类筛选、查看菜品详情、菜品多属性、菜品加料、添加购物车、购物车结算、个人订单查询、门店自提、外卖配送、菜品打包等。 后台实现：菜品管理、订单管理、会员管理、系统管理、权限管理等。 项目介绍 三勾点…...
《WebKit 技术内幕》学习之五（1）： HTML解释器和DOM 模型
第五章 HTML 解释器和 DOM 模型 1.DOM 模型 1.1 DOM标准 DOM （Document Object Model）的全称是文档对象模型，它可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。这里的文档可以是 HTML 文档、XML 文档或者 XHTML 文档。D…...
小程序学习-21
目前小程序分包大小有以下限制： 整个小程序所有分包大小不超过 20M单个分包/主包大小不能超过 2M 独立分包："independent": true...
Spring第七天(AOP)
简介 AOP(Aspect Oriented Programing)面向切面编程，一种编程范式，指导开发者如何组织程序结构 作用 在不惊动原始设计的基础上为其进行功能增强 Spring理念：无入侵式/无侵入式 基本概念 连接点(JoinPoint) : 程序执行过程中的任意位置&a…...
【0247】PG内核checkpoint实现机制分析（2）
文章目录 1. 前言2. checkpoint2.1 checkpoint工作机制2.2 项目实战3. 故障恢复（recovery）3.1 故障模拟3.2 规章恢复相关文章：...
单例模式分享
Java的单例模式详解与案例解析 单例模式是一种常见的设计模式，它确保一个类只有一个实例，并提供一个全局访问点。在Java中，实现单例模式有多种方式，我们将深入讨论其中的几种，并通过丰富的案例演示它们的用法。 1. 饿…...
Linux查找日志常用命令
tail tail命令常使用选项-f -f, --follow[{name|descriptor}]output appended data as the file grows;an absent option argument means descriptor例如： tail -1000f sys.log按回车键增加空白行，按Ctrl C 结束 vi / vim vi 文件名 如：…...
中国国际光伏展
中国国际光伏展是一个专注于光伏技术和行业的展览会。该展览会每年在中国举办，吸引了来自全球各地的光伏企业、专业人士和观众参加。 中国国际光伏展展览的主要内容包括光伏组件、光伏电池、光伏逆变器、光伏并网系统、光伏材料、光伏维护和管理等。展览会同时举办一…...
openai assistants api接入微信机器人，实现类GPTs功能
chatgpt网址:https://chat.xutongbao.top 比普通gpt多了代码解释器功能，和上传训练数据文件的功能，这两个功能就是GPTs拥有的，而普通gpt没有拥有的...
性能优化-OpenCL kernel 开发
「发表于知乎专栏《移动端算法优化》」 本文主要介绍OpenCL的 Kernel，包括代码的实例以及使用注意的详解。 🎬个人简介：一个全栈工程师的升级之路！ 📋个人专栏：高性能（HPC）开发基础教…...
systick定时器
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言一、pandas是什么？二、使用步骤 1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：…...
变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析
一、变量声明设计：let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性，这种设计体现了语言的核心哲学。以下是深度解析： 1.1 设计理念剖析 安全优先原则：默认不可变强制开发者明确声明意图 let x 5; …...
深度学习在微纳光子学中的应用
深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向： 逆向设计 通过神经网络快速预测微纳结构的光学响应，替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...
国防科技大学计算机基础课程笔记02信息编码
1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制，因此这个了16进制的数据既可以翻译成为这个机器码，也可以翻译成为这个国标码，所以这个时候很容易会出现这个歧义的情况； 因此，我们的这个国…...
智慧工地云平台源码，基于微服务架构+Java+Spring Cloud +UniApp +MySql
智慧工地管理云平台系统，智慧工地全套源码，java版智慧工地源码，支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求，提供“平台网络终端”的整体解决方案，提供劳务管理、视频管理、智能监测、绿色施工、安全管…...
ESP32读取DHT11温湿度数据
芯片：ESP32 环境：Arduino 一、安装DHT11传感器库 红框的库，别安装错了 二、代码 注意，DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...
Golang dig框架与GraphQL的完美结合
将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用，可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器，能够帮助开发者更好地管理复杂的依赖关系，而 GraphQL 则是一种用于 API 的查询语言，能够提…...
Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具
文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...
镜像里切换为普通用户
如果你登录远程虚拟机默认就是 root 用户，但你不希望用 root 权限运行 ns-3（这是对的，ns3 工具会拒绝 root），你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案：创建非 roo…...
如何理解 IP 数据报中的 TTL？
目录 前言理解 前言 面试灵魂一问：说说对 IP 数据报中 TTL 的理解？我们都知道，IP 数据报由首部和数据两部分组成，首部又分为两部分：固定部分和可变部分，共占 20 字节，而即将讨论的 TTL 就位于首…...
分布式增量爬虫实现方案
之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面，避免重复抓取，以节省资源和时间。 在分布式环境下，增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路：将增量判…...