ArcGIS for js 4.X 之 MapImageLayer 应用

        最近在做项目的时候用到了MapImageLayer，主要是通过url调用人家写好的管线服务。

        当时因为不知道怎么通过MapImageLayer实现点击管道出现管道信息的弹窗，因此又在MapImageLayer的基础上使用了FeatureLayer，由于MapImageLayer里url封装的是一个layer集合，它会返回多个子layer，这些layer依靠不同的id进行识别和区分，因此当子layer较多时，需要实例化的FeatureLayer就比较多；当时用FeatureLayer实例化这些子layer是为了实现弹窗功能，也就是FeatureLayer里面的popupTemplate属性，但是要使用这个属性，还需要按照子layer中返回的字段(Fields)进行弹窗内容模板的设计，如果子layer和子layer中的字段比较多的时候，代码数可能达到几千行；

        后来我对MapImageLayer的API和Sample进行研究，发现其实只需要几十行代码就可以实现弹窗功能了：

1.使用mapView对点击事件进行监听

2.使用IdentifyParameters接收点击位置的参数，使用identify的identify方法进入总layer中进行参数的分析，this.url就是MapImageLayer中用到的url；

3.根据获得的字段，开始设计HTML模板，if语句是处理不同点击位置的，比如下面就是区分点击到了管道(有feature属性)和点击到了其它的位置(没有feature属性)

注：本代码中this.mapView和mapView交替使用，但是这是因为两者是一样的，原本mapView使用一个局部变量，this.mapView是获取到mapView的全局变量；viewDiv是一个div的id，这个div我用来展示地图。

this.mapView.on("click", (event) => {
            document.getElementById("viewDiv").style.cursor = "wait";
            // console.log(this.mapView, "000000000000000");
            let query = new IdentifyParameters();
            this.mapPoint = event.mapPoint;
            query.geometry = event.mapPoint;
            query.mapExtent = mapView.extent;
            query.tolerance = 5;
            query.returnGeometry = true;
            query.layerIds = [0];
            query.width = mapView.width;
            query.height = mapView.height;
            identify
              .identify(this.url, query)
              .then((res) => {
                console.log(res, "222222");
                // console.log(res.results[0].feature.attributes, "1111111111111111");
                let results = res.results;
                return results.map(function (result) {
                  if (result.feature) {
                    let feature = result.feature;
                    var data = result.feature.attributes;
                    var html = "";
                    for (var key in data) {
                      html += "<b>" + key + ": " + "</b>" + data[key] + "</br>";
                      // console.log(key, data[key])
                    }
                    // console.log(html)
                    feature.popupTemplate = {
                      // autocasts as new PopupTemplate()
                      title: "{CODE}",
                      content: html,
                    }; // feature.popupTemplate

                    return feature;
                  } else {
                    return {};
                  }
                }); // results.map
              }) // then
              .then(this.showPopup);
          }); // mapView.on

4.showPopup也是一个自定义方法：

showPopup(response) {
      if (response.length > 0) {
        console.log(this.mapView, "2222222222222222");
        this.mapView.popup.open({
          features: response,
          location: this.mapPoint,
        });
      }
      document.getElementById("viewDiv").style.cursor = "auto";
    }