日常地图表达中我们通常使用的地图符号多是静态地图符号,时间久了会造成视觉审美疲劳,也没有现代感。
在这种背景下,对现有地图符号进行简单处理,即可得到色彩鲜艳,对比度强烈,活灵活现的地图表达形式。
灵感
观察 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 里尝试下最初的脑洞会带来什么样的效果。
拓展联想
既然圆形符号可以用代码进行修改,那其他类型的符号同理也可以通过属性控制来修改样式。
接下来我会再更新一篇对地图轮廓多边形的控制实操。
大家如有更好的想法,欢迎在评论留言。