Arcgis 常用的方法

Arcgis for JS  常用的方法，数据格式采用json

/**
 * 常用的方法
 * 该api 属于3.27版本
 */

//该变量用于存储地图对象
var GridMap;

require([
    "esri/layers/GraphicsLayer",//图形层
    "esrichina/TianDiTuLayer",//天地图图层
    "esri/map",//地图对象
    "esri/geometry/Extent",//图形事件
    "esri/geometry/Point",//点
    "esri/graphic",// 图形
    // /**
    //  * 特征图层 继承于图形层，该图层可以是(空间)层或者(非空间)表，如果isEditable方法为真则可
    //  * 以对特征图层中的特征进行编辑
    //  */
    "esri/layers/FeatureLayer",
    // /**
    //  * 弹出模板 继承了esri/InfoTemplate 支持以下部件：
    //  *         Title ,Description,Media,Display Attachments
    //  */
    "esri/dijit/PopupTemplate",
    // /**
    //  * 标记符号， 用于在图形层上绘制点和多点，主要用于点的显示样式
    //  */
    "esri/symbols/SimpleMarkerSymbol",
    // /**
    //  * 信息模板 用于点击图形显示图形的相关的信息，可以自定义设置信息模板的样式
    //  */
    "esri/InfoTemplate",
    // /**
    //  * 线 需要传入一个坐标的数组
    //  */
    "esri/geometry/Polyline",
    // /**
    //  * 面 需要传入一个坐标的数组，首尾坐标必须是相同的
    //  */
    "esri/geometry/Polygon",
    // /**
    //  * 填充符号  用于在图形层上绘制面要素，可以是实心，透明的，也可以是几种交叉
    //  *          影线图案之一，符号的轮廓是可选的不是必须的，由线性符号定义
    //  */
    "esri/symbols/SimpleFillSymbol",
    // /**
    //  * 线性符号，用于在图形层上绘制线性特征，线的样式要么是实线，要么是预定义的破折号和点模式
    //  */
    "esri/symbols/SimpleLineSymbol",
    // /**
    //  * 颜色 继承自dojo/_base/Color的所有属性，提供设置颜色的功能
    //  */
    "esri/Color",
    // /**
    //  * 比例相关渲染器 可以将多个与比列相关的渲染器应用于图层的功能，每个渲染器仅应用于
    //  *               特定比例范围或缩放范围的图层,可以将多个渲染器器放在同一个渲染中
    //  *  例子： var params ={
    //  *            rendererInfos:[
    //  *                {
    //  *                  "renderer":renderer1,
    //  *                  "minScale":50000000,
    //  *                  "maxScale":10000000
    //  *                },{
    //  *                  "renderer":renderer2,
    //  *                  "minScale":50000000,
    //  *                  "maxScale":10000000
    //  *                }
    //  *            ]}
    //  *      var scaleDependentRenderer = new ScaleDependentRenderer(params);
    //  *       layer.setRenderer(scaleDependentRenderer);
    //           map.addLayer(layer);
    //  */
    "esri/renderers/ScaleDependentRenderer",
    // /**
    //  * 简单的符号渲染器
    //  */
    "esri/renderers/SimpleRenderer",
    // /**
    //  * 集群的图层
    //  */
    "extras/ClusterLayer",
    "dojo/_base/array",
    // /**
    //  * 类分解渲染器， 根据某些数字的属性的值对每个图形进行符号化
    //  *             看案例
    //  */
    "esri/renderers/ClassBreaksRenderer",
    // /**
    //  * 标记符号  用于在图形图层上绘制点和多点，使用图片作为标记
    //  */
    "esri/symbols/PictureMarkerSymbol",
    // /**
    //  * 由指定的中心点创建的圆，此点可以作为esri/geometry/Point 对象或经纬度值的数组形式提供
    //  */
    "esri/geometry/Circle",
    // /**
    //  * Esri 单位常数
    //  */
    "esri/units",
    // /**
    //  * 动态地图服务动态生成图像
    //  */
    "esri/layers/ArcGISDynamicMapServiceLayer",
    // /**
    //  * 调用的时候使用图像作为参数
    //  */
    "esri/layers/ImageParameters",
    // /**
    //  * 查询QueryTask 的输入，并非所有查询属性都是执行QueryTask所必需的，
    //  *     查询定义需要以下属性之一：queryGeometry，text或where。
    //         可选属性包括outFields，outSpatialReference和returnGeometry。
    //  */
    "esri/tasks/query",
    // /**
    //  * 地图服务的图层资源执行查询的操作
    //  */
    "esri/tasks/QueryTask",
    // /**
    //  * IdentifyTask  不能在SceneView 和 dynamic layers 中使用
    //  *      执行成功的返回值包括有一个IdentifyResult[]
    //  */
    "esri/tasks/IdentifyParameters",
    // /**
    //  * 公开的地图服务资源的图层上执行标识操作
    //  */
    "esri/tasks/IdentifyTask",
    "esri/symbols/PictureFillSymbol",
    "esri/geometry/Multipoint"
],function (
    GraphicsLayer,
    TianDiTuLayer, Map, Extent, Point, Graphic, FeatureLayer,
    PopupTemplate, SimpleMarkerSymbol, InfoTemplate,Polyline, Polygon,
    SimpleFillSymbol, SimpleLineSymbol, Color, ScaleDependentRenderer,
    SimpleRenderer, ClusterLayer, arrayUtils, ClassBreaksRenderer, PictureMarkerSymbol,
    Circle, Units, ArcGISDynamicMapServiceLayer, ImageParameters,
    Query, QueryTask, IdentifyParameters, IdentifyTask,PictureFillSymbol,Multpoint
) {
    GridMap=function (divid,center,zoom) {
      this.map=new Map(
          divid,
          {
           slider:false,
           logo:false
      })
    };
    /**
     *通过原型的方式封装内部的方法
     * 可以让其它的对象通过原型链的方式继承调用内部的方法、属性
     * @type {{}}
     */
    GridMap.prototype={
        /**
         * 设置地图的中心点和显示的层级，层级越大显示越精细
         *  数据格式：json
         *    {
         *      "jd":"120.122",
         *      "wd":"31.22",
         *      "zoom":"12"
         *    }
         *  获取到经纬度值，必须先经过解析
         * 用于场景：动态的点击某个树的节点，设置地图的中心点位置，
         *          根据输入的经纬度设置地图的中心点位置
         *         （类似于百度根据输入的名称获取到相应的地理坐标的位置并设置地图的中心点）
         *
         */

        setMapCenterAndZoom:function (json) {
            this.map.centerAt(new Point([parseFloat(json.jd),parseFloat(json.wd)]));
            this.map.zoom(parseInt(json.zoom));
        },
        /**
         * 动态的根据输入的名称获取到相应的点位并添加到
         * @param layerId 图层
         * @param param   参数
         * @param pic    图片
         * 场景：应用于常见的根据输入的坐标名称在地图中添加点并将地图的中心显示到当前的点位的信息
         *
         */
        addPointAndSetMapCneterOrZoom:function (layerId,param,pic) {
            //获得图层
            var layer = this.map.getLayer(layerId);
            //创建点的标记的样式
            var sym = new PictureMarkerSymbol({
                "type":"esriPMS",
                "url":pic,
                "contentType":"image/png",
                "width":20,
                "height":20
            });
            //获取点坐标
            var jd = parseFloat(pic.jd);
            var wd = parseFloat(pic.wd);
            //创建点的对象
            var pt = new Point(jd,wd,this.map.spatialReferences);
            //获取当前点属性信息
            var attr ={
                "name":param.NAME,
                "color":[255,0,0]
            };
            //添加到图形中
            var graphic = new Graphic(pt,sym,attr);
            //添加到图层中
            layer.add(graphic);
            //将当前的地图的中心的位置设置到刚刚添加的位置，并设置层级
            this.map.centerAndZoom(pt,12);

        },

        /**
         * 点击地图获取当前的点位的坐标信息
         */
        getOnMapPointXY:function () {
            this.map.on("click",function (e) {
                console.log(e.jd,e.wd)
            })
        },

        /**
         * 在地图显示信息框
         *  dataJSon:{
         *      "title":"<div>标题/名称</div>",
         *      "content":"<div>内容/信息</div>"
         *      "point":map.Point//点位信息
         *  }
         *  this.map.infowindow---该方法的实现是使用的Popup 来实现，在这个里面有相应的方法
         *        这里使用了 setTiltle(),setContent(),show()这些方法
         *  场景：用于在地图看点位的信息
         */
        infoOnMapTemplete:function (dataJson) {
            this.map.infoWindow.setTitle(dataJson.title);
            this.map.infoWindow.setContent(dataJson.content);
            this.map.infoWindow.show(dataJson.point)
        },

        /**
         * 点的标记的样式如下是json 的数据格式
         * json:
         * {
               {
            "type": "esriSMS",
             "style": "esriSMSSquare",
             "color": [76,115,0,255],
             "size": 8,
             "angle": 0,
             "xoffset": 0,
             "yoffset": 0,
             "outline":
              {
              "color": [152,230,0,255],
               "width": 1
              }
            }
            }
            }
         以下的网址，定义了常用的json的数据格式
         url:https://developers.arcgis.com/documentation/common-data-types/symbol-objects.htm#GUID-C8D40B32-5F4B-45EB-8048-6D5A8763E13B
         */
        setPointMarkerSymbol:function (symbolJosn) {
            return new SimpleMarkerSymbol(symbolJosn)
         },
        /**
         * 设置图形填充的样式
         * json:
         * {
              "type": "esriSFS",
              "style": "esriSFSSolid",
              "color": [115,76,0,255],
                "outline": {
                 "type": "esriSLS",
                 "style": "esriSLSSolid",
                 "color": [110,110,110,255],
                 "width": 1
                 }
}
         */
        setFillSymbol:function (fillJson) {
            return new SimpleFillSymbol(fillJson)
        },
        /**
         * 设置图像填充的样式
         * json:
         * {
              "type" : "esriPFS",
              "url" : "866880A0",
              "imageData" : "iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAM9JREFUeJzt0EEJADAMwMA96l/zTBwUSk5ByLxQsx1wTUOxhmINxRqKNRRrKNZQrKFYQ7GGYg3FGoo1FGso1lCsoVhDsYZiDcUaijUUayjWUKyhWEOxhmINxRqKNRRrKNZQrKFYQ7GGYg3FGoo1FGso1lCsoVhDsYZiDcUaijUUayjWUKyhWEOxhmINxRqKNRRrKNZQrKFYQ7GGYg3FGoo1FGso1lCsoVhDsYZiDcUaijUUayjWUKyhWEOxhmINxRqKNRRrKNZQrKFYQ7GGYh/hIwFRFpnZNAAAAABJRU5ErkJggg==",
              "contentType" : "image/png",
              "outline" :
              {
                "type" : "esriSLS",
                "style" : "esriSLSSolid",
                "color" : [110,110,110,255],
                "width" : 1
              },
              "width" : 63,
              "height" : 63,
              "angle" : 0,
              "xoffset" : 0,
              "yoffset" : 0,
              "xscale" : 1,
              "yscale" : 1
            }
         */
         setPictureFillSymbol:function (pictureJson) {
            return new PictureFillSymbol(pictureJson);
        },
        /**
         * 设置图像标记的样式
         * {
          "type" : "esriPMS",----这个是由esri Maps for IBM Congnos,提供一个默认的符号集
          "url" : "471E7E31",
          "imageData" : "iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAMNJREFUSIntlcENwyAMRZ+lSMyQFcI8rJA50jWyQuahKzCDT+6h0EuL1BA1iip8Qg/Ex99fYuCkGv5bKK0EcB40YgSE7bnTxsa58LeOnMd0QhwGXkxB3L0w0IDxPaMqpBFxjLMuaSVmRjurWIcRDHxaiWZuEbRcEhpZpSNhE9O81GiMN5E0ZRt2M0iVjshek8UkTQfZy8JqGHYP/rJhODD4T6wehtbB9zD0MPQwlOphaAxD/uPLK7Z8MB5gFet+WKcJPQDx29XkRhqr/AAAAABJRU5ErkJggg==",
          "contentType" : "image/png",
          "width" : 19.5,
          "height" : 19.5,
          "angle" : 0,
          "xoffset" : 0,
          "yoffset" : 0
           }
         */
        setPictureMarkerSymbol:function (pictureMarkerJson) {
            return new PictureMarkerSymbol(pictureMarkerJson);
        },
        /**
         * 设置线的样式
         * json:
         * {
         * “type":"esriSFS",
         * "style":"esriSFSSolid",
         * "color":[115,76,0,255],
         * "outline":{
         *     "type":"esriSLS",
         *     "style":"esriSLSSolid"，
         *     “color":[110,110,110,255],
         *     "width":1
         * }
         * }
         *
         */
        setLineSymbol:function (lineSymbolJson) {
            return new SimpleLineSymbol(lineSymbolJson)
        },
        /**
         * 创建一个图形的对象
         *
         */
        createGraphic:function () {
            return new Graphic()
        },

        /**
         * 创建点
         *  2d point---json:
         *    {"x" : -118.15, "y" : 33.80, "spatialReference" : {"wkid" : 4326}}
         * 
         */
         create2DPoint:function (pointJosn) {
             return new Point(pointJosn)
        },
        /**
         * 创建一个3d point
         * 3d point ---json:
         * {"x" : -118.15, "y" : 33.80, "z" : 10.0, "spatialReference" : {"wkid" : 4326}}
         */
         create3DPoint:function (pointJson) {
            return new Point(pointJson)
        },
        /**
         * 创建一个空点
         * 2d 的空点
         * {"x" : null, "spatialReference" : {"wkid" : 4326}}
         * 3d 空点
         * {"x" : "NaN", "y" : 22.2, "spatialReference" : {"wkid" : 4326}}
         *
         */
        createEmptyPoint:function (pointJosn) {
            return new Point(pointJosn)
        },

        /**
         * 创建线
         * A: 2d polyline  json:
         *  {
              "paths" : [[[-97.06138,32.837],[-97.06133,32.836],[-97.06124,32.834],[-97.06127,32.832]],
                         [[-97.06326,32.759],[-97.06298,32.755]]],
              "spatialReference" : {"wkid" : 4326}
            }


          B: 具有m值的线 (m 值：某一点到道路起始位置的里程等信息 ，查阅资料是可要可不要
         * {
              "hasM" : true,
              "paths" : [[[-97.06138,32.837,5],[-97.06133,32.836,6],[-97.06124,32.834,7],[-97.06127,32.832,8]],
                         [[-97.06326,32.759],[-97.06298,32.755]]],
              "spatialReference" : {"wkid" : 4326}
            }

         */
          createPolyline:function (lineJosn) {
            return new Polyline(lineJosn)
        },

        /**
         * 创建面
         *  2d polygon Json:
         *  {
                  "rings" : [[[-97.06138,32.837],[-97.06133,32.836],[-97.06124,32.834],[-97.06127,32.832],
                              [-97.06138,32.837]],[[-97.06326,32.759],[-97.06298,32.755],[-97.06153,32.749],
                              [-97.06326,32.759]]],
                  "spatialReference" : {"wkid" : 4326}
             }
         *
         */
        createPolygon:function (polgonJosn) {
            return new Polygon(polgonJosn)
        },
        /**
         * 在地图中添加一个图形层
         * 只要将要添加图层的传入进去即可
         * layerId--- 被添加的图层
         */
        addLayerOnMap:function (layerId) {
            //创建图形层
            var graphicLayer = new GraphicsLayer({
                id:layerId.toString()//指定当前的图形层id
            })
            this.map.addLayer(graphicLayer);
            //返回当前的图形层
            return graphicLayer
        },
        /**
         * 在地图上添加特征图层
         * featureJson:{
         *     url:"图层服务端接口restFul",
         *     id：“layerid",
         *     "fields":[*],
         *     "opacity":0.5
         * }
         * Featurelayer.MODE_ONDEMAND 常量这种模式，要素图层可以在服务中检索我们需要的要素
         */
        addFeatureLayerOnMap:function (fetaureJson) {
            var featureLayer = new FeatureLayer(
                fetaureJson.url+"/0",//调用服务后,该服务下图层的小标，使用该图层需要拼接一个0
                {
                  id:fetaureJson.id,
                  mode:FeatureLayer.MODE_ONDEMAND,
                  opacity:fetaureJson.opacity,
                  outFileds:["*"]
                }
            )
            this.map.addLayer(featureLayer);
            return featureLayer;
        },
        /**
         * 添加动态图层在地图上
         * @param{
         *     "url":ddddddddd 动态图层的服务接口，
         *     "layerId":“layer3”,
         *     "opacity":"0.5",
         *     "visible":true
         * }
         *
         */
         addDynamicLayerOnMap:function (layerJson) {
            var layer = new ArcGISDynamicMapServiceLayer(
                layerJson.url,
                {
                  id:layerJson.layerId,
                  opacity:layerJson.opacity,
                  visible:layerJson.visible
                });
            this.mao.addLayer(layer);
            return layer;
        },

        /**
         * 过滤动态图层
         * @param layerId, definitionArray:["definition1","definition2","definition3"]
         *
         * return 过滤后图层
         */
           filterDynamicLayerOnMap:function (filterJosn) {
            var layer = this.map.getLayer(filterJosn.layerId);
            layer.setLayerDefinitions(filterJosn.definitionArray);//设置自定义的过滤图层
            //添加到地图中
            this.map.addLayer(layer);
            //返回当前过滤后的图层
            return layer;
        },
        /**
         * 设置图层的属性
         *   常用设置：图层的可见性，图层的id
         *   {
         *     layerId:"demolayer"
         *     isVisible:true/false
         *   }
         */
          setLayerProperties:function (layerJson) {
            var layer = this.map.getLayer(layerJson.layerId);
            // layer.isVisibleAtScale(false);
            layer.setVisibility(layerJson.isVisible)
        },
        /**
         * 清除指定的图层的要素
         * @param layerId
         *
         */
         clearFeatureOnMap:function (layerJson) {
           //获取当前的图层的
            var layer = this.map.getLayer(layerJson.layerId);
            layer.clear();
        },
        /**
         * 创建多个点
         * Multipoint
         * 2d json:{
         *      "points" : [[-97.06138,32.837],[-97.06133,32.836],[-97.06124,32.834],[-97.06127,32.832]],
                "spatialReference" : {"wkid" : 4326}
         * }
         */
        createMultpoint:function (json) {
            return new Multpoint(json);
        },
        /**
         * query 查询
         * 1.查询的图层路径 --url
         * 2.需要查询的对象的字段名称
         * 3。查询的是所有的字段
         * 4.返回一个查询的图形设置为true --返回true 则在特征将包含这个图形
         * 5.执行查询的方法 execute()
         */
        queryOnMapProperties:function (queryJson) {
            var queryTask = new QueryTask(queryJson.url+"/0");
            var query = new Query();
            query.objectIds=id;
            query.ourFields=["*"];
            query.returnGeometry=true;
            queryTask.execute(query);
        },
        /**
         * 往图层上添加点位
         * 1.获取需要添加的点位图层
         * 2.设置标记的样式--点的标记常用使用图像的标记的方式
         * 3.获取点位坐标
         * 4.点的信息
         * 5.添加到图形中
         * 6.添加到图层中
         *
         */
        addOnPointMap:function (params ,pic,layerId) {
            var layer = this.map.getLayer(layerId);
            var simpleMarker = new PictureMarkerSymbol({
                "type":"esriPMS",//符号的类型--也可以自定义，这个是官方提供的一种符号集
                "url":pic,//图片的所在路径
                "width":20,//图片大小
                "height":20,
                "angle":-30// 标记的角度
            });
            var pt = new Point([parseFloat(params.jd),parseFloat(params.wd)],new spatialReference({wkid:4326}));
            var attr={
                "name":params.name,
                "adress":params.adress
            }
            //可以添加一个信息模板，根据情况设计
           var graphic = new Graphic(pt,simpleMarker,attr);
           layer.add(graphic);
        },
        /**
         * 增加动态图层
         * 
         *  动态根据传入的参数添加到图层中
         * @param url,          图层路径地址
         *        opacity,      透明度
         *        id,           图层id
         *        definitions,  过滤字符
         *        isShowInView, true/false
         *        isHide        true/false
         */
        addDynamicMapServiceLayer:function (url,opacity,id,definitions,isShowInView,isHide) {
            var dLayer = new ArcGISDynamicMapServiceLayer(
                url,{
                    opacity:opacity,
                    id:id //分配的图层id
                });
             if(isHide){
                 dLayer.hide();
             }
             dLayer.setLayerDefinitions(definitions);
             this.map.add(dLayer);
            //为了在内部函数能使用外部函数的this对象，要给它赋值了一个名叫self的变量。
             var self = this;
             if(isShowInView === true){
                 var query = new Query();
                 query.ourFields=["*"];//所有属性字段
                 query.returnGeometry=true;//返回图形
                 query.where = definitions[0];//过滤条件
                 var queryTask = new QueryTask(url+"/0");//执行查询的图层
                 /**
                  * 对图层执行查询，结果作为featureSet 返回，
                  * 如果查询成功，则使用调用用户指定的回调函数
                  * 如果未找到任何结果，则不会填充此数组
                  */
                 queryTask.execute(query,function (feature) {
                     //声明一个存储范围的变量
                      var extent;
                    feature.features.forEach(function(value){
                        if(value.geometry){//如果有几何图形
                            //extent.union 执行新范围而不是修改范围  新范围                    原范围
                           extent ? extent=extent.union(value.geometry.getExtent()) : extent=value.geometry.getExtent();
                        }

                    });
                    if(extent){
                        //设置地图的范围
                       self.map.setExtent(extent.expand(1.5))
                    }

                 });

             }

        }

















    }

})