arcgis Tips

自己遇到的一些小经验总结，没有好好的总结，可能你们看起来比较难受

目录

1、 4.16起的cim 中的cimlinesymbol不适用于3D

2、 MapImagLayer 无 hitTest方法，也无高亮方法

3、 对单个字段属性多个值进行渲染筛选用simpleRenderer，如下

4、 MapImageLayer 不适用于上面说的Renderer

5、单独用click去点查点的话，要设置缓冲区，hitTest就不用，

6. 2000坐标系下只能用geometryService对geometry进行测量切割缓冲等操作：

7.图形查询高亮显示信息卡操作

8、针对查询的统计结果，利用query.outStatistics

9、取消地图双击放大事件

10、禁止地图2D状态下旋转

11.加快查询速度与展示速度：发布TileLayer用于展示，利用属性空间查询--》服务地址查询

12. 鼠标样式更改

13. 去除自带的放大缩小和底部的arcgis logo样式

14.删除自带的地图盒子白色边框

15.控制地图的缩放大小

16.三维下加载obj/gltf 模型和3d 点符号

17、 利用 ES6 async 和 await ，Promise ，创建地图后可进行的操作

18、 在vue项目中自定义地图的弹框

19、 使用element ui 中的 Dialog 弹出框中包含地图时，点击第一次地图不出现：

---

---

---

1、 4.16起的cim 中的cimlinesymbol不适用于3D

2、 MapImagLayer 无 hitTest方法，也无高亮方法

3、 对单个字段属性多个值进行渲染筛选用simpleRenderer，如下

simpleRenderer: {
        type: "unique-value",
        field:  "grade", //"type",
        defaultSymbol: {
          type: "picture-marker"
        },
        uniqueValueInfos: [{
          value: "一级",//古树1级
          symbol: {
            type: "picture-marker",
            url: window.location.href.split('#')[0] + "/static/img/map/gs1.png",
            width: "20",
            height: "20"
          }
        }, {
          value: "二级",//古树2级
          symbol: {
            type: "picture-marker",
            url: window.location.href.split('#')[0] + "/static/img/map/gs2.png",
            width: "20",
            height: "20"
          }
        }, {
          value: "三级",//古树3级
          symbol: {
            type: "picture-marker",
            url: window.location.href.split('#')[0] + "/static/img/map/gs3.png",
            width: "20",
            height: "20"
          }
        }, {
          value: "",//名木
          symbol: {
            type: "picture-marker",
            url: window.location.href.split('#')[0] + "/static/img/map/mm.png",
            width: "20",
            height: "20"
          }
        }],
      },

4、 MapImageLayer 不适用于上面说的Renderer

5、单独用click去点查点的话，要设置缓冲区，hitTest就不用，

之前没有hittest的时候，click一点一个准啊

6. 2000坐标系下只能用geometryService对geometry进行测量切割缓冲等操作：

（1）长度测量

      // that.mapObj.view.graphics.add(new that.mapObj.Graphic({
            //   geometry:event.graphic.geometry
            // }))
            var areasAndLengthParams = new that.mapObj.LengthsParameters({
              areaUnit: "square-meters",
              lengthUnit: "meters",
              polylines: event.graphic.geometry
            });
            that.mapObj.gs.lengths(areasAndLengthParams).then(function (results) {
              console.log(results)
            });

（2）面积测量

   that.mapObj.gs.simplify([event.graphic.geometry]).then(function (simplifiedGeometries) {
            var areasAndLengthParams = new that.mapObj.AreasAndLengthsParameters({
              areaUnit: "square-meters",
              lengthUnit: "meters",
              polygons: simplifiedGeometries
            });
            that.mapObj.gs.areasAndLengths(areasAndLengthParams).then(function (results) {
              let eventMj = results.areas[0];
              if (eventMj.toFixed(0) > 1000000) { //判断筛选面积是否超出
                alert("范围超标，请重新绘制范围！")
              } else {
                that.queryByGeometry_second();
              }
              that.clearSketchGeometry();
            });
          });

（3）缓冲

  let params=new that.mapObj.BufferParameters({
          distances:[50],
          unit:"meters",
          bufferSpatialReference:new that.mapObj.SpatialReference({wkid:4548}),
          outSpatialReference:that.mapObj.view.spatialReference,
          geometries: [that.mapObj.view.toMap(evt)],
        })
        that.mapObj.gs.buffer(params).then(function (res){
          console.log(res[0])
          that.mapObj.view.graphics.add(new that.mapObj.Graphic({
            geometry:res[0],
            symbol:that.mapObj.bufferSymbol
          }))
        })

7.图形查询高亮显示信息卡操作

针对数据量大的加载用MapImageMap类的，不能显示高亮，但是可以设置popupTemplate，（不过可以添加一个专门的图层GraphicLayer这样就可以设置高亮和popupTemplate）

针对GraphicLayer和FeatureLayer的可以直接高亮并打开

MapImageMap:没有添加额外的图层

 let layer = that.XiaoBan_2018.findSublayerById(0);
            let query = layer.createQuery();
            query.geometry = that.mapObj.view.toMap(evt);
            query.outFields = "*";
            query.spatialRelationship = "intersects";
            query.where="DILEI_2 <> '0200'";
            layer.queryFeatures(query).then(function(results) {
              if (results.features.length > 0) {
                let gra = results.features[0];
                //高亮
                that.mapObj.view.graphics.removeAll();
                let gra1 = gra.clone();
                gra1.symbol = {
                  type: "simple-fill", // autocasts as new SimpleMarkerSymbol()
                  color: [234, 244, 254, 0],
                  outline: {
                    // autocasts as new SimpleLineSymbol()
                    width: 1.5,
                    color: [237,15,15, 1],
                    style: "dash",
                    cap:'butt',
                    join :"bevel",
                  },
                };
                that.XB_info = [];
                let xj =
                  gra.attributes.XIAOBAN_XJ == 0 ? "" : gra.attributes.XIAOBAN_XJ;
                that.xbInfo={
                  "XIAN_MC": gra.attributes.XIAN_MC,
                  "XIANG_MC":gra.attributes.XIANG_MC,
                  "CUN_MC":gra.attributes.CUN_MC,
                  "XIAO_BAN":gra.attributes.XIAO_BAN,
                  "DILEI_2":that.getMC("DILEI_2", gra.attributes.DILEI_2),
                  "QI_YUAN_2":that.getMC("QI_YUAN_2", gra.attributes.QI_YUAN_2),
                  "MIAN_JI":gra.attributes.MIAN_JI,
                  "LIN_ZHONG2":that.getMC("LIN_ZHONG2", gra.attributes.LIN_ZHONG2),
                  "XIAOBAN_XJ":xj,
                  "SENLIN_LB_2": that.getMC("SENLIN_LB_2", gra.attributes.SENLIN_LB_2),
                  "LD_QS":that.getMC("LD_QS", gra.attributes.LD_QS),
                  "YOU_SHI_SZ_2": that.getMC("YOU_SHI_SZ_2", gra.attributes.YOU_SHI_SZ_2),
                  "BH_DJ":that.getMC("BH_DJ", gra.attributes.BH_DJ)
                };

                gra1.popupTemplate=that.template;
                setTimeout(function (){
                  that.xiaoban=true;
                  that.mapObj.view.graphics.add(gra1);
                  that.mapObj.view.popup.open({
                    features: [gra1],
                    location: gra1.geometry.centroid
                  });
                },500)

MapImageMap:添加额外的图层（这个适用于查询）

 //加载查询图层
        that.queryResultGraphicLayer = new that.mapObj.GraphicsLayer({
          id: "queryResultGraphicLayer",
          // popupEnabled: true,
          // popupTemplate:that.template
        })
        that.mapObj.map.add(that.queryResultGraphicLayer);
        that.queryResultGraphicLayer.on("layerview-create", function(event) {
          that.queryResultGraphicLayerView = event.layerView;
        });

  query.where = sql;
        that.thematicLayer.findSublayerById(0).queryFeatures(query)
          .then(function(results) {
            //遍历属性查询的值，进行渲染

            if (results.features.length > 0) {

              //用element ui
              that.queryResultArr = [];
              that.queryResultGraphicLayer.removeAll();
              let graArr_1 = results.features.filter(function(item) {
                return item.attributes.DILEI_2 != '0200'
              })
              let graArr = graArr_1.map(function(item) {
                let gra = item.clone();
                gra.symbol = that.hightSymbol;
                gra.popupTemplate = that.template;
                //填充表格信息
                let temp = {};
                temp.OBJECTID = item.attributes.OBJECTID; //编号
                temp.XIAO_BAN = item.attributes.XIAO_BAN; //小班号
                temp.XIAN_MC = item.attributes.XIAN_MC; //县
                temp.XIANG_MC = item.attributes.XIANG_MC; //乡
                temp.CUN_MC = item.attributes.CUN_MC; //村
                temp.MIAN_JI = item.attributes.MIAN_JI; //面积
                temp.XIAOBAN_XJ = item.attributes.XIAOBAN_XJ == 0 ? "" : item.attributes.XIAOBAN_XJ;
                // temp.XIAOBAN_XJ = item.attributes.XIAOBAN_XJ; //小班蓄积
                temp.DILEI_2 = that.getMC("DILEI_2", item.attributes.DILEI_2); //地类
                temp.LD_QS = that.getMC("LD_QS", item.attributes.LD_QS); //林地权属
                temp.QI_YUAN_2 = that.getMC("QI_YUAN_2", item.attributes.QI_YUAN_2); //起源
                temp.LIN_ZHONG2 = that.getMC("LIN_ZHONG2", item.attributes.LIN_ZHONG2); //林种
                temp.SENLIN_LB_2 = that.getMC("SENLIN_LB_2", item.attributes.SENLIN_LB_2); //森林类别
                temp.YOU_SHI_SZ_2 = that.getMC("YOU_SHI_SZ_2", item.attributes.YOU_SHI_SZ_2); //优势树种（组）
                temp.BH_DJ = that.getMC("BH_DJ", item.attributes.BH_DJ); //林地保护等级
                that.queryResultArr.push(temp);
                return gra;
              })
              that.queryResultGraphicLayer.addMany(graArr);

高亮并打开操作：

 //查询的要素查看
      handleClick(row) {
        let that = this;
        let gra = null;
        that.queryResultGraphicLayerView.queryGraphics().then(function(results) {
          if (results.length > 0) {
            //筛选点击的色块
            gra = results.items.filter(function(res) {
              return res.attributes.OBJECTID == row.OBJECTID
            })
            that.xbInfo = {};
            that.xbInfo = row;
            that.xiaoban = true;

            //对筛选的色块进行操作--定位，高亮
            if (gra != null) {
              that.mapObj.view
                .goTo(gra[0].geometry.extent, {
                  duration: 1000,
                })
                .then(function() {
                  that.mapObj.view.popup.open({
                    features: [gra[0]],
                    location: gra[0].geometry.centroid
                  });
                })
              // that.mapObj.view.goTo(gra[0].geometry.extent, {
              //   duration: 1500,
              // }) //定位太卡
              // //高亮
              // if (that.highlight) {
              //   that.highlight.remove();
              // }
              // that.highlight = that.queryResultGraphicLayerView.highlight(gra[0])
            }
          }
        });
        // console.log(row); //点击查看获取当前行的小班信息塞入小班信息卡
      },

8、针对查询的统计结果，利用query.outStatistics

http://106.14.206.172:1059/sdk4.16/latest/sample-code/sandbox/index.html?sample=featurelayerview-query-distance

//先查古树名木
        let query = that.GSMM.createQuery();
        query.geometry = geo;
        // query.outFields = "*";
        query.spatialRelationship = "intersects";
        query.outStatistics = [{
          onStatisticField: "CASE WHEN GRADE = '一级' THEN 1 ELSE 0 END",
          outStatisticFieldName: "一级古树",
          statisticType: "sum"
        },{
          onStatisticField: "CASE WHEN GRADE = '二级' THEN 1 ELSE 0 END",
          outStatisticFieldName: "二级古树",
          statisticType: "sum"
        },{
          onStatisticField: "CASE WHEN GRADE = '三级' THEN 1 ELSE 0 END",
          outStatisticFieldName: "三级古树",
          statisticType: "sum"
        },{
          onStatisticField: "CASE WHEN GRADE = '' THEN 1 ELSE 0 END",
          outStatisticFieldName: "名木",
          statisticType: "sum"
        }]
        that.GSMM.queryFeatures(query)
          .then(function (results) {
            console.log(results.features);
            if (results.features.length > 0) {
              
            }   
          })

9、取消地图双击放大事件

  that.mapObj.view.on("double-click",function(evt) {
        evt.stopPropagation();
        ...
        ...
      })

10、禁止地图2D状态下旋转

 view.constraints = {
          rotationEnabled: false,  // Disables map rotation
        };

11.加快查询速度与展示速度：发布TileLayer用于展示，利用属性空间查询--》服务地址查询

ArcGIS api for JavaScript 之 空间、属性查询_往事随风的博客-CSDN博客

  that.mapObj.view.on("click", function(evt) {
          let screenPointMove = {
            x: evt.x,
            y: evt.y
          };
          that.mapObj.view.hitTest(evt, {
            include: that.queryResultGraphicLayer
          }).then(function(response) {
            if (response.results.length) {
              that.xiaoban = true;
            } else {
              that.xiaoban = false;
            }
          });

          if (that.swipe != null) {
            let url_query=null;
            if(  Number(screenPointMove.x)>Number(document.getElementsByClassName("esri-swipe__container")[0].offsetLeft)){
              url_query=that.XB_Tile_17.url;
            }else {
              url_query=that.XiaoBan_2018_swipe.url;
            }
            let identifyTask = new that.mapObj.IdentifyTask(url_query);
            let params = new that.mapObj.IdentifyParameters();
            params.tolerance = 0;
            params.layerIds = [0];
            params.layerOption = "top";
            params.width = that.mapObj.view.width;
            params.height = that.mapObj.view.height;
            params.geometry = evt.mapPoint;
            params.mapExtent = that.mapObj.view.extent;
            params.returnGeometry = true;
            params.returnFieldName=true;
            params.returnUnformattedValues=true;
            document.getElementById("mapContent").style.cursor = "wait";
            identifyTask.execute(params).then(function (response) {
              that.mapObj.view.graphics.removeAll();
              if(response.results.length>0){
                  let gra =response.results[0].feature;
                let gra1 = gra.clone();
                console.log(gra1);
                gra1.symbol = {
                  type: "simple-fill", // autocasts as new SimpleMarkerSymbol()
                  color: [234, 244, 254, 0],
                  outline: {
                    // autocasts as new SimpleLineSymbol()
                    width: 1.5,
                    color: [237, 15, 15, 1],
                    style: "dash",
                    cap: 'butt',
                    join: "bevel",
                  },
                };
                that.xbInfo = [];
                let xj =
                  gra.attributes.XIAOBAN_XJ == 0 ? "" : (Number(gra.attributes.XIAOBAN_XJ).toFixed(4)*1);
                that.xbInfo = {
                  "XIAN_MC": gra.attributes.XIAN_MC,
                  "XIANG_MC": gra.attributes.XIANG_MC,
                  "CUN_MC": gra.attributes.CUN_MC,
                  "XIAO_BAN": gra.attributes.XIAO_BAN,
                  "DILEI_2": that.getMC("DILEI_2", gra.attributes.DILEI_2),
                  "QI_YUAN_2": that.getMC("QI_YUAN_2", gra.attributes.QI_YUAN_2),
                  "MIAN_JI": gra.attributes.MIAN_JI,
                  "LIN_ZHONG2": that.getMC("LIN_ZHONG2", gra.attributes.LIN_ZHONG2),
                  "XIAOBAN_XJ": xj,
                  "SENLIN_LB_2": that.getMC("SENLIN_LB_2", gra.attributes.SENLIN_LB_2),
                  "LD_QS": that.getMC("LD_QS", gra.attributes.LD_QS),
                  "YOU_SHI_SZ_2": that.getMC("YOU_SHI_SZ_2", gra.attributes.YOU_SHI_SZ_2),
                  "BH_DJ": that.getMC("BH_DJ", gra.attributes.BH_DJ)
                };
                gra1.popupTemplate = that.template;
                setTimeout(function() {
                  that.xiaoban = true;
                  that.mapObj.view.graphics.add(gra1);
                  that.mapObj.view.popup.open({
                    features: [gra1],
                    location:evt.mapPoint
                  });
                  document.getElementById("mapContent").style.cursor = "auto";
                }, 500)
              }
            })

          }
        })

其中这三个属性听蛋疼的

params.returnGeometry = true;  //返回空间信息
params.returnFieldName=true;  //字段别名
params.returnUnformattedValues=true;  //显示字段值domins

12. 鼠标样式更改

 document.getElementById("viewDiv").style.cursor = "auto";

 document.getElementById("viewDiv").style.cursor = "wait";

13. 去除自带的放大缩小和底部的arcgis logo样式

view.ui.remove(["zoom", "attribution"]);

14.删除自带的地图盒子白色边框

/*去除mapview拖动时的边框*/
.esri-view .esri-view-surface--inset-outline:focus::after {
    outline: auto 0px Highlight !important;
    outline: auto 0px -webkit-focus-ring-color !important;
}

15.控制地图的缩放大小

                // 控制图层的缩放级别
                view.when(function () {
                    view.on('double-click', function (evt) {
                        evt.stopPropagation();
                    });
 
                    view.on('mouse-wheel', function (evt) {
                        //鼠标滚轮缩小
                        if (evt.deltaY > 0 && view.scale > 9000000) {
                            evt.stopPropagation();
                            return false;
                        }
                        //鼠标滚轮放大
                        else if (evt.deltaY < 0 && view.scale < 20000) {
                            evt.stopPropagation();
                            return false;
                        }
                        if ((evt.deltaY > 0 && view.scale > 9000000) || (evt.deltaY < 0 && view.scale < 20000)) {
                            console.info(view.scale);
                            console.info(evt);
                        }
                    });
                });

16.三维下加载obj/gltf 模型和3d 点符号
 

obj/gltf：

  var symbolP = {
        type: "point-3d",
        symbolLayers: [
          {
            type: "object",
            resource: {
              href: window.location.href.split('#')[0] + "static/gltf/ghz.glb",
            },
            height: 500,
            heading: Math.random() * 360,
            anchor: "bottom"
          }
        ]
      };

3d icon：

symbol: {
            type:'point-3d',
            symbolLayers:[{
              type:"icon",
              size:40,
              resource:{
                href:src
              }
            }]
          },

17、 利用 ES6 async 和 await ，Promise ，创建地图后可进行的操作

basemap.js  中 使用 promise 返回 mapObj 对象

在主页面中， methods 中

async initMap(){
      let that = this;
      that.mapObj =await createMap(that, "viewDiv");
        /**
        ** dosomething
        **/
    },
  async renderMap(){
       /**
        ** 获取数据    
        */ 
      await this.getQxzJson();
      await this.initMap();
      /**
       * 加载获取数据的图层，或者dom 元素 显示渲染等
       */
      //dosomething
    },

mounted中 

mounted() {
    let that = this;
    that.renderMap();
  },

18、 在vue项目中自定义地图的弹框

点击的时候获取到点击的位置，然后转换成屏幕的坐标

在通过绑定div盒子 :style 来定位弹框即可实现：

template：

 <div class="tank" :style=tankMap v-show="tankShow">

    </div>

data里定义

 tankMap: {
        'left': '',
        'top': '',
      },

地图拖动时加监听事件：

 //监听地图拖动
      that.mapObj.view.watch("extent", function (evt) {
        if (that.tankPoint != null) {
          let screenP = that.mapObj.view.toScreen(that.tankPoint);
          that.tankMap.left = parseFloat(screenP.x) - 206 + 'px';
          that.tankMap.top = parseFloat(screenP.y) - 343 - 5 + 'px';
        }
      });

地图点击的时候，显示弹框并高亮

 that.pLayerPoint = new that.mapObj.GraphicsLayer({
        id: 'pLayerPoint'
      })



    that.mapObj.view.on('click', function (event) {
          that.mapObj.view.hitTest(event, {include: this.XBLayer}).then(function (res) {
            let {results: [result]} = res;
            if (result) {
                let screenP = that.mapObj.view.toScreen(evt.mapPoint);
                that.tankMap.left = parseFloat(screenP.x) - 206 + 'px';
                that.tankMap.top = parseFloat(screenP.y) - 343 - 5 + 'px';
                //显示弹框
                that.tankShow = true;
                //清除高亮
                if (that.highlight) {
                  that.highlight.remove();
                }
                //重新赋值图形高亮
                that.highlight = that.mapObj.view.whenLayerView(result.graphic.layer).then(function(layerView){
                  that.highlight=layerView.highlight(result.graphic);
                });
              }
          })
        })


          
         

19、 使用element ui 中的 Dialog 弹出框中包含地图时，点击第一次地图不出现：

 <el-dialog
          title="定位地图"
          @opened = initLocationMap
          :visible.sync="locationMapDialogVisible"
          width="30%">
        <div id="locationMapContanier"></div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancelLocationMap">取 消</el-button>
          <el-button type="primary" @click="sureLocationMap">确 定</el-button>
        </span>
      </el-dialog>

其中我们加入 opened 方法 和 visible.sync

其中 opened 方法 里调用的 initLocationMap 方法就是初始化地图的方法，要记得在其方法中要判断地图实例是否已经存在，方式多次创建地图实例