首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

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

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

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

代码语言:txt
复制
<!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输入多边形的属性,具体的属性信息和后续处理逻辑需要根据实际需求进行调整。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【番外】Electron和ArcGIS API for JavaScript的开发

最近学了一些Electron.js开发桌面应用的知识,然后作为一名专业的GISer,脑海里马上想到的是,它能不能和我们的ArcGIS JS API整合呢,意思就是,用我们的ArcGIS JS API去开发桌面应用...概述 写这篇文章主要是想折腾下,因为我看到JS可以通过Electron来做桌面应用程序,那么Electron能不能和ArcGIS API for JavaScript进行结合开发呢,这样一来是不是可以从某种意义上理解成我们的...ArcGIS API for JavaScript可以做桌面应用了呢?...引入ArcGIS API for JavaScript,地图实例化 1、在index.html文件里,引入ArcGIS API for JavaScript相关的css样式包和JS文件,如下: API for JavaScript开发的关键是要了解Electron的渲染机制,如果不了解的话中间肯定会报错。

92720
  • Google JavaScript API 的使用

    入门 您可以使用JavaScript客户端库与Web应用程序中的Google API(例如,人物,日历和云端硬盘)进行交互。请按照此页面上的说明进行操作。...如何发出API请求 有几种方法可以使用JavaScript客户端库发出API请求,但是它们都遵循相同的基本模式: 该应用程序加载JavaScript客户端库。...应用程序使用API​​密钥,OAuth客户端ID和API发现文档初始化库。 应用程序发送请求并处理响应。 以下各节显示了使用JavaScript客户端库的3种常用方法。...选项1:加载API发现文档,然后组合请求。 以下示例假定用户已经登录。有关如何登录用户的完整示例,请参见完整的auth示例。...启用Google API 接下来,确定您的应用程序需要使用哪些Google API,并为您的项目启用它们。使用API资源管理器浏览JavaScript客户端库可以使用的Google API。

    3K20

    ArcGIS API for JavaScript 4.18基于ES Modules的新开发方式@arcgiscore

    ArcGIS API for JavaScript 4.18中新增加了一种基于ES Modules的新开发方式@arcgis/core,这篇文章就来介绍一下如何使用这种方式来进行开发。...项目里使用ArcGIS API for JavaScript的时候一直给大家推荐esri-loader的AMD方式,示例代码如下所示(在这里仅仅演示React项目中的使用,Vue中的使用方式见文章后半部分...ArcGIS API for JavaScript开发的两种方式,至于在Vue中的使用方式见下面的文章即可,里面有详细的介绍流程,文章列表如下: 【番外】 Vue中使用ArcGIS JS API 4.14...但是随着ArcGIS API for JavaScript 4.18的发布,这种尴尬的局面被打破了,ArcGIS API for JavaScript 4.18新增了一种使用方式——@arcgis/core...但是在@arcgis/core的方式中目前还没找到如何使用特定版本API的方式,因为目前通过npm install @arcgis/core安装的话,里面包含的API默认就是最新版4.18,在这里仅仅是猜测

    1.5K20

    使用现代化的脚本进行 ArcGIS JS API 开发

    使用现代化的脚本进行 ArcGIS JS API 开发 ArcGIS JS API 基于古老的 JavaScript 框架 Dojo 开发, dojo 虽然是曾经的王者, 但是2020年的前端开发, 早已是...Angular、 React 和 Vue 三大框架的天下, JavaScript 的新特性可以说是日新月异, 国内也几乎没有人基于 dojo 进行开发, 因此本文介绍如何使用现代化的脚本 (ES6,...JavaScript 模块化标准, 现在依然可以在浏览器中使用; ArcGIS JS API 提供 AMD 模块严重依赖 dojo 的加载器, 无法在 ES6 的环境中直接使用; dojo 的入侵性比较强...使用 ES6+ 脚本进行 ArcGIS JS API 开发 如果目标浏览器不包括 IE11 的话, 则可以放心的使用 async/await 和 import 等这些 JavaScript 最新的功能,...ArcGIS JS API 对 TypeScript 的支持情况 ArcGIS JS API 非常庞大, 可以说是一个巨无霸的 JavaScript 类库, 包括的提供了大量的模块,每个模块都提供了很多方法和属性

    2.4K10

    如何使用TensorFlow中的Dataset API(使用内置输入管道,告别‘feed-dict’ )

    而使用输入管道就可以保证GPU在工作时无需等待新的数据输入,这才是正确的方法。...幸运的是,TensorFlow提供了一种内置的API——Dataset,使得我们可以很容易地就利用输入管道的方式输入数据。在这篇教程中,我们将介绍如何创建和使用输入管道以及如何高效地向模型输入数据。...创建一个迭代器:使用创建的数据集来构造一个Iterator实例以遍历数据集 3. 使用数据:使用创建的迭代器,我们可以从数据集中获取数据元素,从而输入到模型中去。...batch 通常情况下,batch是一件麻烦的事情,但是通过Dataset API我们可以使用batch(BATCH_SIZE)方法自动地将数据按照指定的大小batch,默认值是1。.../python/tf/data/Dataset ▌结论 Dataset API提供了一种快速而且鲁棒的方法来创建优化的输入管道来训练、评估和测试我们的模型。

    2.7K80

    Javascript如何合并两个对象的属性

    ES6可以使用Object.assign方法来实现对象属性的合并,实现代码如下: Object.assign(obj1, obj2); /** 合并对象的数量没有限制 * 所有的对象都合并到第一个对象...); ES5或更早版本的实现方法 for (var attrname in obj2) { obj1[attrname] = obj2[attrname]; } 上面的代码会将obj2的所有属性添加到...如果你的项目包含了使用很多原型,可以使用hasOwnProperty方法来检查对象的属性是否来自于原型。...attrname in obj2) { obj3[attrname] = obj2[attrname]; } return obj3; } 我们还可以封装一个函数来实现该功能,下面的代码展示了如何使用第一个参数并将函数后面的参数作为合并对象...,来合并多个对象的属性,并将第一个参数返回。

    4.1K50

    apifox的使用_api如何使用

    大家好,又见面了,我是你们的朋友全栈君。 快速上手 使用场景 Apifox 是接口管理、开发、测试全流程集成工具,使用受众为整个研发技术团队,主要使用者为前端开发、后端开发和测试人员。...3.前端 使用系统根据接口文档自动生成的 Mock 数据进入开发,无需手写 mock 规则。 4.后端 使用接口用例 调试开发中接口,只要所有接口用例调试通过,接口就开发完成了。...如开发过中接口有变化,调试的时候就自动更新了文档,零成本的保障了接口维护的及时性。 5.后端 每次调试完一个功能就保存为一个接口用例。 6.测试人员 直接使用接口用例测试接口。...7.所有接口开发完成后,测试人员(也可以是后端)使用集合测试功能进行多接口集成测试,完整测试整个接口调用流程。...接口运行:输入特定的接口参数,然后运行,主要用来调试接口。接口运行完之后点击保存为用例按钮,即可生成接口用例,后续可直接运行接口用例,无需再输入参数,非常方便。

    5.2K30

    JavaScript是如何工作的:存储引擎+如何选择合适的存储API

    浏览器中的数据持久化 现在,有相当多的浏览器 Api 用来存储数据。这里将逐一介绍其中的一些及它们的区别,以便后续我们能够容合理的选择使用。 然而,在选择如何持久化数据之前,有几件事需要考虑。...当然,有必要知道的的第一件事是你的 Web 应用程序应用场景是什么,以及以后如何迭代和丰富。即使你知道了这些,最终也会有几个选择。...同步/异步 — 有些存储 Api 是同步的,因为存储或检索请求会阻塞当前活动的线程,直到请求完成。使用同步存储 API 会阻塞主线程,并为 Web 应用程序的 UI 创建冻结体验。...因为它允许你创建具有丰富查询功能的 Web 应用程序,无论网络可用性如何,这些应用程序都可以在线和离线工作。...相反,应该仔细阅读文档,以下是一些需要牢记的基本概念: IndexedDB 数据库使用 key-value 键值对储存数据  —  values 数据可以是结构非常复杂的对象,key可以是对象自身的属性

    1.6K10

    Part3-1.获取高质量的阿姆斯特丹建筑立面图像(附完整代码)

    包如何处理gdb、gpkg等文件地理数据库[9] Geodataframe和GeoSeries的属性查看,切片和索引,apply函数的使用,[10] shapely包中的几何对象[11]:Point[12...论文作者使用谷歌API去获取的街景图像,这是收费的,大约7美元一千张照片。...=False) 2)使用Shapely获取建筑各边的中心点 要获取GeoPandas集合体(例如GeoSeries或GeoDataFrame)中每个多边形的外边界上所有中点,你可以使用Shapely库的几何对象方法和属性...1)简化建筑物 为了不受建筑短边的影像,我们需要对建筑进行简化,使用ArcGIS Pro的简化建筑物[30]工具能达到shapely的效果,而且还能输入障碍图层,障碍图层可以是挡住视线的其他建筑物,我们先不考虑障碍图层...3.1 使用geopandas找到街景点(方法1) 建议用方法一,因为速度更快。如果你想学如果使用ArcGIS Python也就是Arcpy如何处理空间数据,也推荐看看第二种方法。

    69910

    使用javascript实现对于chineseocr的API调用「建议收藏」

    大家好,又见面了,我是你们的朋友全栈君。...ChineseOCR在线API 网页地址 界面 提供多种接口调用方式,比如在线调用、Javascript api调用、curl api调用和python api调用四种方式,本次使用javascript...api调用的方式进行OCR识别 在线Javascript工具 在线工具网页链接 在线Base64 转化工具 在线工具网页链接 代码修改 新增一个变量fill_with_base64_image...接收图片的base64编码的字符串 将input内的两边的尖括号删除,运行代码 返回两个参数,take_time和output,take_time接收检测的时间...,output接收识别后的字符串 async function fetchAsync() { try { let url = 'https://momodel.cn/pyapi/apps/run

    80110

    html2canvas实现ArcGIS API for JavaScript 4.X截图功能

    主要介绍ArcGIS API for JavaScript 4.X实现地图截图的两种方式,解决普通地图截图是底图空白的问题,最终效果如下: 需求描述 在我们项目开发过程中,有时候需要将地图上面绘制的元素或添加的一些图标之类的小元素进行截图保存或者展示...目前在ArcGIS API for JavaScript中其实已经提供了地图截图的API,但是该API对地图底图和一些自定义的需求支持度并不高,所以我们平时项目开发时建议使用第三方截图模块,今天就给大家介绍下关于地图截图的两种方式...,最终效果如下: 实现方法 一、ArcGIS API for JavaScript自带的截图方式 介绍的第一种方式就是ArcGIS API for JavaScript自带的“esri/widgets...接下来我们说说这种方式实现截图的问题: 具体的一些细小的问题的话大家可以自己手动尝试去观察,无非就是一些涉及到跨域啊,参数值输入不一致形成的图片变形之类的,但是最大的一个问题就是:当我们的底图如果不使用...API for JavaScript 3.X版本实例化出来的底图空白问题有效,并不能结局4.X版本出现的问题,所以我们就来看看针对4.X版本如何解决这一问题。

    2.4K30

    (数据科学学习手札65)利用Python实现Shp格式向GeoJSON的转换

    一、简介   Shp格式是GIS中非常重要的数据格式,主要在Arcgis中使用,但在进行很多基于网页的空间数据可视化时,通常只接受GeoJSON格式的数据,众所周知JSON(JavaScript Object...的语法规则,以及如何利用Python完成Shp格式到GeoJSON格式的转换进行介绍。...(Polygon):   多边形要素记录了构成一个多边形所有边缘折点的经纬度信息,其coordinates属性传入"Polygon",其geometry下type属性格式为三维列表,其第三层列表中嵌套的所有列表记录的经纬度按顺序连接即构成了一个多边形...(MultiPolygon):   多多边形的格式为四维列表,其geometry下type属性传入"MultiPloygon",由于多多边形要素中存在几种特殊情况,下面我们在geojson.io中进行对应...下面我们通过一个示例来展示实际转换效果,使用到的Shp数据为中国省份数据,在arcgis中效果如下: ?

    2.7K10

    Arcgis for Javascript API下类似于百度搜索A、B、C、D marker的实现方式

    图2、Arcgis for Javascript实现的效果 看到了效果,是不是各位有点小鸡动,是不是也宠宠欲动,有木有?但是具体是怎么实现的呢?下面我来详细的给各位说说我的实现思路吧。 第一,数据。...其实搜索的对象从类型上来说,应该是点、线、面都支持的,但是在实际的操作过程中,不论是百度还是我自己做的时候,都会将所有的对象抽成点对象,也就是将每一个对象转换成为POI热点,再将对象的坐标信息提取出来,...获取到数据之后,接着做数据在左侧的分页展示与地图上与左侧列表相对应的展示,左侧列表的展示我就不详细说了,做过web的大家都有一万种方法去实现它,重点说说地图上的展示。...图4、arcgis的信息框 所谓的联动呢,就是点击左侧列表也能弹出点击红气泡一样的信息框,那么在Arcgis中如何实现呢?下面再说说我实现该效果的思路。.../span>/** * 显示详细信息 */ showObjDetailInfo = function(id){ javascript"><span

    54330
    领券