首页 > 代码库 > 如何正确响应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中图形的鼠标事件
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。