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

2024-02-25 08:12

本文主要是介绍ArcgisForJS如何将ArcGIS Server发布的点要素渲染为热力图?,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

  • 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发布的点要素渲染为热力图?的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

修复已被利用的高危漏洞! macOS Sequoia 15.6.1发布

《修复已被利用的高危漏洞!macOSSequoia15.6.1发布》苹果公司于今日发布了macOSSequoia15.6.1更新,这是去年9月推出的macOSSequoia操作... MACOS Sequoia 15.6.1 正式发布!此次更新修复了一个已被黑客利用的严重安全漏洞,并解决了部分中文用户反馈的

Python 基于http.server模块实现简单http服务的代码举例

《Python基于http.server模块实现简单http服务的代码举例》Pythonhttp.server模块通过继承BaseHTTPRequestHandler处理HTTP请求,使用Threa... 目录测试环境代码实现相关介绍模块简介类及相关函数简介参考链接测试环境win11专业版python

SQL Server 查询数据库及数据文件大小的方法

《SQLServer查询数据库及数据文件大小的方法》文章介绍了查询数据库大小的SQL方法及存储过程实现,涵盖当前数据库、所有数据库的总大小及文件明细,本文结合实例代码给大家介绍的非常详细,感兴趣的... 目录1. 直接使用SQL1.1 查询当前数据库大小1.2 查询所有数据库的大小1.3 查询每个数据库的详

Spring Boot 整合 SSE(Server-Sent Events)实战案例(全网最全)

《SpringBoot整合SSE(Server-SentEvents)实战案例(全网最全)》本文通过实战案例讲解SpringBoot整合SSE技术,涵盖实现原理、代码配置、异常处理及前端交互,... 目录Spring Boot 整合 SSE(Server-Sent Events)1、简述SSE与其他技术的对

SQL Server跟踪自动统计信息更新实战指南

《SQLServer跟踪自动统计信息更新实战指南》本文详解SQLServer自动统计信息更新的跟踪方法,推荐使用扩展事件实时捕获更新操作及详细信息,同时结合系统视图快速检查统计信息状态,重点强调修... 目录SQL Server 如何跟踪自动统计信息更新:深入解析与实战指南 核心跟踪方法1️⃣ 利用系统目录

SQL Server 中的 WITH (NOLOCK) 示例详解

《SQLServer中的WITH(NOLOCK)示例详解》SQLServer中的WITH(NOLOCK)是一种表提示,等同于READUNCOMMITTED隔离级别,允许查询在不获取共享锁的情... 目录SQL Server 中的 WITH (NOLOCK) 详解一、WITH (NOLOCK) 的本质二、工作

SQL Server安装时候没有中文选项的解决方法

《SQLServer安装时候没有中文选项的解决方法》用户安装SQLServer时界面全英文,无中文选项,通过修改安装设置中的国家或地区为中文中国,重启安装程序后界面恢复中文,解决了问题,对SQLSe... 你是不是在安装SQL Server时候发现安装界面和别人不同,并且无论如何都没有中文选项?这个问题也

SQL server数据库如何下载和安装

《SQLserver数据库如何下载和安装》本文指导如何下载安装SQLServer2022评估版及SSMS工具,涵盖安装配置、连接字符串设置、C#连接数据库方法和安全注意事项,如混合验证、参数化查... 目录第一步:打开官网下载对应文件第二步:程序安装配置第三部:安装工具SQL Server Manageme

C#连接SQL server数据库命令的基本步骤

《C#连接SQLserver数据库命令的基本步骤》文章讲解了连接SQLServer数据库的步骤,包括引入命名空间、构建连接字符串、使用SqlConnection和SqlCommand执行SQL操作,... 目录建议配合使用:如何下载和安装SQL server数据库-CSDN博客1. 引入必要的命名空间2.

SQL Server配置管理器无法打开的四种解决方法

《SQLServer配置管理器无法打开的四种解决方法》本文总结了SQLServer配置管理器无法打开的四种解决方法,文中通过图文示例介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的... 目录方法一:桌面图标进入方法二:运行窗口进入检查版本号对照表php方法三:查找文件路径方法四:检查 S