vue+arcgis3.x---部分方法封装(图层相关)

必须将arcgis api添加到vuex中 。不了解先看我的文章“vue+argis3.x 初始化”

import store from '@/store'

class LayerUtil {
    constructor(options) {
            this.options = options ? options : {};
            this.map = store.getters.mapModular.Map;
            this.mapModular = store.getters.mapModular;
        }
        /**
         * 添加 FeatureLayer 图层
         * @param {String} url  图层URL
         * @param {String} id 图层ID
         * @param {String} expression 图层过滤条件
         * @param {Boolean} visible  图层显示隐藏
         * @param {Objct} clickFn 图层点击事件
         */
    addFeatureLayer(url, id, expression, visible, clickFn) {
            let layer = new this.mapModular.FeatureLayer(
                url, {
                    id: id,
                    outFields: ["*"],
                    visible: visible === undefined ? false : visible, // false 隐藏  true 显示,
                });
            // 图层过滤条件
            layer.setDefinitionExpression(expression);
            // 设置图层的比例范围。如果将minScale和maxScale设置为0，则该图层将在所有比例下均可见
            // layer.setScaleRange(30000, 0);

            if (clickFn) {
                layer.on('click', clickFn);
            }
            this.mapModular.Map.addLayer(layer);

        }
        /**
         * 选择图层
         * @param {*} queryResult
         * @param {*} graphicsLayerId
         * @param {*} callBack
         */
    selectLayers(queryResult, graphicsLayerId, callBack) {
        /* 是否存在图层 */
        let isTrue = false;
        // 清除图层绘制
        for (let i = 0; i < queryResult.features.length; i++) {
            this.mapModular.Map.graphicsLayerIds.map((item) => {
                if (item === graphicsLayerId) {
                    this.mapModular.Map.getLayer(item).clear();
                    isTrue = true;
                }
            });
            //获得该图形的形状
            let feature = queryResult.features[i];
            let geometry = feature.geometry;
            /**
             * 定义高亮图形的符号
             * 边框样式
             * new SimpleLineSymbol(style, color, width)
             * 面样式
             * new SimpleFillSymbol(style, outline, color)
             */
            //1.定义面的边界线符号
            let outline = new this.mapModular.SimpleLineSymbol(
                this.mapModular.SimpleLineSymbol.STYLE_SOLID,
                new this.mapModular.Color([64, 158, 255]),
                1
            );
            //2.定义面符号
            let PolygonSymbol = new this.mapModular.SimpleFillSymbol(
                this.mapModular.SimpleFillSymbol.STYLE_SOLID,
                outline,
                new this.mapModular.Color([0, 255, 255, 0.5])
            );
            //创建客户端图形
            let graphic = new this.mapModular.Graphic(geometry, PolygonSymbol);
            // 定位到地图中间
            this.mapModular.Map.centerAt(geometry.getCentroid());
            /**
             * 将客户端图形添加到map中
             * 1.创建“绘制图层”GraphicsLayer
             * 2.将图形（Graphic）添加到“绘制图层”
             * 3.将“绘制图层”添加到地图(map)上
             */

            if (!isTrue) {
                let graphicsLayer = new this.mapModular.GraphicsLayer({
                    id: graphicsLayerId,
                });
                graphicsLayer.add(graphic);
                this.mapModular.Map.addLayer(graphicsLayer, 1);
            } else {
                this.mapModular.Map.getLayer(graphicsLayerId).add(graphic);
            }

            // 返回选中的面
            if (typeof(callBack) == 'function') {

                callBack(feature.attributes)
            }

        }
    }

    /**
     * 关键字：
     *    根据条件对服务进行查询并渲染图层、标注
     * @param {String} serverUrl 服务地址
     * @param {String} layerId 图层Id
     * @param {String} where 判断条件
     * @param {Array} identification 区分条件
     * @param {Array} colors 颜色数组
     * @param {Boolean} isTagging 是否显示标注
     * @param {String} taggingName 标注显示字段（服务）
     */
    conditionalRenderLayer(serverUrl, layerId, where, identification, colors, isTagging, taggingName) {
        let featureLayer = new this.mapModular.FeatureLayer(
            serverUrl, // 服务地址
            {
                outFields: ["*"],
                id: layerId, // 图层ID
            });
        //定义线符号
        let lineSymbol = new this.mapModular.SimpleLineSymbol(
            this.mapModular.SimpleLineSymbol.STYLE_SOLID,
            new this.mapModular.Color([64, 158, 255]),
            1
        );
        //定义面符号
        let fill = new this.mapModular.SimpleFillSymbol(this.mapModular.SimpleFillSymbol.STYLE_SOLID, lineSymbol, new this.mapModular.Color("#FFFFCC"));
        //定义唯一值渲染器，对字段alias进行渲染，fill是默认的渲染符号
        let renderer = new this.mapModular.UniqueValueRenderer('', where);
        /**
         * 根据"where == item"判断设置渲染的方式
         *
         */
        identification.map((item, index) => {
            renderer.addValue(item, new this.mapModular.SimpleFillSymbol(this.mapModular.SimpleFillSymbol.STYLE_SOLID, lineSymbol, new this.mapModular.Color(colors[index])));
        });
        featureLayer.setRenderer(renderer);

        // 标注
        // if (isTagging) {
        //     this.Tagging(featureLayer, taggingName)
        // }
        /**
         * 索引为0 让绘制的图层放在最底部，不影响其他图层显示（不然会遮盖其他图层）
         */
        this.mapModular.Map.addLayer(featureLayer, 0);

    }

    /**
     * 标注图层  
     * @param {object} featureLayer  // 图层
     * @param {String} taggingName // 标志显示内容
     */
    Tagging(featureLayer, taggingName) {
        let lc = new this.mapModular.LabelClass({
            labelExpressionInfo: {
                expression: `$feature.${taggingName}` // 标注内容
            },
            labelPlacement: "below-center" //标记位置为正下方
        });
        //设置LabelClass的symbol
        let textSymbol = new this.mapModular.TextSymbol();
        textSymbol.color = new this.mapModular.Color([0, 0, 0, 1]); //设置标注颜色
        let font = new this.mapModular.Font("9pt", this.mapModular.Font.STYLE_NORMAL, this.mapModular.Font.VARIANT_NORMAL, this.mapModular.Font.WEIGHT_NORMAL, "Microsoft YaHei"); //设置标注字体
        textSymbol.font = font;
        lc.symbol = textSymbol;
        featureLayer.setLabelingInfo([lc]);
        lc.minScale = 16000
    }

    /**
     * 标注图层  
     * @param {object} featureLayer  // 图层
     * @param {String} taggingName // 标志显示内容
     */
    Tagging1(featureLayer, taggingName) {
        let lc = new this.mapModular.LabelClass({
            labelExpressionInfo: {
                expression: `$feature.${taggingName}` // 标注内容
            },
            labelPlacement: "below-center" //标记位置为正下方
        });
        //设置LabelClass的symbol
        let textSymbol = new this.mapModular.TextSymbol();
        textSymbol.color = new this.mapModular.Color([255, 0, 0, 1]); //设置标注颜色
        let font = new this.mapModular.Font("11pt", this.mapModular.Font.STYLE_NORMAL, this.mapModular.Font.VARIANT_NORMAL, this.mapModular.Font.WEIGHT_NORMAL, "Microsoft YaHei"); //设置标注字体
        textSymbol.font = font;
        lc.symbol = textSymbol;
        featureLayer.setLabelingInfo([lc]);
        // lc.minScale = 16000
    }

    /**
     * hove  featurelayer
     * @param {*} url 
     * @param {*} id 
     * @param {*} expression 筛选条件
     * @param {*} visible  是否显示
     * @param {*} InfoTemplateFn 回调方法
     */
    addFeatureLayerAndHover(param, InfoTemplateFn) {
        let url = param.url;
        let id = param.id;
        let setScaleRange = param.scaleRange;
        let Mask = param.IsMask;
        let map = this.mapModular.Map;
        let self = this;
        let layer = new this.mapModular.FeatureLayer(
            url, {
                id: id,
                outFields: ["*"],
                // mode:'MODE_SNAPSHOT',
                visible: true // false 隐藏  true 显示,
            });
        // 图层过滤条件
        // layer.setDefinitionExpression(expression);
        // 设置图层的比例范围。如果将minScale和maxScale设置为0，则该图层将在所有比例下均可见
        layer.setScaleRange(setScaleRange[0], setScaleRange[1]);

        //1.定义面的边界线符号
        let outline = new this.mapModular.SimpleLineSymbol(
            this.mapModular.SimpleLineSymbol.STYLE_SOLID,
            new this.mapModular.Color([255, 255, 0]),
            1
        );
        //2.定义面符号
        let color = Mask ? [0, 255, 255, .5] : [0, 255, 255, 0]
        let PolygonSymbol = new this.mapModular.SimpleFillSymbol(
            this.mapModular.SimpleFillSymbol.STYLE_SOLID,
            outline,
            new this.mapModular.Color(color)
        );
        layer.setRenderer(new this.mapModular.SimpleRenderer(PolygonSymbol));
        this.mapModular.Map.addLayer(layer, 30);


        let highlightSymbol = new self.mapModular.SimpleFillSymbol(
            self.mapModular.SimpleFillSymbol.STYLE_SOLID,
            new self.mapModular.SimpleLineSymbol(
                self.mapModular.SimpleLineSymbol.STYLE_SOLID,
                new self.mapModular.Color([255, 0, 0]), 3
            ),
            new self.mapModular.Color([125, 125, 125, 0])
        );

        let graphicLayer = new self.mapModular.GraphicsLayer({
            id: `${id}mouseOverGraphicsLayerID`
        });


        map.on("load", function() {
            // map.graphics.enableMouseEvents();
            graphicLayer.on("mouse-out", closeDialog);

            function closeDialog() {
                //    setTimeout(()=>{
                InfoTemplateFn('', 'hover');
                graphicLayer.clear();
                //    },1000)
            }
        });

        /**
         * 选中图层参数
         */
        let eventData = '';

        /**
         * 图层hover 事件监听
         */
        layer.on("mouse-over", function(evt) {
            let highlightGraphic = new self.mapModular.Graphic(evt.graphic.geometry, highlightSymbol);

            if (map.getLayer(`${id}mouseOverGraphicsLayerID`)) {
                // 清除历史图层
                map.graphicsLayerIds.forEach(element => {
                    if (element.indexOf('mouseOverGraphicsLayerID') != -1) {
                        map.getLayer(element).clear()
                    }
                });
                graphicLayer.add(highlightGraphic)
            } else {
                graphicLayer.add(highlightGraphic)
                map.addLayer(graphicLayer);
            }
            // 鼠标指针样式
            map.setMapCursor("pointer");

            eventData = evt;
            setTimeout(() => {
                InfoTemplateFn(evt, 'hover')
            }, 50)

            graphicLayer.on("click", clickFn)
        });

        function clickFn(evt) {
            // 定位到中心
            self.mapModular.Map.centerAt(evt.graphic.geometry.getCentroid());
            self.mapModular.Map.setExtent(evt.graphic.geometry.getExtent());

            // 清除绘制
            if (map.getLayer(`${id}mouseOverGraphicsLayerID`)) {
                // 清除历史图层
                map.graphicsLayerIds.forEach(element => {
                    if (element.indexOf('mouseOverGraphicsLayerID') != -1) {
                        map.getLayer(element).clear()
                    }
                });
            }

            // 返回参数
            setTimeout(() => {
                InfoTemplateFn(eventData, 'click')
            }, 50)
        }

    }


    /** 根据图层ID获取图层 */
    getLayerById(layerId) {
            return this.map._layers[layerId]
        }
        /**
         * 临时图层（用于定位）
         */
    getTempGraphicLayer() {
            return this.getLayerById("tempGraphicLayer")
        }
        /**
         * 删除
         */
    delLayer(id) {
        if (this.getLayerById(id)) {
            this.mapModular.Map.removeLayer(this.getLayerById(id))
        }
    }
}
const layerUtil = (options) => new LayerUtil(options);
export default layerUtil