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

2024-01-14 17:36

本文主要是介绍arcgis javascript api4.x加载天地图web墨卡托(wkid:3857)坐标系,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

效果:

示例代码:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>加载天地图</title><linkrel="stylesheet"href="https://js.arcgis.com/4.27/esri/themes/light/main.css"/><script src="https://js.arcgis.com/4.27/"></script><style>html,body,#viewDiv {padding: 0;margin: 0;height: 100%;width: 100%;}</style><script>require(["esri/Map","esri/views/MapView","esri/layers/WebTileLayer","esri/layers/support/TileInfo","esri/Basemap",], function (Map, MapView, WebTileLayer, TileInfo,Basemap) {let tileInfo = new TileInfo({rows: 256,cols: 256,dpi: 96,origin: {"x": -20037508.342787,"y": 20037508.342787},spatialReference: {"wkid": 102100,"latestWkid": 3857},lods: [{"level": 0,"resolution": 156543.03392800014,"scale": 591657527.591555},{"level": 1,"resolution": 78271.51696399994,"scale": 295828763.795777},{"level": 2,"resolution": 39135.75848200009,"scale": 147914381.897889},{"level": 3,"resolution": 19567.87924099992,"scale": 73957190.948944},{"level": 4,"resolution": 9783.93962049996,"scale": 36978595.474472},{"level": 5,"resolution": 4891.96981024998,"scale": 18489297.737236},{"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}]});/*天地图-矢量(球面墨卡托)*/var vec_tiandituLayer = new WebTileLayer("http://{subDomain}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=vec&STYLE=default&FORMAT=tiles&TILEMATRIXSET=w&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=ac0daf56728bbb77d9514ba3df69bcd3", {subDomains: ["t0","t1","t2","t3","t4","t5","t6","t7"],title: "天地图-矢量",tileInfo: tileInfo});var cva_tiandituLayer = new WebTileLayer("http://{subDomain}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=cva&STYLE=default&FORMAT=tiles&TILEMATRIXSET=w&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=ac0daf56728bbb77d9514ba3df69bcd3", {subDomains: ["t0","t1","t2","t3","t4","t5","t6","t7"],title: "天地图-矢量注记",tileInfo: tileInfo});var vec_basemap = new Basemap({baseLayers: [vec_tiandituLayer],referenceLayers: [cva_tiandituLayer],thumbnailUrl:"https://www.arcgis.com/sharing/rest/content/items/0fa6d020c45342eabd89954344a739ba/info/thumbnail/thumbnail1629181199303.png",title: "天地图-矢量(球面墨卡托)"});var map = new Map({basemap: vec_basemap});var view = new MapView({container: "viewDiv",map: map,});})</script>
</head><body><div id="viewDiv"></div>
</body></html></html>

这篇关于arcgis javascript api4.x加载天地图web墨卡托(wkid:3857)坐标系的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/605966

相关文章

Spring WebClient从入门到精通

《SpringWebClient从入门到精通》本文详解SpringWebClient非阻塞响应式特性及优势,涵盖核心API、实战应用与性能优化,对比RestTemplate,为微服务通信提供高效解决... 目录一、WebClient 概述1.1 为什么选择 WebClient?1.2 WebClient 与

Android Paging 分页加载库使用实践

《AndroidPaging分页加载库使用实践》AndroidPaging库是Jetpack组件的一部分,它提供了一套完整的解决方案来处理大型数据集的分页加载,本文将深入探讨Paging库... 目录前言一、Paging 库概述二、Paging 3 核心组件1. PagingSource2. Pager3.

Java.lang.InterruptedException被中止异常的原因及解决方案

《Java.lang.InterruptedException被中止异常的原因及解决方案》Java.lang.InterruptedException是线程被中断时抛出的异常,用于协作停止执行,常见于... 目录报错问题报错原因解决方法Java.lang.InterruptedException 是 Jav

深入浅出SpringBoot WebSocket构建实时应用全面指南

《深入浅出SpringBootWebSocket构建实时应用全面指南》WebSocket是一种在单个TCP连接上进行全双工通信的协议,这篇文章主要为大家详细介绍了SpringBoot如何集成WebS... 目录前言为什么需要 WebSocketWebSocket 是什么Spring Boot 如何简化 We

java中pdf模版填充表单踩坑实战记录(itextPdf、openPdf、pdfbox)

《java中pdf模版填充表单踩坑实战记录(itextPdf、openPdf、pdfbox)》:本文主要介绍java中pdf模版填充表单踩坑的相关资料,OpenPDF、iText、PDFBox是三... 目录准备Pdf模版方法1:itextpdf7填充表单(1)加入依赖(2)代码(3)遇到的问题方法2:pd

Java Stream流之GroupBy的用法及应用场景

《JavaStream流之GroupBy的用法及应用场景》本教程将详细介绍如何在Java中使用Stream流的groupby方法,包括基本用法和一些常见的实际应用场景,感兴趣的朋友一起看看吧... 目录Java Stream流之GroupBy的用法1. 前言2. 基础概念什么是 GroupBy?Stream

SpringBoot监控API请求耗时的6中解决解决方案

《SpringBoot监控API请求耗时的6中解决解决方案》本文介绍SpringBoot中记录API请求耗时的6种方案,包括手动埋点、AOP切面、拦截器、Filter、事件监听、Micrometer+... 目录1. 简介2.实战案例2.1 手动记录2.2 自定义AOP记录2.3 拦截器技术2.4 使用Fi

最新Spring Security的基于内存用户认证方式

《最新SpringSecurity的基于内存用户认证方式》本文讲解SpringSecurity内存认证配置,适用于开发、测试等场景,通过代码创建用户及权限管理,支持密码加密,虽简单但不持久化,生产环... 目录1. 前言2. 因何选择内存认证?3. 基础配置实战❶ 创建Spring Security配置文件

Spring Security 单点登录与自动登录机制的实现原理

《SpringSecurity单点登录与自动登录机制的实现原理》本文探讨SpringSecurity实现单点登录(SSO)与自动登录机制,涵盖JWT跨系统认证、RememberMe持久化Token... 目录一、核心概念解析1.1 单点登录(SSO)1.2 自动登录(Remember Me)二、代码分析三、

springboot自定义注解RateLimiter限流注解技术文档详解

《springboot自定义注解RateLimiter限流注解技术文档详解》文章介绍了限流技术的概念、作用及实现方式,通过SpringAOP拦截方法、缓存存储计数器,结合注解、枚举、异常类等核心组件,... 目录什么是限流系统架构核心组件详解1. 限流注解 (@RateLimiter)2. 限流类型枚举 (