如何正确响应ArcGIS JavaScript API中图形的鼠标事件
2016-09-27 14:24
447 查看
在使用ArcGIS JavaScript API编写程序的时候,程序员往往需要完成这样一个功能:点击地图上的图形,自动进行专题GIS数据查询,当在地图非图形区域上点击时,自动进行底图兴趣点查询。
由于专题GIS图形是叠加在底图上的,所以我们在处理地图的鼠标点击事件时,就需要根据实际点击的位置和内容来对不同的数据进行查询。
ArcGIS JavaScript API为编程人员分别提供了针对地图对象和图形的两个鼠标点击事件。
下面是示例代码:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" /> <title>Test Map</title> <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/claro/claro.css" /> <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" /> <style> html, body, #ui-map-view { margin: 0; padding: 0; width: 100%; height: 100%; } </style> <script src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"></script> <script> var myMap; require([ "esri/layers/ArcGISTiledMapServiceLayer", "esri/symbols/SimpleMarkerSymbol", "esri/map", "dojo/on", "esri/graphic", "esri/geometry/Point", "dojo/domReady!" ], function ( TileLayer,SimpleMarkerSymbol, Map, on,Graphic,Point){ var layer = new TileLayer( "https://www.seanpc.com/ags/rest/services/WorldBaseMap/MapServer" ); myMap = new Map("ui-map-view",{ center: [-111.87, 40.57] }); myMap.addLayer(layer); //地图鼠标点击响应事件 on(myMap,"click",function(e){ alert("map clicked"); }); myMap.on("load", function() {//图形鼠标点击响应事件 myMap.graphics.on("click",function(e){ alert("graphic clicked"); e.stopPropagation(); }); var g=new Graphic(); g.setGeometry(new Point([-111.87, 40.57])); var simpleMarkerSymbol = new SimpleMarkerSymbol(); g.setSymbol(simpleMarkerSymbol); myMap.graphics.add(g); }); }); </script> </head> <body class="claro"> <div id="ui-map-view"></div> </body> </html>
相关文章推荐
- vc中如何响应键盘和鼠标事件
- swing程序中如何响应鼠标回车事件?
- ArcGIS.Server.9.3和ArcGIS API for JavaScript保存自定义图形(十)
- 学习JavaScript鼠标响应事件
- 如何在JavaScript捕获鼠标事件
- vc中如何响应键盘和鼠标事件
- 如何在arcgis javascript api viewer使用配置文件
- ios 动画中如何正确响应button的各种事件
- ArcGIS For JavaScript API 添加一个 topographic map with graphics(地形图与图形)————(四)
- ArcGIS API for javascript开发笔记(六)——REST详解及如何使用REST API调用GP服务
- wxPython做GUI:如何在Grid中响应鼠标移动事件
- 如何使drawrect:画出的图形响应事件 Quartz 2d 事件 touch
- ArcGIS.Server.9.3和ArcGIS API for JavaScript保存自定义图形
- IE和Chrome执行javascript对鼠标双击事件的不同响应
- javaScript---图片渐显效果和文字大小变化之鼠标响应事件
- vc中如何响应键盘和鼠标事件
- 如何使drawrect:画出的图形响应事件 Quartz 2d 事件 touch
- 如何使drawrect:画出的图形响应事件 Quartz 2d 事件 touch
- ArcGIS JavaScript API异常之onExtentChange事件覆盖onClick事件
- arcgis javascript api 事件的监听及移除