操作方法

如何:使用 ArcGIS API for JavaScript 对 web 地图中的 PictureMarkerSymbol 要素应用效果

Last Published: April 25, 2020

摘要

使用 PictureMarkerSymbol 类,图片文件可用于替代 ArcGIS API for JavaScript 中的点或面要素。 有关详细信息,请参阅 ArcGIS API for JavaScript:类:PictureMarkerSymbol

在某些情况下,可以对要素应用效果以强调要选择的所需要素,例如:脉冲效果。 脉冲效果通过以指定的时间帧方式闪烁要素来强调它们。 这反过来有助于防止用户单击错误的要素。

过程

下列代码片段演示了如何使用 ArcGIS API for JavaScript 对 web 地图中的 PictureMarkerSymbol 要素应用效果。 要对要素应用效果,在创建所选图层时必须为其赋予一个 'id',以便引用 CSS 文件中的样式。 下面的示例演示了如何向图层添加一个 id。
...
var gl = new GraphicsLayer ({id: "blink"});
...
然后,根据 部分中的所需效果或动画在 CSS 文件中设置样式。 下面的代码片段演示了向要素图层添加脉冲效果的示例。

      html, body, #map {
        height: 100%; width: 100%; margin: 0; padding: 0; 
      }
      @-webkit-keyframes
       pulse
      {
        0%
        {
          opacity: 1.0;

        }
        45%
        {
          opacity: .20;

        }
        100%
        {
          opacity: 1.0;

        }
      }
      #blink_layer { 
        -webkit-animation-duration: 3s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-name: pulse;
        -moz-animation-duration: 3s;
        -moz-animation-iteration-count: infinite;
        -moz-animation-name: pulse;
      }
    
注:
上面的代码片段是一个使用 id(称为“blink”)声明来新要素的示例。 然后修改 CSS 文件,声明 @keyframe 属性来描述所需动画的行为。 #blink_layer 用于针对每个使用“blink”id 创建的要素定义动画循环。

文章 ID:000014734

从 ArcGIS 专家处获得帮助

联系技术支持部门

下载 Esri 支持应用程序

转至下载选项

相关信息

发现关于本主题的更多内容