在使用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. 数据结构与算法JavaScript (五) 串(经典KMP算法)

    KMP算法和BM算法 KMP是前缀匹配和BM后缀匹配的经典算法,看得出来前缀匹配和后缀匹配的区别就仅仅在于比较的顺序不同 前缀匹配是指:模式串和母串的比较从左到右,模式串的移动也是从 左到右 后缀匹配 ...

  2. Minor【 PHP框架】5.事件

    框架Github地址:github.com/Orlion/Minor (如果觉得还不错给个star哦(^-^)V) 框架作者: Orlion 知乎:https://www.zhihu.com/peop ...

  3. JavaScript JsTree实例

    var RightTree= function () { }; RightTree.prototype = { //初始化权限树 InitRightTree: function () { $.ajax ...

  4. 深入理解DOM事件类型系列第二篇——键盘事件

    × 目录 [1]类型 [2]顺序 [3]按键信息[4]应用 前面的话 鼠标和键盘是电脑端主要的输入设备,上篇介绍了鼠标事件,本文将详细介绍键盘事件 类型 键盘事件用来描述键盘行为,主要有keydown ...

  5. 快速搭建php环境

    WAMP:在windows系统下搭建PHP开发环境 APPSERVER: 两种可用于开发环境的,一般用WAMP LAMP构架 Linux系统 Apache服务器管理软件 Mysql数据库 php语言 ...

  6. 解决FragmentTabHost切换标题栏变更问题

    现在都流行FragmentTabHost布局.但是所有的fragment都是共享一个actionbar,但是我们又想给每个fragment定义自定义的标题栏.百度google了好久也没有找到解决方案. ...

  7. 把DATATABLE,DS中的内容用HTML的方式显示

    前几天,在搞一个数据显示的时候,因为是不固定的列的,所以需要动态创建列,这里面就运用一下,直接把数据库的Table显示在Html上,有两种方法,但是都有相应的缺点,第一个,如果内容太多,长度不好控制, ...

  8. MVC, MVP, MVVM比较以及区别(上)

    MVC, MVP和MVVM都是用来解决界面呈现和逻辑代码分离而出现的模式.以前只是对它们有部分的了解,没有深入的研究过,对于一些里面的概念和区别也是一知半解.现在一边查资料,并结合自己的理解,来谈一下 ...

  9. html标签属性（attribute）和dom元素的属性（property）

    简介 attribute和property都有属性之意,但对于attribute和property的区分其实并不难.从对象来说,attribute是html文档上标签属性, 而property则是对应 ...

  10. Cesium原理篇：6 Render模块(6: Instance实例化)

    最近研究Cesium的实例化,尽管该技术需要在WebGL2.0,也就是OpenGL ES3.0才支持.调试源码的时候眼前一亮,发现VAO和glDrawBuffers都不是WebGL1.0的标准函数,都 ...