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

ArcgisForJS如何将ArcGIS Server发布的点要素渲染为热力图？

news 2026/1/26 11:56:13

文章目录

  • 0.引言
  • 1.ArcGIS创建点要素
  • 2.ArcGIS Server发布点要素
  • 3.ArcgisForJS将ArcGIS创建的点要素渲染为热力图

0.引言

ArcGIS For JS 是一个强大的地理信息系统（GIS）工具，它允许开发者使用 JavaScript 语言来创建各种 GIS 应用。ArcGIS Server 是 ArcGIS For JS 的一个组件，它提供了一个强大的服务，用于发布和处理地理空间数据。在 ArcGIS For JS 中，你可以使用 ArcGIS Server API 发布点要素数据，并通过 ArcGIS Server API 的热力图功能将其渲染为热力图。

1.ArcGIS创建点要素

（1）新建一个mxd地图文档，命名为renderHeatmap；
  在这里插入图片描述

（2）双击连接地理数据库和ArcGIS Server
  在这里插入图片描述

（3）点要素创建并注册
  在这里插入图片描述

  在这里插入图片描述

  在这里插入图片描述

  在这里插入图片描述

  在这里插入图片描述

  在这里插入图片描述

  在这里插入图片描述

（4）添加编辑要素的底图
  在这里插入图片描述

（5）编辑点要素并添加属性值
  在这里插入图片描述

（6）移除底图图层
  在这里插入图片描述

2.ArcGIS Server发布点要素

  在这里插入图片描述

  在这里插入图片描述

  在这里插入图片描述

  在这里插入图片描述

  在这里插入图片描述

  在这里插入图片描述

  在这里插入图片描述

  在这里插入图片描述

在ArcGIS Server中查看。
  在这里插入图片描述

  在这里插入图片描述

REST URL：http://localhost:6080/arcgis/rest/services/renderHeatmap/FeatureServer

3.ArcgisForJS将ArcGIS创建的点要素渲染为热力图

（1）实现代码

<html lang="en">
<head>  <meta charset="utf-8" />  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />  <title>Intro to heatmap | Sample | ArcGIS Maps SDK for JavaScript 4.28</title>  <link rel="stylesheet" href="https://js.arcgis.com/4.28/esri/themes/light/main.css" />  <style>  html,  body,  #viewDiv {  padding: 0;  margin: 0;  height: 100%;  width: 100%;  }  </style>  <script src="https://js.arcgis.com/4.28/"></script>  <script>  require(["esri/Map", "esri/layers/FeatureLayer", "esri/views/MapView", "esri/widgets/Legend"], (  Map,  FeatureLayer,  MapView,  Legend  ) => {  const url="http://localhost:6080/arcgis/rest/services/renderHeatmap/FeatureServer";  // Paste the url into a browser's address bar to download and view the attributes  // in the CSV file. These attributes include:  // * mag - magnitude  // * type - earthquake or other event such as nuclear test  // * place - location of the event  // * time - the time of the event  const template = {  title: "标题",  content: "值为{va}。"  };  // The heatmap renderer assigns each pixel in the view with  // an intensity value. The ratio of that intensity value  // to the maxPixel intensity is used to assign a color  // from the continuous color ramp in the colorStops property  const renderer = {  type: "heatmap",  field: "va",  colorStops: [  { color: "rgba(63, 40, 102, 0)", ratio: 0 },  { color: "#472b77", ratio: 0.083 },  { color: "#4e2d87", ratio: 0.166 },  { color: "#563098", ratio: 0.249 },  { color: "#5d32a8", ratio: 0.332 },  { color: "#6735be", ratio: 0.415 },  { color: "#7139d4", ratio: 0.498 },  { color: "#7b3ce9", ratio: 0.581 },  { color: "#853fff", ratio: 0.664 },  { color: "#a46fbf", ratio: 0.747 },  { color: "#c29f80", ratio: 0.83 },  { color: "#e0cf40", ratio: 0.913 },  { color: "#ffff00", ratio: 1 }  ],  maxDensity: 0.01,  minDensity: 0  };  const layer = new FeatureLayer({  url: url,  title: "test heatmap",  popupTemplate: template,  renderer: renderer,  labelsVisible: true,  labelingInfo: [  {  symbol: {  type: "text", // autocasts as new TextSymbol()  color: "white",  font: {  family: "Noto Sans",  size: 8  },  haloColor: "#472b77",  haloSize: 0.75  },  labelPlacement: "center-center",  labelExpressionInfo: {  expression: "Text($feature.va, '#.0')"  },  where: "va > 4"  }  ]  });  const map = new Map({  basemap: "gray-vector",  layers: [layer]  });  const view = new MapView({  container: "viewDiv",  center: [106.49446091380375, 29.559187456407138],  zoom: 10,  map: map  });  view.ui.add(  new Legend({  view: view  }),  "bottom-left"  );  点击地图获取经纬度坐标  //view.on("click", evt => {  //    let mapPoint = evt.mapPoint;  //    alert(`经度：${mapPoint.longitude},纬度${mapPoint.latitude}`);  //});  });  </script>  
</head>  <body>  <div id="viewDiv"></div>  
</body>  
</html>

（2）实现结果
  在这里插入图片描述

参考资料：
[1] 一入GIS深似海. 不一样的前端，JavaScript之arcgis api教程; 2020-11-02 [accessed 2024-02-24].
[2] HPUGIS. ArcGIS API For JS 之render（符号渲染); 2018-07-03 [accessed 2024-02-24].
[3] 风衡. JS API 4.0地图渲染之符号（一）; 2016-08-22 [accessed 2024-02-24].
[4] GIS_KHF. JS API 4.x地图渲染之符号（二）(转载); 2016-11-10 [accessed 2024-02-24].
[5] 不睡觉的怪叔叔. ArcGIS API For JavaScript官方文档（二十）之图形和要素图层——③符号和渲染器; 2018-04-13 [accessed 2024-02-24].

相关文章：

ArcgisForJS如何将ArcGIS Server发布的点要素渲染为热力图？

文章目录 0.引言1.ArcGIS创建点要素2.ArcGIS Server发布点要素3.ArcgisForJS将ArcGIS创建的点要素渲染为热力图 0.引言 ArcGIS For JS 是一个强大的地理信息系统&#xff08;GIS&#xff09;工具&#xff0c;它允许开发者使用 JavaScript 语言来创建各种 GIS 应用。ArcGIS Ser…...

编程日记 2024/2/28 17:09:34

第 2 章 微信小程序的构成 （代码导读）断更，后续继续更新

2.1 小程序项目的基本结构 Hello World&#xff01;程序.mp4 文泉云盘 -- 图书二维码资源管理系统兆泰源二维码管理系统https://www.wqyunpan.com/resourceDetail.html?id284928&openIdoUgl9wdyNYHu9EcAe-GEwbQdZilY&qrcodeId242916&signc2lnbm1PUmNxSndPWGFOck…...

编程日记 2024/2/28 17:08:32

十一、Qt自定义Widget组件、静态库与动态库

一、自定义Widget组件 1、自定义Widget组件 使用步骤采用提升法&#xff08;promotion&#xff09;重新定义paintEvent事件 2、实现程序 &#xff08;1&#xff09;创建项目&#xff0c;基于QWidget &#xff08;2&#xff09;添加类&#xff0c;为Widget组件提升类 #inclu…...

编程日记 2024/2/28 17:06:31

八、ChatGPT能替代什么人？

上一讲关于ChatGPT的热炒&#xff0c;其实对于我们来说算是敲了敲警钟。 其实在今天&#xff0c;关于ChatGPT&#xff0c;最多人关注的一个问题就是&#xff1a;ChatGPT能取代人吗&#xff0c;或者说能抢人的饭碗么吗&#xff1f; 有人说不能&#xff0c;也有人说能&#xff08…...

编程日记 2024/2/28 17:01:25

QT C++实现点击按键弹出窗口并显示图片/视频|多窗口应用程序的设计和开发

一、介绍 首先&#xff0c;QT界面开发中主要大体分为2种多窗口的形式&#xff1a; 嵌入式&#xff1a; 新生成的窗口嵌入在主窗口内部独立窗口&#xff1a; 以弹窗形式的新窗口生成和展示 这里就讲解最简单的&#xff1a;点击案件后&#xff0c;跳出一个新窗口 二、代码实…...

编程日记 2024/2/28 16:57:20

shell和go实现：防火墙放行所有端口，唯独拦截80端口

shell 1.防火墙放行所有端口&#xff0c;唯独拦截80端口 1.1拦截 mkdir -p /data/shellscat > /data/shells/02nginx_close.sh <<-EOF #!/bin/bash# 检查Linux系统版本 linux_version$(cat /etc/redhat-release)# 根据Linux系统版本选择相应的防火墙开启命令和保存…...

编程日记 2024/2/28 16:55:17

QT信号槽实现分析

1.宏定义 qt中引入了MOC来反射&#xff0c;编译阶段变成 MOC–>预处理–>编译–>汇编–>链接 1-1、Q_OBJECT 这个宏定义了一系列代码&#xff0c;包括元对象和处理的函数 #define Q_OBJECT \public: \QT_WARNING_PUSH \Q_OBJECT_NO_OVERRIDE_WARNING \static c…...

编程日记 2024/2/28 16:54:16

【pytorch】tensor.detach()和tensor.data的区别

文章目录 序言相同点不同点测试实例应用 序言 .detach()和.data都可以用来分离tensor数据&#xff0c;下面进行比较pytorch0.4及之后的版本&#xff0c;.data仍保留&#xff0c;但建议使用.detach() 相同点 x.detach()和x.data返回和x相同数据的tensor&#xff0c;这个新的t…...

编程日记 2024/2/28 16:52:11

教师资格证相关

文章目录&#xff1a; 一&#xff1a;考试时间 二&#xff1a;考试科目 三&#xff1a;相关网站 四&#xff1a;相关 一&#xff1a;考试时间 教资 笔试 面试笔试报名笔试考试笔试公布面试报名面试时间面试公布上半年1月14日3月12日4月15日4月…...

编程日记 2024/2/28 16:50:08

卷积神经网络介绍

卷积神经网络(Convolutional Neural Networks&#xff0c;CNN) 网络的组件&#xff1a;卷积层&#xff0c;池化层&#xff0c;激活层和全连接层。 CNN主要由以下层构造而成&#xff1a; 卷积层&#xff1a;Convolutional layer&#xff08;CONV&#xff09;池化层&#xff1a…...

编程日记 2024/2/28 16:49:07

XSS简介

XSS被称为跨站脚本攻击(Cross-site scripting)&#xff0c;由于和CSS(CascadingStyle Sheets)重名&#xff0c;所以改为XSS。 XSS主要速于javascript语言完成恶意的攻击行为&#xff0c;因为javascript可非常灵活的操作html、css和浏览器 XSS就是指通过利用网页开发时留下的漏…...

编程日记 2024/2/28 16:47:05

手写redux和applyMiddleware中间件react示例

目录 一 核心代码 1.reducer 2.store.js 二 关于context API的使用 1. MyContext 2. createContext 3. ContextProvider 4. connect 三 组件验证效果 1. Todo 2. TodoList 3.TodoItem 4.TodoInput 5. App组件引入Todo组件 一 核心代码 1.reducer // 新增列表数…...

编程日记 2024/2/28 16:46:04

MATLAB R2024a 主要更新内容

系列文章目录 前言 一、主要更新 计算机视觉工具箱 —— 为二维和三维视觉任务设计算法、标注数据并生成代码。深度学习工具箱 —— 支持变换器等架构&#xff1b;导入并共同模拟 PyTorch 和 TensorFlow 模型。仪器控制工具箱 —— 使用仪器资源管理器应用程序管理带有 IVI 和…...

编程日记 2024/2/28 16:45:03

4.1.CVAT——目标检测的标注详细步骤

文章目录 1. 进入任务1. 创建任务2. 已创建的task3. 进入标注界面 2. 选择标注类型2.1 选择标注类型2.2 进行标注2.3 遮挡 2.快捷键3.导出标注结果 1. 进入任务 登录后会看到如下图界面&#xff0c;CVAT的标注最小单位是Task&#xff0c;每个Task为一个标注任务。点击Task按钮…...

编程日记 2024/2/28 16:44:02

图论-算法题

797. 所有可能的路径 题目: 给你一个有 n 个节点的 有向无环图&#xff08;DAG&#xff09;&#xff0c;请你找出所有从节点 0 到节点 n-1 的路径并输出&#xff08;不要求按特定顺序&#xff09; graph[i] 是一个从节点 i 可以访问的所有节点的列表&#xff08;即从节点 i …...

编程日记 2024/2/28 16:42:00

onnx 1.16 doc学习笔记七：python API一览

onnx作为一个通用格式&#xff0c;很少有中文教程&#xff0c;因此开一篇文章对onnx 1.16文档进行翻译与进一步解释&#xff0c; onnx 1.16官方文档&#xff1a;https://onnx.ai/onnx/intro/index.html](https://onnx.ai/onnx/intro/index.html)&#xff0c; 如果觉得有收获&am…...

编程日记 2024/2/28 16:39:57

LACP——链路聚合控制协议

LACP——链路聚合控制协议 什么是LACP&#xff1f; LACP&#xff08;Link Aggregation Control Protocol&#xff0c;链路聚合控制协议&#xff09;是一种基于IEEE802.3ad标准的实现链路动态聚合与解聚合的协议&#xff0c;它是链路聚合中常用的一种协议。 链路聚合组中启用了…...

编程日记 2024/2/28 16:37:52

终端启动jupyter notebook更换端口

一、问题描述 如果尝试在端口 8889 上启动 Jupyter Notebook 但最终启动在了 8890 端口&#xff0c;这通常意味着 8889 端口已经被占用。要解决这个问题&#xff0c;可以尝试以下几种方法来关闭占用 8889 端口的进程。 1. 查找并终止占用端口的进程 首先&#xff0c;需要找出…...

编程日记 2024/2/28 16:35:50

IT发布管理，轻松部署软件

我们带来了一项令人振奋的好消息&#xff0c;可有效缓解构建的质量相对劣质和发布的速度相对缓慢。 ManageEngine卓豪推出了ServiceDesk Plus MSP中的IT发布管理&#xff0c;配备了可视化的工作流程&#xff0c;这是PSA-ITSM解决方案的一部分。有了这个新功能&#xff0c;您可以…...

编程日记 2024/2/28 16:34:49

2024国际生物发酵展览会独家解读-力诺天晟科技

参展企业介绍 北京力诺天晟科技有限公司&#xff0c;专业致力于智能仪器仪表制造&#xff0c;工业自动控制系统用传感器、变送器的研发、设计、销售和服务。 公司坐落于首都北京行政副中心-通州区&#xff0c;下设生产子公司位于河北香河经济开发区&#xff0c;厂房面积 300…...

编程日记 2024/2/28 16:31:46

中南大学无人机智能体的全面评估！BEDI：用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

编程新知 2026/1/22 15:36:10

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明&#xff1a;server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

编程新知 2026/1/23 4:15:03

LeetCode - 394. 字符串解码

题目 394. 字符串解码 - 力扣&#xff08;LeetCode&#xff09; 思路 使用两个栈&#xff1a;一个存储重复次数&#xff0c;一个存储字符串 遍历输入字符串&#xff1a; 数字处理&#xff1a;遇到数字时&#xff0c;累积计算重复次数左括号处理&#xff1a;保存当前状态&a…...

编程新知 2026/1/25 10:09:59

屋顶变身“发电站” ，中天合创屋面分布式光伏发电项目顺利并网！

5月28日&#xff0c;中天合创屋面分布式光伏发电项目顺利并网发电&#xff0c;该项目位于内蒙古自治区鄂尔多斯市乌审旗&#xff0c;项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站&#xff0c;总装机容量为9.96MWp。 项目投运后&#xff0c;每年可节约标煤3670…...

编程新知 2026/1/15 5:38:25

【Web 进阶篇】优雅的接口设计：统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

编程新知 2026/1/22 20:46:43

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

编程新知 2026/1/15 5:03:53

代码规范和架构【立芯理论一】（2025.06.08）

1、代码规范的目标 代码简洁精炼、美观&#xff0c;可持续性好高效率高复用&#xff0c;可移植性好高内聚&#xff0c;低耦合没有冗余规范性&#xff0c;代码有规可循&#xff0c;可以看出自己当时的思考过程特殊排版&#xff0c;特殊语法&#xff0c;特殊指令&#xff0c;必须…...

编程新知 2026/1/15 5:02:37

HybridVLA——让单一LLM同时具备扩散和自回归动作预测能力：训练时既扩散也回归，但推理时则扩散

前言 如上一篇文章《dexcap升级版之DexWild》中的前言部分所说&#xff0c;在叠衣服的过程中&#xff0c;我会带着团队对比各种模型、方法、策略&#xff0c;毕竟针对各个场景始终寻找更优的解决方案&#xff0c;是我个人和我司「七月在线」的职责之一 且个人认为&#xff0c…...

编程新知 2026/1/19 6:41:37

Python训练营-Day26-函数专题1：函数定义与参数

题目1&#xff1a;计算圆的面积 任务&#xff1a; 编写一个名为 calculate_circle_area 的函数&#xff0c;该函数接收圆的半径 radius 作为参数&#xff0c;并返回圆的面积。圆的面积 π * radius (可以使用 math.pi 作为 π 的值)要求&#xff1a;函数接收一个位置参数 radi…...

编程新知 2026/1/21 20:06:47

[特殊字符] 手撸 Redis 互斥锁那些坑

&#x1f4d6; 手撸 Redis 互斥锁那些坑 最近搞业务遇到高并发下同一个 key 的互斥操作&#xff0c;想实现分布式环境下的互斥锁。于是私下顺手手撸了个基于 Redis 的简单互斥锁&#xff0c;也顺便跟 Redisson 的 RLock 机制对比了下&#xff0c;记录一波&#xff0c;别踩我踩过…...

编程新知 2026/1/23 17:06:01