在使用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. 深入学习jQuery选择器系列第六篇——过滤选择器之状态选择器

    × 目录 [1]焦点状态 [2]哈希状态 [3]动画状态[4]显隐状态 前面的话 过滤选择器的内容非常多,本文介绍过滤选择器的最后一部分——状态选择器 焦点状态 :focus :focus选择器选择当 ...

  2. Android之OptionsMenu与Notification的实现

    OptionsMenu是Android提供的一种菜单方式,我们知道当智能机刚兴起时,手机上都会有一个MENU(菜单键),当我们点击时,默认我们打开Android提供的默认菜单,本篇我么就一起来学一下, ...

  3. sublime text学习

    Ctrl + /  ---------------------注释 Ctrl + 滚动 --------------字体变大/缩小 Ctrl + N-------------------新建 软件右下 ...

  4. 搞清arguments,callee,caller

    arguments是什么? arguments是函数调用时,创建的一个类似的数组但又不是数组的对象,并且它存储的是实际传递给函数的参数,并不局限于函数声明的参数列表哦. 尼玛,什么意思? 写个demo ...

  5. innerHTML与innerText的异同

    在一道面试题中看到的. 1.功能讲解: innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 innerText 设置或获取 ...

  6. Hibernate学习之——Hibernate环境搭建

    之前在写关于安卓闹钟的教程,写了一半就没后一半了,其实自己也没做好,在校外实习,校内毕业实习又有任务,只能先放放了,等毕业实习结束之后,在继续安卓闹钟开发之旅,相信这个时间不会很久的.现在毕业实习用到 ...

  7. C算法编程题（三）画表格

    前言 上一篇<C算法编程题(二)正螺旋> 写东西前还是喜欢吐槽点东西,要不然写的真还没意思,一直的想法是在博客园把自己上学和工作时候整理的东西写出来和大家分享,就像前面写的<T-Sq ...

  8. 利用免费的Spire.XLS控件制作Excel报表

    我们小组上个季度接手了一个项目其中需要实现创建excel文档的功能,寻找实现这个功能的控件的任务分配给了我,通过百度搜索我找到了一个免费的控件,它是由E-iceblue公司推出的spire.xls控件 ...

  9. CSS3中惊艳的gradient

    以前曾经记录过linear-gradient(线性渐变)和 radial-gradient(径向渐变)的语法. 可以参考<CSS3中border-radius.box-shadow与gradie ...

  10. 【LeetCode】Increasing Triplet Subsequence（334）

    1. Description Given an unsorted array return whether an increasing subsequence of length 3 exists o ...