ArcGIS API for JavaScript 多（单）个标注（Graphic）居中闪烁

傷城~ 2021-09-17 18:12 343阅读 0赞

### 前言 ###

在现实需求当中，当视屏地图界面加载多个graphic，需要对数据表中的数据进行定位时，无法区分graphic，这是我们需要通过图标的闪烁。

### 思路 ###

1.  创建对象数据，用来存储当前视图的所有的graphic，并通过id作为唯一标识
2.  通过点击事件获取id标识，并与存储id的比较，通过setInterval获取graphic控制显隐

### 实现效果 ###

![在这里插入图片描述][20190114191455312.gif]

### 实现代码 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.25/3.25/esri/css/esri.css" />
        <script type="text/javascript" src="http://localhost:8080/arcgis_js_api/library/3.25/3.25/init.js"></script>
        <style>
            *{
                padding: 0px;
                margin:0px;
            }
            body,html{
                height:100%;
            }
            #map{
                width: 100%;
                height: 100%;
            }
            .operatePanel{
                position: absolute;
                top:0px;
                right: 0px;
                width: 130px;
                height: 100px;
                border: 1px solid #0d1721;
                background: #ffffff;
            }
            .button{
                width: 100%;
                height: 30px;
                font-size: 14px;
                border: 1px solid red;
                line-height: 30px;
                text-align: center;
                cursor: pointer;
            }
        </style>
    
    </head>
    <body>
        <div id="map"></div>
        <div class="operatePanel">
            <div id="signle" class="button">单个graphics闪烁</div>
            <div id="multi" class="button">多个graphics闪烁</div>
        </div>
        <script>
            //数据准备(模拟)
            let singleGraphicsArr = [{
                id:1001,x: -13634788.39813648, y: 4548334.964686886,
            }];
            let multiGraphicsArr = [{
                id:1002,name:"闪烁测试",x: -13627316.678621612, y: 4541493.850655373,
            }];
            let singleGraphicObjArr = [];
            let multiGraphicObjArr = [];
    
            require([
                "dojo/dom",
                "dojo/on",
                "esri/map",
                "esri/layers/GraphicsLayer",
                "esri/geometry/Point",
                "esri/graphic",
                "esri/symbols/PictureMarkerSymbol",
                "esri/SpatialReference",
                "esri/symbols/TextSymbol",
                "esri/Color",
                "esri/symbols/Font",
            ],function(dom,on,Map,GraphicsLayer,Point,Graphic,PictureMarkerSymbol,SpatialReference,TextSymbol,Color, Font) {
                let map = new Map("map", {
                    basemap: "topo",
                    center: [-122.45, 37.75],
                    zoom: 13
                });
                let singleGraphicsLayer = new GraphicsLayer();
                let multiGraphicsLayer = new GraphicsLayer();
    
                map.addLayers([singleGraphicsLayer,multiGraphicsLayer]);
                
                let locSymbol = new PictureMarkerSymbol('./images/mark.png',32,47);
    
                singleGraphicsArr.map((item)=>{
                    let point = new Point(item.x,item.y,new SpatialReference(3857));
                    let pointGraphic = new Graphic(point,locSymbol);
                    singleGraphicsLayer.add(pointGraphic);
                    let tempGraphic = {
                        id:item.id,
                        graphics:[pointGraphic]
                    };
                    singleGraphicObjArr.push(tempGraphic)
                });
    
                multiGraphicsArr.map((item)=>{
                    let point = new Point(item.x,item.y,new SpatialReference(3857));
                    let backgroundSymbol = new PictureMarkerSymbol('./images/loc.png',100,25).setOffset(0, -35);
                    let textSym = new TextSymbol(item.name).setColor(new Color([255,255,255]))
                        .setAlign(TextSymbol.ALIGN_MIDDLE).setFont(new Font("14px").setWeight(Font.WEIGHT_BOLD))
                        .setOffset(0, -40);
                    let pointGraphic = new Graphic(point,locSymbol);
                    let backgroundGraphic = new Graphic(point,backgroundSymbol);
                    let textSymGraphic = new Graphic(point,textSym);
    
                    singleGraphicsLayer.add(pointGraphic);
                    singleGraphicsLayer.add(backgroundGraphic);
                    singleGraphicsLayer.add(textSymGraphic);
                    let tempGraphic = {
                        id:item.id,
                        graphics:[pointGraphic,backgroundGraphic,textSymGraphic]
                    };
                    multiGraphicObjArr.push(tempGraphic)
                });
    
    
                //定位时闪烁功能
                function locFlash(initGraphicsArr,value,x,y){
                    let initPoint = new Point(x,y,new SpatialReference(3857));
                    map.centerAndZoom(initPoint,14);
                    for(let item of initGraphicsArr) {
                        if (value == item.id) {
                            for (let graphics of item.graphics) {
                                let temp = 0;
                                graphics.hide();// 先隐藏
                                let handler = setInterval(function() {
                                    if (temp === 4) {
                                        if (handler) {
                                            if (!graphics.visible)
                                                graphics.show();
                                            clearInterval(handler);
                                            handler = null;
                                        }
                                        return;
                                    }
                                    if (graphics.visible)
                                        graphics.hide();
                                    else
                                        graphics.show();
                                    temp++;
                                }, 700);
                            }
                        }
                    }
                }
                on(dom.byId("signle"),"click",()=>{
                    locFlash(singleGraphicObjArr,"1001",-13634788.39813648,4548334.964686886);
                });
                on(dom.byId("multi"),"click",()=>{
                    locFlash(multiGraphicObjArr,"1002",-13627316.678621612, 4541493.850655373);
                });
            });
        </script>
    </body>
    </html>

### 原型方法 ###

//定位时闪烁功能
      locFlash(value,x,y):void{
        let initPoint = new Point(x,y,map.spatialReference);
        map.centerAndZoom(initPoint,11);
        for(let item of initGraphicsArr){
          if(value.id == item.id){
            for(let graphics of item.graphics){
              let temp = 0;
              graphics.hide();// 先隐藏
              let handler = setInterval(function() {
                if (temp === 4) {
                  if (handler) {
                    if (!graphics.visible)
                        graphics.show();
                    clearInterval(handler);
                    handler = null;
                  }
                  return;
                }
                if (graphics.visible)
                  graphics.hide();
                else
                  graphics.show();
                temp++;
              }, 700);
            }
          }
        }
    
      }

[20190114191455312.gif]: /images/20210726/b881bd61e26745df9a92da2445f4261e.png