基于arcgis js api 4.x开发点聚合效果

一、代码
 

<html>
<head><meta charset="utf-8" /><meta name="viewport"content="initial-scale=1,maximum-scale=1,user-scalable=no" /><title>Build a custom layer view using deck.gl | Sample | ArcGIS API forJavaScript 4.23</title><link rel="stylesheet" href="http://localhost/arcgis_js_api_424/4.24/esri/css/main.css" /><script src="http://localhost/arcgis_js_api_424/4.24/init.js"></script><style>html,body,#viewDiv {padding: 0;margin: 0;height: 100%;width: 100%;}#infoDiv {padding: 10px;}</style><script>require(["esri/Map", "esri/views/MapView", "esri/Graphic", "esri/layers/GraphicsLayer","esri/widgets/Editor","esri/layers/TileLayer", "esri/layers/WMTSLayer", "esri/layers/WebTileLayer","esri/geometry/Extent", "esri/geometry/Point","esri/widgets/Sketch/SketchViewModel","esri/layers/FeatureLayer", "esri/geometry/SpatialReference","esri/symbols/SimpleFillSymbol", "esri/geometry/Polygon", "esri/symbols/SimpleMarkerSymbol","esri/symbols/SimpleLineSymbol","esri/renderers/HeatmapRenderer", "esri/renderers/UniqueValueRenderer", "esri/Color","esri/layers/support/LabelClass", "esri/widgets/Legend", "esri/widgets/Expand",], (Map,MapView, Graphic, GraphicsLayer, Editor,TileLayer, WMTSLayer, WebTileLayer, Extent, Point, SketchViewModel,FeatureLayer, SpatialReference, SimpleFillSymbol, Polygon, SimpleMarkerSymbol,SimpleLineSymbol, HeatmapRenderer,  UniqueValueRenderer, Color, LabelClass, Legend, Expand) => {$.ajax({url: "./data/point.json",type: "get",dataType: "json",success: function (data) {map = new Map({//  basemap: "streets-vector"});console.log(data)const view = new MapView({container: "viewDiv",map: map,// center: [113.55, 34.78],//zoom:12,spspatialReference: {wkid: 4547},extent: new Extent({xmin: 344577.88,ymin: 2380651.49,xmax: 655422.12,ymax: 5036050.38,spatialReference: new SpatialReference({ wkid: 4547 })})});var features = data.features;let symbol = {type: "simple-marker",  // autocasts as new SimpleMarkerSymbol()style: "square",color: "blue",size: "18px",  outline: {  // autocasts as new SimpleLineSymbol()color: [255, 255, 0],width: 3  // points}};var graphicList = [];for (var i = 0; i < 50000; i++) {var feature = features[i];if (i < 30000) {graphicList.push(new Graphic({geometry: new Point({x: feature.geometry.coordinates[0],y: feature.geometry.coordinates[1],spatialReference: {wkid: 4547}}),symbol: symbol,attributes: { "ObjectID": i + 1, "PatrolStatus": "已巡","Rate":1.0 }}));}if (i >= 30000) {graphicList.push(new Graphic({geometry: new Point({x: feature.geometry.coordinates[0],y: feature.geometry.coordinates[1],spatialReference: {wkid: 4547}}),symbol: symbol,attributes: { "ObjectID": i + 1, "PatrolStatus": "未巡", "Rate": 0.0 }}))};}var renderer = {type: "unique-value",field: "PatrolStatus",defaultSymbol: null,uniqueValueInfos: [{value: "已巡",symbol: {type: "simple-marker",  style: "circle",color: "rgb(182,232,105)",size: "12px",  outline: {  color: "rgb(140,203,23)",width: "4px",}}}, {value: "未巡",symbol: {type: "simple-marker", style: "circle",color: "rgb(195,195,195)",size: "12px",outline: {  color: "rgb(164,164,164)",width: "4px",}}}]}const clusterConfig = {type: "cluster",clusterRadius: 40,maxScale: 5000,popupTemplate: {title: "巡检点聚类信息",content: "此聚类表示 {cluster_count} 个巡检点",fieldInfos: [{fieldName: "cluster_count",format: {places: 0,digitSeparator: true}}],labelingInfo: [{deconflictionStrategy: "none",labelExpressionInfo: {expression: "Text($feature.cluster_count, '#,###')"},symbol: {type: "text",color: "#004a5d",font: {weight: "bold",family: "Noto Sans",size: "12px"}},labelPlacement: "center-center",}],//clusterMinSize: "24px",//clusterMaxSize: "60px",}};let featureLayer = new FeatureLayer({fields: [{name: "ObjectID",alias: "ObjectID",type: "oid"},{name: "PatrolStatus",alias: "巡检状态",//用于图例上显示中文type: "string"},{name: "Rate",alias: "Rate",type: "double"}],outFields: ["*"],opacity: 1,source: graphicList,featureReduction: clusterConfig,renderer: renderer,popupTemplate: {title: "巡检点信息",content: [{type: "fields",fieldInfos: [{fieldName: "ObjectID",label: "巡检ID"},{fieldName: "PatrolStatus",label: "巡检状态"},]}]}});map.add(featureLayer);const legend = new Legend({view: view,container: "legendDiv"});const infoDiv = document.getElementById("infoDiv");view.ui.add(new Expand({view: view,content: infoDiv,expandIcon: "list-bullet",expanded: false}), "top-left");const toggleButton = document.getElementById("cluster");toggleButton.addEventListener("click", () => {let fr = featureLayer.featureReduction;featureLayer.featureReduction = fr && fr.type === "cluster" ? null : clusterConfig;toggleButton.innerText = toggleButton.innerText === "开启聚合" ? "取消聚合" : "开启聚合";});}})});</script>
</head><body><div id="viewDiv"></div><div id="infoDiv" class="esri-widget"><button id="cluster" class="esri-button">取消聚合</button><div id="legendDiv"></div></div>
</body>
</html>

二、效果

1.开启聚合


2.取消聚合

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/633176.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

启动低轨道卫星LEO通讯产业与6G 3GPP NTN标准

通讯技术10年一个大跃进&#xff0c;从1990年的2G至2000年的3G网路&#xff0c;2010年的4G到近期2020年蓬勃发展的5G&#xff0c;当通讯技术迈入融合网路&#xff0c;当前的 5G 技术不仅可提供高频宽、低延迟&#xff0c;同时可针对企业与特殊需求以 5G 专网的模式提供各式服务…

yii2 手动安装第三方扩展

1复制第三方扩展到C:\Users\xpz\Documents\NetBeansProjects\yiicms\admincms.china.com\vendor\yiisoft\目录下 2 添加自动加载&#xff1a;打开vendor/yiisoft/extensions.php 文件&#xff0c;在里面的数组里增加一项&#xff0c;如下面代码 yiisoft/yii2-elasticsearch &…

【.NET Core】 多线程之(Thread)详解

【.NET Core】 多线程之&#xff08;Thread&#xff09;详解 文章目录 【.NET Core】 多线程之&#xff08;Thread&#xff09;详解一、概述二、线程的创建和使用2.1 ThreadStart用于无返回值&#xff0c;无参数的方法2.2 ParameterizedThreadStart:用于带参数的方法 三、线程的…

【机器学习】DBSCAN算法

参考链接&#xff1a; https://blog.csdn.net/haveanybody/article/details/113092851 https://www.jianshu.com/p/dd6ce77bfb8a 1 介绍 DBSCAN(Density-Based Spatial Clustering of Applica tion with Noise)算法是于1996年提出的一种简单的、有效的基于密度的聚类算法&…

使用 Python 第三方库 xlwt 写入数据到 Excel 工作表

1. 安装 xlwt 库 Python 写入数据到 Excel 工作簿中可以使用第三方库 xlwt. xlwt 拆分下来看就是 excel 和 write 的简化拼接&#xff0c;意思就是写数据到 Excel. 这个第三方库的 pip 安装命令如下所示&#xff1a; pip install xlwt -i https://mirrors.aliyun.com/pypi/si…

线性表的顺序存储实现

前言 线性表的顺序存储及基本操作的实现 一、数据对象集 线性表&#xff08;List&#xff09;是由n个元素构成的有序序列&#xff0c;用户处理线性表数据时常常需要初始化、查找、插入、删除、计算数据长度等操作。 数据Data利用数组存储&#xff0c;利用下标使得查找 等操作…

【手把手带你玩转MyBatis】进阶篇:强强联手,深度解析如何无缝整合MyBatis与Spring框架

在实际开发中&#xff0c;将MyBatis持久层框架与Spring框架进行整合&#xff0c;可以充分利用Spring的依赖注入&#xff08;DI&#xff09;和面向切面编程&#xff08;AOP&#xff09;等特性&#xff0c;进一步提升项目的可维护性和扩展性。以下是详细步骤&#xff1a; 1. 添加…

FairGuard游戏安全2023年度报告

导 读&#xff1a;2023年&#xff0c;游戏行业摆脱了疫情带来诸多负面影响&#xff0c;国内游戏市场收入与用户规模双双实现突破&#xff0c;迎来了历史新高点。但游戏黑灰产规模也在迅速扩大&#xff0c;不少游戏饱受其侵扰&#xff0c;游戏厂商愈发重视游戏安全问题。 为帮助…

WordPress怎么禁用文章和页面古腾堡块编辑器?如何恢复经典小工具?

现在下载WordPress最新版来搭建网站&#xff0c;默认的文章和页面编辑器&#xff0c;以及小工具都是使用古腾堡编辑器&#xff08;Gutenberg块编辑器&#xff09;。虽然有很多站长说这个编辑器很好用&#xff0c;但是仍然有很多站长用不习惯&#xff0c;觉得操作太难了&#xf…

C/C++ BM5 合并K个已排序的链表

文章目录 前言题目1 解决方案一1.1 思路阐述1.2 源码 2 解决方案二2.1 思路阐述2.2 源码 总结 前言 在接触了BM4的两个链表合并的情况&#xff0c;对于k个已排序列表&#xff0c;其实可以用合并的方法来看待问题。 这里第一种方法就是借用BM4的操作&#xff0c;只不过是多个合…

怎么处理vue项目中的错误详解

文章目录 一、错误类型二、如何处理后端接口错误代码逻辑问题全局设置错误处理生命周期钩子 三、源码分析小结参考文献 一、错误类型 任何一个框架&#xff0c;对于错误的处理都是一种必备的能力 在 Vue 中&#xff0c;则是定义了一套对应的错误处理规则给到使用者&#xff0…

【MATLAB源码-第117期】基于matlab的蜘蛛猴优化算法(SMO)机器人栅格路径规划,输出做短路径图和适应度曲线。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 蜘蛛猴优化算法&#xff08;Spider Monkey Optimization, SMO&#xff09;是一种灵感来源于蜘蛛猴觅食行为的群体智能优化算法。蜘蛛猴是一种生活在南美洲热带雨林中的灵长类动物&#xff0c;它们在寻找食物时展现出的社会行…

深入探究 JavaScript 中的 String:常用方法和属性全解析(上)

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

JavaScript深浅拷贝的几种方式

文章目录 前言深拷贝1. JSON.parse(JSON.strigify(Str))2. lodash.deepclone3. structuredClone 浅拷贝总结 前言 深浅拷贝主要是针对于引用类型而言的 深拷贝 1. JSON.parse(JSON.strigify(Str)) 序列化的作用是存储(对象本身存储的只是一个地址映射&#xff0c;如果断电&a…

比特币狂人引爆达沃斯论坛

点击查看TechubNews原文链接&#xff1a;比特币狂人引爆达沃斯论坛 比特币狂人、自称无政府资本主义者的阿根廷总统米莱在达沃斯的最新演讲引爆社交网络大讨论。 1 月 15 日&#xff0c;第 54 届世界经济论坛在瑞士阿尔卑斯山的达沃斯开幕。来自约 60 个国家首脑和跨国公司的领…

区域入侵检测AI边缘计算智能分析网关V4如何通过ssh进行服务器远程运维

智能分析网关V4是一款高性能、低功耗的AI边缘计算硬件设备&#xff0c;它采用了BM1684芯片&#xff0c;集成高性能8核ARM A53&#xff0c;主频高达2.3GHz&#xff0c;并且INT8峰值算力高达17.6Tops&#xff0c;FB32高精度算力达到2.2T&#xff0c;每个摄像头可同时配置3种算法&…

【flink番外篇】15、Flink维表实战之6种实现方式-完整版(2)

Flink 系列文章 一、Flink 专栏 Flink 专栏系统介绍某一知识点&#xff0c;并辅以具体的示例进行说明。 1、Flink 部署系列 本部分介绍Flink的部署、配置相关基础内容。 2、Flink基础系列 本部分介绍Flink 的基础部分&#xff0c;比如术语、架构、编程模型、编程指南、基本的…

Vue 中 Element UI 的 el-table 组件实现动态表头和内容

在 Vue 中使用 Element UI 的 el-table 组件时&#xff0c;为了实现动态表头&#xff08;包括第一层表头及其下的嵌套表头或子表头&#xff09;。需要后端返回的数据结构能够体现表头层级关系以及对应的数据结构相匹配。这样的数据通常是一个嵌套数组&#xff0c;每个表头单元可…

GIt与IDEA结合,多人操作gitee仓库

提交到本地 push到gitee远程仓库 在做这些之前注意配置git要忽略上传的文件,一般上传代码只上传src和pom.xml即可 在c盘用户里放置 git.ignore # Compiled class file *.class# Log file *.log# BlueJ files *.ctxt# Mobile Tools for Java (J2ME) .mtj.tmp/# Package Files …

算法刷题——拿出最少数目的魔法豆(力扣)

文章目录 题目描述我的解法思路结果分析 官方题解分析 查漏补缺更新日期参考来源 题目描述 传送门 拿出最少数目的魔法豆&#xff1a;给定一个正整数 数组beans &#xff0c;其中每个整数表示一个袋子里装的魔法豆的数目。请你从每个袋子中拿出 一些豆子&#xff08;也可以 拿…