首页 > 编程语言 > 详细

Arcgis api for javascript学习笔记(4.6版本) - 二维MapView中的FeatureLayer显示标注

时间:2018-06-07 22:22:30      阅读:531      评论:0      收藏:0      [点我收藏+]

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显示标注

原文:https://www.cnblogs.com/tracine0513/p/9152984.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!