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

纬开GIS

已于 2022-07-20 17:10:32 修改

阅读量1.9k

点赞数 2

分类专栏： GISer从零开始学习ArcGIS API for JavaScrip 笔记文章标签：学习 gis javascript

于 2022-07-20 17:09:16 首次发布

本文链接：https://blog.csdn.net/weixin_46177488/article/details/125893212

版权

GISer从零开始学习ArcGIS API for JavaScrip 同时被 2 个专栏收录

7 篇文章 14 订阅

订阅专栏

笔记

7 篇文章 12 订阅

订阅专栏

这篇教程介绍了如何利用ArcGIS API for JavaScript创建一个功能，让用户在3D地图上点击获取点击点的经纬度和高程信息。通过设置PointSymbol3DLayer显示坐标信息，并绑定点击事件，实现了类似百度和高德地图的坐标拾取功能。

摘要由CSDN通过智能技术生成

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

大家应该都用过百度或者高德的坐标拾取功能：
在这里插入图片描述

GIS应用中经常会有需要获取某地点经纬度的情况，百度和高德的这个功能蛮实用的
而强大的ArcGIS如何能少得了这个功能，我们马上就自己用JS 的API动手做一个，而且是威力加强pro版的：
在这里插入图片描述
如上图，鼠标点击后就出现点击点的经纬度和高程信息了
具体步骤：

一、基础地图

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

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>标题</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/css/main.css">
  <script src="https://js.arcgis.com/4.16/"></script>

  <script>
    require(["esri/Map", "esri/views/SceneView"], function (Map, SceneView) {
    var map = new Map({
      basemap: "hybrid",
      ground: "world-elevation" 
    });

    var view = new SceneView({
      container: "viewDiv",
      map: map,
      camera: {
        position: {
          x: 118.808,
          y: 33.961,
          z: 2000
        },
        tilt: 65
      }
    });
  });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

二、点击地图获取点的经纬度（坐标）和高程

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了

纬开GIS

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
GISer从零开始学习ArcGIS API for JavaScript&ArcGIS Online教程（六）点击地图点拾取经纬度坐标

大家应该都用过百度或者高德的坐标拾取功能GIS应用中经常会有需要获取某地点经纬度的情况，百度和高德的这个功能蛮实用的而强大的ArcGIS如何能少得了这个功能，我们马上就自己用JS的API动手做一个，而且是威力加强pro版的如上图，鼠标点击后就出现点击点的经纬度和高程信息了。......
复制链接

扫一扫