When using the ArcGIS JavaScript API to write programs, programmers often need to complete a function: Click on the map of the graph, automatic thematic GIS data query, when the map is not in the graphics area when clicked, automatic Basemap point of interest query.
Since the thematic GIS graph is superimposed on the basemap, we need to query the different data according to the location and content of the actual click when we are dealing with the mouse click event of the map.
The ArcGIS JavaScript API provides programmers with two mouse click events for map objects and graphics, respectively.
Here is the sample code:
1<! DOCTYPE html>234<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>TenHTML, body, #ui-map-View { Onemargin:0; Apadding:0; -width:100%; -height:100%; the } -</style> -<script src= "Http://localhost/arcgis_js_api/library/3.17/3.17/init.js" ></script> -<script> + varMyMap; - require ([ +"Esri/layers/arcgistiledmapservicelayer", A"Esri/symbols/simplemarkersymbol", at"Esri/map", -"Dojo/on", -"Esri/graphic", -"Esri/geometry/point", -"Dojo/domready!" -],function(Tilelayer,simplemarkersymbol, Map, on,graphic,point) { * varLayer =NewTilelayer ( $"Https://www.seanpc.com/ags/rest/services/WorldBaseMap/MapServer"Panax Notoginseng ); -MyMap =NewMap ("Ui-map-view",{ theCenter: [-111.87, 40.57] + }); A mymap.addlayer (layer); theMap Mouse Click Response Event +On (MyMap, "click",function(e) { -Alert ("Map clicked"); $ }); $ -Mymap.on ("Load",function() {//Graphics mouse click Response event -MyMap.graphics.on ("click",function(e) { theAlert ("Graphic clicked"); - e.stoppropagation ();Wuyi }); the varg=NewGraphic (); -G.setgeometry (NewPoint ([-111.87, 40.57])); Wu varSimplemarkersymbol =NewSimplemarkersymbol (); - G.setsymbol (simplemarkersymbol); About MyMap.graphics.add (g); $ }); - }); -</script> - A<body class= "Claro" > +<div id= "Ui-map-view" ></div> the</body> -How to correctly respond to mouse events for graphics in the ArcGIS JavaScript API