【feature】l7layer 支持map对应layer和Source的方法和事件

Author: xiongjiaojiao

src/mapboxgl/core/MapExtend.js

@@ -649,7 +649,24 @@ function WebMapSourceToL7Source(source, sourceLayer, options) {
   return rules[type] && rules[type](source, sourceLayer, options);
 }
 
-function getL7Filter(filter) {
+function getFilterFields(filter) {
+  const result = [];
+  for (const exp of filter) {
+    if (exp instanceof Array && exp[1] && typeof exp[1] === 'string') {
+      result.push(exp[1]);
+      continue;
+    }
+    if (exp instanceof Array) {
+      const subResult = getFilterFields(exp);
+      if (subResult && subResult.length > 0) {
+        result.push(...subResult);
+      }
+    }
+  }
+  return result;
+}
+
+export function getL7Filter(filter) {
   if (!filter) {
     return;
   }
@@ -661,7 +678,7 @@ function getL7Filter(filter) {
     }
     return true;
   });
-  const field = newExpressions.map((exp) => exp[1]);
+  const field = Array.from(new Set(getFilterFields(newExpressions)));
   const fFilter = featureFilter([condition, ...newExpressions]);
   const filterFunc = fFilter.filter.bind(fFilter);
   return {
@@ -687,14 +704,19 @@ function getL7Filter(filter) {
  * @param layer
  */
 function getL7LayerCommonInfo(layer) {
-  const { id, minzoom, maxzoom, layout, filter } = layer;
+  const { type, id, minzoom, maxzoom, layout, paint, filter, source } = layer;
   return {
     id,
     options: {
+      type,
       name: layer.id,
       sourceLayer: layer['source-layer'],
-      minzoom,
-      maxzoom,
+      source,
+      layout,
+      paint,
+      filter,
+      minZoom: minzoom,
+      maxZoom: maxzoom,
       visible: layout.visibility === 'none' ? false : true
     },
     filter: getL7Filter(filter)
@@ -1908,15 +1930,15 @@ function getL7Layer(l) {
     [MSLayerType.polygon]: 'PolygonLayer',
     [MSLayerType.heatmap]: 'HeatmapLayer'
   };
+  const source = l.source || {};
   const layer = new L7Layer({
     type: typeRule[l.type],
-    options: { ...l.options, layerID: (l.options || {}).name }
+    options: { ...l.options, layerID: (l.options || {}).name, featureId: (source.parser || {}).type === 'mvt' ? 'smpid' :  undefined } // 解决L7结构化数据监听click事件会返回多个features问题
   });
   // getL7Layer返回原生antv l7 layer的实例
   const l7Layer = layer.getL7Layer();
   // 调用原生antv l7 layer的方法，构建图层
   const sourceOptions = {};
-  const source = l.source || {};
   const shape = l.shape || {};
   if (source.parser) {
     sourceOptions.parser = l.source.parser;
@@ -1982,7 +2004,9 @@ export async function addL7Layers({ map, webMapInfo, l7Layers, spriteDatas, opti
       ChartController.setSceneChartLayer(l.id, actionLayer);
     } else {
       const layer = getL7Layer(l);
-      map.addLayer(layer, beforeLayer && beforeLayer.id);
+      if (!map.getLayer(layer.id)) {
+        map.addLayer(layer, beforeLayer && beforeLayer.id);
+      }
     }
   }
 }

src/mapboxgl/mapping/utils/L7LayerUtil.js

@@ -194,6 +194,31 @@ export class WebMap extends mapboxgl.Evented {
     return this._legendList;
   }
 
+  async copyLayer(id, layerInfo = {}) {
+    const matchLayer = this._mapInfo.layers.find(layer => layer.id === id);
+    if (!matchLayer || this.map.getLayer(layerInfo.id)) {
+      return;
+    }
+    const copyLayerId = layerInfo.id || `${matchLayer.id}_copy`;
+    const copyLayer = { ...matchLayer, ...layerInfo, id: copyLayerId };
+    if (isL7Layer(copyLayer)) {
+      const layers = [copyLayer];
+      await addL7Layers({
+        map: this.map,
+        webMapInfo: { ...this._mapInfo, layers, sources: this._mapInfo.sources },
+        l7Layers: layers,
+        spriteDatas: this._spriteDatas,
+        options: this.options
+      });
+      return;
+    }
+    if (typeof copyLayer.source === 'object') {
+      this.map.addSource(copyLayer.id, copyLayer.source);
+      copyLayer.source = copyLayer.id;
+    }
+    this.map.addLayer(copyLayer);
+  }
+
   /**
    * @private
    * @function WebMap.prototype._createMap

src/mapboxgl/mapping/webmap/v3/WebMap.js

@@ -0,0 +1,60 @@
+export class CustomOverlayLayer {
+  constructor(options) {
+    this.type = 'custom';
+    this.overlay = true;
+    this.sourceId = options.sourceId;
+    // interaction 控制是否支持事件
+    this.interaction = options.interaction || false;
+    // query 是否支持查询
+    this.query = options.query || false;
+    this.events = options.events || [];
+  }
+  
+  // 获取 layer 的信息，如 type, id, sourceLayer， layout 等
+  getLayer() {}
+
+  // 更换 layer 的顺序
+  moveLayer() {}
+
+  // 获取 layer source的信息，如 id，type 等
+  getSource() {}
+
+  // 返回指定样式图层中绘制属性的值
+  getPaintProperty() {}
+
+  // 返回指定样式图层中布局属性的值
+  getLayoutProperty() {}
+
+  // 修改指定样式图层中布局属性的值
+  setLayoutProperty() {}
+
+  // 返回应用于指定样式图层的过滤器
+  getFilter() {}
+
+  // 设定指定样式图层的过滤器
+  setFilter() {}
+
+  // map 添加 layer 时的钩子函数
+  onAdd() {}
+
+  // map 移除 layer 时的钩子函数
+  onRemove() {}
+
+  // map 渲染 layer 时的钩子函数
+  render() {}
+
+  // 注册 layer 事件，触发多次
+  on() {}
+
+  // 注册 layer 事件，触发一次
+  once() {}
+
+  // 移除 layer 事件
+  off() {}
+
+  // 查询足查询参数的可见要素的 GeoJSON 要素对象数组
+  queryRenderedFeatures() {}
+
+  // 查询满足查询参数的指定矢量切片或 GeoJSON 源中的要素
+  querySourceFeatures() {}
+}