arcgis for js官方demo之FeatureTable - related records

最新推荐文章于 2020-10-26 11:23:48 发布

blog12138

最新推荐文章于 2020-10-26 11:23:48 发布

阅读量344

点赞数

分类专栏： arcgis for js 3.x学习笔记文章标签： arcgisjs

原文链接：https://developers.arcgis.com/javascript/3/jssamples/featuretable_relatedrecords.html

版权

arcgis for js 3.x学习笔记专栏收录该内容

30 篇文章

订阅专栏

本文详细解析了如何在arcgisapiforjs中利用FeatureTable和Popup创建动态弹窗，包括创建Popup对象、设置PopupTemplate以及与FeatureLayer的联动。通过实例代码展示了如何定制弹窗样式和内容，以及如何处理用户交互，如表格选中事件和数据展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

提示：代码为arcgis api for js官方实例代码，涉及到的内容有FeatureLayer、FeatureTable、Popup

前言

在学习了arcgis api for js3.x的一些入门博客教程之后，感觉对arcgis api for js的内容还不够熟练以及深入，但是又找不到好的提高方式，此时硬着头皮选择不易读懂的官方demo来学习，目的是学习而已，里面的东西并不是理解透彻了，所以希望在阅读的读者能有自己的理解并加以讨论，也是我学习和提高方式。

一、官方示例代码

里面有一些我自己写的注释

代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>FeatureTable - related records</title>
    <!--<link rel="stylesheet" type="text/css"-->
          <!--href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/claro/claro.css"/>-->
    <!--<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css"/>-->
    <!--<script type="text/javascript" src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"></script>-->
    <!--用我自己本地的css和js有点问题-->
    <link rel="stylesheet" href="https://js.arcgis.com/3.34/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.34/esri/css/esri.css">
    <script src="https://js.arcgis.com/3.34/"></script>

    <style>
        html, body, #map{
            width:100%;
            height:100%;
            margin:0;
            padding:0;
        }
    </style>

    <script>
        require([
            "esri/layers/FeatureLayer",
            "esri/dijit/FeatureTable",
            "esri/tasks/query",
            "esri/geometry/Extent",
            "esri/symbols/SimpleFillSymbol",
            "esri/symbols/SimpleLineSymbol",
            "esri/Color",
            "esri/map",
            "esri/dijit/Popup",
            "esri/dijit/PopupTemplate",
            "dojo/dom-construct",
            "dojo/dom",
            "dojo/number",
            "dojo/parser",
            "dojo/ready",
            "dojo/on",
            "dojo/_base/lang",
            "dijit/registry",
            "dijit/form/Button",
            "dijit/layout/ContentPane",
            "dijit/layout/BorderContainer",
            "dijit/form/TextBox"
        ], function (
            FeatureLayer, FeatureTable, Query, Extent, SimpleFillSymbol, SimpleLineSymbol, Color, Map,
            Popup, PopupTemplate, domConstruct, dom, dojoNum, parser, ready, on,lang,
            registry, Button, ContentPane, BorderContainer, TextBox
        ) {

            parser.parse();
            //相当于页面一加载就要触发的事件
            ready(function(){

                var popupOptions = {
                    marginLeft: "200",//弹窗最大化的外边距
                    marginTop: "20"
                };

                // create a popup to replace the map's info window
                //创建了一个popup（弹窗）来代替了infowindow
                var popup = new Popup(popupOptions, domConstruct.create("div"));

                var map = new Map("map",{
                    basemap: "topo",
                    infoWindow: popup,//弹窗
                    extent: new Extent({//初始化范围（注意这里的xy不是经纬度，center里面的才是经纬度）
                        xmax: -13178092.546668783, xmin: -13180901.607458338,
                        ymax: 4038066.907666304,  ymin: 4036294.524072895,
                        "spatialReference":{"wkid":102100,"latestWkid":3857}//空间参考是webmercartro
                    })
                });
                //地图加载后调用loadTable函数
                map.on("load", loadTable);

                function loadTable(){

                    // create a popup template for Bevery Hills
                    // Trees by block layer
                    //创建一个弹窗模板PopupTemplate
                    /*
                    PopupTemplate类扩展了esri/InfoTemplate，并为定义布局提供了支持，它可以包含以下组件：
                    标题、说明、媒体（图表和图像）、显示附件、这些组件的布局与中的弹窗体验相同
                     */
                    var popupTemplate = new PopupTemplate({
                        "title": "Beverly Hills Trees By Block",//弹窗的标题
                        "fieldInfos": [{//字段信息
                            "fieldName": "Point_Count",
                            "label": "Count of Points",
                            "format": {
                                "places": 0,
                                "digitSeparator": true
                            }
                        }, {
                            "fieldName": "relationships/0/Point_Count_COMMON",
                            "label": "Sum of species tree count",
                            "format": {
                                "places": 0,
                                "digitSeparator": true
                            },
                            "statisticType": "sum"
                        }, {
                            "fieldName": "relationships/0/COMMON",
                            "label": "Common Name"
                        }, {
                            "fieldName": "BLOCKCE10",
                            "label": "Block"
                        }],
                        //描述，绑定了数据
                        "description": "There are {Point_Count} trees within census block {BLOCKCE10}",
                        "showAttachments": false,//不显示附件
                        "mediaInfos": [{//媒体信息
                            "title": "Count By Type",
                            "type": "columnchart",//柱状图
                            "caption": "",
                            "value": {
                                "theme": "GreySkies",
                                "fields": ["relationships/0/Point_Count_COMMON"],
                                "normalizeField": null,
                                "tooltipField": "relationships/0/COMMON"//工具提示字段
                            }
                        }]
                    });

                    var myFeatureLayer = new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/Beverly%20Hills%20Trees%20By%20Block/FeatureServer/0",{
                        mode: FeatureLayer.MODE_ONDEMAND,
                        infoTemplate: popupTemplate,
                        outFields: ["*"],
                        //set the definition expression
                        //只要这些TRACTCE10 = '700902'的数据
                        definitionExpression: "TRACTCE10 = '700902'",
                        visible: true,
                        id: "fLayer"
                    });

                    // apply the selection symbol for the layer
                    //设置选中要素的高亮样式
                    var selectionSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
                        new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
                            new Color([255, 0, 0, 0.35]), 1),
                        new Color([255, 0, 0, 0.35]));
                    myFeatureLayer.setSelectionSymbol(selectionSymbol);


                    // listen to featurelayer click event to handle selection
                    // from layer to the table.
                    // when user clicks on a feature on the map, the corresponding
                    // record will be selected in the table.
                    //监听事件，当图层中要素被选中，对应的表中也要是选择状态
                    myFeatureLayer.on("click", function(evt) {
                        var idProperty = myFeatureLayer.objectIdField;
                        var feature, featureId, query;

                        if (evt.graphic && evt.graphic.attributes && evt.graphic.attributes[idProperty]) {
                            feature = evt.graphic;//获取到当前点击的要素
                            featureId = feature.attributes[idProperty];//获取到当前点击的要素的Join_ID（主键）的值
                            console.log(idProperty,featureId);

                            query = new Query();
                            query.returnGeometry = false;
                            query.objectIds = [featureId];//要查询的图层/表中要素的对象id，用逗号分隔的列表
                            // query.where = idProperty + "=" + "'" + featureId + "'";
                            query.where = "1=1";
                            console.log(query.where, query.objectIds);

                            myFeatureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW);
                        }
                    });

                    map.addLayer(myFeatureLayer);

                    // create new FeatureTable and set its properties
                    //创建一个featureTable并设置属性
                    var myFeatureTable = new FeatureTable({
                        featureLayer : myFeatureLayer,
                        map : map,
                        syncSelection: true,
                        showRelatedRecords: true,
                        showAttachments: true,
                        fieldInfos: [
                            {
                                name: 'AnalysisArea',
                                alias: 'Area SQ/KM',
                                editable: false,
                                format: {
                                    template: "${value}",
                                    places: 3 // 数据保留3为小数
                                    // digitSeparator: true // default is true
                                }
                            }
                        ],
                        // outfields
                        outFields: ["TRACTCE10", "BLOCKCE10", "GEOID", "NAME", "MTFCC", "ALAND", "AnalysisArea", "Point_Count", "Join_ID"],
                    }, 'myTableNode');

                    myFeatureTable.startup();

                    // listen to row-click event
                    // to hide visible popups
                    //事件监听
                    myFeatureTable.on("row-select", function(evt){
                        if (map.infoWindow.isShowing){
                            map.infoWindow.hide();
                        }
                    });

                    // listen to show-attachments event
                    //监听显示附件事件
                    myFeatureTable.on("show-attachments", function(evt){
                        console.log("show-attachments event - ", evt);
                    });

                    // listen to show-related-records event
                    //监听显示记录事件
                    myFeatureTable.on("show-related-records", function(evt){
                        console.log("show-related-records event - ", evt);
                    });
                }
            });
        });
    </script>
</head>

<body class="claro esri">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center', splitter:true" style="height:60%">
        <div id="map"></div>
    </div>
    <div id="bot" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom', splitter:true" style="height:40%">
        <div id="myTableNode"></div>
    </div>
</div>
</body>
</html>

二、分析

Popup的使用步骤：

创建一个Popup对象，两个参数
options：可以设置弹窗的一些样式如最大化后的外边距marginLeft
srcNodeRef：HTML元素的引用或者id


var popup = new Popup(popupOptions, domConstruct.create("div"));

在map中使用：

var map = new Map("map",
{
   basemap: "topo",
	infoWindow: popup,//弹窗
   extent: new Extent({//初始化范围（注意这里的xy不是经纬度，center里面的才是经纬度）
   xmax: -13178092.546668783, xmin: -13180901.607458338,
   ymax: 4038066.907666304,  ymin: 4036294.524072895,
   "spatialReference":{"wkid":102100,"latestWkid":3857}//空间参考是webmercartro
                   })
               });