ArcGIS 地图的一些常用方法汇总

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

个人对ArcGIS 地图使用的一些理解和方法

大概分为以下几类：
1：图层的添加。
2：热力图。
3：绘图小部件。
4：视频图层。
5：空间查询。
6：地图点击事件。

---

以下方法是在vue中使用

一、

1. 首先下载 ArcGIS ，然后在当前使用的页面引入

代码如下（示例）：

1：npm install esri-loader --save  (或者cnpm)
2：import { loadModules } from "esri-loader";

2. 还需要在样式中引入。

代码如下（示例）：

@import "http://10.101.21.67:8099/lgpc/arcgis_js_v422_api/arcgis_js_api/javascript/4.22/esri/themes/light/main.css";

放在style中就好。

3. 在页面创建一个id。

 <div id="viewDiv"></div>

4.我直接贴上整个代码，附带注释。以供更好的理解，或整体使用。

代码如下（示例）：

    createMapView() {
      var map;
      var view;
      var that = this;
      var nnerId = "";
      loadModules([              //引入的这些注意顺序，有时候顺序不对，也会报错加载不出来的。
        "esri/config",
        "esri/Map",
        "esri/views/MapView",
        "esri/widgets/Sketch", //绘图小组件
        "esri/Graphic", //现实世界地理现象的矢量表示
        "esri/layers/GraphicsLayer", //绘制图层
        "esri/layers/GroupLayer",
        "esri/layers/MapImageLayer",
        "esri/layers/TileLayer",
        "esri/layers/FeatureLayer", //矢量图层
        "esri/renderers/HeatmapRenderer",
        "esri/widgets/LayerList",
        "esri/tasks/support/Query", //用于从图层或图层视图执行要素查询的参数
        "esri/tasks/QueryTask", //查询操作
        "esri/symbols/SimpleLineSymbol", //	创建线符号
        "esri/symbols/SimpleFillSymbol", //  创建面符号
        "esri/widgets/Slider",
        "esri/geometry/Point",
        "dojo/dom", //定义了核心 dojo DOM 构建 API（dom.byid)
        "dojo/on", //用于 DOM 节点和其他事件发射对象的通用事件处理程序模块，提供规范化的事件侦听和事件调度功能。
        "esri/Color", //创建新的颜色对象
      ]).then(
        ([
          config,
          Map,
          MapView,
          Sketch,
          Graphic,
          GraphicsLayer,
          GroupLayer,
          MapImageLayer,
          TileLayer,
          FeatureLayer,
          HeatmapRenderer,
          LayerList,
          Slider,
          QueryTask,
          Query,
          SimpleFillSymbol,
          SimpleLineSymbol,
          Point,
          dom,
          on,
          Color,
        ]) => {
          var layer = new TileLayer({
            url: "",   //注释：地图分为电子地图，影像地图等多种。（看你需要的是省市地图，还是全国地图，把地图链接放在这里。默认加载的就是当前的地图图层。）
          });
          map = new Map();
          map.add(layer);

          // 初始化图层视角
          const view = new MapView({
            container: "viewDiv",     //跟页面的id相对应
            map: map,
            popup: { defaultPopupTemplateEnabled: true }, //开启"FeatureLayer"特征图层属性弹窗
          });

          // 初始化地图视角和视图更新
          const location = new Point({
            x: this.longitude,     //经纬度，视角
            y: this.latitude,
            spatialReference: 4490,
          });
          view.center = location;
          view.zoom = this.zooms;   //视角大小
          // view.zoom = 6;

          //创建多个不同类型的图层，并进行组合，以列表的方式显示
          const FWM = new FeatureLayer({
            url: "",     //楼栋图层，点击可以获取当前的楼栋信息。(根据你自己需求，可用可不用)
            title: "楼栋图层",
            visible: false,
            outFields: ["*"],
          });
          const yxLayer = new TileLayer({
            url: "",  //对应的另一种地图。
            title: "影像地图",
            visible: false,
          });

          var citiesRenderer = {
            type: "simple", // autocasts as new SimpleRenderer()
            symbol: {
              type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
              size: 6,
              color: "black",
              outline: {
                // autocasts as new SimpleLineSymbol()
                width: 0.5,
                color: "white",
              },
            },
          };
          // 视频监控图层
          var citiesLayer = new FeatureLayer({
            id: "video",
            title: "视频监控图层",
            outFields: ["channo", "id"], //获取图层表字段，"*"=返回所有字段，字段名称=返回指定字段
            url: "", //视频图层
            renderer: citiesRenderer,
          });
          //地图的点击事件
          view.on("click", function (event) {
            view.hitTest(event).then(function (response) {
              if (response.results.length) {
                var graphic = response.results.filter(function (result) {
                  return result.graphic.layer === citiesLayer;
                })[0].graphic;
                console.log(graphic.attributes.channo);  
               //可以获取到当前点击的楼栋或视频编码信息。当然要进行视频播放的话，还得需要播放器等
              } else {
                console.log("选中图层内容,才能返回数据");
              }
            });
          });

          //组合图层
          const demographicGroupLayer = new GroupLayer({
            title: "图层控制",
            // visible: false,
            visibilityMode: "independent", //exclusive=图层互斥，始终显示一个，inherited=图层叠加显示
            layers: [yxLayer, FWM, citiesLayer],   //多个图层组合起来。
            opacity: 1, //图层透明度
          });
          map.add(demographicGroupLayer); // 添加图层组到地图

          //创建图层列表小部件，并添加至右上角
          view.when(() => {
            const layerList = new LayerList({
              view: view,
            });
            view.ui.add(layerList, "top-left");
          });
          view.ui.move("zoom", "bottom-right");
          //添加绘图小部件
          const graphicsLayer = new GraphicsLayer();
          map.add(graphicsLayer);
          view.when(() => {
            var sketch = new Sketch({
              layer: graphicsLayer,
              view: view,
              //single:只能操作一次，再次操作需要选择操作
              //continuous:连续操作
              //update:操作完成后，将选择图形进行更新操作
              creationMode: "update",
            });
            view.ui.add(sketch, "top-right");

            sketch.on("create", function (event) {
              if (event.state === "complete") {
                console.log(event);
                //使用graphic.geometry 去查询相交特征
                //console.log(event.graphic.geometry);
                //使用geometry（QueryTask）
                querysTask(event.graphic.geometry);
              }
            });
          });

          //去掉地图右下角logo
          view.ui._removeComponents(["attribution"]);
          view.on("click", function (e) {
            console.log(e);
          });
          //4.7空间查询（QuerysTask）
          function querysTask(geometry) {
            // console.log(geometry);
            var china =
              "http://10.101.21.140:81/ServiceAdapter/MAP/FWM2000/f61896e203dbb6216c19a86c1364da20/0";
            var qTask = new QueryTask({
              url: china, //全国矢量
            });
            var query = new Query({
              returnGeometry: true,
              outFields: ["*"], //结果要素包含的属性字段
            });
            query.geometry = geometry;
            query.where = "1=1";
            //空间参考信息
            query.outSpatialReference = map.spatialReference;
            //查询的标准，此处代表和geometry相交的图形都要返回
            query.spatialRelationship = Query.SPATIAL_REL_INTERSECTS;
            // //执行空间查询
            qTask.execute(query).then(function (results) {
              showQueryResult(results.features);
            });
          }

          //4.8执行查询
          function showQueryResult(queryResult) {
            console.log("queryResult:", queryResult);  //用图标工具选中的地方全部的楼栋名称及经纬度
            //创建线符号
            var lineSymbol = new SimpleLineSymbol(
              SimpleLineSymbol.STYLE_DASH,
              new Color([0, 255, 0, 0.5])
            ); //rgba:0.5是设置的透明度
            //创建面符号
            var fill = new SimpleFillSymbol(
              SimpleFillSymbol.STYLE_SOLID,
              new Color([0, 255, 0])
            );
            if (queryResult.length == 0) {
              dom.byId("divShowResult").innerHTML = "查询结果为空！";
              return;
            }
            var htmls = "";
            if (queryResult.length >= 1) {
              htmls = htmls + '<table style="text-align: center;width: 100%;">'; //创建一个表，使用了转义字符
              htmls = htmls + "<tr><th>楼栋信息</th></tr>";
              for (var i = 0; i < queryResult.length; i++) {
                htmls = htmls + "<td>" + queryResult[i].attributes.MC + "</td>";
                htmls = htmls + "</tr>";
              }
              htmls = htmls + "</table>";
              dom.byId("tasblea").innerHTML = htmls;   //这是我自己写的进行了一个循环，展示我所选中的所有楼栋名称，在页面中显示出来。
            }
          }
          //下面的两个方法，一个是经纬度，一个是圆点样式的设置。用来在地图中显示当前定位的地方。
          const polygon = {
            type: "point",
            longitude: this.longitude,
            latitude: this.latitude,
          };
          // console.log(this.longitude);
          const simpleFillSymbol = {
            type: "simple-marker",
            color: [116, 15, 224], // Orange
            outline: {
              color: [255, 255, 255], // White
              width: 2,
            },
          };
          const pointGraphic = new Graphic({
            geometry: polygon,
            symbol: simpleFillSymbol,
          });

          graphicsLayer.add(pointGraphic);

		 //热力图
          var heatmapRenderer = new HeatmapRenderer({
            //设置渲染器
            colorStops: [
              { ratio: -0.1, color: "rgba(0, 255, 0, 0)" },
              { ratio: 0.5, color: "rgba(255, 140, 0, 1)" },
              { ratio: 0.9, color: "rgba(255, 0,   0, 1)" },
            ],
            blurRadius: 6, //确定一个点周围的影响区域
            //maxPixelIntensity: 20,
            //minPixelIntensity: 20
          });

          var heatDataUrl = ``;  //热力图的经纬度接口。
          $.getJSON(heatDataUrl, {}, function (data, textStatus, jqXHR) {
            //读取数据，设置点数据集
            var features = [];
            for (var i = 0; i < data.data.length; i++) {
              var x = data.data[i].lng;
              var y = data.data[i].lat;
              features.push({
                geometry: {
                  type: "point",
                  x: x,
                  y: y,
                },
                attributes: {
                  ObjectID: i, //重要！！！
                },
              });
            }
            var featureLayer = new FeatureLayer({
              source: features, //点数据集
              title: "热力图",
              objectIdField: "ObjectID", //重要！！！
              renderer: heatmapRenderer, //渲染器
            });
            map.add(featureLayer);
          });
        }
      );
    },

---

总结

–、 以上呢是我项目中 ArcGIS 地图的一些用法。
（ps：当然，如果你直接cv 过去的话是不能直接使用的。用到哪些部分，就把接口链接等补上就可以使用了！）
— 当前有不懂的也可以联系我，在我知道的前提下知无不言、言无不尽。