目前arcgis 的聚合图层有几个方案,一个是基于arcgis 官方cluser属性 不过只能适用于mapView,还有一种基于github
的flareCluster,flareCluster 拖动会导致抖动。
设计思路
- 原来的clusterlayer 是用graphiclayer 实现的,因为arcgis 4没有renderer 我们来用featurelayer 来实现,featurelayer 不走服务,走动态source 添加
- 通过设置classBreakRender 使不同范围的点cluster起来
- 有两种feauterlayer, 一种是作为渲染cluster用的,当view.scale 小于某个比例尺时候不要用renderer了,直接调用featurelayer source 属性动态添加,当然renderer也是动态添加
- 数量文本不使用 TextSymbol 了,直接使用featurelayer的labelClass属性
- 监听view 的zoom 事件 ,每次实时刷featurelayer,我是remove featurelayer再次添加,貌似操作source里面数据没有用
升级之后的EsriClusterLayer 后续调用等下一篇文章
```javascript
const __extends =
(this && this.__extends) ||
(function() {
var extendStatics = function(d, b) {
extendStatics =
Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array &&
function(d, b) {
d.__proto__ = b;
}) ||
function(d, b) {
for (const p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
};
return extendStatics(d, b);
};
return function(d, b) {
extendStatics(d, b);
function __() {
this.constructor = d;
}
d.prototype = b === null ? Object.create(b) : ((__.prototype = b.prototype), new __());
};
})();
const __decorate =
(this && this.__decorate) ||
function(decorators, target, key, desc) {
let c = arguments.length,
r =
c < 3
? target
: desc === null
? (desc = Object.getOwnPropertyDescriptor(target, key))
: desc,
d;
if (typeof Reflect === 'object' && typeof Reflect.decorate === 'function')
r = Reflect.decorate(decorators, target, key, desc);
else
for (let i = decorators.length - 1; i >= 0; i--)
if ((d = decorators[i]))
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
const __metadata =
(this && this.__metadata) ||
function(k, v) {
if (typeof Reflect === 'object' && typeof Reflect.metadata === 'function')
return Reflect.metadata(k, v);
};
import * as esriLoader from 'esri-loader';
export const esriClusterLayer = {};
esriClusterLayer.create = function() {
let a = null;
return new Promise((resolve, reject) => {
esriLoader.dojoRequire(
[
'esri/geometry/SpatialReference',
'esri/geometry/Point',
'esri/Graphic',
'esri/symbols/SimpleLineSymbol',
'esri/symbols/SimpleMarkerSymbol',
'esri/symbols/TextSymbol',
'esri/renderers/ClassBreaksRenderer',
'esri/PopupTemplate',
'esri/core/watchUtils',
'esri/core/accessorSupport/decorators',
'esri/layers/FeatureLayer'
],
更多消息参考小专栏https://xiaozhuanlan.com/topic/9018465372