如何基于自定义REST服务的GPS航向旋转Web-Style汽车符号？

方案一：直接为每个符号设置旋转属性 #

这种方式适配你当前逐个创建Graphic的逻辑，直接在symbol对象中添加rotation属性，绑定返回的heading字段即可：

$.get( "/gps/track/latest", function( data ) {
        $.each(data , function(index, val) { 
          const point = { //Create a point
            type: "point",
            longitude: val['lng'],
            latitude: val['lat']
          };

          let symbol = {
            type: "web-style",  // autocasts as new PictureMarkerSymbol()
            name: "BMW_3-Series",
            styleName: "EsriRealisticTransportationStyle",
            rotation: val['heading'] // 绑定GPS航向值实现旋转
          };

          const pointGraphic = new Graphic({
              geometry: point,
              symbol: symbol
          });
          carsLayer.add(pointGraphic);
        });
      });

方案二：通过图层Renderer的视觉变量统一控制 #

如果是批量处理数据，推荐用这种方式，通过图层Renderer统一管理符号样式和旋转逻辑，无需逐个设置symbol：

$.get( "/gps/track/latest", function( data ) {
        // 批量转换为Graphic数组，将heading存入属性
        const graphics = data.map(val => {
          const point = {
            type: "point",
            longitude: val['lng'],
            latitude: val['lat']
          };
          return new Graphic({
            geometry: point,
            attributes: {
              heading: val['heading']
            }
          });
        });

        // 为图层配置Renderer，通过visualVariables实现旋转
        carsLayer.renderer = {
          type: "simple",
          symbol: {
            type: "web-style",
            name: "BMW_3-Series",
            styleName: "EsriRealisticTransportationStyle"
          },
          visualVariables: [
            {
              type: "rotation",
              field: "heading", // 关联属性中的heading字段
              rotationType: "geographic" // 可选：根据航向定义选择，geographic为正北顺时针，arithmetic为正东逆时针
            }
          ]
        };

        carsLayer.addMany(graphics);
      });

注意事项 #

• 如果你的heading角度是基于正东逆时针定义的，需要将rotationType设置为arithmetic；默认geographic对应正北顺时针，符合绝大多数GPS航向的定义。

内容的提问来源于stack exchange，提问作者Erdenebayar Erdenebileg