GISer从零开始学习ArcGIS API for JavaScript&ArcGIS Online教程（六）点击地图点拾取经纬度坐标

大家应该都用过百度或者高德的坐标拾取功能：

GIS应用中经常会有需要获取某地点经纬度的情况，百度和高德的这个功能蛮实用的
而强大的ArcGIS如何能少得了这个功能，我们马上就自己用JS 的API动手做一个，而且是威力加强pro版的：

如上图，鼠标点击后就出现点击点的经纬度和高程信息了
具体步骤：

往前找第二节，翻出当时做好的空白3D地图，拿它来打底

• point

我们先来查阅一下API文档：
https://developers.arcgis.com/javascript/latest/api-reference/esri-geometry-Point.html

看到point有lat、long、z等等这些属性信息，一会拿来用就可以了

• 信息显示区域

然后就是要把这些信息显示到点击的点那里，再看一下这个API：
https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-PointSymbol3D.html
符合我们的要求，新建一个TextSymbol3DLayer即可：

        // Initialize symbols
        const textSymbol = {
          type: "point-3d", // autocasts as new PointSymbol3D()
          verticalOffset: {
            screenLength: 10 // Offset the text to be above the line
          },
          symbolLayers: [
            {
              type: "text", // autocasts as new TextSymbol3DLayer()
              material: { color: "black" },
              size: 12,
              background: { color: [255, 255, 255, 0.75] },
              verticalAlignment: "bottom" // Aligns the text's bottom to be above the input position
            }
          ]
        };

• 事件功能绑定

        view.on("click", (event) => {
          const position = event.mapPoint;

              // 清空一下
              view.graphics.removeAll();

              // 构建显示信息
              textSymbol.symbolLayers[0].text =
                (position.longitude).toFixed(4) + "," +(position.latitude).toFixed(4)+ "," +(position.z).toFixed(2);
          //添加到地图
          view.graphics.add(
                  new Graphic({
                    geometry: position,
                    symbol: textSymbol
                  })
                );

            })
            .catch((error) => {
              textSymbol.symbolLayers[0].text =
                "Elevation query failed (" + error.message + ")";
            });

把这些和打底地图组合到一起就OK了