首页 > 代码库 > 如何正确响应ArcGIS JavaScript API中图形的鼠标事件

如何正确响应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中图形的鼠标事件