@supermapgis/vue-iclient-leaflet 11.2.1 → 11.3.0

package/src/common/_utils/iServerRestService.js

@@ -1,11 +1,17 @@
 import {
   QueryBySQLParameters,
+  QueryByGeometryParameters,
   FilterParameter,
   QueryBySQLService,
   FetchRequest,
+  FeatureService,
+  QueryService,
   GetFeaturesBySQLParameters,
-  GetFeaturesBySQLService,
-  FeatureService
+  GetFeaturesByBoundsParameters,
+  Util,
+  GeometryPolygon,
+  GeometryLinearRing,
+  GeometryPoint
 } from 'vue-iclient/static/libs/iclient-common/iclient-common';
 import { Events } from 'vue-iclient/src/common/_types/event/Events';
 import { getProjection } from 'vue-iclient/src/common/_utils/epsg-define';
@@ -17,11 +23,6 @@ import cloneDeep from 'lodash.clonedeep';
 export function _getValueOfEpsgCode(epsgCode) {
   const defName = `EPSG:${epsgCode}`;
   const defValue = getProjection(defName);
-  if (!defValue) {
-    console.error(`${defName} not define`);
-  } else {
-    !proj4.defs(defName) && proj4.defs(defName, defValue);
-  }
   return {
     name: defName,
     value: defValue
@@ -66,9 +67,9 @@ export function vertifyEpsgCode(firstFeature) {
 }
 
 export function transformFeatures(epsgCode, features) {
-  const projName = _getValueOfEpsgCode(epsgCode).name;
+  const { name: projName, value: projValue } = _getValueOfEpsgCode(epsgCode);
   const transformedFeatures = features.map(feature => {
-    if (proj4.defs(projName) && feature.geometry && feature.geometry.coordinates) {
+    if (projValue && feature.geometry && feature.geometry.coordinates) {
       const coordinates = feature.geometry.coordinates;
       feature.geometry.coordinates = _transformCoordinates(coordinates, projName);
     }
@@ -134,7 +135,10 @@ export default class iServerRestService extends Events {
     super();
     this.url = url;
     this.options = options || {};
+    this.options.fromIndex = this.options.fromIndex ?? 0;
     this.eventTypes = ['getdatasucceeded', 'getdatafailed', 'featureisempty'];
+    this._defaultMaxFeatures = 1000;
+    this._queryResultHandler = this._queryResultHandler.bind(this);
   }
 
   getData(datasetInfo, queryInfo) {
@@ -173,19 +177,19 @@ export default class iServerRestService extends Events {
   getMapFeatures(datasetInfo, queryInfo) {
     let { dataUrl, mapName } = datasetInfo;
     queryInfo.name = mapName;
-    this.projectionUrl = `${dataUrl}/prjCoordSys`;
+    this.projectionUrl = Util.urlPathAppend(dataUrl, 'prjCoordSys');
     if (queryInfo.keyWord) {
       this._getRestMapFields(
         dataUrl,
         mapName,
         fields => {
-          queryInfo.attributeFilter = this._getAttributeFilterByKeywords(fields, queryInfo.keyWord);
-          this._getMapFeatureBySql(dataUrl, queryInfo);
+          const attributeFilter = this._getAttributeFilterByKeywords(fields, queryInfo.keyWord);
+          this._queryMapFeatures(dataUrl, { ...queryInfo, attributeFilter });
         },
         queryInfo.withCredentials
       );
     } else {
-      this._getMapFeatureBySql(dataUrl, queryInfo);
+      this._queryMapFeatures(dataUrl, queryInfo);
     }
   }
 
@@ -205,15 +209,15 @@ export default class iServerRestService extends Events {
     let { datasetName, dataSourceName, dataUrl } = datasetInfo;
     queryInfo.name = datasetName + '@' + dataSourceName;
     queryInfo.datasetNames = [dataSourceName + ':' + datasetName];
-    this.projectionUrl = `${dataUrl}/datasources/${dataSourceName}/datasets/${datasetName}`;
+    this.projectionUrl = Util.urlPathAppend(dataUrl, `datasources/${dataSourceName}/datasets/${datasetName}`);
     if (queryInfo.keyWord) {
-      let fieldsUrl = dataUrl + `/datasources/${dataSourceName}/datasets/${datasetName}/fields.rjson?returnAll=true`;
+      let fieldsUrl = Util.urlAppend(Util.urlPathAppend(dataUrl, `datasources/${dataSourceName}/datasets/${datasetName}/fields`), 'returnAll=true');
       this._getRestDataFields(fieldsUrl, queryInfo, fields => {
-        queryInfo.attributeFilter = this._getAttributeFilterByKeywords(fields, queryInfo.keyWord);
-        this._getDataFeaturesBySql(dataUrl, queryInfo);
+        const attributeFilter = this._getAttributeFilterByKeywords(fields, queryInfo.keyWord);
+        this._queryDataFeatures(dataUrl, { ...queryInfo, attributeFilter });
       });
     } else {
-      this._getDataFeaturesBySql(dataUrl, queryInfo);
+      this._queryDataFeatures(dataUrl, queryInfo);
     }
   }
 
@@ -261,61 +265,129 @@ export default class iServerRestService extends Events {
     });
   }
 
-  _getMapFeatureBySql(url, queryInfo) {
-    let queryBySQLParams, queryBySQLService;
-    queryBySQLParams = new QueryBySQLParameters({
+  _queryMapFeatures(url, queryInfo) {
+    const queryService = new QueryService(url, {
+      proxy: this.options.proxy,
+      withCredentials: queryInfo.withCredentials
+    });
+    const expectCountOptions = this._calcFeaturesExpectCountOptions(queryInfo);
+    const pickedCommonParams = {
+      startRecord: expectCountOptions.fromIndex,
+      expectCount: expectCountOptions.maxFeatures,
+      prjCoordSys: {
+        epsgCode: 4326
+      },
       queryParams: [
         {
           name: queryInfo.name,
           attributeFilter: queryInfo.attributeFilter,
           orderBy: queryInfo.orderBy
         }
-      ],
-      queryOption: this.options.hasGeometry === false ? 'ATTRIBUTE' : 'ATTRIBUTEANDGEOMETRY',
-      startRecord: this.options.fromIndex,
-      expectCount: this.options.toIndex ? this.options.toIndex - this.options.fromIndex + 1 : queryInfo.maxFeatures
-    });
-    queryBySQLService = new QueryBySQLService(url, {
+      ]
+    };
+    if (queryInfo.bounds) {
+      const params = this._getMapFeaturesParamsByGeometry(queryInfo, pickedCommonParams);
+      queryService.queryByGeometry(params, this._queryResultHandler);
+      return;
+    }
+    const params = this._getMapFeaturesParamsBySql(queryInfo, pickedCommonParams);
+    queryService.queryBySQL(params, this._queryResultHandler);
+  }
+
+  _queryDataFeatures(url, queryInfo) {
+    const featureService = new FeatureService(url, {
       proxy: this.options.proxy,
-      withCredentials: queryInfo.withCredentials,
-      eventListeners: {
-        processCompleted: this._getFeaturesSucceed.bind(this),
-        processFailed: serviceResult => {
-          console.error(serviceResult.error);
-          this.fetchFailed(serviceResult.error);
-        }
-      }
+      withCredentials: queryInfo.withCredentials
+    });
+    const expectCountOptions = this._calcFeaturesExpectCountOptions(queryInfo);
+    const pickedCommonParams = {
+      ...expectCountOptions,
+      targetPrj: {
+        epsgCode: 4326
+      },
+      returnFeaturesOnly: this.options.returnFeaturesOnly
+    };
+    if (queryInfo.bounds) {
+      const params = this._getDataFeaturesParamsByGeometry(queryInfo, pickedCommonParams);
+      featureService.getFeaturesByGeometry(params, this._queryResultHandler);
+      return;
+    }
+    const params = this._getDataFeaturesParamsBySql(queryInfo, pickedCommonParams);
+    featureService.getFeaturesBySQL(params, this._queryResultHandler);
+  }
+
+  _getMapFeaturesParamsBySql(queryInfo, commonParams) {
+    return new QueryBySQLParameters({
+      ...commonParams,
+      queryOption: this.options.hasGeometry === false ? 'ATTRIBUTE' : 'ATTRIBUTEANDGEOMETRY'
+    });
+  }
+
+  _getMapFeaturesParamsByGeometry(queryInfo, commonParams) {
+    return new QueryByGeometryParameters({
+      ...commonParams,
+      spatialQueryMode: 'INTERSECT',
+      geometry: this._transBoundsToGeometry(queryInfo)
     });
-    queryBySQLService.processAsync(queryBySQLParams);
   }
 
-  _getDataFeaturesBySql(url, queryInfo) {
-    let getFeatureBySQLParams, getFeatureBySQLService;
-    getFeatureBySQLParams = new GetFeaturesBySQLParameters({
+  _getDataFeaturesParamsBySql(queryInfo, commonParams) {
+    return new GetFeaturesBySQLParameters({
+      ...commonParams,
       queryParameter: {
         name: queryInfo.name,
         attributeFilter: queryInfo.attributeFilter,
         orderBy: queryInfo.orderBy
       },
       hasGeometry: this.options.hasGeometry,
-      datasetNames: queryInfo.datasetNames,
-      fromIndex: this.options.fromIndex || 0,
-      toIndex: this.options.toIndex || (queryInfo.maxFeatures >= 1000 ? -1 : queryInfo.maxFeatures - 1),
-      maxFeatures: -1,
-      returnFeaturesOnly: this.options.returnFeaturesOnly
+      datasetNames: queryInfo.datasetNames
     });
-    getFeatureBySQLService = new GetFeaturesBySQLService(url, {
-      proxy: this.options.proxy,
-      withCredentials: queryInfo.withCredentials,
-      eventListeners: {
-        processCompleted: this._getFeaturesSucceed.bind(this),
-        processFailed: serviceResult => {
-          console.error(serviceResult.error);
-          this.fetchFailed(serviceResult.error);
-        }
-      }
+  }
+
+  _getDataFeaturesParamsByGeometry(queryInfo, commonParams) {
+    return new GetFeaturesByBoundsParameters({
+      ...commonParams,
+      attributeFilter: queryInfo.attributeFilter,
+      datasetNames: queryInfo.datasetNames,
+      spatialQueryMode: 'INTERSECT',
+      geometry: this._transBoundsToGeometry(queryInfo)
     });
-    getFeatureBySQLService.processAsync(getFeatureBySQLParams);
+  }
+
+  _transBoundsToGeometry(queryInfo) {
+    const lnglatBounds = queryInfo.bounds;
+    const west = lnglatBounds.getWest();
+    const east = lnglatBounds.getEast();
+    const sourth = lnglatBounds.getSouth();
+    const north = lnglatBounds.getNorth();
+    const geometry = new GeometryPolygon([
+      new GeometryLinearRing([
+        new GeometryPoint(west, sourth),
+        new GeometryPoint(east, sourth),
+        new GeometryPoint(east, north),
+        new GeometryPoint(west, north)
+      ])
+    ]);
+    geometry.SRID = 4326;
+    return geometry;
+  }
+
+  _calcFeaturesExpectCountOptions(queryInfo) {
+    const maxFeatures = queryInfo.maxFeatures ?? this._defaultMaxFeatures;
+    const toIndex = this.options.toIndex ?? maxFeatures - 1;
+    return {
+      fromIndex: this.options.fromIndex,
+      toIndex,
+      maxFeatures: toIndex - this.options.fromIndex + 1
+    };
+  }
+
+  _queryResultHandler(serviceResult) {
+    if (serviceResult.type === 'processCompleted') {
+      this._getFeaturesSucceed(serviceResult);
+      return;
+    }
+    this._getFeaturesFailed(serviceResult);
   }
 
   async _getFeaturesSucceed(results) {
@@ -344,10 +416,17 @@ export default class iServerRestService extends Events {
       // 数据来自restdata---results.result.features
       this.features = results.result.features;
       features = this.features.features || this.features;
-      let fields = [];
-      let fieldCaptions = [];
-      let fieldTypes = [];
+      if (results.result.totalCount === 0) {
+        this.triggerEvent('featureisempty', {
+          results
+        });
+        return;
+      }
+      let fields, fieldCaptions, fieldTypes;
       if (results.result.datasetInfos) {
+        fields = [];
+        fieldCaptions = [];
+        fieldTypes = [];
         const fieldInfos = results.result.datasetInfos[0].fieldInfos;
         fieldInfos.forEach(fieldInfo => {
           if (fieldInfo.name) {
@@ -357,31 +436,14 @@ export default class iServerRestService extends Events {
           }
         });
       }
-      if (features && features.length > 0) {
-        data = statisticsFeatures(features, fields, fieldCaptions, fieldTypes);
-        results.result.totalCount && (data.totalCount = results.result.totalCount);
-      } else {
-        this.triggerEvent('featureisempty', {
-          results
-        });
-        return;
-      }
+      data = statisticsFeatures(features, fields, fieldCaptions, fieldTypes);
+      data.totalCount = results.result.totalCount;
     } else {
       this.triggerEvent('getdatafailed', {
         results
       });
       return;
     }
-    // vertified 表示已经验证过 epsgCode且转化了features 比如iportalData从content.json获取的features
-    if (!results.result.vertified) {
-      // 关系型存储发布成服务后坐标一定是4326，但真实数据可能不是4326，判断一下暂时按照3857处理
-      data.features = await checkAndRectifyFeatures({
-        features: data.features,
-        epsgCode: this.options.epsgCode,
-        projectionUrl: this.projectionUrl,
-        options: { proxy: this.options.proxy }
-      });
-    }
 
     /**
      * @event iServerRestService#getdatasucceeded
@@ -391,6 +453,10 @@ export default class iServerRestService extends Events {
     this.triggerEvent('getdatasucceeded', data);
   }
 
+  _getFeaturesFailed(serviceResult) {
+    this.fetchFailed(serviceResult.error);
+  }
+
   _getRestDataFields(fieldsUrl, queryInfo, callBack) {
     FetchRequest.get(fieldsUrl, null, {
       proxy: this.options.proxy,
@@ -426,7 +492,7 @@ export default class iServerRestService extends Events {
           let fields;
           if (serviceResult.result) {
             let result = serviceResult.result.recordsets[0];
-            fields = this._getFiledsByType(['CHAR', 'TEXT', 'WTEXT'], result.fieldCaptions, result.fieldTypes);
+            fields = this._getFiledsByType(['CHAR', 'TEXT', 'WTEXT'], result.fields, result.fieldTypes);
           }
           fields && callBack(fields, serviceResult.result.recordsets[0]);
         },

package/src/common/_utils/statistics.js

@@ -2,25 +2,17 @@ export function statisticsFeatures(features, fields, fieldCaptions, fieldTypes)
   const data = {
     features,
     fields: fields || [],
+    fieldCaptions: fieldCaptions || [],
     fieldValues: [],
     fieldTypes
   };
-  if(features && !!features.length) {
-    if(fieldCaptions && fieldCaptions.length) {
-      features.forEach(feature => {
-        const newProperties = {};
-        for (const field in feature.properties) {
-          const index = fields.indexOf(field);
-          const fieldCaption = fieldCaptions[index];
-          newProperties[fieldCaption || field] = feature.properties[field];
-        }
-        feature.properties = newProperties;
-      });
-    }
+  if (features && !!features.length && !fieldCaptions && !fields) {
     const properties = Object.assign({}, features[0].properties, features[features.length - 1].properties);
-    data.fields = Object.keys(properties);
+    for (let attr in properties) {
+      data.fieldCaptions.push(attr);
+      data.fields.push(attr);
+    }
   }
-
   for (let m in data.fields) {
     const fieldValue = [];
     for (let j in features) {

package/src/common/_utils/style/theme/theme.json

@@ -30,9 +30,9 @@
     "btnHoverColor": "#EA7568",
     "btnActiveColor": "#CC211C",
 
-    "successColor": "#2BA250",
+    "successColor": "#3DAB1B",
     "infoColor": "#3499E5",
-    "warningColor": "#F0BD3E",
+    "warningColor": "#E2CA34",
     "dangerColor": "#DC5849",
     "shadowBase": "rgba(0, 0, 0, 0.35)",
     "shadowTooltip": "rgba(0, 0, 0, 0.35)",
@@ -145,9 +145,9 @@
     "l100": "#FFFFFF",
     "btnHoverColor": "#F6241D",
     "btnActiveColor": "#D7000E",
-    "successColor": "#51BEFC",
+    "successColor": "#00BC00",
     "infoColor": "#0081E2",
-    "warningColor": "#FAAD14",
+    "warningColor": "#F2B200",
     "dangerColor": "#FF4D4F",
     "shadowBase": "rgba(0, 0, 0, 0.14)",
     "shadowTooltip": "rgba(0, 0, 0, 0.14)",
@@ -252,9 +252,9 @@
     "hoverColor": "#e5666f",
     "hoverBg": "rgba(255, 255, 255, 0.04)",
     "clickColor": "#dc333f",
-    "successColor": "#2BA250",
+    "successColor": "#3DAB1B",
     "infoColor": "#3499E5",
-    "warningColor": "#F0BD3E",
+    "warningColor": "#E2CA34",
     "dangerColor": "#DC5849",
     "iconColorHover": "rgba(255, 255, 255, 0.75)",
     "headingColor": "rgba(255, 255, 255, 0.85)",

package/src/common/attribute-panel/AttributePanel.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="sm-component-attribute-panel" :style="[getTextColorStyle, !showBorder && { border: 'none' }]">
+    <div class="sm-component-attribute-panel__header">
+      <div v-if="!$slots.header && title !== undefined" class="title ellipsis" :title="title">{{ title }}</div>
+      <slot name="header" />
+    </div>
+    <div class="sm-component-attribute-panel__content">
+      <sm-table-popup v-bind="tablePopupProps" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Mixins } from 'vue-property-decorator';
+import Theme from 'vue-iclient/src/common/_mixin/Theme';
+import SmTablePopup from 'vue-iclient/src/common/table-popup/TablePopup.vue';
+
+@Component({
+  name: 'SmAttributePanel',
+  components: { SmTablePopup }
+})
+class SmAttributePanel extends Mixins(Theme) {
+  @Prop() title: String;
+
+  @Prop({ default: true }) showBorder: Boolean;
+
+  @Prop() titleRender: Function;
+
+  @Prop() valueRender: Function;
+
+  @Prop({
+    default: () => {
+      return [];
+    }
+  })
+  attributes: Array<Object>;
+
+  get tablePopupProps() {
+    return {
+      data: this.attributes,
+      columns: [
+        {
+          dataIndex: 'title',
+          customRender: this.titleRender
+        },
+        {
+          dataIndex: 'value',
+          customRender: this.valueRender
+        }
+      ],
+      showHeader: false,
+      background: 'transparent',
+      textColor: this.textColor
+    };
+  }
+}
+export default SmAttributePanel;
+</script>

package/src/common/attribute-panel/__test__/AttributePanel.spec.js

@@ -0,0 +1,39 @@
+import { mount, createLocalVue } from '@vue/test-utils';
+import SmAttributePanel from '../AttributePanel.vue';
+const localVue = createLocalVue();
+
+describe('AttributePanel.vue', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = null;
+  });
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.destroy();
+    }
+  });
+
+  it('render', async done => {
+    let attr = [
+      {
+          "title": "video",
+          "value": "https://www.runoob.com/try/demo_source/mov_bbb.mp4",
+      },
+      {
+          "title": "image",
+          "value": "http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960",
+      }
+    ];
+    wrapper = mount(SmAttributePanel, {
+      localVue,
+      propsData: {
+        attributes: attr
+      },
+      attachToDocument: 'body'
+    });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.tablePopupProps.data).toEqual(attr);
+    done();
+  });
+});

package/src/common/attribute-panel/index.js

@@ -0,0 +1,9 @@
+import AttributePanel from './AttributePanel';
+import init from 'vue-iclient/src/init';
+
+AttributePanel.install = function(Vue, opts) {
+  init(Vue, opts);
+  Vue.component(AttributePanel.options ? AttributePanel.options.name : AttributePanel.name, AttributePanel);
+};
+
+export default AttributePanel;

package/src/common/attribute-panel/style/attribute-panel.scss

@@ -0,0 +1,35 @@
+@import '../../../common/_utils/style/mixins/mixins.scss';
+@import '../../../common/_utils/style/theme/theme.scss';
+@import '../../../common/table-popup/style/table-popup.scss';
+
+@include b(attribute-panel) {
+  min-width: 200px;
+  height: 100%;
+  overflow: auto;
+  border-radius: 4px;
+  border: 1px solid $border-color-split;
+  @include e(header) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    border-bottom: 1px solid $border-color-split;
+    .title {
+      padding: 8px 16px;
+    }
+    .ellipsis {
+      width: calc(100% - 80px);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+  @include e(content) {
+    width: 100%;
+    height: auto;
+    padding-top: 5px;
+    .sm-component-table-content {
+      max-height: none !important;
+    }
+  }
+}

package/src/common/attribute-panel/style/index.js

@@ -0,0 +1,4 @@
+import 'vue-iclient/src/common/_assets/iconfont/icon-sm-components.css';
+import 'vue-iclient/src/common/_utils/style/common/common.scss';
+
+import './attribute-panel.scss';

package/src/common/collapse-card/style/collapse-card.scss

@@ -139,20 +139,20 @@
       }
     }
     @include when(top-left) {
+      transform-origin: top left;
       @include when(icon) {
         & > .sm-component-collapse-card__header {
           padding-left: 38px;
         }
       }
-      transform-origin: top left;
     }
     @include when(bottom-left) {
+      transform-origin: top left;
       @include when(icon) {
         & > .sm-component-collapse-card__header {
           padding-left: 38px;
         }
       }
-      transform-origin: top left;
     }
     @include when(not-header) {
       @include when(bottom-right) {

package/src/common/iframe/Iframe.vue

@@ -1,5 +1,5 @@
 <template>
-  <iframe :src="src" scrolling="auto" class="sm-component-iframe"></iframe>
+  <iframe :src="src" scrolling="auto" class="sm-component-iframe" title=""></iframe>
 </template>
 
 <script>