使用web gis 加載顯示arcgis for server 發布出來的地圖，並提供查詢標記顯示屬性功能
阿新 • • 發佈：2017-12-29
cmap ear local ava exe rap inpu icm text
首先會通過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>
使用web gis 加載顯示arcgis for server 發布出來的地圖，並提供查詢標記顯示屬性功能