日常地圖表達中我們通常使用的地圖符號多是靜態地圖符號，時間久了會造成視覺審美疲勞，也沒有現代感。

在這種背景下，對現有地圖符號進行簡單處理，即可得到色彩鮮艷，對比度強烈，活靈活現的地圖表達形式。

靈感

觀察 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. 使用地圖縮放監聽事件，保證每次地圖範圍變動，都給每個符號加上動效。

2. 延遲 1 秒執行的原因是，如果地圖縮放就立即執行賦動效語句會無效，因為在每次縮放過程中幾何對象會重新渲染，因此延遲 1 秒保證所有點已重繪完成，大家可以自行修改時間，如果有更優方案，歡迎評論留言。

3. 為優化每個點位的動效漸隱漸現效果，給每個符號加上隨機動畫延遲。

彎路

在最開始，我以為可以使用樣式的 scale 屬性來控制圓圈符號的大小，後來測試發現完全錯誤，縮放會產生偏移和運動，大家可以動手在 Chrome 裏嘗試下最初的腦洞會帶來什麽樣的效果。

拓展聯想

既然圓形符號可以用代碼進行修改，那其他類型的符號同理也可以通過屬性控制來修改樣式。

接下來我會再更新一篇對地圖輪廓多邊形的控制實操。

大家如有更好的想法，歡迎在評論留言。

ArcGIS JS API ：如何在地圖上做出點位脈沖閃爍的效果