arcgis javascript api4.x以basetilelayer方式加载arcgis发布的栅格切片服务

需求:

以arcgis js api的basetilelayer加载arcgis发布的栅格切片服务

效果图:

其中和tileinfo和lods,这样获取:

https://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer/?f=pjson

urltemplate:

这样获取

https://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer/WMTS/1.0.0/WMTSCapabilities.xml

 

先确保以一张为例有结果返回

https://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer/WMTS/tile/1.0.0/ChinaOnlineCommunity/default/default028mm/14/6730/13396.png

代码:

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><metaname="viewport"content="initial-scale=1, maximum-scale=1, user-scalable=no"/><title>以basetilelayer加载切片服务</title><style>html,body,#viewDiv {padding: 0;margin: 0;height: 100%;width: 100%;}</style><linkrel="stylesheet"href="https://js.arcgisonline.cn/4.25/esri/css/main.css"/><script src="https://js.arcgisonline.cn/4.25/init.js"></script><script>require(["esri/Map","esri/views/MapView","esri/layers/BaseTileLayer","esri/layers/support/TileInfo","esri/geometry/SpatialReference","esri/geometry/Extent","esri/config","esri/request","esri/layers/FeatureLayer",], function (Map,MapView,BaseTileLayer,TileInfo,SpatialReference,Extent,esriConfig,esriRequest,FeatureLayer) {var tileInfo = new TileInfo({rows: 256,cols: 256,dpi: 96,format: "PNG",compressionQuality: 0,origin: {x: -2.0037508342787e7,y: 2.0037508342787e7,},spatialReference: {wkid: 102100,latestWkid: 3857,},lods: [{level: 0,resolution: 156543.03392800014,scale: 5.91657527591555e8,},{level: 1,resolution: 78271.51696399994,scale: 2.95828763795777e8,},{level: 2,resolution: 39135.75848200009,scale: 1.47914381897889e8,},{level: 3,resolution: 19567.87924099992,scale: 7.3957190948944e7,},{level: 4,resolution: 9783.93962049996,scale: 3.6978595474472e7,},{level: 5,resolution: 4891.96981024998,scale: 1.8489297737236e7,},{level: 6,resolution: 2445.98490512499,scale: 9244648.868618,},{level: 7,resolution: 1222.992452562495,scale: 4622324.434309,},{level: 8,resolution: 611.4962262813797,scale: 2311162.217155,},{level: 9,resolution: 305.74811314055756,scale: 1155581.108577,},{level: 10,resolution: 152.87405657041106,scale: 577790.554289,},{level: 11,resolution: 76.43702828507324,scale: 288895.277144,},{level: 12,resolution: 38.21851414253662,scale: 144447.638572,},{level: 13,resolution: 19.10925707126831,scale: 72223.819286,},{level: 14,resolution: 9.554628535634155,scale: 36111.909643,},{level: 15,resolution: 4.77731426794937,scale: 18055.954822,},{level: 16,resolution: 2.388657133974685,scale: 9027.977411,},{level: 17,resolution: 1.1943285668550503,scale: 4513.988705,},{level: 18,resolution: 0.5971642835598172,scale: 2256.994353,},{level: 19,resolution: 0.29858214164761665,scale: 1128.497176,},],});var tileExtent = new Extent({xmin: -2.0037507067161843e7,ymin: -3.0240971958386254e7,xmax: 2.0037507067161843e7,ymax: 3.0240971958386205e7,spatialReference: {wkid: 102100,},});var MyCustomTileLayer = BaseTileLayer.createSubclass({properties: {urlTemplate: null,},getTileUrl: function (level, row, col) {return this.urlTemplate.replace("{z}", level).replace("{x}", col).replace("{y}", row);},fetchTile: function (level, row, col, options) {var url = this.getTileUrl(level, row, col);return esriRequest(url, {responseType: "image",allowImageDataAccess: true,}).then(function (response) {var image = response.data;var width = this.tileInfo.size[0];var height = this.tileInfo.size[0];var canvas = document.createElement("canvas");var context = canvas.getContext("2d");canvas.width = width;canvas.height = height;if (this.tint) {context.fillStyle = this.tint.toCss();context.fillRect(0, 0, width, height);context.globalCompositeOperation = "difference";}context.drawImage(image, 0, 0, width, height);return canvas;}.bind(this));},});var mylayer = new MyCustomTileLayer({urlTemplate:"https://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer/WMTS/tile/1.0.0/ChinaOnlineCommunity/default/default028mm/{z}/{y}/{x}.png",tileInfo: tileInfo,});var map = new Map({spatialReference: new SpatialReference({ wkid: 3857 }),basemap: {baseLayers: [mylayer],},});var view = new MapView({container: "viewDiv",map: map,extent: tileExtent,         spatialReference: new SpatialReference({ wkid: 3857 }),});});</script></head><body><div id="viewDiv"></div></body>
</html>

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

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

相关文章

TortoiseGit 2.15.0.0 安装与配置(图文详细教程)

TortoiseGit的安装与配置 TortoiseGit是Tortoise为Git提供的版本可视化工具&#xff0c;简化了记忆Git命令行的过程&#xff0c;将命令行可视化。 确保自己电脑中已经下载好了git 官网下载TortoiseGit Download – TortoiseGit – Windows Shell Interface to Git 选择64-bi…

电商平台api接口对接须知

随着互联网的发展和普及&#xff0c;电商平台已成为人们日常生活中不可或缺的一部分。而为了保证电商平台的正常运行&#xff0c;平台与开发者之间需要进行数据交互&#xff0c;这便涉及到了电商平台API接口对接的问题。本文将详细介绍电商平台API接口对接的须知事项。 一、了…

【Linux】如何检查Linux用户是否具有sudo权限

问题背景或前提知识 在Linux系统中&#xff0c;sudo&#xff08;superuser do&#xff09;是一个重要的命令&#xff0c;它允许普通用户以系统管理员的身份执行命令。了解用户是否拥有sudo权限对于系统管理和安全性来说是非常重要的。 技术名词解释 sudo&#xff1a;一种程序…

springboot摄影跟拍预定管理系统源码和论文

首先,论文一开始便是清楚的论述了系统的研究内容。其次,剖析系统需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确系统的需求。然后在明白了系统的需求基础上需要进一步地设计系统,主要包罗软件架构模式、整体功能模块、数据库设计。本项…

ZZULIOJ 1106: 回文数(函数专题)

题目描述 一个正整数&#xff0c;如果从左向 右读&#xff08;称之为正序数&#xff09;和从右向左读&#xff08;称之为倒序数&#xff09;是一样的&#xff0c;这样的数就叫回文数。输入两个整数m和n&#xff08;m<n)&#xff0c;输出区间[m&#xff0c;n]之间的回文数。…

openssl3.2 - 官方demo学习 - sconnect.c

文章目录 openssl3.2 - 官方demo学习 - sconnect.c概述笔记END openssl3.2 - 官方demo学习 - sconnect.c 概述 TLS客户端 - 使用根证书, 非阻塞, 向服务器要东西. 笔记 开始一个新demo学习时, 要从头配置包含路径, 麻烦. 直接拷贝上一个实现工程, 换掉实现.c方便一些. 换的…

中国泡菜市场供需与投资预测研究报告(2024版)

内容简介&#xff1a; 泡菜主要是靠乳酸菌的发酵生成大量乳酸而不是靠盐的渗透压来抑制腐败微生物的。泡菜使用低浓度的盐水&#xff0c;或用少量食盐来腌渍各种鲜嫩的蔬菜&#xff0c;再经乳酸菌发酵&#xff0c;制成一种带酸味的腌制品&#xff0c;只要乳酸含量达到一定的浓…

LeetCode 2645.构造有效字符串的最少插入数:O(n) + O(1)

【LetMeFly】2645.构造有效字符串的最少插入数&#xff1a;O(n) O(1) 力扣题目链接&#xff1a;https://leetcode.cn/problems/minimum-additions-to-make-valid-string/ 给你一个字符串 word &#xff0c;你可以向其中任何位置插入 "a"、"b" 或 "…

设计模式之多线程分工模式---Worker Thread模式

系列文章目录 设计模式之避免共享的设计模式Immutability&#xff08;不变性&#xff09;模式 设计模式之并发特定场景下的设计模式 Two-phase Termination&#xff08;两阶段终止&#xff09;模式 设计模式之避免共享的设计模式Copy-on-Write模式 设计模式之避免共享的设计模…

Javascript 地狱级的if else / switch case该如何优化?

目录 问题 一、7大策略优化 1.单个if语句优化 2.if/else语句优化 3.多条件判断 4.多个 if else 嵌套优化策略 问题场景 如何优化 1.使用卫语句 2. try catch优化 3. 可选链 optional chaining 5.Map优化 场景实战 6.策略模式优化 7.复杂二维数组策略模式 …

CycleGAN(Cycle-Consistent Generative Adversarial Network)

CycleGAN&#xff08;Cycle-Consistent Generative Adversarial Network&#xff09;是一种用于图像到图像转换的深度学习模型。其主要目标是学习两个域之间的映射&#xff0c;例如将马的图像转换为斑马的图像&#xff0c;而无需配对的训练数据。以下是CycleGAN图像到图像转换的…

简单易用的快速原型软件终于被我找到了!

在产品开发过程中&#xff0c;原型设计是一个非常重要的环节&#xff0c;它不仅有助于团队之间的合作和沟通&#xff0c;而且是产品是否符合用户体验的关键。在本文中&#xff0c;我们将推荐一些有用的原型设计工具 即时设计 即时设计是一种在线原型设计工具。你可以用它在线…

UITextField设置

UITextField设置 //初始化textfield并设置位置及大小UITextField *text [[UITextField alloc]initWithFrame:CGRectMake(20, 20, 130, 30)];//设置边框样式&#xff0c;只有设置了才会显示边框样式 text.borderStyle UITextBorderStyleRoundedRect;typedef enum {UITextBord…

基于云平台技术的XCALL的浅谈

基于云平台技术的XCALL&#xff08;eXpandable Call&#xff09;创新主要体现在以下几个方面&#xff1a; 可扩展性&#xff1a;XCALL利用云平台的可扩展性&#xff0c;能够处理大量并发通话&#xff0c;满足各种规模的业务需求。随着用户数量的增长&#xff0c;云平台可以动态…

RPA与通知机器人的完美结合

写在前面 在现代快节奏的工作环境中&#xff0c;我们经常会面临多个任务同时进行的情况&#xff0c;你还在为时间不够用、忙碌而惆怅吗&#xff1f;你还在为时刻盯着电脑流程而烦恼吗&#xff1f;你还在为及时收不到自己的自动化任务进度而焦躁吗&#xff1f;别担心&#xff0…

目标检测数据集 - 行人检测数据集下载「包含VOC、COCO、YOLO三种格式」

数据集介绍&#xff1a;行人检测数据集&#xff0c;真实场景高质量图片数据&#xff0c;涉及场景丰富&#xff0c;比如校园行人、街景行人、道路行人、遮挡行人、严重遮挡行人数据&#xff1b;适用实际项目应用&#xff1a;公共场所监控场景下行人检测项目&#xff0c;以及作为…

中国关心下一代工作委员会健康体育发展中心美育舞蹈考官一王雪

王雪—— 《中国关心下一代工作委员会》健康体育发展中心、美育舞蹈考官、评委 北京舞蹈学院舞蹈编导 朝阳区小红门地区文化艺术-领头人 中国舞舞蹈家协会会员 2019年7月7日中国观网第六届京津冀淑女 2021年辅导学生登上央视春晚 《听我说》 2023年4月22日带学生参加万人…

Vue 3,element table表格动态添加

el-table实现表格动态新增/插入/删除表格行&#xff0c;可编辑单元格 效果图 代码实现 <template><el-table :data"formDate.scoreList4" style"width:100%;height: 96%;" stripe show-summary:summary-method"calculateSummary":he…

【2023年收入最高的10种编程语言】

在过去的一年时间里&#xff08;2022 年 10 月 1 日到 2023 年 10 月 1 日&#xff09; &#xff0c;DevJobsScanner 分析了来自世界各地的超过 1000 万份开发工作机会&#xff0c;以了解市场以及最热门、薪酬最高的编程语言。值得注意的是&#xff0c;本项研究只关注了来自美国…

面试 React 框架八股文十问十答第九期

面试 React 框架八股文十问十答第九期 作者&#xff1a;程序员小白条&#xff0c;个人博客 相信看了本文后&#xff0c;对你的面试是有一定帮助的&#xff01;关注专栏后就能收到持续更新&#xff01; ⭐点赞⭐收藏⭐不迷路&#xff01;⭐ 1&#xff09;Redux 中异步的请求怎…