如何使用Javascript的ArcGIS API输入多边形的属性？

使用Javascript的ArcGIS API输入多边形的属性可以通过以下步骤实现：

导入ArcGIS API的Javascript库文件，确保在HTML文件中正确引入。
创建一个地图容器，可以使用HTML中的div元素作为容器。
初始化地图对象，使用ArcGIS API提供的Map类来创建地图对象，并将其与容器关联起来。
创建一个绘图工具，使用ArcGIS API提供的SketchViewModel类来创建绘图工具，并将其与地图对象关联起来。
监听绘图工具的create事件，当用户完成绘制多边形时触发。
在create事件的回调函数中，获取绘制的多边形的属性信息。
将多边形的属性信息存储到合适的数据结构中，例如数组或对象。
根据需要，可以将多边形的属性信息发送到后端进行处理或保存。

以下是一个简单的示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>ArcGIS API - 输入多边形的属性</title>
  <link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.20/"></script>
  <style>
    #map {
      height: 400px;
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="map"></div>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/widgets/Sketch/SketchViewModel"
    ], function(Map, MapView, SketchViewModel) {
      // 创建地图容器
      var map = new Map({
        basemap: "streets"
      });

      // 创建地图视图
      var view = new MapView({
        container: "map",
        map: map,
        center: [-118.805, 34.027],
        zoom: 13
      });

      // 创建绘图工具
      var sketchViewModel = new SketchViewModel({
        view: view,
        layer: map.layers.getItemAt(0) // 可以根据实际情况修改图层索引
      });

      // 监听绘图工具的create事件
      sketchViewModel.on("create", function(event) {
        if (event.state === "complete" && event.tool === "polygon") {
          // 获取多边形的属性信息
          var attributes = event.graphic.attributes;
          console.log(attributes);

          // 在这里可以将属性信息发送到后端进行处理或保存
        }
      });

      // 启动绘图工具
      sketchViewModel.create("polygon");
    });
  </script>
</body>
</html>

在上述示例中，我们使用了ArcGIS API的Map类创建了一个地图对象，并使用MapView类创建了一个地图视图。然后，我们使用SketchViewModel类创建了一个绘图工具，并将其与地图视图关联起来。在绘图工具的create事件回调函数中，我们可以获取绘制的多边形的属性信息，并进行后续处理。

请注意，上述示例中的代码仅演示了如何使用ArcGIS API输入多边形的属性，具体的属性信息和后续处理逻辑需要根据实际需求进行调整。

如何使用Javascript的ArcGIS API输入多边形的属性？

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐