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

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

news 2026/4/20 20:51:28

文章目录

  • 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

别再只玩物联网了！ESP32的隐藏技能：变身蓝牙MIDI设备连接库乐队全攻略

用ESP32打造你的专属蓝牙MIDI控制器&#xff1a;从零接入库乐队实战指南 当音乐遇上物联网硬件&#xff0c;创意便有了全新的表达方式。ESP32这颗原本被广泛用于智能家居和传感器网络的芯片&#xff0c;其实隐藏着一个令人惊喜的音乐天赋——通过蓝牙MIDI协议&#xff0c;它能摇…...

编程新知 2026/4/20 18:49:49

**发散创新：基于角色与策略的动态权限控制系统设计与实现**在现代企业级应用中，权限

发散创新&#xff1a;基于角色与策略的动态权限控制系统设计与实现 在现代企业级应用中&#xff0c;权限管理已不再是简单的“用户-角色-资源”映射&#xff0c;而是需要支持细粒度控制、运行时动态调整、多维度策略组合的复杂系统。本文将深入探讨一种融合 RBAC&#xff08;基…...

编程新知 2026/4/20 18:30:52

AvalancheGo网络通信：P2P协议和消息队列的实现原理

AvalancheGo网络通信&#xff1a;P2P协议和消息队列的实现原理 【免费下载链接】avalanchego Go implementation of an Avalanche node. 项目地址: https://gitcode.com/gh_mirrors/ava/avalanchego AvalancheGo是Avalanche节点的Go语言实现&#xff0c;其网络通信系统基…...

编程新知 2026/4/20 18:06:01

别再死记硬背for和while了！用Python做个温度转换表，5分钟搞懂循环与列表的实战区别

温度转换实战&#xff1a;用Python解锁循环与列表的核心差异 温度转换这个看似简单的任务&#xff0c;却蕴含着编程中最基础也最重要的两个概念——循环与列表。很多初学者在刚接触Python时&#xff0c;常常陷入死记硬背for和while循环语法的困境&#xff0c;而忽略了理解它们在…...

编程新知 2026/4/20 17:30:02

2026年AI风口已至！全网超详细的AI大模型学习路线，人工智能该如何学习？

文章介绍了学习人工智能的四个阶段&#xff1a;基础知识储备&#xff08;数学、Python编程&#xff09;、进阶学习&#xff08;机器学习、深度学习&#xff09;、实践与应用&#xff08;参与项目、持续学习&#xff09;以及学习资源推荐&#xff08;书籍、在线课程、开源社区&a…...

编程新知 2026/4/20 15:27:08

山东大学软件学院项目实训-创新实训-大数据租房推荐智能体-前端部分（3）

虽然上一阶段搞定了“打字机”效果&#xff0c;让 AI 看起来反应很快&#xff0c;但我发现了一个新问题&#xff1a;光有文字&#xff0c;看房体验还是很累。所以&#xff0c;这一阶段的目标很明确&#xff0c;正如上一篇博客提到的下一阶段目标&#xff1a;我要把 AI 的回复从…...

编程新知 2026/4/20 14:02:41

3步搞定顽固窗口：WindowResizer 窗口强制调整工具完全指南

3步搞定顽固窗口&#xff1a;WindowResizer 窗口强制调整工具完全指南 【免费下载链接】WindowResizer 一个可以强制调整应用程序窗口大小的工具 项目地址: https://gitcode.com/gh_mirrors/wi/WindowResizer 你是否遇到过那些无法正常拖拽大小的应用程序窗口&#xff1…...

编程新知 2026/4/20 13:09:38

EF Core 10向量扩展上线倒计时：3个被官方文档隐藏的NuGet依赖陷阱，90%项目部署失败源于此

第一章&#xff1a;EF Core 10向量搜索扩展的架构演进与核心价值EF Core 10正式将向量搜索能力纳入官方扩展体系&#xff0c;标志着ORM框架首次在数据访问层原生支持语义检索场景。这一演进并非简单叠加功能&#xff0c;而是围绕查询表达式树重写、数据库提供程序契约增强和向量…...

编程新知 2026/4/20 12:39:04

从外卖派单到共享单车：深入拆解Geohash如何成为LBS应用的“网格引擎”

从外卖派单到共享单车&#xff1a;深入拆解Geohash如何成为LBS应用的“网格引擎” 当你在午高峰打开外卖App下单时&#xff0c;系统能在毫秒级完成三个关键动作&#xff1a;确定你的位置、筛选3公里内餐厅、分配最优骑手。这背后是一套将城市空间网格化的精密算法体系——Geoha…...

编程新知 2026/4/20 12:37:03

AI时代生存指南：如何化焦虑为行动，小白程序员必备（收藏版）

文章指出&#xff0c;互联网大厂员工中&#xff0c;非AI岗位人员比AI从业者更焦虑&#xff0c;因为他们的工作易被AI替代。正确看待AI焦虑需避免两个认知陷阱&#xff1a;一是忽视变化&#xff0c;二是信息焦虑导致行动瘫痪。破局思路包括&#xff1a;1&#xff09;大量使用AI工…...

编程新知 2026/4/20 11:36:30