components/layer/lineLayer.js

/*``
 * @Author: tjc
 * @Date:   2017-04-20 17:03:05
 * @Last Modified by:   hydata
 * @Last Modified time: 2018-05-10 17:11:27
 * @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/lineStyle';

/**
 * 线图层
 * @extends baseLayer
 */
class LineLayer extends baseLayer {
    /**
     *
     *
     * options:{
     *    serie:{
     *       'visibility': 'visible',
             'line-cap': 'round',
             'line-join': 'miter',
             'line-miter-limit': 2,
             'line-round-limit': 1.05,
             'line-opacity': 1,
             'line-color': '#ccc',
             'line-translate': [0, 0],
             'line-width': 1,
             'line-gap-width': 0,
             'line-offset': 0,
             'line-blur': 0,
             'line-dasharray': [1],
             'line-pattern': undefined
                }
           }
     * @param options
     */
    constructor(options) {

        options.layerType = 'line';
        super(options);
        this.data = options.serie;
        this.init(options.serie);

    }

    /**
     * 构造json
     * @param {*} serie 
     */
    buildJson(serie = {}) {

        //构建数据
        let dataObject = dataUtil.buildData(serie.data);

        serie.max = dataObject.max;
        serie.min = dataObject.min;
        this.addSource(dataObject.geojson);
        //构建样式
        const style = this.buildStyle(serie);
        let normal = this.buildLayer(this.id, style.normal);
        this.addLayer(normal);

        let emphasis = this.buildLayer(this.id, style.emphasis, true);
        this.addLayer(emphasis);

    }

    /**
     *构造style
     * @param serie
     * @returns {{normal: {type: string, paint: *, layout: {visibility, line-cap: *, line-join: *, line-round-limit: *, line-miter-limit: *}}, emphasis: {type: string, paint: *, layout: {visibility, line-cap: *, line-join: *, line-round-limit: *, line-miter-limit: *}}}}
     */
    buildStyle(serie) {

        const style = serie.symbolStyle;
        let normal = Object.assign({}, styleModel, style && style.normal);
        let emphasis = Object.assign({}, normal, style && style.emphasis);

        let visibility = normal.visibility;
        delete normal['visibility'];

        let lineCap = normal['line-cap'];
        delete normal['line-cap'];
        let lineJoin = normal['line-join'];
        delete normal['line-join'];
        let lineRoundLimit = normal['line-round-limit'];
        delete normal['line-round-limit'];
        let lineMiterLimit = normal['line-miter-limit'];
        delete normal['line-miter-limit'];

        let emphasisiVisibility = emphasis.visibility;
        delete emphasis['visibility'];

        let emphasisLineCap = emphasis['line-cap'];
        delete emphasis['line-cap'];
        let emphasisLineJoin = emphasis['line-join'];
        delete emphasis['line-join'];
        let emphasisLineRoundLimit = emphasis['line-round-limit'];
        delete emphasis['line-round-limit'];
        let emphasisLimeMiterLimit = emphasis['line-miter-limit'];
        delete emphasis['line-miter-limit'];


        return {
            normal: {
                'type': 'line',
                'paint': normal,
                'layout': {
                    // 'visibility': visibility,
                    // 'line-cap': lineCap,
                    // 'line-join': lineJoin,
                    // 'line-round-limit': lineRoundLimit,
                    // 'line-miter-limit': lineMiterLimit
                }
            },
            emphasis: {
                'type': 'line',
                'paint': emphasis,
                'layout': {
                    // 'visibility': emphasisiVisibility,
                    // 'line-cap': emphasisLineCap,
                    // 'line-join': emphasisLineJoin,
                    // 'line-round-limit': emphasisLineRoundLimit,
                    // 'line-miter-limit': emphasisLimeMiterLimit
                }
            }
        };

    }
}
export default LineLayer;