【mapbox】使用Expressions实现同一layer不同图标

1. 图标数据结构:

   markerImgs: [
           { name: "camera1", url: "static/waterMarkerRed1.png" },
           { name: "camera2", url: "static/waterMarkerRed2.png" },
           { name: "camera3", url: "static/waterMarkerRed3.png" },
           { name: "camera4", url: "static/waterMarkerRed4.png" },
           { name: "camera5", url: "static/waterMarkerRed5.png" },
         ],
   

2. map初始化加载image

   initLoadImage(imgs) {
         for (let i = 0; i < imgs.length; i++) {
           map.loadImage(imgs[i].url, (error, image) => {
             if (error) throw error;
             // 先判断是否加载了该 id 的图片资源，没有则加载
             if (!map.hasImage(imgs[i].name)) {
               map.addImage(imgs[i].name, image);
             }
           });
         }
       }
   

3. 根据点坐标构建features,并添加layer

   let features = [];
               for (let i in data) {
                 data[i]["imgType"] = "cm" + i;
                 features.push({
                   id: "cm-" + i,
                   type: "Feature",
                   geometry: {
                     type: "Point",
                     coordinates: gcoord.transform(
                       data[i].lonlat.split(","),
                       gcoord.GCJ02,
                       gcoord.WGS84
                     ),
                   },
                   properties: data[i],
                 });
               }
   
   map.addLayer({
                 id: 'layerid',
                 type: "symbol",
                 source: {
                   type: "geojson",
                   data: {
                     type: "FeatureCollection",
                     features: features,
                   },
                 },
                 layout: {
                   "icon-image": this.createImageExpressions(),
                   "icon-size": 0.8,
                   "icon-offset": [0, -70] /*marker的偏移位置*/,
                 },
                 maxzoom: 24,
                 minzoom: 11,
               });
   

   //构造标记图标Expressions表达式
       createImageExpressions() {
         var expressions = ["match", ["get", "imgType"]];
         for (let i = 0; i < this.markerImgs.length - 1; i++) {
           expressions.push("cm" + i);
           expressions.push(this.markerImgs[i].name);
         }
         expressions.push("camera5");
         return expressions;
       },
   

4. Expressions表达式之match参考:mapboxGL JS expressions