在使用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. PHP性能测试工具xhprof安装与使用

    原文链接:http://www.orlion.ga/711/ 一.安装 wget https://pecl.php.net/get/xhprof-0.9.4.tgz tar zxf xhprof-0. ...

  2. javascript中函数的3个高级技巧

    × 目录 [1]作用域安全 [2]惰性载入 [3]函数绑定 前面的话 函数对任何一门语言来说都是一个核心的概念,在javascript中更是如此.前面曾以深入理解函数系列的形式介绍了函数的相关内容,本 ...

  3. ASP.NET MVC之JsonResult（六）

    前言 这一节我们利用上节所讲Unobtrusive Ajax并利用MVC中的JsonResult来返回Json数据. JsonResult 上节我们利用分部视图返回数据并进行填充,当我们发出请求需要获 ...

  4. 使用wireshark抓包分析浏览器无法建立WebSocket连接的问题(server为Alchemy WebSockets组件)

    工作时使用了Websocket技术,在使用的过程中发现,浏览器(Chrome)升级后可能会导致Websocket不可用,更换浏览器后可以正常使用. 近日偶尔一次在本地调试,发现使用相同版本的Chrom ...

  5. ES6 - Note6：Set与Map

    Set和Map是ES6中新增的数据结构,Set是集合,无序唯一,Map类似于对象,也是"key-value"形式,但是key不局限于字符串. 1.Set的用法 Set是构造函数,可 ...

  6. MySQL学习笔记二：权限管理

    1. 创建和删除用户,mysql中的用户是由用户名和主机名来确定的 create user "user_name@host_name" identified by passwd; ...

  7. gulp自动化构建工具

    gulp    自动化构建工具,实时监控.代码合并.压缩... http://www.gulpjs.com.cn/     中文网 http://gulpjs.com/plugins/     英文网 ...

  8. C# 将多个office文件转换及合并为一个PDF文件

    PDF文件介绍 PDF(Portable Document Format )文件源于20世纪90年代初期,如今早已成为了一种最流行的的文件格式之一.因为PDF文件有很多优点: 支持跨平台和跨设备共享 ...

  9. gradle学习笔记

    一直想着花时间学习下gradle,今天有空.入门一下.参考:极客学院gradle使用指南,官方文档:gradle-2.12/docs/userguide/installation.html,以及百度阅 ...

  10. 7.5 数据注解特性--MaxLength&&MinLength

    MaxLength attribute can be applied to a string or array type property of a domain class. EF Code Fir ...