如何正确响应ArcGIS JavaScript API中图形的鼠标事件

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何正确响应ArcGIS JavaScript API中图形的鼠标事件相关的知识，希望对你有一定的参考价值。

在使用ArcGIS javascript API编写程序的时候，程序员往往需要完成这样一个功能：点击地图上的图形，自动进行专题GIS数据查询，当在地图非图形区域上点击时，自动进行底图兴趣点查询。

由于专题GIS图形是叠加在底图上的，所以我们在处理地图的鼠标点击事件时，就需要根据实际点击的位置和内容来对不同的数据进行查询。

ArcGIS JavaScript API为编程人员分别提供了针对地图对象和图形的两个鼠标点击事件。

下面是示例代码：

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
 6     <title>Test Map</title>
 7     <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/claro/claro.css" />
 8     <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" />
 9     <style>
10       html, body, #ui-map-view {
11         margin: 0;
12         padding: 0;
13         width: 100%;
14         height: 100%;
15       }
16     </style>
17     <script src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"></script>
18     <script>
19       var myMap;
20       require([
21         "esri/layers/ArcGISTiledMapServiceLayer",
22         "esri/symbols/SimpleMarkerSymbol",
23         "esri/map",
24         "dojo/on",
25         "esri/graphic",
26         "esri/geometry/Point",
27         "dojo/domReady!"
28       ], function ( TileLayer,SimpleMarkerSymbol, Map, on,Graphic,Point){
35         var layer = new TileLayer(
36           "https://www.seanpc.com/ags/rest/services/WorldBaseMap/MapServer"
37         );
38         myMap = new Map("ui-map-view",{
39           center: [-111.87, 40.57]
40         });
41         myMap.addLayer(layer);
42 　　　　//地图鼠标点击响应事件
43         on(myMap,"click",function(e){
44           alert("map clicked");
45         });
46         
47        myMap.on("load", function() {//图形鼠标点击响应事件
48         myMap.graphics.on("click",function(e){
49           alert("graphic clicked");
50           e.stopPropagation();
51         });
52         var g=new Graphic();
53         g.setGeometry(new Point([-111.87, 40.57]));
54          var simpleMarkerSymbol = new SimpleMarkerSymbol();
55          g.setSymbol(simpleMarkerSymbol);
56         myMap.graphics.add(g);
57         });
58       });
59     </script>
60   </head>
61   <body class="claro">
62     <div id="ui-map-view"></div>
63   </body>
64 </html>

 

以上是关于如何正确响应ArcGIS JavaScript API中图形的鼠标事件的主要内容，如果未能解决你的问题，请参考以下文章

arcgis api for javascript 4.10版本的本地部署

如何利用arcgis api for javascript在graphicslayer绘制点线面

arcgis api for javascript如何遍历graphics

ArcGIS API For Javascript ：如何解决跨网不能正常获取依赖项的问题？

ArcGIS JavaScript api实现点聚合

arcgis for javascript 中 如何限制地图无限缩小 ，我写map.setMinResolution() 报错