選中FeatureLayer元素並高亮顯示

時間 2019-11-25

標籤選中 featurelayer 元素顯示简体版

原文原文鏈接

點擊FeatureLayer要素會彈出popup彈出框以顯示要素的相關內容。這個例子實現點擊要素，選中並高亮顯示。例子使用ArcGIS API for JavaScript 4.8。css

1、代碼框架html

 1 <html>
 2 <head>
 3     <meta charset="utf-8">
 4     <!-- 移動端優化 -->
 5     <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
 6     <title>在地圖中顯示FeatureLayer</title>
 7     
 8     <!-- JS API 引入 -->
 9     <link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
10     <script src="https://js.arcgis.com/4.8/"></script>
11     
12     <!-- 設置樣式 -->
13     <style>
14         html,body,#viewDiv{
15             margin:0;
16             padding:0;
17             height:100%;
18             width:100%;
19         }
20     </style>
21     
22     <!-- JS API 調用代碼 -->
23     <script>
24 
25     </script>
26 </head>
27 
28 <body>
29     <div id="viewDiv"></div>
30 </body>
31 </html>

2、添加FeatureLayer要素圖層並進行render、popupTemplate的設置chrome

  1     <!-- JS API 調用代碼 -->
  2     <script>
  3         require([
  4             "esri/Map",
  5             "esri/views/MapView",
  6             "esri/layers/TileLayer",
  7             "esri/layers/FeatureLayer",
  8             
  9             "esri/widgets/Legend",
 10             
 11             "dojo/domReady!"],function(Map,MapView,TileLayer,FeatureLayer,Legend){
 12                 var mapTileLayer=new TileLayer({
 13                     url:"https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer"
 14                 });
 15                 var map=new Map({
 16                     layers:[mapTileLayer]
 17                 });
 18                 
 19                 var view=new MapView({
 20                     container:"viewDiv",
 21                     map:map,
 22                     center:[118.79647, 32.05838],  //南京城區
 23                     zoom:10
 24                 });
 25                 
 26                 //建立FeatureLayer
 27                 var featureLayer=new FeatureLayer({
 28                     url:"https://localhost:6443/arcgis/rest/services/test/南京景點測試/FeatureServer",
 29                     renderer:{  //符號渲染器
 30                         type:"unique-value",
 31                         field:"類別",
 32                         uniqueValueInfos:[{
 33                             value:"歷史古蹟",
 34                             symbol:{
 35                                 type:"simple-marker",
 36                                 color:[115,0,0,0.8],  //棕色
 37                                 size:8
 38                             },
 39                             label:"歷史古蹟"
 40                         },{
 41                             value:"銘記緬懷",
 42                             symbol:{
 43                                 type:"simple-marker",
 44                                 color:[36,36,36,0.8],  //黑色（一點灰）
 45                                 size:8
 46                             },
 47                             label:"銘記緬懷"
 48                         },{
 49                             value:"科教知識",
 50                             symbol:{
 51                                 type:"simple-marker",
 52                                 color:[230,0,0,0.8],  //紅色
 53                                 size:8
 54                             },
 55                             label:"科教知識"
 56                         },{
 57                             value:"生活玩樂",
 58                             symbol:{
 59                                 type:"simple-marker",
 60                                 color:[230,0,169,0.8],  //紫色
 61                                 size:8
 62                             },
 63                             label:"生活玩樂"
 64                         },{
 65                             value:"縱情山水",
 66                             symbol:{
 67                                 type:"simple-marker",
 68                                 color:[0,169,230,0.8],  //藍色
 69                                 size:8
 70                             },
 71                             label:"縱情山水"
 72                         },{
 73                             value:"公園百態",
 74                             symbol:{
 75                                 type:"simple-marker",
 76                                 color:[76,230,0,0.8],  //綠色
 77                                 size:8
 78                             },
 79                             label:"公園百態"
 80                         }]
 81                     },  //符號渲染器結束
 82                     popupTemplate:{  //設置popup彈出框
 83                         title:"<strong>{景點名}</strong>",  //HTML元素在title和下面的content中都是可用的
 84                         content:[{    //以文本方式顯示字段值，type能夠是：text、fields、media、attachment
 85                             type:"text",  //花括號中寫上FeatureLayer的字段名字便可顯示出當前要素的這個字段的值
 86                             text:"地址：{地址}<br>"+"開放時間：{開放時}<br>"+"票價：{票價}<br>"+
 87                                 "<hr>"+
 88                                 "所屬風景區：{所屬風}<br>"+"星級：{星級}<br>"+"類別：{類別}<br>"+"網址：{網址}"
 89                         }]
 90                     }  //popupTemplate結束
 91                 });
 92                 map.layers.add(featureLayer);
 93                 
 94                 //添加圖例控件
 95                 var legend=new     Legend({  //景點圖例
 96                     view:view,
 97                     layerInfos:[{
 98                         layer:featureLayer,
 99                         title:"南京景點",
100                         style:"classic"  //有兩個值，classic和card，可是card沒反應？
101                     }]
102                 });
103                 view.ui.add(legend,"bottom-left");
104         });
105     </script>

　　建立了FeatureLayer要素圖層並添加到了Map對象上，進行了render、popupTemplate相關內容的設置，添加了圖例，關於上面代碼的詳細內容，請查看：在地圖中調用顯示FeatureLayer並進行render、popupTemplate、添加圖例等相關內容的設置。如今點擊地圖上的FeatureLayer元素是沒有高亮顯示的。數組

3、編寫高亮顯示的代碼（寫在<script></script>中添加圖例代碼的後面）瀏覽器

　　爲視圖view添加一個click事件，當點擊view時將觸發後面的匿名函數，函數有一個click事件返回的參數event，event中包含點擊的相關信息。執行函數，彈出提示框，輸出「click!」。框架

1                 //選中要素，高亮顯示
2                 view.on("click",function(event){
3                     alert("click!");
4                 });

　　下面alert輸出這個參數event。
dom

1                 //選中要素，高亮顯示
2                 view.on("click",function(event){
3                     alert(event);
4                 });

　　彈出的是object Object，看不出什麼內容。ide

　　改爲console.log()控制檯打印輸出。函數

1                 //選中要素，高亮顯示
2                 view.on("click",function(event){
3                     console.log(event);
4                 });

　　分別用鼠標左鍵、中鍵、右鍵點擊view，在Console控制檯中輸出相關內容。其中，左鍵、中鍵、右鍵輸出的button屬性值分別是0、一、2。（這裏包括下文中，用Chrome和FireFox控制檯顯示的內容不徹底同樣，Chrome顯示的內容更有用些。例子使用Chrome。）測試

　　展開一個記錄，查看詳細內容。能夠看到點擊處的經度、緯度以及在屏幕上的座標等信息。

　　在view.on()中，爲view添加hitTest測試，傳入event，返回response並調用匿名函數，執行console.log(response)，在控制檯打印輸出response對象。

1                 //選中要素，高亮顯示
2                 view.on("click",function(event){
3                     view.hitTest(event).then(function(response){
4                         console.log(response);
5                     });
6                 });

　　在view上點擊，分別點擊空白處和FeatureLayer要素。上面一條記錄中，results的數組length長度是0，表示沒有點擊到FeatureLayer要素；而下方記錄中，results數組長度爲1，且能夠查看results[0]的詳細內容，表示點擊到了FeatureLayer要素。

　　咱們展開查看results[0]的詳細內容。能夠看到，其中包含了不少有用的信息，包括results[0].graphic.attributes中FeatureLayer相關字段值、results[0].graphic.geometry中經緯度的信息等。要留意這些信息並注意層級關係，編寫代碼時會用到。（這些內容在FireFox瀏覽器中是看不到的..）

　　在view.hitTest裏進行是否點擊到FeatureLayer要素的判斷。判斷條件有兩個：①response.results.length是否大於0（便是否等於1） ②response.results[0].graphic是否存在。根據剛纔Console控制檯輸出的信息，能夠看到這樣判斷的依據。

 1                 //選中要素，高亮顯示
 2                 view.on("click",function(event){
 3                     view.hitTest(event).then(function(response){
 4                         if(response.results.length>0&&response.results[0].graphic){
 5                             console.log("點擊到了FeatureLayer的要素！");
 6                         }
 7                         else{
 8                             console.log("沒有點擊FeatureLayer要素..");
 9                         }
10                     });
11                 });

　　在view中咱們分別點擊空白處和FeatureLayer要素。

　　在判斷完確實點擊到FeatureLayer要素後，將這個要素的id值傳給selectFeature()函數（稍後定義），在這個函數內進行高亮顯示的編寫。傳入的要素id值是一長串，能夠和下面這張圖對照着看，注意看層級關係。也能夠按照註釋掉的部分寫，那樣可能更清楚點。若是在控制檯中查看到FeatureLayer並不包含objectid這個字段（我不知道這種狀況會不會發生），能夠這樣寫，起到的效果是同樣的：selectFeature(response.results[0].graphic.attributes[featureLayer.objectIdField])。其中，featureLayer是FeatureLayer要素圖層的名字，是本身起的，而objectIdField是FeatureLayer的一個屬性名字。

 1                 //選中要素，高亮顯示
 2                 view.on("click",function(event){
 3                     view.hitTest(event).then(function(response){
 4                         if(response.results.length>0&&response.results[0].graphic){
 5                             //var feature=response.results[0].graphic;
 6                             //selectFeature(feature.attributes["objectid"]);
 7                             selectFeature(response.results[0].graphic.attributes["objectid"]);
 8                         }
 9                     });
10                 });

　　下面進行selectFeature()的編寫。

　　selectionSymbol就是高亮顯示的符號。

 1                 function selectFeature(objectid){
 2                     var selectionSymbol={
 3                         type:"simple-marker",
 4                         color:"#FFFF00",
 5                         size:10,
 6                         outline:{
 7                             color:"#E69800",
 8                             width:2
 9                         }
10                     };
11                 };

　　爲FeatureLayer建立一個查詢（query），並將查詢條件（query.where）設置成FeatureLayer中要素的id值等於傳入的那個id值（即在view中點擊到的那個要素的id值）。

 1                 function selectFeature(objectid){
 2                     var selectionSymbol={
 3                         type:"simple-marker",
 4                         color:"#FFFF00",
 5                         size:10,
 6                         outline:{
 7                             color:"#E69800",
 8                             width:2
 9                         }
10                     };
11                     
12                     var query=featureLayer.createQuery();
13                     query.where=featureLayer.objectIdField+"="+objectid;
14                 };

　　執行FeatureLayer的queryFeatures查詢，傳入剛纔定義的query對象（裏面包含查詢條件）。查詢成功後執行匿名函數（帶有參數results），打印輸出results對象的相關信息。

 1                 function selectFeature(objectid){
 2                     var selectionSymbol={
 3                         type:"simple-marker",
 4                         color:"#FFFF00",
 5                         size:10,
 6                         outline:{
 7                             color:"#E69800",
 8                             width:2
 9                         }
10                     };
11                     
12                     var query=featureLayer.createQuery();
13                     query.where=featureLayer.objectIdField+"="+objectid;
14                     
15                     featureLayer.queryFeatures(query).then(function(results){
16                         console.log(results);
17                     });
18                 };

　　在chrome中能夠看到，results對象也包含了一些內容，但和以前view.hitTest那邊的response對象的內容是不一樣的。不過也包含attributes、geometry等一些重要的內容。

　　在queryFeatures().then()的匿名函數中，進行是否點擊到要素的判斷後，將results.features[0]賦給lightFeature變量，lightFeature對象如今就包含點擊到的那個要素的相關信息（attributes、geometry、經緯度信息等），將以前定義的符號賦值給lightFeature的symbol屬性。最後view.graphics.add(lightFeature)將lightFeature以graphics的形式按照lightFeature中包含的經緯度信息繪製到view上。

 1                 function selectFeature(objectid){
 2                     var selectionSymbol={
 3                         type:"simple-marker",
 4                         color:"#FFFF00",
 5                         size:10,
 6                         outline:{
 7                             color:"#E69800",
 8                             width:2
 9                         }
10                     };
11                     
12                     var query=featureLayer.createQuery();
13                     query.where=featureLayer.objectIdField+"="+objectid;
14                     
15                     featureLayer.queryFeatures(query).then(function(results){
16                         if(results.features.length>0){
17                             var lightFeature=results.features[0];
18                             lightFeature.symbol=selectionSymbol;
19  view.graphics.add(lightFeature);
20                         }
21                     });
22                 };

　　查看高亮顯示的結果：

　　能夠看到，點擊到的要素已經被高亮顯示出來，可是若是點擊多個要素，以前高亮顯示的要素並無去除，下面在view.on()中的開頭添加一行代碼以解決這個問題。當每次點擊到view，無論有沒有點擊到FeatureLayer的要素，都會執行去除view上全部graphics的操做。

 1                 //選中要素，高亮顯示
 2                 view.on("click",function(event){
 3                     view.graphics.removeAll();  //去除view中全部graphics
 4                     
 5                     view.hitTest(event).then(function(response){
 6                         if(response.results.length>0&&response.results[0].graphic){
 7                             //var feature=response.results[0].graphic;
 8                             //selectFeature(feature.attributes["objectid"]);
 9                             selectFeature(response.results[0].graphic.attributes["objectid"]);
10                         }
11                     });
12                 });

　　最終高亮顯示的代碼：

 1                 //選中要素，高亮顯示
 2                 view.on("click",function(event){
 3                     view.graphics.removeAll();  //去除view中全部graphics
 4                     
 5                     view.hitTest(event).then(function(response){
 6                         if(response.results.length>0&&response.results[0].graphic){
 7                             //var feature=response.results[0].graphic;
 8                             //selectFeature(feature.attributes["objectid"]);
 9                             selectFeature(response.results[0].graphic.attributes["objectid"]);
10                         }
11                     });
12                 });
13                 function selectFeature(objectid){
14                     var selectionSymbol={
15                         type:"simple-marker",
16                         color:"#FFFF00",
17                         size:10,
18                         outline:{
19                             color:"#E69800",
20                             width:2
21                         }
22                     };
23                     
24                     var query=featureLayer.createQuery();
25                     query.where=featureLayer.objectIdField+"="+objectid;
26                     
27                     featureLayer.queryFeatures(query).then(function(results){
28                         if(results.features.length>0){
29                             var lightFeature=results.features[0];
30                             lightFeature.symbol=selectionSymbol;
31                             view.graphics.add(lightFeature);
32                         }
33                     });
34                 };

　　所有代碼：

  1 <html>
  2 <head>
  3     <meta charset="utf-8">
  4     <!-- 移動端優化 -->
  5     <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  6     <title>在地圖中顯示FeatureLayer</title>
  7     
  8     <!-- JS API 引入 -->
  9     <link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
 10     <script src="https://js.arcgis.com/4.8/"></script>
 11     
 12     <!-- 設置樣式 -->
 13     <style>
 14         html,body,#viewDiv{
 15             margin:0;
 16             padding:0;
 17             height:100%;
 18             width:100%;
 19         }
 20     </style>
 21     
 22     <!-- JS API 調用代碼 -->
 23     <script>
 24         require([
 25             "esri/Map",
 26             "esri/views/MapView",
 27             "esri/layers/TileLayer",
 28             "esri/layers/FeatureLayer",
 29             
 30             "esri/widgets/Legend",
 31             
 32             "dojo/domReady!"],function(Map,MapView,TileLayer,FeatureLayer,Legend){
 33                 var mapTileLayer=new TileLayer({
 34                     url:"https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer"
 35                 });
 36                 var map=new Map({
 37                     layers:[mapTileLayer]
 38                 });
 39                 
 40                 var view=new MapView({
 41                     container:"viewDiv",
 42                     map:map,
 43                     center:[118.79647, 32.05838],  //南京城區
 44                     zoom:10
 45                 });
 46                 
 47                 //建立FeatureLayer
 48                 var featureLayer=new FeatureLayer({
 49                     url:"https://localhost:6443/arcgis/rest/services/test/南京景點測試/FeatureServer",
 50                     renderer:{  //符號渲染器
 51                         type:"unique-value",
 52                         field:"類別",
 53                         uniqueValueInfos:[{
 54                             value:"歷史古蹟",
 55                             symbol:{
 56                                 type:"simple-marker",
 57                                 color:[115,0,0,0.8],  //棕色
 58                                 size:8
 59                             },
 60                             label:"歷史古蹟"
 61                         },{
 62                             value:"銘記緬懷",
 63                             symbol:{
 64                                 type:"simple-marker",
 65                                 color:[36,36,36,0.8],  //黑色（一點灰）
 66                                 size:8
 67                             },
 68                             label:"銘記緬懷"
 69                         },{
 70                             value:"科教知識",
 71                             symbol:{
 72                                 type:"simple-marker",
 73                                 color:[230,0,0,0.8],  //紅色
 74                                 size:8
 75                             },
 76                             label:"科教知識"
 77                         },{
 78                             value:"生活玩樂",
 79                             symbol:{
 80                                 type:"simple-marker",
 81                                 color:[230,0,169,0.8],  //紫色
 82                                 size:8
 83                             },
 84                             label:"生活玩樂"
 85                         },{
 86                             value:"縱情山水",
 87                             symbol:{
 88                                 type:"simple-marker",
 89                                 color:[0,169,230,0.8],  //藍色
 90                                 size:8
 91                             },
 92                             label:"縱情山水"
 93                         },{
 94                             value:"公園百態",
 95                             symbol:{
 96                                 type:"simple-marker",
 97                                 color:[76,230,0,0.8],  //綠色
 98                                 size:8
 99                             },
100                             label:"公園百態"
101                         }]
102                     },  //符號渲染器結束
103                     popupTemplate:{  //設置popup彈出框
104                         title:"<strong>{景點名}</strong>",  //HTML元素在title和下面的content中都是可用的
105                         content:[{    //以文本方式顯示字段值，type能夠是：text、fields、media、attachment
106                             type:"text",  //花括號中寫上FeatureLayer的字段名字便可顯示出當前要素的這個字段的值
107                             text:"地址：{地址}<br>"+"開放時間：{開放時}<br>"+"票價：{票價}<br>"+
108                                 "<hr>"+
109                                 "所屬風景區：{所屬風}<br>"+"星級：{星級}<br>"+"類別：{類別}<br>"+"網址：{網址}"
110                         }]
111                     }  //popupTemplate結束
112                 });
113                 map.layers.add(featureLayer);
114                 
115                 //添加圖例控件
116                 var legend=new     Legend({  //景點圖例
117                     view:view,
118                     layerInfos:[{
119                         layer:featureLayer,
120                         title:"南京景點",
121                         style:"classic"  //有兩個值，classic和card，可是card沒反應？
122                     }]
123                 });
124                 view.ui.add(legend,"bottom-left");
125                 
126                 //選中要素，高亮顯示
127                 view.on("click",function(event){
128                     view.graphics.removeAll();  //去除view中全部graphics
129                     
130                     view.hitTest(event).then(function(response){
131                         if(response.results.length>0&&response.results[0].graphic){
132                             //var feature=response.results[0].graphic;
133                             //selectFeature(feature.attributes["objectid"]);
134                             selectFeature(response.results[0].graphic.attributes["objectid"]);
135                         }
136                     });
137                 });
138                 function selectFeature(objectid){
139                     var selectionSymbol={
140                         type:"simple-marker",
141                         color:"#FFFF00",
142                         size:10,
143                         outline:{
144                             color:"#E69800",
145                             width:2
146                         }
147                     };
148                     
149                     var query=featureLayer.createQuery();
150                     query.where=featureLayer.objectIdField+"="+objectid;
151                     
152                     featureLayer.queryFeatures(query).then(function(results){
153                         if(results.features.length>0){
154                             var lightFeature=results.features[0];
155                             lightFeature.symbol=selectionSymbol;
156                             view.graphics.add(lightFeature);
157                         }
158                     });
159                 };
160         });
161     </script>
162 </head>
163 
164 <body>
165     <div id="viewDiv"></div>
166 </body>
167 </html>

所有代碼

例子使用的連接分享：https://pan.baidu.com/s/1fnyu0OjWx9FUvUs1BGvz3g

由於這個例子中ArcGIS Server發佈的是本地服務，因此在別的電腦上沒法訪問例子中FeatureLayer的url，能夠本身發佈一個服務再進行嘗試。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。