components/layer/symbolLayer.js

/*``
 * @Author: tjc
 * @Date:   2017-04-20 17:03:05
 * @Last Modified by:   hydata
 * @Last Modified time: 2018-05-10 16:03:33
 * @Email: 304861063@qq.com
 * @File Path: F:\work\hyMap\src\components\layer\buildingLayer.js
 * @File Name: clustersLayer.js
 * @Descript:符号图层
 */
import baseLayer from './baseLayer';
import styleModel from '../../model/symbolStyle';
import dataUtil from '../../util/dataUtil';
import { debug } from 'util';

/**
 * 图标层
 * @extends base
 */
class SymbolLayer extends baseLayer {
    /**
     * 图标层
     * @param {*} options 
     */
    constructor(options) {

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

    }

    /**
     * 添加数据源
     * @param serie
     */
    buildJson(serie) {

        //构建数据
        let dataObject = dataUtil.buildData(serie.data);
        this.addSource(dataObject.geojson);
        serie.max = dataObject.max;
        serie.min = dataObject.min;
        //构建样式
        let style = serie.symbolStyle||{normal:{},emphasis:{}};
        let normal = Object.assign({}, styleModel, style.normal);
        let emphasis = Object.assign({}, normal, style.emphasis);

        let symbol = normal['icon-image'];
        if (symbol.indexOf('icon:') === 0) {

            //添加本地资源图片，以“icon:”开头
            const src = symbol.split('icon:')[1];
            this.map.loadImage(src, (error, image) => {

                if (error) throw error;
                this.addImage(this.id, image);
                normal['icon-image'] = this.id;
                //构建样式
                this._addLayer(normal);

                const eSymbol = emphasis['icon-image'];

                if (symbol === eSymbol) {

                    emphasis['icon-image'] = this.id;
                    this._addLayer(emphasis, true);

                } else {

                    const esrc = eSymbol.split(':')[1];
                    this.map.loadImage(esrc, (error, image) => {

                        this.addImage(this.id + '-hover', image);
                        emphasis['icon-image'] = this.id + '-hover';
                        this._addLayer(emphasis, true);

                    });

                }

            });

        } else {

            this._addLayer(normal);
            this._addLayer(emphasis, true);

        }

    }

    _addLayer(style, isHover = false) {

        const eStyle = this.buildStyle(style);
        let emphasisJSon = this.buildLayer(this.id, eStyle, isHover);
        this.addLayer(emphasisJSon);

    }

    /**
     * 增加图像
     * @param {*} id 
     * @param {*} image 
     */
    addImage(id, image) {

        this.map.addImage(id, image);

    }

    // addImage(id, src) {
    //
    //     return new Promise((resolve, reject) => {
    //
    //         this.map.loadImage(src, (error, image) => {
    //
    //             if (error) reject(error);
    //             this.map.addImage(id, image);
    //             resolve(image);
    //
    //         });
    //
    //     });
    //
    // }

    /**
     * 构建样式
     * @param style
     * @returns {{type: string, layout: *, paint: {icon-color: string, icon-opacity: *, text-color: *, text-opacity: *, text-halo-color: *, text-halo-width: *}}}
     */
    buildStyle(style) {

        // let labelSize = this.buildSize(serie.labelSize, serie.min, serie.max);
        // if(serie.symbolSize){
        //
        //     const min=Math.floor(serie.symbolSize[0]/image.width*100)/100;
        //     const max=Math.floor(serie.symbolSize[1]/image.width*100)/100;
        //     serie.symbolScale=[min,max];
        //
        // }
        // const column=serie.labelColumn||'value';

        const iconOpacity = style['icon-opacity'];
        delete style['icon-opacity'];

        const textColor = style['text-color'];
        delete style['text-color'];

        const textOpacity = style['text-opacity'];
        delete style['text-opacity'];

        const textHaloColor = style['text-halo-color'];
        delete style['text-halo-color'];

        const textHaloWidth = style['text-halo-width'];
        delete style['text-halo-width'];

        return {
            'type': 'symbol',
            'layout': style,
            'paint': {
                'icon-color': 'red',
                'icon-opacity': iconOpacity,
                'text-color': textColor,
                'text-opacity': textOpacity,
                'text-halo-color': textHaloColor,
                'text-halo-width': textHaloWidth

            }

        };

    }
}

export default  SymbolLayer;