基于arcgis js 4 动态在客户端渲染featurelayer数据，实现同一个图层的数据的增加与删除

本文链接：https://blog.csdn.net/xlp789/article/details/134842787
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        html,
        body {
            padding: 0;
            margin: 0;
            height: 100%;
        }
    </style>
    <link rel="stylesheet"
          href="https://js.arcgis.com/4.26/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.26/"></script>
    <script src="../../../Htmllibs/jquery/jquery-1.12.2.min.js"></script>
    <script>
        let layer = null;
        let features = [];
        let labelClass = null;
        let map = null;
        require(["esri/Map", "esri/views/MapView", "esri/Graphic", "esri/layers/GraphicsLayer",
            "esri/widgets/Editor",
            "esri/layers/TileLayer", "esri/layers/WMTSLayer", "esri/layers/WebTileLayer",
            "esri/geometry/Extent", "esri/geometry/Point",
            "esri/widgets/Sketch/SketchViewModel",
            "esri/layers/FeatureLayer", "esri/geometry/SpatialReference",
            "esri/symbols/SimpleFillSymbol", "esri/geometry/Polygon"
        ], (
            Map,
            MapView, Graphic, GraphicsLayer, Editor,
            TileLayer, WMTSLayer, WebTileLayer, Extent, Point, SketchViewModel,
            FeatureLayer, SpatialReference, SimpleFillSymbol, Polygon
        ) => {



            map = new Map();

            var mapview = new MapView({
                container: "viewDiv",
                map: map,
            });

            labelClass = {
                symbol: {
                    type: "text", 
                    color: "black",
                   
                    font: {
                        family: "Arial Unicode MS Regular",
                        size: 12,
                        weight: "bold"
                    }
                },
                minScale: 10000,
                maxScale: 1,
                labelExpressionInfo: {
                    expression: "$feature.ObjectID"
                }
            };

            layer = new FeatureLayer({
                title: "layer",
                fields: [
                    {
                        name: "ObjectID",
                        alias: "ObjectID",
                        type: "oid"
                    },
                    {
                        name: "symFillcolor",
                        alias: "symFillcolor",
                        type: "string"

                    }],
                outFields: ["objectId"],
                source: [],
                objectIdField: "ObjectID",
                renderer: {
                    type: "simple",
                    symbol: {
                        type: "simple-fill",
                        color: "#0000FF",
                        outline: {
                            width: 2,
                            color: "black"
                        }
                    },
                    visualVariables: [
                        {
                            type: "color",
                            field: "ObjectID",
                            stops: [
                                { value: 300, color: "#2b83ba" },
                                { value: 600, color: "#abdda4" },
                                { value: 900, color: "#ffffbf" },
                                { value: 1200, color: "#fdae61" },
                                { value: 1500, color: "#d7191c" }
                            ]
                        }
                    ]

                },
                labelingInfo: [labelClass]

            });
            map.add(layer)

            //第一次加载全部数据
            $.ajax({
                url: "http://localhost:8099/test/area",
                type: "get",
                dataType: "json",
                async: false,
                success: function (data) {


                    for (var i = 0; i < data.length; i++) {
                        let gra = JSON.parse(data[i].spatialObject);
                        let symFillcolor = data[i].symFillcolor;
                        let graphic = new Graphic({
                            "geometry": Polygon.fromJSON(gra.geometry),
                            "symbol": SimpleFillSymbol.fromJSON(gra.symbol),
                            "attributes": { "ObjectID": i + 1 }
                        });
                        features.push(graphic)
                    }
                   layer.source = features
                }
            });



        });

        //重置要素，删除第一次全量加的，添加三个要素即可。
        function resetFeatures() {
            layer.queryFeatures().then((results) => {
                const deleteEdits = {
                    deleteFeatures: results.features
                };
                applyEditsToLayer(deleteEdits);
                const addEdits = {
                    addFeatures: [features[0], features[1], features[2],features[3],features[4],features[2]]
                };
                applyEditsToLayer(addEdits);
            });

        }

        function applyEditsToLayer(edits) {
            layer
                .applyEdits(edits)
                .then((results) => {
                    console.log(results)
                    layer.refresh()
                    console.log(layer)
                    if (results.deleteFeatureResults.length > 0) {
                        console.log(
                            results.deleteFeatureResults.length,
                            "features have been removed"
                        );
                    }
                    if (results.addFeatureResults.length > 0) {
                        console.log(results.addFeatureResults)
                        let objectIds = [];
                        results.addFeatureResults.forEach((item) => {
                            objectIds.push(item.objectId);
                        });
                        layer
                            .queryFeatures({
                                objectIds: objectIds
                            })
                            .then((results) => {
                                console.log(
                                    results.features.length,
                                    "features have been added."
                                );
                            })
                    }
                })
                .catch((error) => {
                    console.error();
                });
        }


    </script>
</head>

<body>
    <div style="position:absolute;top:10px;right:10px;display:flex;z-index:10000">
        <div><input class="inputClass" /></div>
        <button id="query" onclick="resetFeatures()">查询</button>
    </div>

    <div id="viewDiv" style="float: left; width: 100%; height: 100%"></div>

</body>
</html>