zoukankan      html  css  js  c++  java
  • Arcgis api for javascript学习笔记(4.6版本)

    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>

    效果图:

  • 相关阅读:
    财务报表分析(张新民教授)-第六章 企业报表战略分析
    zend studio 10破解/汉化
    使用jQuery动态加载js脚本文件的方法
    手机端的META你有多了解?
    js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME)
    理解CSS Clip属性及用法
    js touch触屏原理分析
    解决xp共享的批处理文件
    jQuery Tools:Web开发必备的 jQuery UI 库
    使用CSS3线性渐变实现图片闪光划过效果
  • 原文地址:https://www.cnblogs.com/tracine0513/p/9152984.html
Copyright © 2011-2022 走看看