在使用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>

如何正确响应ArcGIS JavaScript API中图形的鼠标事件的更多相关文章

  1. ArcGIS JavaScript API 4.x中热度图渲染的使用注意事项

    要使用ArcGIS JavaScript API 4.x的热度图渲染器来渲染要素图层,需要注意几点前提条件: 1.需要使用ArcGIS Server 10.6.1或更高版本发布GIS服务. 2.只支持 ...

  2. Arcgis Javascript API 开发笔记

    JS API3.4的要求 à(1)  IE9或以上版本 否则dijit1.8.3不匹配 1.如何发布ArcgisJavascript API应用 0.准备工作: (1).有web应用: (2).有js ...

  3. ArcGIS客户端API中加载大量数据的几种解决办法

    ArcGIS客户端API中加载大量数据的几种解决办法 2011-03-25 18:17 REST风格的一切事物方兴未艾,ArcGIS Server的客户端API(Javascript/Flex/Sil ...

  4. ArcGIS JavaScript API本地部署离线开发环境[转]

    原文地址:http://www.cnblogs.com/brawei/archive/2012/12/28/2837660.html 1 获取ArcGIS JavaScript API API的下载地 ...

  5. Ionic集成ArcGIS JavaScript API.md

    1. Ionic同原生ArcGIS JavaScript API结合 1.1. 安装esri-loader 在工程目录下命令行安装: npm install angular2-esri-loader ...

  6. ArcGIS Javascript API 加载高德在线地图扩展

    利用ArcGIS JavaScript API加载高德在线地图的扩展 /** * Created by WanderGIS on 2015/7/15. */ define(["dojo/_b ...

  7. Ionic2集成ArcGIS JavaScript API.md

    1. Ionic同原生ArcGIS JavaScript API结合 1.1. 安装esri-loader 在工程目录下命令行安装: npm install angular2-esri-loader ...

  8. Arcgis javascript api 动态图层自图层可见性设置

    Arcgis javascript api 动态图层自图层可见性设置 子图层管理 rest服务 sublayers sublayer ArcGISDynamicMapServiceLayer 本文主要 ...

  9. ArcGIS JavaScript API with jQuery: Error: multipleDefine

    I would like to use ArcGIS JavaScript API 4.3 with jQuery, but I am getting following errors.  I sea ...

随机推荐

  1. OpenCASCADE Curve Length Calculation

    OpenCASCADE Curve Length Calculation eryar@163.com Abstract. The natural parametric equations of a c ...

  2. mpi4py实践

    版权声明:本文为博主原创文章,未经博主允许不得转载. 1.概述 MPI(Message Passing Interface),消息传递接口,是一个标准化和轻便的能够运行在各种各样并行计算机上的消息传递 ...

  3. Mac下有道笔记本问题反馈

    1).Mac笔记上的编辑状态框非常的小.操作起来不是非常的方便.可以把显示稍微放大一些. 2). 新建笔记本的时候,这里用户可能没有注意到这里可以输入,此时这里的高亮的颜色可以适当的修改成别的颜色. ...

  4. 配置putty自动登陆服务器

    putty是一款知名的SSH工具,可以用来登陆linux服务器,提供了终端.SSH是secure Shell的缩写.我之前也有一篇文章介绍这个话题:http://www.cnblogs.com/che ...

  5. 用javascript做一个视频播放器

    以前我们在网页上播放视频,都是要麻烦flash来实现.看着那一大段的<object>真心觉得累.随着html5的不断普及,现在是时候使用html5提供的video元素来做点正经事了,但是要 ...

  6. MVC, MVP, MVVM比较以及区别(下)

    上一篇得到大家的关注,非常感谢.一些朋友评论中,希望快点出下一篇.由于自己对于这些模式的理解也是有限,所以这一篇来得迟了一些.对于这些模式的比较,是结合自己的理解,一些地方不一定准确,但是只有亮出自己 ...

  7. android 在使用ViewAnimationUtils.createCircularReveal()无法兼容低版本的情况下，另行实现圆形scale动画

    ViewAnimationUtils.createCircularReveal()的简介: ViewAnimationUtils.createCircularReveal()是安卓5.0才引入的,快速 ...

  8. 探秘Tomcat——连接器和容器的优雅启动

    前言: 上篇<探秘Tomcat——启动篇>粗线条的介绍了在tomcat在启动过程中如何初始化Bootstrap类,加载并执行server,从而启动整个tomcat服务,一直到我们看到控制台 ...

  9. 轻松搞定Win8 IIS支持SVC 从而实现IIS寄宿WCF服务

    写在前面 为了尝试在IIS中寄宿WCF服务,需要配置IIS支持SVC命令,于是便有了在DOS命令中用到ServiceModelReg.exe注册svc命令. 坑爹的是注册成功后就开始报错.无奈之下两次 ...

  10. MVC的基类

    设计一个验证用户身份是否登陆的基类BaseController /// <summary> /// 所有需要进行登录控制的控制器基类 /// </summary> public ...