当前位置： 首页 > article >正文

arcgis for js实现层叠立体效果

article 2026/4/23 18:53:32

在 Web 开发中，利用 ArcGIS for JS 实现一些炫酷的地图效果能够极大地提升用户体验。本文将详细介绍如何使用 ArcGIS for JS 实现层叠立体效果，并展示最终的效果图。

效果图

在这里插入图片描述

实现思路

要实现层叠立体效果，关键在于获取边界图形的坐标，然后对这些坐标进行多次平移操作，从而创建出多个多边形。这些多边形会从下至上层层覆盖，最终营造出立体的视觉效果。最后，我们将加载区域天地图作为底图，使整个效果更加完整。

实现代码

html代码, 复制运行即可

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>我不当帕鲁谁当帕鲁</title><style>html,body {width: 100%;height: 100%;background: #000;}* {margin: 0;padding: 0;}body {background: linear-gradient(135deg, rgba(16, 101, 91, 1) 0%, rgba(16, 101, 91, 0.2) 100%);}#mapView {position: absolute;width: 100%;height: 100%;}</style><!-- <script src="https://cdn.jsdelivr.net/npm/@turf/turf@7/turf.min.js"></script> --><script src="https://cdnjs.cloudflare.com/ajax/libs/Turf.js/6.5.0/turf.min.js"></script><link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css" /><script src="https://js.arcgis.com/4.23/"></script></head><body><!-- 地图容器 --><div id="mapView"></div><script>require(['esri/Map','esri/views/MapView','esri/Basemap','esri/layers/WebTileLayer','esri/layers/GroupLayer','esri/layers/GeoJSONLayer','esri/layers/GraphicsLayer','esri/Graphic'], function (Map,MapView,Basemap,WebTileLayer,GroupLayer,GeoJSONLayer,GraphicsLayer,Graphic) {var tiandituBaseUrl = 'http://{subDomain}.tianditu.gov.cn' // 天地图服务地址var token = 'b5a612fc171599a0f5c51aa03efd4948' // 私人天地图token, 地图加载不出来的话就换成自己的// 天地图底图var imgLayer = new WebTileLayer({urlTemplate:tiandituBaseUrl + '/DataServer?T=img_w/wmts&x={col}&y={row}&l={level}&tk=' + token,subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],copyright: '天地图影像图'})var ciaLayer = new WebTileLayer({urlTemplate:tiandituBaseUrl +'/DataServer?T=cia_w?T=vec_c/wmts&x={col}&y={row}&l={level}&tk=' +token,subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],copyright: '天地图影像注记'})var vecBasemap = new Basemap({baseLayers: [imgLayer, ciaLayer],title: '影像图',id: 'img_w',thumbnailUrl:'https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/0/0/0'})// 初始化底图const map = new Map({basemap: vecBasemap // 指定一个底图// basemap: 'dark-gray-vector'})// 创建2维视图let view = new MapView({container: 'mapView',map: map,zoom: 9, // 初始化级别center: [103.93347958618153, 30.9146073004904] // 初始化中心点坐标})// 添加点击view.on('click', function (e) {console.log('>>> 点击的坐标: ')console.log(`${e.mapPoint.longitude}, ${e.mapPoint.latitude}`)})view.when(async () => {// 去除原本底图// map.basemap = null// 边界线const boundaryLineLayer = new GeoJSONLayer({url: 'https://geo.datav.aliyun.com/areas_v3/bound/510100.json',outFields: ['*'],renderer: {type: 'simple',symbol: {type: 'simple-line',color: '#B1E4B1',width: 2}}})// 获取边界图形const { features } = await boundaryLineLayer.queryFeatures()const rings = features[0].geometry.rings // 拿到最大的区域坐标// 装扩展边界的图形图层const extendLayer = new GraphicsLayer({ title: '扩展边界图层' })map.add(extendLayer)const colors = ['#106B5A', '#118971', '#0CAE8A', '#15C99E']for (let i = 0; i <= 3; i++) {const poly = turf.polygon(rings) // 转为turf多边形// 向下平移的距离, 必须是从下至上的顺序let distance = -8 + 2 * iconst translatedPoly = turf.transformTranslate(poly, distance, 350)const graphic = new Graphic({geometry: {type: 'polygon',rings: translatedPoly.geometry.coordinates[0]},symbol: {type: 'simple-fill',color: colors[i],outline: {width: 0,color: '#7BD6F4'}}})extendLayer.add(graphic)}// 范围内的高亮地图const areaLayer = new GroupLayer({layers: [imgLayer,ciaLayer,new GeoJSONLayer({url: 'https://geo.datav.aliyun.com/areas_v3/bound/510100.json',blendMode: 'destination-in',outFields: ['*'],renderer: {type: 'simple',symbol: {type: 'simple-fill',color: [227, 139, 79, 1],outline: {color: [0, 122, 204, 0.8],width: 2}}}})]})// 边界线和蒙层图层最后加载, 使其在最上层map.add(areaLayer)map.add(boundaryLineLayer)})})</script></body>
</html>

注意事项

  • 天地图服务需要使用有效的 token，文中的 token 是私人的，如果地图加载不出来，请换成自己的 token。
  • 注意各个图层的添加顺序。

相关文章：

arcgis for js实现层叠立体效果

在 Web 开发中&#xff0c;利用 ArcGIS for JS 实现一些炫酷的地图效果能够极大地提升用户体验。本文将详细介绍如何使用 ArcGIS for JS 实现层叠立体效果&#xff0c;并展示最终的效果图。 效果图 实现思路 要实现层叠立体效果&#xff0c;关键在于获取边界图形的坐标&#xf…...

编程日记 2026/4/10 7:41:36

多模态本地部署和ollama部署Llama-Vision实现视觉问答

文章目录 一、模型介绍二、预期用途1. 视觉问答(VQA)与视觉推理2. 文档视觉问答(DocVQA)3. 图像字幕4. 图像-文本检索5. 视觉接地 三、本地部署1. 下载模型2. 模型大小3. 运行代码 四、ollama部署1. 安装ollama2. 安装 Llama 3.2 Vision 模型3. 运行 Llama 3.2-Vision 五、效果…...

编程日记 2026/4/7 6:38:47

【DeepSeek】deepseek可视化部署

目录 1 -> 前文 2 -> 部署可视化界面 1 -> 前文 【DeepSeek】DeepSeek概述 | 本地部署deepseek 通过前文可以将deepseek部署到本地使用&#xff0c;可是每次都需要winR输入cmd调出命令行进入到命令模式&#xff0c;输入命令ollama run deepseek-r1:latest。体验很…...

编程日记 2026/4/13 20:46:51

【Git版本控制器】：第一弹——Git初识，Git安装,创建本地仓库，初始化本地仓库，配置config用户名，邮箱信息

&#x1f381;个人主页&#xff1a;我们的五年 &#x1f50d;系列专栏&#xff1a;Linux网络编程 &#x1f337;追光的人&#xff0c;终会万丈光芒 &#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐文章 ​ 相关笔记&#xff1a; https://blog.csdn.net/dj…...

编程日记 2026/4/9 20:46:01

Fabric.js、leaferjs、pixi.js 库的对比分析

文章目录 一、引言二、参与对比的 canvas 库简介三、性能对比四、易用性对比五、功能特性对比六、综合评价与使用建议七、总结 在前端开发中&#xff0c;canvas 库为实现丰富的图形效果和交互功能提供了强大的支持。本文将对 Fabric.js、leaferjs 和 pixi.js 这三个常见的 canv…...

编程日记 2026/4/21 13:46:27

JVM——堆的回收：引用计数发和可达性分析法、五种对象引用

目录 引用计数法和可达性分析法 引用计数法&#xff1a; 可达性分析算法&#xff1a; 五种对象引用 软引用&#xff1a; 弱引用&#xff1a; 引用计数法和可达性分析法 引用计数法&#xff1a; 引用计数法会为每个对象维护一个引用计数器&#xff0c;当对象被引用时加1&…...

编程日记 2026/4/10 22:20:25

2.11 sqlite3数据库【数据库的相关操作指令、函数】

练习&#xff1a; 将 epoll 服务器 客户端拿来用 客户端&#xff1a;写一个界面&#xff0c;里面有注册登录 服务器&#xff1a;处理注册和登录逻辑&#xff0c;注册的话将注册的账号密码写入数据库&#xff0c;登录的话查询数据库中是否存在账号&#xff0c;并验证密码是否正确…...

编程日记 2026/4/10 9:52:27

开源模型应用落地-Qwen1.5-MoE-A2.7B-Chat与vllm实现推理加速的正确姿势（一）

一、前言 在人工智能技术蓬勃发展的当下，大语言模型的性能与应用不断突破边界，为我们带来前所未有的体验。Qwen1.5-MoE-A2.7B-Chat 作为一款备受瞩目的大语言模型，以其独特的架构和强大的能力，在自然语言处理领域崭露头角。而 vllm 作为高效的推理库，为模型的部署与推理提…...

编程日记 2025/12/26 15:08:32

相得益彰，Mendix AI connector 秒连DeepSeek ，实现研发制造域场景

在当今快速发展的科技领域&#xff0c;低代码一体化平台已成为企业数字化转型的关键工具&#xff0c;同时&#xff0c;大型语言模型&#xff08;LLM&#xff09;如 DeepSeek 在自动生成代码和提供智能建议方面表现出色。 Mendix 于近期发布的 GenAI 万能连接器&#xff0c;目前…...

编程日记 2026/4/12 13:12:13

英语笔记【一】词性

一、be 动词 be 动词&#xff0c;是英语中的一种词汇用法&#xff0c;一般用来表示“是”的意思&#xff0c;也可表示“成为”的意思。 be动词的用法有多种变化形式。英语的句子必有一个动词。be 动词自然也是动词的一种。 am 用于第一人称单数&#xff1b;is 第三人称单数&a…...

编程日记 2025/10/22 9:37:59

同为科技智能PDU助力Deepseek人工智能和数据交互的快速发展

1 2025开年&#xff0c;人工智能领域迎来了一场前所未有的变革。Deepseek成为代表“东方力量”的开年王炸&#xff0c;不仅在国内掀起了技术热潮&#xff0c;并且在全球范围内引起了高度关注。Deepseek以颠覆性技术突破和现象级应用场景席卷全球&#xff0c;这不仅重塑了产业格…...

编程日记 2026/4/19 7:36:18

.NET Web-静态文件访问目录浏览

一、Web根目录访问 创建wwwroot文件夹app.UseStaticFiles(); // 启⽤静态⽂件中间件url/路径 进行访问 二、Web根目录之外的文件 app.UseStaticFiles(new StaticFileOptions {FileProvider new PhysicalFileProvider(Path.Combine(builder.Environment.ContentRootPath,&qu…...

编程日记 2026/4/10 22:56:21

redis sentinel模式 与 redis 分片集群 配置

Redis 最低为5.0版本&#xff0c;以下为6.2.6版本信息。 模式 高可用性 数据分片 部署复杂度 适用场景 Sentinel 模式 高 无 中等 中小规模&#xff0c;需要高可用性 集群模式 高 支持 复杂 大规模&#xff0c;需要高…...

编程日记 2025/11/6 17:36:37

CentOS安装Docker，Ubuntu安装Docker，Docker解决方案

文章目录 CentOS7安装DockerUbuntu修改Docker镜像源docker设置容器自动启动启动时加--restartalways如果已经过运行的项目docker compose设置容器自启动 docker file修改时区docker在容器执行命令简单粗暴的办法安装curl docker compose命令安装docker compose Docker WEB 图形…...

编程日记 2026/3/21 4:40:43

【php】php json_encode($arr) 和 json_encode($arr, 320) 有什么区别？

在 PHP 中&#xff0c;json_encode() 函数用于将 PHP 变量&#xff08;通常是数组或对象&#xff09;编码为 JSON 格式的字符串。json_encode($arr) 和 json_encode($arr, 320) 的区别主要在于第二个参数&#xff0c;该参数是一个由多个 JSON_* 常量按位或&#xff08;|&#x…...

编程日记 2025/8/6 4:42:26

【CubeMX+STM32】SD卡 U盘文件系统 USB+FATFS

本篇&#xff0c;将使用CubeMXKeil, 创建一个 USBTF卡存储FatFS 的虚拟U盘读写工程。 目录 一、简述 二、CubeMX 配置 SDIO DMA FatFs USB 三、Keil 编辑代码 四、实验效果 串口助手&#xff0c;实现效果&#xff1a; U盘&#xff0c;识别效果&#xff1a; 一、简述 上…...

编程日记 2026/4/20 9:49:39

node.js+兰空图床实现随机图

之前博客一直用的公共的随机图API&#xff0c;虽然图片的质量都挺不错的&#xff0c;但是稳定性都比较一般&#xff0c;遂打算使用之前部署的兰空图床&#xff0c;自己弄一个随机图 本文章服务器操作基于雨云——新一代云服务提供商的云服务器进行操作&#xff0c;有兴趣的话可…...

编程日记 2026/4/8 6:50:09

【xdoj离散数学上机】T283

递归函数易错&#xff1a; 防止出现递归死循环&#xff01; 题目 题目&#xff1a;求诱导出的等价关系的关系矩阵 问题描述 给定有限集合上二元关系的关系矩阵&#xff0c;求由其诱导出的等价关系的关系矩阵。 输入格式 第一行输入n&#xff0c;表示矩阵为n阶方阵&#xff0c…...

编程日记 2025/11/28 9:56:41

缓存机制与 Redis 在高性能系统中的应用

引言 随着互联网应用日益增长&#xff0c;用户对系统的响应速度和稳定性提出了更高的要求。在高并发、大流量的场景下&#xff0c;数据库的读取压力会急剧上升&#xff0c;导致数据库的响应速度变慢&#xff0c;甚至引发性能瓶颈。为了缓解这一问题&#xff0c;缓存机制成为了…...

编程日记 2025/8/30 20:59:09

C++之2048小游戏 第二期

不是&#xff0c;一天点赞就到15了&#xff1f;&#xff01;好吧&#xff0c;那我更新一下 1. 逻辑 &#xff08;真的有人会看吗&#xff1f;&#xff09; 注&#xff1a;本文1.1章为AI生成&#xff0c;如有错误欢迎在评论其指出&#xff01; 1.1 普通/最初逻辑 这里我们首…...

编程日记 2025/12/31 23:15:55

DeepSeek AI 满血版功能集成到WPS或Microsoft Office中

DeepSeek AI集成到 WPS或Microsoft Office中, 由于deepseek被攻击或者非常繁忙导致超时的服务器&#xff0c;所以可以用硅基流动部署的DeepSeek 。当然用官网的也可以。 使用 OfficeAI 插件集成(wps为例)&#xff1a; 下载并安装 OfficeAI 插件&#xff1a;从可靠的软件下载平台…...

编程日记 2026/4/13 16:44:22

微服务SpringCloud Alibaba组件nacos教程(一)【详解naocs基础使用、服务中心配置、集群配置，附有案例+示例代码】

一.Nacos教程 文章目录 一.Nacos教程1.1 Nacos简介1.2 nacos基本使用直接下载打包服务源码方式启动 1.3 创建nacos客服端1.4 nacos集群配置1.5 nacos配置中心 1.1 Nacos简介 nacos是spring cloud alibaba生态中非常重要的一个组件&#xff0c;它有两个作用&#xff1a; 1:注册…...

编程日记 2026/4/22 20:48:24

2017年上半年软件设计师上午真题知识点整理（附试卷及答案）

以下是2017年上半年软件设计师上午真题的知识点分类整理&#xff0c;涉及定义的详细解释&#xff0c;供背诵记忆。 1. 计算机组成原理 CPU与存储器的访问。 Cache的作用: 提高CPU访问主存数据的速度&#xff0c;减少访问延迟。存储器的层次结构: 包括寄存器、Cache、主存和辅存…...

编程日记 2026/4/21 4:58:34

【MySQL】基础篇

1. MySQL中的NULL值是怎么存放的&#xff1f; MySQL的compact行格式中会用【NULL值列表】来标记值为NULL的列&#xff0c;NULL值不会存储在行格式中的真实数据部分。 NULL值列表会占用1字节空间&#xff0c;当表中所有字段都被定义成NOT NULL&#xff0c;行格式中就不会有NULL值…...

编程日记 2026/4/21 11:20:21

Kotlin 扩展函数与内联函数

Kotlin扩展函数 Kotlin 的扩展函数是 Kotlin 中非常强大且实用的功能。它允许你为现有的类添加新的方法&#xff0c;而不需要修改其源代码。这意味着你可以在已有的类上“扩展”新的功能&#xff0c;使用起来就像是原本就存在这些方法一样。 扩展函数的基本语法 fun 类名.方…...

编程日记 2026/4/22 2:48:43

uniapp中对于文件和文件夹的处理，内存的查询

目录 移动文件到指定文件夹 新增本地文件夹 设定本地文件过期时间&#xff0c;清除超时文件&#xff0c;释放内存 操作本地文件之----删除 uniapp获取设备剩余存储空间的方法 读取本地文件夹下的文件 移动文件到指定文件夹 function moveTempFile(tempFilePath, targetFo…...

编程日记 2026/4/3 12:03:44

【Android开发】安卓手机APP使用机器学习进行QR二维码识别（完整工程资料源码）

前言：本项目是一个 Android 平台的二维码扫描应用，具备二维码扫描和信息展示功能。借助 AndroidX CameraX 库实现相机的预览、图像捕获与分析，使用 Google ML Kit 进行二维码识别。为方便大家了解项目全貌，以下将介绍项目核心代码文件 MainActivity.java 和 AndroidManifes…...

编程日记 2026/4/3 20:54:04

企业文件防泄密软件哪个好？

在企业文件防泄密软件领域&#xff0c;天锐绿盾和中科数安都是备受认可的品牌&#xff0c;它们各自具有独特的特点和优势。 以下是对这两款软件的详细比较&#xff1a; 天锐绿盾 功能特点 集成性强&#xff1a;集成了文件加密、数据泄露防护DLP、终端安全管理、行为审计等数据安…...

编程日记 2026/4/13 16:12:22

mysql 参数max_connect_errors研究

1.在server端设置max_connect_errors3&#xff0c;超过3次连接错误就block mysql> set global max_connect_errors3; Query OK, 0 rows affected (0.00 sec) mysql> show variables like max_connect_errors; --------------------------- | Variable_name | Value…...

编程日记 2026/4/22 11:31:27

linux 下连接mysql(下)

case 表达式 表t1中的数据如下。 select * from t1; ---------------------------- | id | student_no | name | age | ---------------------------- | 3 | 202501 | ll | 10 | | 4 | 202502 | tt | 15 | ----------------------------如果学号是202501,…...

编程日记 2026/4/4 2:39:11