arcgis for js根据经纬度生成图形图层

关键代码:

/**
 * 点位信息封装成 GraphicsLayer
 * @param datas 源数据
 * @param o 配置项
 * @return {GraphicsLayer}
 */
export function loadPointsLayer(datas, o) {
  let defOptions = {
    longitude: 'jd',   // 经度
    latitude: 'wd', // 维度
    symbol: require('@/assets/image/map/da.png'),  // 要渲染成什么样的
    symbolWidth: '40px', 
    symbolHeight: '40px',
    fields: [],  // 每个要素要包含的数据, 对象的key值, 与datas中每个对象属性名对应
    typeSymbol: null
  };
  let options = Object.assign(defOptions, o);
  return loadModules(["esri/geometry/Point", "esri/symbols/PictureMarkerSymbol", "esri/Graphic", "esri/layers/GraphicsLayer"], {css: true})
    .then(([Point, PictureMarkerSymbol, Graphic, GraphicsLayer]) => {
      let graphics = [];
      datas.forEach(item => {
        graphics.push(new Graphic({
          geometry: new Point({
            type: 'point',
            longitude: item[options.longitude],
            latitude: item[options.latitude],
          }),
          attributes: (() => {
            let o = {};
            options.fields && options.fields.push && options.fields.forEach(f => {
              o[f] = item[f];
            });
            return o;
          })(),
          symbol: PictureMarkerSymbol({
            style: "picture-marker",
            url: (()=>{
              if (options.typeSymbol) {
                let s = options.typeSymbol.items[item[options.typeSymbol.code]];
                return s ? s : options.symbol;
              }
              return options.symbol;
            })(),
            width: options.symbolWidth,
            height: options.symbolHeight,
          })
        }));
      });

      return GraphicsLayer({
        graphics: graphics
      });
    })
}

调用示例:

每个对象都是相同的图片:

loadPointsLayer(data, {
   fields: ['id', 'sid'],
   symbol: 'url'
 }).then(layer => {
   map.add(layer)
 })

根据设置的参数不同生成的图片:

loadPointsLayer(data, {
   fields: ['id', 'sid'],
   symbol: 'url',
   typeSymbol: {
     code: 'type', // data中必须有这个字段
     items: {
       'type1': require('@/assets/images/xxx.png'),
       'type2': require('@/assets/images/xxx.png'),
       //...等等
     }
   }
 }).then(layer => {
   map.add(layer)
 })