vue+arcgis3.x---部分方法封装（打点、坐标定位Point）

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

import store from '@/store'

class PointUtil {
    constructor(options) {
        this.options = options ? options : {}
        this.map = store.getters.Map;
        this.mapModular = store.getters.mapModular;
    }

    // 面中心定位

    /**
     * 关键字：打点、坐标定位   (分为只添加一个，也可以添加多个情况)
     * @param {Object} feature 特征信息
     * @param {String} icon  图标
     * @param {String} graphicsLayerId 图层ID  和callBack 二存一
     * @param {Function} callBack 回调函数
     */
    NoodlesPoint(feature, icon, graphicsLayerId, callBack) {
            let newPoint = new this.mapModular.Point(feature.attributes.GWM_X, feature.attributes.GWM_Y, this.mapModular.Map.spatialReference);
            let picSymbol = new this.mapModular.PictureMarkerSymbol(icon, 30, 30);
            let picGraphic = new this.mapModular.Graphic(newPoint, picSymbol);
            /** 
             * 如果有 graphicsLayerId ，直接添加绘制图层
             * 没有 返回绘制信息
             */
            if (graphicsLayerId) {
                let graphicsLayer;
                if (this.mapModular.Map.getLayer(graphicsLayerId)) {
                    this.mapModular.Map.removeLayer(this.mapModular.Map.getLayer(graphicsLayerId))
                }
                graphicsLayer = new this.mapModular.GraphicsLayer({
                    id: graphicsLayerId,
                });
                // 添加到图层
                graphicsLayer.add(picGraphic)
                    // 将图层添加到地图
                this.mapModular.Map.addLayer(graphicsLayer);
                // 定位并居中
                this.mapModular.Map.centerAndZoom(newPoint, 11);
            } else {
                callBack(picGraphic)
            }

        }
        /**
         * 
         * @param {Object} coordinate  {x:12.22,y:1111}
         * @param {String} icon 
         * @param {String} graphicsLayerId 
         * @param {Function} callBack 
         */
    Point(coordinate, icon, graphicsLayerId, callBack) {
            let newPoint = new this.mapModular.Point(coordinate.x, coordinate.y, this.mapModular.Map.spatialReference);
            let picSymbol = new this.mapModular.PictureMarkerSymbol(icon, 25, 30);
            let picGraphic = new this.mapModular.Graphic(newPoint, picSymbol);
            /** 
             * 如果有 graphicsLayerId ，直接添加绘制图层
             * 没有 返回绘制信息
             */

            if (graphicsLayerId) {
                let graphicsLayer;
                if (this.mapModular.Map.getLayer(graphicsLayerId)) {
                    this.mapModular.Map.removeLayer(this.mapModular.Map.getLayer(graphicsLayerId))
                }
                graphicsLayer = new this.mapModular.GraphicsLayer({
                    id: graphicsLayerId,
                });
                // 添加到图层
                graphicsLayer.add(picGraphic)
                    // 将图层添加到地图
                this.mapModular.Map.addLayer(graphicsLayer);
                // 定位并居中
                this.mapModular.Map.centerAndZoom(newPoint, 11);
            } else {
                callBack(picGraphic)
            }

        }
        /**
         *   坐标点闪烁固定次数后删除
         */
    twinkle(layerID) {
            const self = this;
            let item = 0;
            let show = false;
            clearInterval(setIntervalFn);
            let setIntervalFn = setInterval(() => {
                if (item < 17) {
                    show = !show
                    try {
                        self.mapModular.Map.getLayer(layerID).setVisibility(show)
                    } catch (err) {
                        clearInterval(setIntervalFn);
                        item = 0;
                    }
                    item++;
                } else {
                    item = 0;
                    clearInterval(setIntervalFn)
                    self.mapModular.Map.removeLayer(self.mapModular.Map.getLayer(layerID))
                }
            }, 500);
        }
        /**
         * 多个定位图   如果点击同一个位置，则删除当前的定位
         * @param {Object} coordinate 
         * @param {Srting} icon 
         * @param {Srting} graphicsLayerId 
         */
    PointMore(coordinate, icon, graphicsLayerId) {
        const self = this;
        // 点的位置
        let newPoint = new this.mapModular.Point(coordinate.x, coordinate.y, this.mapModular.Map.spatialReference);
        // 点图标
        let picSymbol = new this.mapModular.PictureMarkerSymbol(icon, 50, 50);
        // 绘制
        let picGraphic = new this.mapModular.Graphic(newPoint, picSymbol);

        let graphicsLayer;

        let promise = new Promise((resolve, reject) => {
            // 是否创建图层
            if (self.mapModular.Map.getLayer(graphicsLayerId)) {
                graphicsLayer = self.mapModular.Map.getLayer(graphicsLayerId);
                // 获取绘制（graphics）列表
                let graphicsList = self.mapModular.Map.getLayer(graphicsLayerId).graphics;
                // 是否有重复
                let isTrue = false;
                // 删除重复
                graphicsList.map(item => {
                        if (item.geometry.x.toFixed(4) === coordinate.x.toFixed(4) && item.geometry.x.toFixed(4) === coordinate.x.toFixed(4)) {
                            graphicsLayer.remove(item);
                            isTrue = true;
                        }
                    })
                    // 没有重复数据，则进行添加
                if (!isTrue) {
                    // 添加到图层
                    graphicsLayer.add(picGraphic);
                    resolve('add')
                } else {
                    resolve('del')
                }
                // this.mapModular.Map.removeLayer(this.mapModular.Map.getLayer(graphicsLayerId));

            } else {
                graphicsLayer = new self.mapModular.GraphicsLayer({
                    id: graphicsLayerId,
                });
                // 添加到图层
                graphicsLayer.add(picGraphic)
                    // 将图层添加到地图
                self.mapModular.Map.addLayer(graphicsLayer);
                resolve('add')
            }

        })

        return promise

        // 定位并居中
        // this.mapModular.Map.centerAndZoom(newPoint, 9);

    }


    /**
     * hove  Point
     * @param {*} id 
     * @param {*} visible  是否显示
     * @param {*} InfoTemplateFn 回调方法
     */
    addPointAndHover(param, InfoTemplateFn) {
        let id = param.id;
        let map = this.mapModular.Map;
        let self = this;

        let graphicLayer = new self.mapModular.GraphicsLayer({
            id: id,
        });

        param.data.map(item => {
                // 点的位置
                let newPoint = new this.mapModular.Point(item.x, item.y, this.mapModular.Map.spatialReference);
                // 点图标
                let picSymbol = new this.mapModular.PictureMarkerSymbol(item.icon, 30, 30);
                // 绘制
                let picGraphic = new this.mapModular.Graphic(newPoint, picSymbol);
                picGraphic.attributes = item
                    // 添加到图层
                graphicLayer.add(picGraphic);

            })
            // 将图层添加到地图
        self.mapModular.Map.addLayer(graphicLayer);
        graphicLayer.on("mouse-over", closeDialog);

        function closeDialog(e) {
            // 鼠标指针样式
            map.setMapCursor("pointer");
            InfoTemplateFn(e, 'hove')
        }

        graphicLayer.on("click", clickFn)

        function clickFn(e) {

            // 返回参数
            InfoTemplateFn(e, 'click')
        }

    }

    /**
     * 轨迹
     */
    trajectory(param) {
        let self = this;
        let map = this.mapModular.Map;
        let posList = param.data;
        // debugger
        if (posList.length === 0) return;
        if (map.getLayer(param.id)) {
            map.removeLayer(map.getLayer(param.id));
        }

        let lineLayer = new this.mapModular.GraphicsLayer({
            id: param.id
        });
        this.mapModular.Map.addLayer(lineLayer);



        //清除之前绘制
        lineLayer.clear();

        let path = [];
        posList.map(item => {
            path.push([item.x, item.y])
        })

        let NodeToLink = function(Q) {
            let F = 0,
                R = [];
            for (; ++F < Q.length;) R.push([Q[F - 1], Q[F]])
            return R
        }
        let path1 = NodeToLink(path)

        let graphic = '';
        path1.map(item => {
            let polyline = new self.mapModular.Polyline(item);
            let lineSymbol = new self.mapModular.SimpleLineSymbol(
                self.mapModular.SimpleLineSymbol.STYLE_SOLID,
                new self.mapModular.Color([11, 249, 252, .8]),
                5
            )
            lineSymbol.setMarker({
                style: "arrow",
                placement: "end"
            });

            graphic = new self.mapModular.Graphic(polyline, lineSymbol);
            lineLayer.add(graphic);
        })


    }

}

const pointUtil = (options) => new PointUtil(options)
export default pointUtil