首先会通过arcgis server manager 开启由arcgis desktop 关联发布的mxd地图文件，具体过程arcgis server 的基础教程上都有
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Test</title>
6 <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css" />
7 <style type="text/css">
8 html,body,#map{
9 margin: 0;
10 padding: 0;
11 width: 100%;
12 height: 100%;
13 }
14 </style>
15 <script src="http://js.arcgis.com/3.9/"></script>
16 <script type="text/javascript">
17 var infoTemplate;
18 require([
19 "dojo/parser",
20 "dojo/query",//查询
21 "dojo/on",//关联
22 "esri/tasks/FindTask",//查询任务
23 "esri/tasks/FindParameters",//查询参数
24 "esri/symbols/SimpleLineSymbol",//线符号
25 "esri/symbols/SimpleFillSymbol",//填充符号
26 "esri/Color",//颜色
27 "esri/graphic",//图形
28 "esri/InfoTemplate",//面板信息模板
29 "esri/geometry/Point",//点
30 "esri/SpatialReference",//控件参考系统
31 "esri/map",
32 "esri/layers/ArcGISDynamicMapServiceLayer",
33 "dojo/domReady"
34 ],function(parser,
35 query,
36 on,
37 FindTask,
38 FindParameters,
39 SimpleLineSymbol,
40 SimpleFillSymbol,
41 Color,
42 Graphic,
43 InfoTemplate,
44 Point,
45 SpatialReference,
46 Map,
47 ArcGISDynamicMapServiceLayer){
48
49 parser.parse();
50 // var map=new Map("map",{
51 // center:[114.30,30.60],
52 // zoom:9,
53 // spatialReference:{"wkid":4326}
54 // });
55 var map=new Map("map");
56 var layer=new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/%E6%B5%8B%E8%AF%95/%E8%A7%86%E9%A2%91%E6%95%99%E5%AD%A66/MapServer");
57 map.addLayer(layer);
58
59
60 query("#btn").on("click",function(){
61 //获得搜索名称
62 var name=query(".nm")[0].value;
63 //实例化查询参数
64 var findParams = new FindParameters();
65 //返回图形实例geometry
66 findParams.returnGeometry = true;
67 //查询第四图层
68 findParams.layerIds = [4];
69 //匹配属性名称--NAME---可以添加多个属性字段
70 findParams.searchFields = ["NAME"];
71 // findParams.searchFields = ["id"];
72 //搜索名称--搜索名称
73 findParams.searchText = name;
74 //实例化查询对象
75 var findTask = new FindTask("http://localhost:6080/arcgis/rest/services/%E6%B5%8B%E8%AF%95/%E8%A7%86%E9%A2%91%E6%95%99%E5%AD%A66/MapServer");
76 //进行查询
77 findTask.execute(findParams,showFindResult)
78 });
79
80 //对查询参数的作图
81 function showFindResult(queryResult){
82 map.graphics.clear();
83 if (queryResult.length == 0) {
84 alert("没有该元素");
85 return;
86 }
87 for (var i = 0; i < queryResult.length; i++) {
88 //获得该图形的形状
89 var feature= queryResult[i].feature;
90 var geometry = feature.geometry;
91
92 //设置属性信息
93 var attr={
94 "layer":queryResult[i].layerName,
95 "name":queryResult[i].value
96 };
97 //显示模板
98 infoTemplate=new InfoTemplate("标题：${layer}","地址：${name}");
99
100 //定义高亮图形的符号
101 //1.定义面的边界线符号
102 var outline= new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,new Color([255, 0, 0]), 1);
103 //2.定义面符号
104 var PolygonSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, outline,new Color([0, 255, 0, 1]));
105 //创建客户端图形 ---geometry图形 polygonSymbol符号 attr属性 infoTemplate模板
106 var graphic = new Graphic(geometry,PolygonSymbol,attr,infoTemplate);
107 //使用坐标的情况下需要坐标系
108 //将客户端图形添加到map中
109 map.graphics.add(graphic);
110 }
111 }
112
113
114 });
115 </script>
116 </head>
117 <body>
118 name:<input class="nm" type="text" />
119 <input id="btn" type="button" value="查询" />
120 <div id="map"></div>
121 </body>
122 </html>
原文地址：https://www.cnblogs.com/dshuo/p/8142940.html
时间： 2024-08-02 03:59:56