【feature】对接webmap3.0 l7图例

SuperMap · May 16, 2024 · 07b2a50 · 07b2a50
1 parent 4e8f260
commit 07b2a50
Show file tree

Hide file tree

Showing 11 changed files with 431 additions and 144 deletions.
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
     "start": "npm run dev",
     "unit": "jest --config jest.config.js --coverage --testResultsProcessor jest-sonar-reporter",
-    "test": "node test/unit/G6Spec.js && npm run unit",
+    "test": "node test/unit/iclientExternalSpec.js && npm run unit",
     "lint": "eslint --ext .js,.ts,.vue src",
     "lint:fix": "eslint --fix --ext .js,.ts,.vue src",
     "build": "node --max_old_space_size=2048 build/build.js && node --max_old_space_size=2048 build/build.js -p",

diff --git a/src/mapboxgl/web-map/control/legend/Legend.vue b/src/mapboxgl/web-map/control/legend/Legend.vue
@@ -13,30 +13,48 @@
   >
     <sm-card :bordered="false" :style="mode !== 'simple' && collapseCardBackgroundStyle">
       <template v-if="Object.keys(legendList).length > 0">
-      <sm-collapse
-        v-if="mode === 'panel'"
-        v-model="activeLegend"
-        class="sm-component-legend__table"
-      >
-        <sm-collapse-panel
+        <sm-collapse v-if="mode === 'panel'" v-model="activeLegend" class="sm-component-legend__table">
+          <sm-collapse-panel
+            v-for="(layerStyles, layerName) in legendList"
+            :key="layerName"
+            :disabled="!isShowTitle"
+            :showArrow="false"
+            :class="[isShowTitle ? '' : 'sm-component-legend__panel']"
+          >
+            <template slot="header">
+              <div v-if="isShowTitle" class="header-wrap" :style="headingTextColorStyle">
+                <div class="sm-component-legend__title add-ellipsis">{{ layerStyles[0].layerTitle }}</div>
+                <i
+                  :class="
+                    activeLegend.includes(layerName)
+                      ? 'sm-components-icon-solid-triangle-down'
+                      : 'sm-components-icon-solid-triangle-right'
+                  "
+                />
+              </div>
+            </template>
+            <template v-for="(style, index) in layerStyles">
+              <StyleField
+                v-if="isShowField"
+                :key="`field_${index}`"
+                :theme-field="style.themeField"
+                :style-field="style.styleField"
+              />
+              <div :key="`style_${index}`" class="sm-component-legend__wrap">
+                <StyleItem v-for="(item, j) in style.styleGroup" :key="`style_${index}_${j}`" :style-data="item" />
+              </div>
+            </template>
+          </sm-collapse-panel>
+        </sm-collapse>
+        <template v-else>
+        <div
           v-for="(layerStyles, layerName) in legendList"
           :key="layerName"
-          :disabled="!isShowTitle"
-          :showArrow="false"
-          :class="[isShowTitle ? '' : 'sm-component-legend__panel']"
+          class="sm-component-legend__noBorder"
         >
-          <template slot="header">
-            <div v-if="isShowTitle" class="header-wrap" :style="headingTextColorStyle">
-              <div class="sm-component-legend__title add-ellipsis">{{ layerStyles[0].layerTitle }}</div>
-              <i
-                :class="
-                  activeLegend.includes(layerName)
-                    ? 'sm-components-icon-solid-triangle-down'
-                    : 'sm-components-icon-solid-triangle-right'
-                "
-              />
-            </div>
-          </template>
+          <div v-if="isShowTitle" class="sm-component-legend__title add-ellipsis" :style="headingTextColorStyle">
+            {{ layerName }}
+          </div>
           <template v-for="(style, index) in layerStyles">
             <StyleField
               v-if="isShowField"
@@ -45,31 +63,12 @@
               :style-field="style.styleField"
             />
             <div :key="`style_${index}`" class="sm-component-legend__wrap">
-              <StyleItem
-                v-for="(item, j) in style.styleGroup"
-                :key="`style_${index}_${j}`"
-                :style-data="item"
-              />
+              <StyleItem v-for="(item, j) in style.styleGroup" :key="`style_${index}_${j}`" :style-data="item" />
             </div>
           </template>
-        </sm-collapse-panel>
-      </sm-collapse>
-      <div
-        v-for="(layerStyles, layerName) in legendList"
-        v-else
-        :key="layerName"
-        class="sm-component-legend__noBorder"
-      >
-        <div v-if="isShowTitle" class="sm-component-legend__title add-ellipsis" :style="headingTextColorStyle">
-          {{ layerName }}
         </div>
-        <template v-for="(style, index) in layerStyles">
-          <StyleField v-if="isShowField" :key="`field_${index}`" :theme-field="style.themeField" :style-field="style.styleField" />
-          <div :key="`style_${index}`" class="sm-component-legend__wrap">
-            <StyleItem v-for="(item, j) in style.styleGroup" :key="`style_${index}_${j}`" :style-data="item" />
-          </div>
+
         </template>
-      </div>
       </template>
     </sm-card>
   </sm-collapse-card>
@@ -151,7 +150,7 @@ export default {
       if (this.viewModel) {
         this.legendList = this.layerNames.reduce((list, name) => {
           const styles = this.viewModel.getStyle(name);
-          if (styles) {
+          if (styles && styles.length > 0) {
             list[name] = styles;
             !defaultChoosenLayers.length && defaultChoosenLayers.push(name);
           }
@@ -172,3 +171,4 @@ export default {
   }
 };
 </script>
+
diff --git a/src/mapboxgl/web-map/control/legend/__tests__/legend.spec.js b/src/mapboxgl/web-map/control/legend/__tests__/legend.spec.js
@@ -39,7 +39,7 @@ describe('Legend.vue', () => {
   it('render default correctly', async done => {
     wrapper = mount(SmLegend, {
       propsData: {
-        layerNames: ['上海疫情点标注', '站点3', '未命名数据', '未命名数据(1)', '未命名数据(3)'],
+        layerNames: ['上海疫情点标注', '站点3', '未命名数据', '未命名数据(1)', '未命名数据(3)', '北京市轨道交通线路减'],
         mapTarget: 'map'
       }
     });

diff --git a/src/mapboxgl/web-map/control/legend/subs/ImageRenderer.vue b/src/mapboxgl/web-map/control/legend/subs/ImageRenderer.vue
@@ -51,40 +51,75 @@ export default {
           height: sHeight = img.height
         } = {}
       } = this.styleRendererData;
-      let dispalyWidth = sWidth;
-      let dispalyHeight = sHeight;
+      let displayWidth = sWidth;
+      let displayHeight = sHeight;
       let fillColor;
+      let repeatPattern = false;
+      let displayIconWidth = 0;
+      let displayIconHeight = 0;
       switch (this.shape) {
         case 'point': {
           const { fontSize, color } = this.cssStyle;
           const size = parseInt(fontSize);
-          dispalyWidth = size;
-          dispalyHeight = size;
+          displayWidth = size;
+          displayHeight = size;
           fillColor = color;
           break;
         }
-        case 'fill':
-        case 'fillextrusion': {
-          const { width, height, backgroudColor } = this.cssStyle;
-          dispalyWidth = parseInt(width);
-          dispalyHeight = parseInt(height);
-          fillColor = backgroudColor;
+        case 'animateline': {
+          const { width, height, backgroundColor, iconStep } = this.cssStyle;
+          displayWidth = parseInt(width);
+          displayHeight = parseInt(height);
+          fillColor = backgroundColor;
+          repeatPattern = true;
+          displayIconWidth = iconStep;
+          displayIconHeight = displayHeight;
+          break;
+        }
+        case 'line': {
+          const { width, height, backgroundColor } = this.cssStyle;
+          displayWidth = parseInt(width);
+          displayHeight = parseInt(height);
+          fillColor = backgroundColor;
+          break;
         }
       }
-      canvas.width = dispalyWidth;
-      canvas.height = dispalyHeight;
+      canvas.width = displayWidth;
+      canvas.height = displayHeight;
+      ctx.globalAlpha = opacity;
+      ctx.fillStyle = fillColor;
+      ctx.fillRect(0, 0, displayWidth, displayHeight);
+      if (repeatPattern) {
+        const patternCanvas = document.createElement('canvas');
+        const patternContext = patternCanvas.getContext('2d');
+        patternCanvas.width = displayIconWidth;
+        patternCanvas.height = displayIconHeight;
+        patternContext.drawImage(
+          img,
+          sx * pixelRatio,
+          sy * pixelRatio,
+          sWidth,
+          sHeight,
+          0,
+          0, // 目标矩形（绘制到Canvas的位置）
+          displayIconWidth,
+          displayIconHeight // 目标矩形（绘制的宽度和高度）
+        );
+        const pattern = ctx.createPattern(patternCanvas, 'repeat');
+        ctx.fillStyle = pattern;
+        ctx.fillRect(0, 0, displayWidth, displayHeight);
+      }
       if (sdf) {
-        ctx.globalAlpha = opacity;
-        ctx.fillStyle = fillColor;
-        ctx.fillRect(0, 0, dispalyWidth, dispalyHeight);
         // set composite mode
         ctx.globalCompositeOperation = 'destination-in';
       }
-      // draw image
-      ctx.drawImage(img, sx * pixelRatio, sy * pixelRatio, sWidth, sHeight, 0, 0, dispalyWidth, dispalyHeight);
+      if (!repeatPattern) {
+        // draw image
+        ctx.drawImage(img, sx * pixelRatio, sy * pixelRatio, sWidth, sHeight, 0, 0, displayWidth, displayHeight);
+      }
       if (outlineColor) {
         ctx.strokeStyle = outlineColor;
-        ctx.strokeRect(0, 0, dispalyWidth, dispalyHeight);
+        ctx.strokeRect(0, 0, displayWidth, displayHeight);
       }
     }
   }

diff --git a/src/mapboxgl/web-map/control/legend/subs/StyleField.vue b/src/mapboxgl/web-map/control/legend/subs/StyleField.vue
@@ -20,7 +20,7 @@ export default {
   },
   computed: {
     themFieldLabel() {
-      let themeFieldText = this.$t('legend.themeField');
+      const themeFieldText = this.$t('legend.themeField');
       if (!this.styleField) {
         return themeFieldText;
       }