arcgis for js 闪烁

Posted 2021-05-20 凡人之学

$(document).ready(function () {
    function checkKey(evt) {
        var keyID = (evt.charCode) ? evt.charCode : ((evt.which) ? evt.which : evt.keyCode);
        alert(keyID);
    }
    require([
        "dojo/parser",
        "esri/map",
        "esri/geometry/Extent",
        "esri/SpatialReference",
        "esri/dijit/Scalebar",
        "esri/dijit/OverviewMap",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/tasks/QueryTask",
        "esri/tasks/query",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/CartographicLineSymbol",
        "esri/symbols/SimpleFillSymbol",
        "esri/layers/GraphicsLayer",
        "esri/graphic",
        "esri/geometry/Geometry",
        "esri/InfoTemplate",
        "dojo/_base/Color",
        "dojo/_base/lang",
        "dojox/gfx/fx",
        "dijit/layout/LayoutContainer",
        "dijit/layout/ContentPane",
        "dojo/dom",
        "dojo/domReady!"],

    function (parser, Map, Extent, SpatialReference, Scalebar, OverviewMap, Dynamic, QueryTask, Query, SimpleMarkerSymbol, CartographicLineSymbol, SimpleFillSymbol, GraphicsLayer, Graphic, Geometry, InfoTemplate, Color, lang, fx, LayoutContainer, ContentPane, dom) {
        map = new Map("map", {
            //basemap: "national-geographic",
            center: [-72.923611, 41.31],
            zoom: 11,
            logo: false
        });

        function showResultsFlash(featureSet) {
            // alert("flash");
            // remove all graphics on the maps graphics layer
            map.graphics.clear();

            // assign featureSet array to a single variable.
            var resultFeatures = featureSet.features;

            // Loop through each feature returned
            for (var i = 0, il = resultFeatures.length; i < il; i++) {
                // Get the current feature from the featureSet.
                // Feature is a graphic
                var graphicFlash = resultFeatures[i];

                // allow different symbols
                markerSymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND, 28,
                new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
                new dojo.Color([255, 255, 255]), 2),
                new dojo.Color([255, 0, 0, 0.85]));
                lineSymbol = new esri.symbol.CartographicLineSymbol(esri.symbol.CartographicLineSymbol.STYLE_SOLID,
                new dojo.Color([0, 255, 255]), 10, esri.symbol.CartographicLineSymbol.CAP_ROUND,
                esri.symbol.CartographicLineSymbol.JOIN_MITER, 5);
                fillSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,
                new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
                new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.85]));

                // figure out which symbol to use                                                                                      
                if (graphicFlash.geometry.type === "point" || graphicFlash.geometry.type === "multipoint") {
                    symbol = markerSymbol;
                } else if (graphicFlash.geometry.type === "line" || graphicFlash.geometry.type === "polyline") {
                    symbol = lineSymbol;
                } else {
                    symbol = fillSymbol;
                }

                var flashGraphicLayer = new GraphicsLayer();
                map.addLayer(flashGraphicLayer);

                //map.reorderLayer(graphicFlashLayer, 0);

                //graphicFlash.setSymbol(symbol);
                var g = new Graphic(graphicFlash, symbol)

                //Add graphic to the map graphics layer.                                                     
                map.flashGraphicLayer.add(g);

                alert("not getting here");
                // using partial: http://dojotoolkit.org/reference-guide/1.9/dojo/_base/lang.html#dojo-base-lang-partial
                setTimeout(lang.partial(function (animateMe) {
                    var shape = animateMe.getDojoShape();
                    fx.animateStroke({
                        shape: shape,
                        duration: 1000,
                        color: {
                            start: "red",
                            end: shape.strokeStyle.color
                        },
                        width: {
                            start: 20,
                            end: shape.strokeStyle.width
                        }
                    }).play();
                }, g), 500);

            }
        }
    }

　　

  function gridSelect(e) {
        var graphicFlash;
        var gridId = e.currentTarget.id;
        var selectedGrid = dijit.byId(gridId);
        var row = selectedGrid.row(e);

        graphicHighlight = findGraphicByAttribute(row.data);

        if (graphicHighlight !== null) {
            switch (graphicHighlight.geometry.type) {
                case "point": case "multipoint":
                    graphicFlash = new esri.Graphic(graphicHighlight.geometry, symbolFlashPoint)
                    break;
                case "polyline":
                    graphicFlash = new esri.Graphic(graphicHighlight.geometry, symbolFlashPolyline);
                    break;
                case "polygon": case "extent":
                    graphicFlash = new esri.Graphic(graphicHighlight.geometry, symbolFlashPolygon);
                    break;
            }
            map.graphics.add(graphicFlash);
        }

        var shape = graphicFlash.getDojoShape();
        var animStroke = fx.animateStroke({
            shape: shape,
            duration: 500,
            color: { end: new dojo.Color([0, 0, 0, 0]) }
        });
        var animFill = fx.animateFill({
            shape: shape,
            duration: 500,
            color: { end: new dojo.Color([0, 0, 0, 0]) }
        });
        var anim = dojo.fx.combine([animStroke, animFill]).play();
        var animConnect = dojo.connect(anim, "onEnd", function () {
            map.graphics.remove(graphicFlash);
        });
    }