Arcgis api for javascript學習筆記(4.6版本) - 二維MapView中的FeatureLayer顯示標註
阿新 • • 發佈：2018-06-08
meta AS dojo each 自己 round updating 完成後 graph
4.6版本api的FeatureLayer中有提供 labelsVisible 和 labelingInfo 兩個屬性，設置這兩個屬性可以實現顯示將屬性中某個字段作為標註。但是這兩個屬性只針對三維SceneView有效。如下圖截圖所示。
那麽在二維中要實現FeatureLayer添加標註的功能，只能自己在FeatureLayer要素中的某個位置，添加一個TextSymbol的Point要素。結合上一篇講到的 “獲取FeatureLayer中的graphics集合”，我們可以通過如下的方法進行實現
源碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <title>FeatureLayer - 4.7</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css"> <script src="https://js.arcgis.com/4.7/"></script> </head> <body> <div id="viewDiv"></div> <script type="text/javascript"> require(["esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer", "esri/layers/GraphicsLayer", "dojo/domReady!" ], function (Map, MapView, FeatureLayer, GraphicsLayer) { let map = new Map({ basemap: "satellite" }); let view = new MapView({ container: "viewDiv", map: map, center: [-73.950, 40.702], zoom: 12, padding: { right: 300 } }); let featureLayer1 = new FeatureLayer({ url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/NYCDemographics1/FeatureServer/0", outFields: ["OBJECTID_1"] }); let nameGraphicsLayer = new GraphicsLayer(); map.add(featureLayer1); map.add(nameGraphicsLayer); view.when(function () { //地圖剛初始化時獲取graphics集合，需要監控featureLayer的updating狀態完成後才能獲取到 view.whenLayerView(featureLayer1).then(function (lyrView) { lyrView.watch("updating", function(){ lyrView.queryFeatures().then(function (results) { //console.log(results); results.forEach(function (g) { nameGraphicsLayer.add({ geometry: { type: "point", latitude: g.geometry.centroid.latitude, longitude: g.geometry.centroid.longitude }, symbol: { type: "text", color: "white", text: g.attributes["OBJECTID_1"], font: { size: 14, family: "sans-serif", weight: "bolder" } } }); }); }); }); }); }); } ); </script> </body> </html>
效果圖：
Arcgis api for javascript學習筆記(4.6版本) - 二維MapView中的FeatureLayer顯示標註