ArcGIS API For Javascript ：如何在地图上做出点位脉冲闪烁的效果

日常地图表达中我们通常使用的地图符号多是静态地图符号，时间久了会造成视觉审美疲劳，也没有现代感。

在这种背景下，对现有地图符号进行简单处理，即可得到色彩鲜艳，对比度强烈，活灵活现的地图表达形式。

灵感

观察 ArcGIS JS API 带来的原生符号 SimpleMarkerSymbol 在前端对符号进行渲染的结果，简化后的代码如下：

<g id="graphicsLayer1_layer" data-geometry-type="point" style="display: block;">

    <circle fill="rgb(70, 230, 255)" 

    fill-opacity="0.8" 

    stroke="none" stroke-opacity="0" 

    stroke-width="1" 

    stroke-linecap="butt" 

    stroke-linejoin="miter" 

    stroke-miterlimit="4" 

    cx="653" 

    cy="519" 

    r="6" 

    transform="matrix(1.00000000,0.00000000,0.00000000,1.00000000,0.00000000,0.00000000)" 

    fill-rule="evenodd"></circle>

    <circle fill="rgb(70, 230, 255)" 

    fill-opacity="0.8" 

    stroke="none" 

    stroke-opacity="0" 

    stroke-width="1" 

    stroke-linecap="butt" 

    stroke-linejoin="miter" 

    stroke-miterlimit="4" 

    cx="764" 

    cy="533" 

    r="6" 

    transform="matrix(1.00000000,0.00000000,0.00000000,1.00000000,0.00000000,0.00000000)" 

    fill-rule="evenodd"></circle>

</g>

这里简单解释下，前端渲染的逻辑。

首先，每个符号化的图层都会使用 <g> 标签来承载该图层中的几何要素。

其次，每个几何要素也会通过不同的标签在前端进行展示，例如上述代码中 <circle> 标签很明显是一个圆形符号，并且可以在标签中看到许多属性信息，例如：

“fill”代表符号的颜色；

“fill-opacity”代表符号的透明度；

“cx”代表屏幕 x 坐标值；

“cy”代表屏幕 y 坐标值；

这里 “cx” 与 “cy” 虽然不会去修改，但是我在测试时发现，当“cx=150”，“cy=0”时，符号的圆心位于屏幕左上角顶点。也就是说未来如果大家想要用代码强行修改一个 <circle> 标签的位置时，可能需要考虑到 x 的偏移值。大家如果发现了这个问题的原因，欢迎评论留言。

上述属性与我们做动效无关，我们能做动效的关键在于控制 <circle> 的半径大小，也就是 “r” 属性。

动效

动效使用 CSS 来写：

@keyframes Warning {

  0% {

    opacity: 1

      }

  50% {

    r: 12;

    opacity: .5

      }

  100% { 

    opacity: 1

      }

}

增加效果

下一步我们需要做的只是用 jQuery 帮我们找到所有几何要素，然后给每个几何要素标签加上动画属性：

map.on('extent-change',function(){

    setTimeout(function(){

        for(var i=0;i<$('#map').find('circle').length;i++){

            $('#map').find('circle')[i].style.animation = "Warning 1s cubic-bezier(0.26, 0.04, 1, 0.67) 0s infinite normal none running";

            $('#map').find('circle')[i].style.animationDelay = Math.random()+'s'

        }

    },1000)

这里有 3 个细节需要说明：

使用地图缩放监听事件，保证每次地图范围变动，都给每个符号加上动效。
延迟 1 秒执行的原因是，如果地图缩放就立即执行赋动效语句会无效，因为在每次缩放过程中几何对象会重新渲染，因此延迟 1 秒保证所有点已重绘完成，大家可以自行修改时间，如果有更优方案，欢迎评论留言。
为优化每个点位的动效渐隐渐现效果，给每个符号加上随机动画延迟。

弯路

在最开始，我以为可以使用样式的 scale 属性来控制圆圈符号的大小，后来测试发现完全错误，缩放会产生偏移和运动，大家可以动手在 Chrome 里尝试下最初的脑洞会带来什么样的效果。

拓展联想

既然圆形符号可以用代码进行修改，那其他类型的符号同理也可以通过属性控制来修改样式。

接下来我会再更新一篇对地图轮廓多边形的控制实操。

大家如有更好的想法，欢迎在评论留言。