如何正确响应ArcGIS JavaScript API中图形的鼠标事件
2个回答
展开全部
在使用ArcGIS JavaScript API编写程序的时候，程序员往往需要完成这样一个功能：点击地图上的图形，自动进行专题GIS数据查询，当在地图非图形区域上点击时，自动进行底图兴趣点查询。
由于专题GIS图形是叠加在底图上的，所以我们在处理地图的鼠标点击事件时，就需要根据实际点击的位置和内容来对不同的数据进行查询。
ArcGIS JavaScript API为编程人员分别提供了针对地图对象和图形的两个鼠标点击事件。
下面是示例代码：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
6 <title>Test Map</title>
7 <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/claro/claro.css" />
8 <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" />
9 <style>
10 html, body, #ui-map-view {
11 margin: 0;
12 padding: 0;
13 width: 100%;
14 height: 100%;
15 }
16 </style>
17 <script src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"></script>
18 <script>
19 var myMap;
20 require([
21 "esri/layers/ArcGISTiledMapServiceLayer",
22 "esri/symbols/SimpleMarkerSymbol",
23 "esri/map",
24 "dojo/on",
25 "esri/graphic",
26 "esri/geometry/Point",
27 "dojo/domReady!"
28 ], function ( TileLayer,SimpleMarkerSymbol, Map, on,Graphic,Point){
35 var layer = new TileLayer(
36 "https://www.seanpc.com/ags/rest/services/WorldBaseMap/MapServer"
37 );
38 myMap = new Map("ui-map-view",{
39 center: [-111.87, 40.57]
40 });
41 myMap.addLayer(layer);
42 //地图鼠标点击响应事件
43 on(myMap,"click",function(e){
44 alert("map clicked");
45 });
46
47 myMap.on("load", function() {//图形鼠标点击响应事件
48 myMap.graphics.on("click",function(e){
49 alert("graphic clicked");
50 e.stopPropagation();
51 });
52 var g=new Graphic();
53 g.setGeometry(new Point([-111.87, 40.57]));
54 var simpleMarkerSymbol = new SimpleMarkerSymbol();
55 g.setSymbol(simpleMarkerSymbol);
56 myMap.graphics.add(g);
57 });
58 });
59 </script>
60 </head>
61 <body class="claro">
62 <div id="ui-map-view"></div>
63 </body>
64 </html>
由于专题GIS图形是叠加在底图上的，所以我们在处理地图的鼠标点击事件时，就需要根据实际点击的位置和内容来对不同的数据进行查询。
ArcGIS JavaScript API为编程人员分别提供了针对地图对象和图形的两个鼠标点击事件。
下面是示例代码：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
6 <title>Test Map</title>
7 <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/claro/claro.css" />
8 <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" />
9 <style>
10 html, body, #ui-map-view {
11 margin: 0;
12 padding: 0;
13 width: 100%;
14 height: 100%;
15 }
16 </style>
17 <script src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"></script>
18 <script>
19 var myMap;
20 require([
21 "esri/layers/ArcGISTiledMapServiceLayer",
22 "esri/symbols/SimpleMarkerSymbol",
23 "esri/map",
24 "dojo/on",
25 "esri/graphic",
26 "esri/geometry/Point",
27 "dojo/domReady!"
28 ], function ( TileLayer,SimpleMarkerSymbol, Map, on,Graphic,Point){
35 var layer = new TileLayer(
36 "https://www.seanpc.com/ags/rest/services/WorldBaseMap/MapServer"
37 );
38 myMap = new Map("ui-map-view",{
39 center: [-111.87, 40.57]
40 });
41 myMap.addLayer(layer);
42 //地图鼠标点击响应事件
43 on(myMap,"click",function(e){
44 alert("map clicked");
45 });
46
47 myMap.on("load", function() {//图形鼠标点击响应事件
48 myMap.graphics.on("click",function(e){
49 alert("graphic clicked");
50 e.stopPropagation();
51 });
52 var g=new Graphic();
53 g.setGeometry(new Point([-111.87, 40.57]));
54 var simpleMarkerSymbol = new SimpleMarkerSymbol();
55 g.setSymbol(simpleMarkerSymbol);
56 myMap.graphics.add(g);
57 });
58 });
59 </script>
60 </head>
61 <body class="claro">
62 <div id="ui-map-view"></div>
63 </body>
64 </html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
