标签：opacity 符号 标签 缩放 地图 JS ArcGIS 动效 API
日常地图表达中我们通常使用的地图符号多是静态地图符号，时间久了会造成视觉审美疲劳，也没有现代感。
在这种背景下，对现有地图符号进行简单处理，即可得到色彩鲜艳，对比度强烈，活灵活现的地图表达形式。
灵感
观察 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 里尝试下最初的脑洞会带来什么样的效果。
拓展联想
既然圆形符号可以用代码进行修改，那其他类型的符号同理也可以通过属性控制来修改样式。
接下来我会再更新一篇对地图轮廓多边形的控制实操。
大家如有更好的想法，欢迎在评论留言。
标签：opacity,符号,标签,缩放,地图,JS,ArcGIS,动效,API 来源： https://www.cnblogs.com/dawud/p/10366648.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。