/*``
* @Author: lc
* @Date: 2017-04-20 17:03:05
* @Last Modified by: hydata
* @Last Modified time: 2018-05-10 17:14:18
* @Email: 304861063@qq.com
* @File Path: F:\work\hyMap\src\components\layer\buildingLayer.js
* @File Name: clustersLayer.js
* @Descript:聚合图层
*/
import baseLayer from './baseLayer';
import dataUtil from '../../util/dataUtil';
import styleModel from '../../model/clustersStyle';
/**
* 聚合层
* @extends baseLayer
*/
class ClustersLayer extends baseLayer {
/**
* 初始化
* @param options
*/
constructor(options) {
options.layerType = 'fill';
super(options);
options.serie.symbolStyle.normal=Object.assign({}, styleModel, options.serie.symbolStyle.normal);
this.data = options.serie;
this.geojson = this.init(options.serie);
}
/**
* 添加图层数据元，添加圆图层，点图层，文本图层
* @param serie
*/
init(serie) {
//构建数据
let dataObject = dataUtil.buildData(serie.data);
dataObject.geojson.cluster = true;
this.map.on('load', () => {
this.map.addSource(this.id + '_sourceID', dataObject.geojson);
//圆图层
let clusterJson = this.buildClustersJson(serie);
this.addLayer(clusterJson);
//数字图层
let textJson = this.buildTextJson(serie);
this.addLayer(textJson);
//点图层
let pointJson = this.buildPointJson(serie);
this.addLayer(pointJson);
});
}
/**
* 圆图层样式构建
* @param {Object} serie 图层对象
* @returns {JSON}
*/
buildClustersJson(serie) {
//构建样式
let style = this.buildClusterStyle(serie);
let json = {
'id': this.id + 'clusters',
'source': this.id + '_sourceID',
'filter': ['has', 'point_count']
};
Object.assign(json, style);
return json;
}
/**
* 圆图层样式
* @param serie
* @returns {JSON}
*/
buildClusterStyle(serie) {
let normal = Object.assign({}, serie.symbolStyle.normal);
normal['circle-color'].type = 'interval';
normal['circle-color'].property = 'point_count';
normal['circle-radius'].type = 'interval';
normal['circle-radius'].property = 'point_count';
return {
'type': 'circle',
'paint': {
'circle-color': normal['circle-color'],
'circle-radius': normal['circle-radius']
}
};
}
/**
* 字体图层样式构建
* @param {Object} serie
* @returns {JSON}
*/
buildTextJson(serie) {
//构建样式
let style = this.buildTextStyle(serie);
let json = {
'id': this.id + 'text',
'source': this.id + '_sourceID',
'filter': ['has', 'point_count']
};
Object.assign(json, style);
return json;
}
/**
* 字体图层样式
* @param {Object} serie
* @returns {JSON}
*/
buildTextStyle(serie) {
let normal = Object.assign({}, serie.symbolStyle.normal);
return {
'type': 'symbol',
'layout': {
'text-field': '{point_count_abbreviated}',
'text-font': normal['text-font'],
'text-size': normal['text-size']
}
};
}
/**
* 点图层样式构建
* @param {Object} serie
* @returns {JSON}
*/
buildPointJson(serie) {
//构建样式
let style = this.buildPointStyle(serie);
let json = {
'id': this.id + 'point',
'source': this.id + '_sourceID',
'filter': ['!has', 'point_count']
};
Object.assign(json, style);
return json;
}
/**
* 点图层样式
* @param serie
* @returns {JSON}
*/
buildPointStyle(serie) {
let normal = Object.assign({}, serie.symbolStyle.normal);
return {
'type': 'circle',
'paint': normal['unclustered-point']
};
}
/**
* 从地图上移除聚类图层
*/
dispose() {
this.map.on('load', () => {
this.map.removeLayer(this.id + 'clusters');
this.map.removeLayer(this.id + 'text');
this.map.removeLayer(this.id + 'point');
this.map.removeSource(this.id + '_sourceID');
});
}
/**
* 从地图上隐藏聚类图层
*/
hide() {
this.map.on('load', () => {
this.map.setLayoutProperty(this.id + 'clusters', 'visibility', 'none');
this.map.setLayoutProperty(this.id + 'text', 'visibility', 'none');
this.map.setLayoutProperty(this.id + 'point', 'visibility', 'none');
});
}
/**
* 显示隐藏的聚类图层
*/
show() {
this.map.on('load', () => {
this.map.setLayoutProperty(this.id + 'clusters', 'visibility', 'visible');
this.map.setLayoutProperty(this.id + 'text', 'visibility', 'visible');
this.map.setLayoutProperty(this.id + 'point', 'visibility', 'visible');
});
}
}
export default ClustersLayer;