【arcgis】地图数据加载优化方法

一、将远程字库替换为本地字库

参考文章：https://blog.csdn.net/lf5566fl/article/details/127667321

二、graphicLayer替代FeatureLayer

如果是动态加载图斑尽可能用graphicLayer替代FeatureLayer提升效率
但要明确需求 如果有很高的样式要求，FeatureLayer能实现更灵活。

三、使用sleep函数实现延迟执行地图数据请求

在arcgis js api使用过程中，地图操作响应可能出现多次快速重复触发响应，但实际上我们不抱希望刷新数据的频率过高，希望用户在滚动或滑动地图界面时，只取最终的缩放、移动参数进行数据请求，因此需要用到sleep方法。在原生js中并不存在sleep方法，因此推荐以下两种实现代码参考。

参考资料：javascript 使用sleep函数的常见方法详解

1、实现基于async函数实现sleep

let timeclear=false;

function sleep(time){
 return new Promise((resolve) => setTimeout(resolve, time));
}

async function refresh(){
	console.log('触发arcgis响应事件')
 if(!timeclear){
	 timeclear=true;
	 console.log('刷新地图数据')
	 await sleep(5000);
	 timeclear=false;
 }
}

setInterval(function(){ refresh() }, 1000); //模拟arcgis js api地图事件多次快速重复触发响应

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

2、使用npm sleep包实现sleep
npm安装sleep模块（官网地址）

npm i sleep
1

let timeclear=false;
let sleep = require('sleep');

function refresh(){
	console.log('触发arcgis响应事件')
 if(!timeclear){
	 timeclear=true;
	 console.log('刷新地图数据')
	 sleep.sleep(2); //休眠2秒钟
     //sleep.msleep(1000); //休眠1000毫秒
     //sleep.usleep(1000000) //休眠1000000微秒 = 1秒
	 timeclear=false;
 }
}

setInterval(function(){ refresh() }, 1000);  //模拟arcgis js api地图事件多次快速重复触发响应

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

四、使用数据聚合

如果点位/多边形数量分布范围较大，一般需要做聚合操作。

1、数据量如果不大，可在前台实现数据聚合，优化视觉效果。
arcgis api js前端聚合参考：
aggregate官方案例1
aggregate官方案例2

设置启用聚合：

layer.featureReduction = {
  type: "cluster"
};
1
2
3

聚合配置：

const clusterConfig = {
          type: "cluster",
          clusterRadius: "100px",
          // {cluster_count} is an aggregate field containing
          // the number of features comprised by the cluster
          popupTemplate: {
            title: "Cluster summary",
            content: "This cluster represents {cluster_count} earthquakes.",
            fieldInfos: [{
              fieldName: "cluster_count",
              format: {
                places: 0,
                digitSeparator: true
              }
            }]
          },
          clusterMinSize: "24px",
          clusterMaxSize: "60px",
          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",
          }]
        };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

2、数据量如果比较大，可在后台实现数据聚合计算，优化数据加载。