Arcgis api for javascript學習筆記(4.6版本) - 二維MapView中的FeatureLayer顯示標註

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>

效果圖:

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章