在使用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. SQL Server 无法生成 FRunCM 线程。请查看 SQL Server 错误日志和 Windows 事件日志

    1.IP地址配置不正确: 打开 Microsoft SQL Server 2005配置工具下的SQL Server Configuration Manager,选择MSSQLSERVER协议, 然后双 ...

  2. OpenCASCADE Documentation System

    OpenCASCADE Documentation System eryar@163.com Abstract. Doxygen is the de facto standard tool for g ...

  3. JavaScript之糟粕

    0.导言 在上篇<JavaScript之毒瘤>中,列举了一些在JavaScript中难以避免的问题特性.本篇将会展示JavaScript中有问题的特性,但我们很容易就能便面它们.通过这些简 ...

  4. MySQL分区表的管理~2

    一.维护分区 对于表的维护,我们一般有如下几种方式: CHECK TABLE, OPTIMIZE TABLE, ANALYZE TABLE和REPAIR TABLE. 而这几种方式,对于分区同样适用. ...

  5. geotrellis使用（十）缓冲区分析以及多种类型要素栅格化

    目录 前言 缓冲区分析 多种类型要素栅格化 总结 参考链接 一.前言        上两篇文章介绍了如何使用Geotrellis进行矢量数据栅格化以及栅格渲染,本文主要介绍栅格化过程中常用到的缓冲区分 ...

  6. Windows Server 2012 为什么没有“磁盘清理”选项了？

    用习惯了客户端版的Windows,对于磁盘清理想必大家都不会陌生,他具有安全.快捷.准确.集中化的删除系统中的临时文件.管理系统还原卷影副本.添加删除程序的快捷入口等便捷功能,而在Server版的Wi ...

  7. MathType应用：批量改变公式格式

    首先要安装好mathtype,一般装好后mathtype会嵌入到word里去(黄色和粉红的部分是今天的主角) 然后可以用带insert开头的选项(黄色部分)添加公式,但是添加公式后可能出现一下情况,即 ...

  8. block，inline和inline-block概念和区别

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  9. LINQ to SQL语句(15)之String

    LINQ to SQL支持以下String方法.但是不同的是默认情况下System.String方法区分大小写.而SQL则不区分大小写. 1.字符串串联(String Concatenation) v ...

  10. WPF阴影效果(DropShadowEffect)

    <TextBlock Text="阴影效果" FontSize="32"> <TextBlock.Effect> <DropSha ...