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

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

news 2025/9/13 23:25:57

文章目录

  • 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

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

编程新知 2025/8/7 7:40:03

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到&#xf…...

编程新知 2025/9/10 2:57:34

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

编程新知 2025/9/13 17:43:32

解锁数据库简洁之道：FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

编程新知 2025/8/13 16:42:24

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档&#xff09;&#xff0c;如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下&#xff0c;风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...

编程新知 2025/9/2 18:32:32

【分享】推荐一些办公小工具

1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由&#xff1a;大部分的转换软件需要收费&#xff0c;要么功能不齐全&#xff0c;而开会员又用不了几次浪费钱&#xff0c;借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...

编程新知 2025/9/3 12:01:04

接口自动化测试：HttpRunner基础

相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具&#xff0c;支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议&#xff0c;涵盖接口测试、性能测试、数字体验监测等测试类型…...

编程新知 2025/9/2 17:48:51

C++ 设计模式 《小明的奶茶加料风波》

&#x1f468;‍&#x1f393; 模式名称&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09; &#x1f466; 小明最近上线了校园奶茶配送功能&#xff0c;业务火爆&#xff0c;大家都在加料&#xff1a; 有的同学要加波霸 &#x1f7e4;&#xff0c;有的要加椰果…...

编程新知 2025/9/1 17:56:35

作为测试我们应该关注redis哪些方面

1、功能测试 数据结构操作&#xff1a;验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化&#xff1a;测试aof和aof持久化机制&#xff0c;确保数据在开启后正确恢复。 事务&#xff1a;检查事务的原子性和回滚机制。 发布订阅&#xff1a;确保消息正确传递。 2、性…...

编程新知 2025/9/13 22:57:57

华为OD最新机试真题-数组组成的最小数字-OD统一考试（B卷）

题目描述 给定一个整型数组，请从该数组中选择3个元素 组成最小数字并输出 (如果数组长度小于3，则选择数组中所有元素来组成最小数字)。 输入描述 行用半角逗号分割的字符串记录的整型数组，0<数组长度<= 100，0<整数的取值范围<= 10000。 输出描述 由3个元素组成…...

编程新知 2025/9/5 15:59:34