ArcGIS API for JavaScript-弹出窗口简介

ArcGIS API for JavaScript-弹出窗口简介弹出窗口通过显示信息以响应用户操作 提供了一种简便的方法来将交互性添加到 ArcGISAPIfor 应用程序 每个 view 都有一个与之关联的 popup 在大多数情况下 弹出窗口的内容允许用户从图层和图形访问数据属性 虽然弹出窗口通常与图形层或要素层一起使用 但是您也可以显示弹出窗口以响应查询或不涉及图形或要素的某些其他操作 例如 您可以在视图中显示用户单击位置的纬度 经度坐标 本示例将通过设置默认属性 例如 content title 和 location 并显示它而无需从 PopupTe

弹出窗口通过显示信息以响应用户操作,提供了一种简便的方法来将交互性添加到ArcGIS API for JavaScript应用程序。每个view都有一个与之关联的popup。在大多数情况下,弹出窗口的内容允许用户从图层和图形访问数据属性。

虽然弹出窗口通常与图形层或要素层一起使用,但是您也可以显示弹出窗口以响应查询或不涉及图形或要素的某些其他操作。例如,您可以在视图中显示用户单击位置的纬度/经度坐标。

本示例将通过设置默认属性(例如content,title和location)并显示它而无需从PopupTemplate,图形或图层的要素中提取信息来指导您如何在视图中使用默认Popup。该示例使用Locator任务对视图上单击位置的点进行反向地理编码。返回的地址显示在弹出窗口的内容中,而单击位置的纬度和经度显示在弹出窗口的标题内。

1.需要Locator,Map和MapView模块并创建新实例

使用世界地理编码服务创建一个定位器。创建一个基本地图。将地图实例添加到视图。您的JavaScript看起来应类似于以下代码:

require(["esri/tasks/Locator", "esri/Map", "esri/views/MapView"], function(Locator, Map, MapView) { 
    // Create a locator task using the world geocoding service var locatorTask = new Locator({ 
    url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer" }); // Create the Map var map = new Map({ 
    basemap: "streets-navigation-vector" }); // Create the MapView var view = new MapView({ 
    container: "viewDiv", map: map, center: [-71.6899, 43.7598], zoom: 12 }); }); 

2.监听视图的单击事件,并在单击的位置显示弹出窗口

在视图上监听click事件,并获取单击位置的经度和纬度。在单击的位置显示弹出窗口,并在弹出的标题中显示单击的位置的坐标。为此,我们将在open()方法中设置弹出窗口的位置和标题属性。

view.popup.autoOpenEnabled = false; view.on("click", function(event) { 
    // Get the coordinates of the click on the view // around the decimals to 3 decimals var lat = Math.round(event.mapPoint.latitude * 1000) / 1000; var lon = Math.round(event.mapPoint.longitude * 1000) / 1000; view.popup.open({ 
    // Set the popup's title to the coordinates of the clicked location title: "Reverse geocode: [" + lon + ", " + lat + "]", location: event.mapPoint // Set the location of the popup to the clicked location }); }); 

3.找到单击位置的地址,然后在弹出的内容中显示匹配的地址

单击的位置用作反向地理编码方法的输入,结果地址显示在弹出窗口的内容中。用户单击视图后,调用locatorTask.locationToAddress()方法并传递被单击的点以获取该位置的地址。如果找到该点的匹配地址,则设置弹出窗口的content属性以显示该地址。最后,如果未找到所单击位置的地址,则弹出窗口的内容将显示一条通用消息,指示未找到地址。

var params = { 
    location: event.mapPoint }; // Execute a reverse geocode using the clicked location locatorTask .locationToAddress(params) .then(function(response) { 
    // If an address is successfully found, show it in the popup's content view.popup.content = response.address; }) .catch(function(error) { 
    // If the promise fails and no result is found, show a generic message view.popup.content = "No address was found for this location"; }); 
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/199850.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月20日 下午12:04
下一篇 2026年3月20日 下午12:04


相关推荐

  • K8S 部署 coredns

    K8S 部署 coredns参考 https mp weixin com s PV1GTtIQ2oVj

    2026年3月17日
    2
  • arpspoof攻击_捕获arp请求

    arpspoof攻击_捕获arp请求把PC和iPhone链接到同一个路由器上攻击者和受害者需要在同一局域网内1.查看发起攻击者的网卡和IP地址:$ifconfigeno1:flags=4163mtu1500inet192.168.2.105netmask255.255.255.0broadcast192.168.2.255inet6fe80::a56b:455a:b152:634cprefixlen64…

    2022年10月7日
    4
  • RegisterHotKey函数

    RegisterHotKey函数转载 RegisterHotK 实现 Alt E 的快捷键组合功能 2007 07 3009 48 问题提出 nbsp nbsp nbsp nbsp 有的程序需要自定义组合键完成一定功能 如何实现 nbsp nbsp 解决方法 nbsp nbsp nbsp nbsp RegisterHotK 函数原型及说明 nbsp nbsp nbsp nbsp BOOLRegister nbsp nbsp nbsp nbsp H

    2026年3月17日
    2
  • java sortedset用法_Java SortedSet为什么可以实现自动排序?

    java sortedset用法_Java SortedSet为什么可以实现自动排序?今天来看一下 Set 中的 SortedSet 的有关内容 SortedSet 为 TreeSet 的实现接口 它们之间的继承关系如下 java util Set java util SortedSet java util TreeSet SortedSet 中的元素无序不可重复 但是存进去的元素可以按照元素大小顺序自动排序 结合以下代码来看 importjava util importjava tex

    2026年3月26日
    2
  • 从零学Java(3)之第一个实例HelloWorld

    从零学Java(3)之第一个实例HelloWorld引言 小 AD 小明哥 我 jdk 和 eclipse 都安装好了 不知道干啥用 你这也不行啊 我刚玩王者的时候 有新手训练营的 我很容易就知道改怎么玩了 明世隐 别急啊 就跟你着急送人头似的 你说你一个小鲁班 闪现到凯爹脸上干嘛 小 AD 明哥你太过分了 在这样我跑路了哈 人家诚心学习来的 明世隐 你看你还说诚心来的 一说你就说要跑路 小 AD 你太伤我自尊了 明世隐 没事哈 哥我说这玩 你有不是打野 我只跟打野过不去 小 AD 那你说怎么办 我这人做事也是急性子 对面打野敢杀我

    2026年3月19日
    1
  • 函数去抖(debounce)& 函数节流(throttle)总结

    函数去抖(debounce)& 函数节流(throttle)总结//todo

    2022年6月20日
    32

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号