两种对于Infowindow的操作

最新推荐文章于 2024-05-15 10:18:58 发布

转载最新推荐文章于 2024-05-15 10:18:58 发布 · 862 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/joegaohuanlin/p/5157192.html

文章标签：

#操作系统 #ui

本文深入解析了使用 ArcGIS JS API 实现地图上信息模板展示与基于地理坐标的查询任务操作。通过具体代码实例，详细介绍了如何设置地图、加载图层、应用信息模板格式化显示数据以及执行查询任务获取特定区域信息并展示结果。重点突出了 ArcGIS JS API 在地理信息系统中的实用功能与灵活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5     <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
 6       on iOS devices-->
 7     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
 8     <title>Formatter Function</title>
 9 
10   <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.14/3.14/esri/css/esri.css">
11         <script src="http://localhost/arcgis_js_api/library/3.14/3.14/init.js"></script>
12         <script src="js/jsapi_vsdoc12_v38.js"></script>
13     <style>
14       html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
15     </style>
16 
17     <script>
18         // infotemplate formatting functions need to be in the global scope to work
19         var map, compare, compare2;
20 
21         require([
22           "esri/map",
23           "esri/InfoTemplate",
24           "esri/layers/FeatureLayer",
25           "esri/renderers/SimpleRenderer",
26           "esri/symbols/SimpleFillSymbol",
27           "esri/symbols/SimpleLineSymbol",
28           "dojo/dom",
29           "dojo/number",
30           "dojo/on",
31           "dojo/parser",
32           "esri/Color",
33           "dijit/layout/BorderContainer",
34           "dijit/layout/ContentPane",
35           "dojox/layout/ExpandoPane",
36           "dojo/domReady!"
37         ],
38           function (
39             Map, InfoTemplate, FeatureLayer, SimpleRenderer, SimpleFillSymbol,
40             SimpleLineSymbol, dom, number, on, parser, Color
41         ) {
42 
43               parser.parse();
44 
45 
46               map = new esri.Map("mapDiv");
47               var imageryPrime = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer");
48               map.addLayer(imageryPrime);
49               var infoTemplate = new InfoTemplate();
50               infoTemplate.setTitle("Population in ${NAME}");
51               infoTemplate.setContent("<b>2007 :D: </b>${POP2007:compare}<br/>" +
52                                       "<b>2007 density: </b>${POP07_SQMI:compare}<br/><br/>" +
53                                       "<b>2000: </b>${POP2000:NumberFormat}<br/>" +
54                                       "<b>2000 density: </b>${POP00_SQMI:NumberFormat}");
55 
56               var counties = new FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3", {
57                   mode: FeatureLayer.MODE_SNAPSHOT,
58                   infoTemplate: infoTemplate,
59                   outFields: [
60                     "NAME", "POP2000", "POP2007", "POP00_SQMI",
61                     "POP07_SQMI"
62                   ]
63               });
64 
65               counties.setDefinitionExpression("STATE_NAME = 'Michigan'");
66 
67               //apply a renderer
68 var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
69     new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
70         new Color([255, 255, 255, 0.35]), 1),
71     new Color([109, 146, 155, 0.35]));
72 counties.setRenderer(new SimpleRenderer(symbol));
73 
74 map.addLayer(counties);
75 
76 
77 });</script>
78   </head>
79   <body class="soria">
80     <div data-dojo-type="dijit/layout/BorderContainer"
81          data-dojo-props="design:'headline', gutters:true" 
82          style="width: 100%; height: 100%; margin: 0;">
83 
84       <div id="mapDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
85     </div>
86   </body>
87 
88 </html>

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5     <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
 6       on iOS devices-->
 7     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
 8     <title>QueryTask with geometry, results as an InfoWindow</title>
 9 
10     <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.14/3.14/esri/css/esri.css">
11         <script src="http://localhost/arcgis_js_api/library/3.14/3.14/init.js"></script>
12         <script src="js/jsapi_vsdoc12_v38.js"></script>
13     <script>
14         dojo.require("esri.map");
15         dojo.require("esri.tasks.query");
16 
17         var map, queryTask, query;
18         var symbol, infoTemplate;
19 
20         function init() {
21             //create map
22             map = new esri.Map("mapDiv");
23 
24             var layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer");
25             map.addLayer(layer);
26 
27 
28             dojo.connect(map, "onClick", executeQueryTask);//地图单击事件
29 
30             //查询信息
31             queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer/3");
32             query = new esri.tasks.Query();
33             query.returnGeometry = true;
34             query.outFields = ["STATE_NAME", "STATE_FIPS", "STATE_ABBR", "HYPERLINK", "AREA"];
35 
36             infoTemplate = new esri.InfoTemplate("${STATE_NAME}", "State Fips: ${STATE_FIPS}<br />Abbreviation: ${STATE_ABBR}<br />Area: ${AREA}");
37 
38             symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.5]));
39         }
40 
41         function executeQueryTask(evt) {
42 
43             query.geometry = evt.mapPoint;//根据点击地图的坐标
44             
45 
46             queryTask.execute(query, showResults);
47         }
48 
49         function showResults(featureSet) {
50             map.graphics.clear();
51 
52             dojo.forEach(featureSet.features, function (feature) {
53                 var graphic = feature;
54                 graphic.setSymbol(symbol);
55 
56                 graphic.setInfoTemplate(infoTemplate);
57 
58                 map.graphics.add(graphic);
59 
60             });
61         }
62 
63         dojo.ready(init);
64     </script>
65   </head>
66   <body class="claro">
67     Click on a State to get more info.  When State is highlighted, click State again to get infoWindow.
68     <div id="mapDiv" style="width:600px; height:600px; border:1px solid #000;"></div>
69   </body>
70 </html>