arcgisforjs nearest point query and unbind View monitoring

The requirement is: a layer has more than a dozen points, the user randomly clicks on a point on the map, and finds out the point in this layer that is closest to the point the user clicks, and then adds the point to the map for display.

directly on the code

  methods:{
    startClosePoint() {
        loadModules([
        "esri/rest/support/Query",
        "esri/Graphic",
        "esri/layers/FeatureLayer",
        "esri/geometry/geometryEngine",
        "esri/geometry/Point",
        "esri/layers/GraphicsLayer",
      ]).then(
        ([
          Query,
          Graphic,
          FeatureLayer,
          geometryEngine,
          Point,
          GraphicsLayer,
        ]) => {
          // 要素图层
          this.$allPointLayer = new FeatureLayer({
            url: "xxx",
          });

          let pointSymbol = {
            type: "point-3d",
            symbolLayers: [
              {
                type: "object",
                width: 5000,
                resource: { primitive: "diamond" }, // https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-ObjectSymbol3DLayer.html#material    可以查看resource
                material: { color: "#FFD700" },
              },
            ],
          };

          this.$pointGraphicsLayer = new GraphicsLayer(); // 创建 GraphicsLayer
          this.$map.add(this.$pointGraphicsLayer);

          // 绑定好监听事件,到时候解绑要用到
          this.$clickSceneView = this.$view.on("click", (event) => {

          // 开始进行最近点的查询
            let nearestDistance = Infinity;
            let nearestFeature = null;

          // 根据点击处创建点
            const clickedPoint = new Point({
              x: event.mapPoint.longitude,
              y: event.mapPoint.latitude,
              spatialReference: this.$view.spatialReference,
            });
            this.$allPointLayer.queryFeatures().then((result) => {
              result.features.forEach((feature) => {

          // geometryEngine可以用来计算距离
                const distance = geometryEngine.distance(
                  clickedPoint,
                  feature.geometry
                );
                if (distance < nearestDistance) {
                  nearestDistance = distance;
                  nearestFeature = feature;
                }
              });

              // 显示或处理最近的要素和距离
              if (nearestFeature) {
                // 创建用于显示的点要素
                const pointGraphic = new Graphic({
                  geometry: {
                    type: "point",
                    longitude: nearestFeature.attributes.longitude,
                    latitude: nearestFeature.attributes.latitude,
                    spatialReference: this.$view.spatialReference,
                  },
                  symbol: pointSymbol
                });
                // 先清除所有
                this.$pointGraphicsLayer.removeAll();
                this.$pointGraphicsLayer.add(captialGraphic);
                this.$advanceLoading.close();
              // 移动视角
                this.$view.goTo({
                  zoom: 12,
                  center: [
                    nearestFeature.attributes.longitude,
                    nearestFeature.attributes.latitude,
                  ],
                  tilt: 45,
                });
              }
            });
          });
        }
      );
    },
  }

The key is the geometryEngine. I always thought that it was necessary to use Query to realize the query.

The official website reference of geometryEngine is also placed here: geometryEngine | API Reference | ArcGIS Maps SDK for JavaScript 4.27 | ArcGIS Developers

Then there is the unbundling of events, there is nothing to say about this.

this.$clickSceneView.remove();    // this.$clickSceneView就是上面代码的this.$clickSceneView